DemoBuy

Design Tokens

Last updated on 2026-03-26

The Social Media Dashboard Kit uses oklch color tokens defined as CSS custom properties in app/globals.css. All components reference these tokens through Tailwind CSS v4 -- never hardcoded colors. The kit ships with a teal/cyan theme (oklch hue 175).

oklch Color System

The kit uses oklch (Oklab Lightness Chroma Hue) instead of hex or hsl:

  • Perceptually uniform -- equal steps in lightness look equal to the human eye, so your palette looks balanced without manual tweaking
  • Wider gamut -- access to more vibrant colors on modern displays (P3, Rec. 2020)
  • Easy palette generation -- change one hue angle to produce a cohesive brand palette across all semantic tokens

The format is oklch(lightness chroma hue) where lightness is 0-1, chroma is 0-0.4 (saturation intensity), and hue is 0-360 (color angle on the color wheel).

Color Tokens

Semantic color tokens that automatically adapt between light and dark mode:

:root {
  --background: oklch(0.99 0.002 175);
  --foreground: oklch(0.17 0.02 175);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.17 0.02 175);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.17 0.02 175);
  --primary: oklch(0.45 0.2 175);
  --primary-foreground: oklch(0.98 0.005 175);
  --secondary: oklch(0.78 0.14 346);
  --secondary-foreground: oklch(0.25 0.05 346);
  --muted: oklch(0.96 0.005 175);
  --muted-foreground: oklch(0.4 0.03 175);
  --accent: oklch(0.94 0.02 175);
  --accent-foreground: oklch(0.35 0.15 175);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.91 0.01 175);
  --input: oklch(0.91 0.01 175);
  --ring: oklch(0.55 0.18 175);
}

Dedicated tokens for the dashboard sidebar navigation:

--sidebar: oklch(0.97 0.008 175);
--sidebar-foreground: oklch(0.17 0.02 175);
--sidebar-primary: oklch(0.45 0.2 175);
--sidebar-primary-foreground: oklch(0.98 0.005 175);
--sidebar-accent: oklch(0.93 0.025 175);
--sidebar-accent-foreground: oklch(0.35 0.15 175);
--sidebar-border: oklch(0.91 0.01 175);
--sidebar-ring: oklch(0.55 0.18 175);

Chart Colors

Five chart-specific color tokens used by the Recharts analytics and reporting charts:

--chart-1: oklch(0.55 0.2 175);   /* Teal (primary) */
--chart-2: oklch(0.75 0.14 346);  /* Pink */
--chart-3: oklch(0.65 0.2 61);    /* Amber */
--chart-4: oklch(0.6 0.18 241);   /* Blue */
--chart-5: oklch(0.7 0.15 111);   /* Green */

Platform Colors

In addition to the oklch theme tokens, the kit uses fixed brand colors for each social platform. These are not theme-dependent -- they remain constant in both light and dark mode to maintain brand recognition:

Platform Hex Usage
Instagram #E1306C Platform badges, calendar pills, chart segments, stat card accents
Twitter/X #1DA1F2 Platform badges, calendar pills, chart segments, stat card accents
Facebook #1877F2 Platform badges, calendar pills, chart segments, stat card accents
LinkedIn #0A66C2 Platform badges, calendar pills, chart segments, stat card accents
TikTok #00F2EA Platform badges, calendar pills, chart segments, stat card accents
YouTube #FF0000 Platform badges, calendar pills, chart segments, stat card accents

These colors are defined in the PlatformIcon and PlatformBadge components and used consistently throughout the dashboard, calendar, analytics, and reports screens.

Usage in Tailwind

Tokens map directly to Tailwind utility classes. Use them like standard Tailwind colors:

<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Compose Post
  </button>
  <span className="text-muted-foreground">Last synced 2 hours ago</span>
  <div className="bg-sidebar text-sidebar-foreground">
    Sidebar content
  </div>
</div>

Dark Mode

The kit uses next-themes with class-based dark mode. The ThemeToggle component handles the switch:

import { ThemeToggle } from "@/components/layout/theme-toggle"

<ThemeToggle />

Dark mode values are defined in the .dark selector within globals.css:

.dark {
  --background: oklch(0.16 0.02 175);
  --foreground: oklch(0.96 0.005 175);
  --card: oklch(0.21 0.025 175);
  --card-foreground: oklch(0.96 0.005 175);
  --primary: oklch(0.7 0.18 175);
  --primary-foreground: oklch(0.15 0.02 175);
  --secondary: oklch(0.72 0.14 346);
  --secondary-foreground: oklch(0.18 0.04 346);
  --muted: oklch(0.27 0.025 175);
  --muted-foreground: oklch(0.7 0.03 175);
  --accent: oklch(0.32 0.05 175);
  --accent-foreground: oklch(0.92 0.01 175);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.6 0.16 175);
}

All semantic tokens automatically switch when the theme changes. The ThemeToggle component includes proper aria-label text that updates to reflect the current action ("Switch to light mode" / "Switch to dark mode").

Typography

The kit uses three font families configured in app/layout.tsx:

Token Font Usage
--font-sans Inter Body text
--font-heading DM Sans Headings (h1-h6)
--font-mono JetBrains Mono Code blocks

Headings use tighter letter-spacing (-0.025em) and shorter line-height (1.2) for visual weight. Body text uses -0.011em letter-spacing with 1.6 line-height for readability.

Animations

The kit includes a set of premium CSS animations defined in globals.css:

Animation Class Usage
Fade in up .animate-fade-in-up Page sections, card entrances
Fade in .animate-fade-in Overlay backgrounds, subtle reveals
Scale in .animate-scale-in Dialogs, popovers, tooltips
Float .animate-float Decorative elements
Shimmer .animate-shimmer Loading skeleton states

Stagger classes (.stagger-1 through .stagger-6) add incremental delays of 100ms for sequenced entrance animations.

All animations respect the prefers-reduced-motion media query (see Accessibility).

Customizing for Your Brand

To rebrand the kit, change the hue value in app/globals.css. The default teal/cyan theme uses hue 175. Update it to your brand color and all 35+ screens adapt automatically:

:root {
  /* Change hue from 175 (teal) to 270 (indigo) */
  --primary: oklch(0.45 0.2 270);
  --primary-foreground: oklch(0.98 0 0);
  --ring: oklch(0.55 0.18 270);
  /* Update remaining tokens to match... */
}

.dark {
  --primary: oklch(0.7 0.18 270);
  --primary-foreground: oklch(0.15 0.02 270);
  /* ... */
}

All components automatically inherit the new palette -- buttons, badges, links, charts, sidebar accents, calendar highlights, and focus rings all update at once. Platform brand colors remain fixed regardless of the theme hue.

For full customization details, see the Customization guide.

Previous

Social Inbox

Next

Accessibility