Theming

CSS Variables

med-ui ships a Linear-inspired palette: a near-black canvas, charcoal surfaces, hairline borders and a lavender-blue accent. The tokens live in your global CSS file:

:root {
  --background: #ffffff;
  --foreground: #0f1011;
  --primary: #5e6ad2;
  --primary-foreground: #ffffff;
  --muted: #f6f7f7;
  --muted-foreground: #62666d;
  --border: #e3e4e6;
  --radius: 0.625rem;
}

.dark {
  --background: #010102;
  --foreground: #f7f8f8;
  --card: #0f1011;
  --primary: #5e6ad2;
  --muted: #141516;
  --muted-foreground: #8a8f98;
  --border: #23252a;
}

Convention

Tokens come in pairs: a background token and a -foreground token for text on top of it. Use them through Tailwind utilities:

<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground" />
<p className="text-muted-foreground" />

Dark Mode

Dark values live under the .dark class. This site defaults to dark and lets visitors switch with the toggle in the header. To rebrand, change the values in :root and .dark; no component code needs to change.