Terminal
Retro monospace theme — green on black.
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. JetBrains Mono 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
- •Use one typeface — fixed-width everywhere.
- •Let a single green carry every action and accent.
- •Keep edges sharp and structure crisp.
Don't
- •Don't mix in proportional fonts.
- •Don't round corners much.
- •Don't add decorative motion.
- •Near-instant — it should feel like a terminal.
- •Avoid easing; prefer immediate state changes or a blink.
Hover to feel this theme's base transition.
Lucide · 2px stroke · 0.95rem. Square, mono-aligned icons; keep them minimal.
- Verify green text contrast in both modes.
- Keep focus visible with a crisp ring.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.125rem |
| Padding | 0.5rem 1rem |
| Height | 2.4rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.125rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.188rem |
| Padding | 1rem 1.25rem |
| 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(--input) |
| Radius | 0.125rem |
| Height | 2.5rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.125rem |
| Padding | 1.25rem |
| Shadow | 0 2px 0 0 rgba(0,0,0,0.25) |
The design brief
Terminal is a retro, monospace, code-forward theme — green on black in the dark, ink on cream in the light.
Principles
- Mono everywhere. One typeface, fixed-width, for a developer-console feel.
- Sharp and minimal. Near-zero radius and crisp 1px structure.
- Green is the signal. A single green carries every action and accent.
When to use
Developer tools, docs, terminals-with-a-UI, and anything that wants hacker energy.
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.125rem;
--background: #f4f4ec;
--foreground: #1a2e1a;
--card: #fbfbf5;
--card-foreground: #1a2e1a;
--popover: #fbfbf5;
--popover-foreground: #1a2e1a;
--primary: #15803d;
--primary-foreground: #f4f4ec;
--secondary: #e7e7dd;
--secondary-foreground: #1a2e1a;
--muted: #e7e7dd;
--muted-foreground: #4d5d4d;
--accent: #dcfce7;
--accent-foreground: #14532d;
--destructive: #b91c1c;
--border: #d4d4c4;
--input: #d4d4c4;
--ring: #16a34a;
--shadow-sm: 0 1px 0 0 rgba(0,0,0,0.2);
--shadow-md: 0 2px 0 0 rgba(0,0,0,0.25);
--shadow-lg: 0 3px 0 0 rgba(0,0,0,0.3);
--font-sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: steps(1);
--ease-emphasized: linear;
--duration-base: 60ms;
}
.dark {
--background: #07120a;
--foreground: #4ade80;
--card: #0b1a0f;
--card-foreground: #86efac;
--popover: #0b1a0f;
--popover-foreground: #86efac;
--primary: #22c55e;
--primary-foreground: #07120a;
--secondary: #0f2417;
--secondary-foreground: #86efac;
--muted: #0f2417;
--muted-foreground: #4d7c5a;
--accent: #052e16;
--accent-foreground: #4ade80;
--destructive: #f87171;
--border: #16321f;
--input: #16321f;
--ring: #22c55e;
}