Design Tokens

Design tokens are the atomic values that define the visual language of the Mukoko design system. Every token is a CSS custom property defined in globals.css, with light and dark theme variants.

Mineral accent tokens

These five colors are constant across light and dark themes:

Token	Value	Usage
`--color-cobalt`	`#0047AB`	Primary blue, links, CTAs
`--color-tanzanite`	`#B388FF`	Purple accent, brand/logo
`--color-malachite`	`#64FFDA`	Cyan accent, success states
`--color-gold`	`#FFD740`	Yellow accent, rewards/highlights
`--color-terracotta`	`#D4A574`	Warm accent, community

Usage in Tailwind:


<div className="bg-[var(--color-cobalt)] text-white">Cobalt surface</div>
<span className="text-[var(--color-malachite)]">Success text</span>

Semantic color tokens

These tokens adapt between light and dark themes:

Token	Light	Dark	Usage
`--background`	`#FAF9F5`	`#0A0A0A`	Page background
`--foreground`	`#141413`	`#F5F5F4`	Primary text
`--card`	`#FFFFFF`	`#141414`	Card surfaces
`--card-foreground`	`#141413`	`#F5F5F4`	Text on cards
`--muted`	`#F3F2EE`	`#1E1E1E`	Subdued backgrounds
`--muted-foreground`	`#5C5B58`	`#9A9A95`	Secondary text
`--primary`	`#141413`	`#F5F5F4`	Primary interactive
`--primary-foreground`	`#FFFFFF`	`#141413`	Text on primary
`--secondary`	`#F3F2EE`	`#1E1E1E`	Secondary elements
`--secondary-foreground`	`#141413`	`#F5F5F4`	Text on secondary
`--accent`	`#F3F2EE`	`#1E1E1E`	Accent surfaces
`--accent-foreground`	`#141413`	`#F5F5F4`	Text on accent
`--destructive`	`#B3261E`	`#F2B8B5`	Error/danger
`--border`	`rgba(10,10,10,0.08)`	`rgba(255,255,255,0.08)`	Borders
`--input`	`rgba(10,10,10,0.08)`	`rgba(255,255,255,0.08)`	Input borders
`--ring`	`#141413`	`#F5F5F4`	Focus ring

Chart color tokens

Theme-adaptive colors for data visualization:

Token	Light	Dark
`--chart-1`	`#4B0082`	`#B388FF` (Tanzanite)
`--chart-2`	`#0047AB`	`#00B0FF` (Cobalt)
`--chart-3`	`#004D40`	`#64FFDA` (Malachite)
`--chart-4`	`#5D4037`	`#FFD740` (Gold)
`--chart-5`	`#8B4513`	`#D4A574` (Terracotta)

Use these sequential tokens for chart series to maintain consistent color ordering across all Mukoko apps.

Radius tokens

The radius system uses a base value with calculated variants:

Token	Value	Usage
`--radius`	`0.75rem`	Base radius (12px)
`--radius-sm`	`calc(var(--radius) - 4px)`	Small elements (badges, chips)
`--radius-md`	`calc(var(--radius) - 2px)`	Medium elements (inputs, buttons)
`--radius-lg`	`var(--radius)`	Standard (cards, dialogs)
`--radius-xl`	`calc(var(--radius) + 4px)`	Large elements (modals, sheets)
`--radius-2xl`	`calc(var(--radius) + 8px)`	Extra large (hero cards)


<div className="rounded-sm">Badge</div>
<div className="rounded-md">Button</div>
<div className="rounded-lg">Card</div>
<div className="rounded-xl">Dialog</div>

Typography tokens

Token	Value	Usage
`--font-sans`	`Noto Sans`	Body text, UI elements
`--font-serif`	`Noto Serif`	Display headings, page titles
`--font-mono`	`JetBrains Mono`	Code blocks, CLI output

Sidebar tokens

Token	Light	Dark	Usage
`--sidebar`	`#F3F2EE`	`#141414`	Sidebar background
`--sidebar-foreground`	`#141413`	`#F5F5F4`	Sidebar text
`--sidebar-border`	`rgba(10,10,10,0.08)`	`rgba(255,255,255,0.08)`	Sidebar border
`--sidebar-accent`	`#E8E7E3`	`#1E1E1E`	Sidebar hover/active
`--sidebar-ring`	`#141413`	`#F5F5F4`	Sidebar focus ring

Using tokens in components

Direct reference


<div className="bg-background text-foreground border border-border rounded-lg p-4">
  Content using semantic tokens
</div>

With cn() composition


import { cn } from "@/lib/utils"
 
function MyComponent({ className }: { className?: string }) {
  return (
    <div className={cn("bg-card text-card-foreground rounded-lg border border-border p-4", className)}>
      Content
    </div>
  )
}

In CVA variants


const variants = cva("rounded-md transition-colors", {
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground",
      outline: "border border-border bg-transparent text-foreground",
      muted: "bg-muted text-muted-foreground",
    },
  },
})

Adding new tokens

Define in :root and .dark blocks in globals.css
Register in the @theme inline block
Use via Tailwind classes — never reference CSS variables directly in component code