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 blue/indigo theme (oklch hue 235).

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.965 0.012 235);
  --foreground: oklch(0.18 0.02 235);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 235);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 235);
  --primary: oklch(0.45 0.17 235);
  --primary-foreground: oklch(0.98 0.005 235);
  --secondary: oklch(0.78 0.14 46);
  --secondary-foreground: oklch(0.25 0.05 46);
  --muted: oklch(0.96 0.008 235);
  --muted-foreground: oklch(0.4 0.03 235);
  --accent: oklch(0.94 0.02 235);
  --accent-foreground: oklch(0.35 0.15 235);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.91 0.01 235);
  --input: oklch(0.91 0.01 235);
  --ring: oklch(0.55 0.17 235);
}

Dedicated tokens for the dashboard sidebar navigation:

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

Chart Colors

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

--chart-1: oklch(0.55 0.17 235);  /* Blue/indigo (primary) */
--chart-2: oklch(0.75 0.14 46);   /* Amber */
--chart-3: oklch(0.65 0.2 121);   /* Green */
--chart-4: oklch(0.6 0.18 301);   /* Purple */
--chart-5: oklch(0.7 0.15 171);   /* Teal */

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.15 0.015 235);
  --foreground: oklch(0.96 0.005 235);
  --card: oklch(0.2 0.02 235);
  --card-foreground: oklch(0.96 0.005 235);
  --primary: oklch(0.7 0.17 235);
  --primary-foreground: oklch(0.15 0.02 235);
  --secondary: oklch(0.72 0.14 46);
  --secondary-foreground: oklch(0.18 0.04 46);
  --muted: oklch(0.27 0.02 235);
  --muted-foreground: oklch(0.7 0.03 235);
  --accent: oklch(0.32 0.05 235);
  --accent-foreground: oklch(0.92 0.01 235);
  --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 235);
}

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`	Karla	Body text
`--font-heading`	Rubik	Headings (h1-h6)
`--font-mono`	Space 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 blue/indigo theme uses hue 235. Update it to your brand color and all 35+ screens adapt automatically:

:root {
  /* Change hue from 235 (blue/indigo) to 270 (purple) */
  --primary: oklch(0.45 0.17 270);
  --primary-foreground: oklch(0.98 0.005 270);
  --ring: oklch(0.55 0.17 270);
  /* Update remaining tokens to match... */
}

.dark {
  --primary: oklch(0.7 0.17 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.

Social Inbox

Accessibility