Theming

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 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.

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>

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>

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 classes animate between brand glow tokens (--yami-glow-from / --yami-glow-to, aliased from yami-primary and yami-secondary). Use them for marketing hero sections, selected tiles, and chat input borders — not for standard form controls or data tables.

GSAP animation components read values from src/void/tokens/motion.css via the mirrored motion export. Override CSS variables on :root to tune durations, distances, stagger gaps, and ScrollTrigger positions app-wide.

/* globals.css or app stylesheet */
:root {
  --void-duration-md: 0.8;
  --void-offset-lg: 64px;
  --void-stagger-md: 0.1;
  --void-scroll-start-view: top 90%;
  --yami-glow-from: #22c55e;
  --yami-glow-to: #3b82f6;
  --void-marquee-duration: 40s;
}

The yami registry style item exports the same motion keys under cssVars.theme so CLI installs can customize Void animations without editing component source. Try the theme playground to tune tokens visually.

Tokens live in src/void/tokens/*.css and globals.css. Edit them live on the Components gallery (right panel) or the theme playground.