Yami

Theming

Yami UI uses CSS variables for semantic colors, Yami brand accents, and glow utilities.

Design system overview

Yami UI is built on a zinc oklch palette with 0.625rem corner radius, border-first elevation, and dual typography stacks (Yami Sans for body, Yami Heading for titles, Yami Mono for code). Install the yami registry style item to get the full token set.

Semantic vs brand colors

Semantic tokens (--primary, --muted, --destructive) drive component surfaces and are zinc neutrals — primary is not your brand green.

Brand tokens (yami-primary, yami-secondary) are explicit green-blue accents for marketing, glow effects, stat deltas, and intentional brand moments.

primaryyami-primaryyami-secondary

Typography

UI components use sentence case — text-sm font-medium for buttons, text-xs font-medium for badges and menu labels, and font-heading for section titles. Uppercase is reserved for marketing kickers via the .kicker utility (Lami landing style).

import { marketingKicker } from "@/lib/marketing-shell"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"

<p className={marketingKicker}>Eyebrow</p>
<Button>Get started</Button>
<Label htmlFor="email">Email</Label>

Caption utility

Optional

The .label class is a small sans-serif caption (12px, medium weight) for secondary meta text — not uppercase, not mono.

<span className="label text-muted-foreground">Updated 2 days ago</span>

Dark by default

Yami uses dark mode as the default experience. Wrap your app with ThemeProvider from yami-ui (or set defaultTheme="dark" on next-themes). Do not enable system theme if you want dark by default.

Glow utilities

Glow classes animate between yami-primary (#22c55e) and yami-secondary (#3b82f6). Use them for marketing hero sections, selected tiles, and chat input borders — not for standard form controls or data tables.

yami-glow
Green-blue pulsing box-shadow for selected tiles.
yami-glow-soft
Softer pulse that keeps dashed borders visible.

CSS variables

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --radius: 0.625rem;
  --label-font: var(--font-sans);
  --label-transform: none;
  --label-tracking: normal;
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
}