Monolith
Pure-monochrome, dark-first UI for frontier products — black, white, and a precise gray ramp.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Geist carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Commit to pure monochrome — black, white, and a precise gray ramp do all the work.
- •Lead with type and generous negative space; let the grid breathe.
- •Use a single hairline border and one elevation step instead of heavy cards.
- •Make the primary action the highest-contrast element on the screen.
Don't
- •Don't introduce brand color — reserve hue only for destructive states.
- •Don't stack shadows; one soft shadow or a hairline border is enough.
- •Don't round corners heavily — keep them tight and architectural.
- •Don't crowd — density without rhythm reads as cheap, not premium.
- •Motion is restrained and precise — short transitions, no bounce.
- •Animate opacity and transform only; keep UI feedback under 250ms.
Hover to feel this theme's base transition.
Lucide · 1.5px stroke · 1rem. Thin 1.5px monochrome icons; never tint — keep them in foreground or muted-foreground.
- Pure black/white maximizes contrast; verify the gray ramp stays above 4.5:1.
- Never signal with color alone — destructive red is always paired with a label or icon.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.625rem |
| Padding | 0 1.25rem |
| Height | 2.75rem |
| Weight | 600 |
Primary is solid high-contrast; secondary is a hairline-bordered ghost.
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.125rem 0.625rem |
| Font size | 0.75rem |
| Weight | 500 |
Pill labels, often uppercase mono with wide tracking.
Alert
| Radius | 0.625rem |
| Padding | 1rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--border) |
| Radius | 0.625rem |
| Height | 2.75rem |
| Padding | 0.5rem 0.75rem |
Flat field; ring on focus.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.875rem |
| Padding | 1.5rem |
| Shadow | 0 8px 24px -6px rgba(0,0,0,0.55) |
Hairline border over a near-background surface; shadow only on hover or overlay.
The design brief
Monolith is a pure-monochrome design system — black, white, and a precise gray ramp — built for frontier AI products, developer tools, and high-end landing pages. Dark-first, razor-sharp, and uncompromisingly minimal.
Principles
- Monochrome by conviction. Black, white, and a disciplined gray scale carry the entire UI. Color is reserved exclusively for destructive states.
- Type and space lead. Tight tracking on large Geist display headings, generous negative space, and a clean mono for labels and code.
- Hairlines over shadows. Structure comes from 1px borders and one soft elevation step — never stacked, never heavy.
- Maximum-contrast actions. The primary action is always the highest-contrast element on screen: white-on-black in dark mode, black-on-white in light.
When to use
AI and ML products, developer platforms, technical docs, pricing pages, and any brand that wants to read as precise, premium, and serious. It is intentionally restrained — if you need warmth or playfulness, reach for a different system.
Signature details
- Pure
#000/#fffanchors with a 10-step neutral ramp between them. - Geist for UI and display; JetBrains Mono for labels, badges, and code.
- ~0.625rem radii — tight and architectural, not soft.
- Uppercase mono pill badges with wide tracking for eyebrow labels.
- A white focus ring on dark (and black on light) for crisp, unmistakable focus.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.625rem;
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #0a0a0a;
--popover: #ffffff;
--popover-foreground: #0a0a0a;
--primary: #000000;
--primary-foreground: #ffffff;
--secondary: #f5f5f5;
--secondary-foreground: #0a0a0a;
--muted: #f5f5f5;
--muted-foreground: #525252;
--accent: #f0f0f0;
--accent-foreground: #000000;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #e5e5e5;
--input: #e5e5e5;
--ring: #000000;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 8px 24px -6px rgba(0,0,0,0.55);
--shadow-lg: 0 24px 60px -12px rgba(0,0,0,0.70);
--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 240ms;
}
.dark {
--background: #000000;
--foreground: #ffffff;
--card: #0a0a0a;
--card-foreground: #fafafa;
--popover: #0a0a0a;
--popover-foreground: #fafafa;
--primary: #ffffff;
--primary-foreground: #000000;
--secondary: #161616;
--secondary-foreground: #fafafa;
--muted: #121212;
--muted-foreground: #a1a1a1;
--accent: #1a1a1a;
--accent-foreground: #ffffff;
--destructive: #f87171;
--destructive-foreground: #0a0a0a;
--border: #1f1f1f;
--input: #242424;
--ring: #ffffff;
}