Skip to main content

Colors & Typography

Define your brand's visual language.

Overview​

LibreApps Desktop uses Tailwind CSS and CSS Variables to manage its visual identity. This makes it incredibly easy to update your application's colors and typography in a single place and have those changes reflected throughout the entire dashboard.

Customizing Colors​

LibreApps Desktop's color palette is defined using CSS variables in src/app/globals.css. You can update these variables to match your brand's colors.

Example: Updating the Primary Color​

/* src/app/globals.css */
:root {
  --primary: 221.2 83.2% 53.3%; /* Your brand's primary color in HSL */
  --primary-foreground: 210 40% 98%;
}

Tailwind CSS then uses these variables to generate utility classes like bg-primary, text-primary, and border-primary.

Customizing Typography​

LibreApps Desktop uses Next.js Font Optimization to load and serve fonts efficiently. You can update the default fonts in src/app/layout.tsx.

Example: Using a Custom Google Font​

  1. Import the font from next/font/google.
  2. Configure the font in src/app/layout.tsx.
  3. Update the fontFamily in tailwind.config.ts.
// src/app/layout.tsx
import { Inter as FontSans } from "next/font/google"

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
})
// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
}

Best Practices​

  • ✅ Do this: Use HSL values for your CSS variables to make it easier to generate shades and tints.
  • ✅ Do this: Ensure your color choices meet accessibility standards (WCAG).
  • ✅ Do this: Use a consistent set of font weights and sizes to maintain a professional look.
  • ❌ Don't do this: Hardcode color values in your components; always use Tailwind utility classes or CSS variables.