Theme and tokens
Colors, fonts and dark mode, as theme.css exposes them to Tailwind.
Values are decided in tokens/ at the root of the repository, then generated into tokens.css. theme.css connects them to Tailwind: never hard-code a color in a component.
Colors
| Utility | Role |
|---|---|
bg-background, text-foreground, text-muted-foreground, border-border, bg-card, bg-muted | shadcn contract: standard shadcn components take the brand |
bg-design, text-design-text, bg-design-bg, border-design-border, stroke-design-line | Design axis (same for build and run) |
text-success, bg-success-bg, border-success-border | Success status (same for warning) |
bg-chip, text-body, bg-subtle, text-faint, border-line-strong | Brand neutrals |
An axis color says which axis an element belongs to. It is never used for a button, a link or body text.
Radius, borders, shadows
| Utility | Value | Use |
|---|---|---|
rounded-sm | 6 px | Axis tags, diagram boxes |
rounded-md | 8 px | Chips, status pills, buttons, icon buttons |
rounded-lg | 10 px | Icon tiles, swatches |
rounded-xl | 14 px | Cards, frames, template cards |
rounded-full | Portrait |
Borders are 1 px in border-border (linen), or border-line-strong for controls. Diagram lines are 1.5 px. There are no shadows: depth comes from a border and a surface color, never from a drop shadow or a glow.
States and links
| State | Rule |
|---|---|
| Focus | 2 px ink outline, 2 px away, keyboard only (:focus-visible). Set once in theme.css, nothing to add in components. |
| Hover | A quiet change of the neutral: sand background (hover:bg-muted), ink at 85 % for the primary button, darker underline for a link, ink text for a muted link. Never an axis color. |
| Active | No separate style. |
| Disabled | 50 % opacity, no pointer (Button handles it). |
Links inside running text use the link utility: ink, 1 px underline in the strong line color, darker on hover. Standalone links (contacts, footers) are muted text that turns ink on hover. Buttons and links are always ink: bg-primary and ring are ink, not an axis color.
Typography
| Utility | Font | Use |
|---|---|---|
font-sans | IBM Plex Sans | Text, labels, buttons |
font-condensed | IBM Plex Sans Condensed | Titles and campaign headlines |
The name (Steve Darius NDE NOUMI) is always IBM Plex Sans Bold, next to the emblem or not. Condensed is for titles.
Sentence case everywhere. No monospaced labels, no uppercase outside the emblem.
Dark mode
It follows the system. To force it, set data-theme="dark" or data-theme="light" on <html> (or use next-themes with attribute={["class", "data-theme"]}). Tailwind's dark: variant follows the same rule.
The dark theme is a soft warm charcoal, not pure black: text in a warm off-white, secondary text in a light taupe, and axis tints kept very low so color stays in the lines.
Templates
Templates (banners, post, slide, Featured thumbnail, resume) are exported assets: they always keep the light colors, whatever the site theme. They are drawn at their native size and scale without distortion. Render one at its native width (className="w-[1584px]") for a pixel-exact capture.