Style · 19

Terminal

Terminal = monospace on black, a prompt cursor, and a single phosphor accent; says built by engineers.

Monospace on black. A blinking cursor.

North search

Built by engineers.

Built by engineers. Monospace on black, a prompt cursor, one phosphor accent.

$ build

Shell

01

Mono

One monospace stack, no sans for UI.

02

Prompt

A $ before commands, a ▋ cursor after the line.

03

Phosphor

Green text, one amber mark per line, no other color.

Showcase

Dev tool Terminal

CLI product Terminal · Login

Shell card Terminal · Dark UI

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

BUILD
- Build a complete Terminal marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: developer tools, infra and CLI products, hacker-ethos brands first; consumer reuse only the mono, not the prompt metaphor.

STYLE
- Terminal: monospace on near-black, a single phosphor accent, prompt prefixes, a blinking cursor
- Page #0A0E0A; primary text green #33FF66 at 88% alpha; accent amber #FFB000 for one mark per line; dim rule #1C3A1C
- Radius 0 everywhere. No cards-with-shadows, no rounded corners, no gradient, no glass
- Type: a monospace stack (JetBrains Mono / IBM Plex Mono). No sans for UI, no system font
- A `~/` prompt before the wordmark, a `$` before hero commands, a ▋ block cursor after the last hero line

LAYOUT
- Container max-width 1120px, mono, left-aligned. Every block is a flat near-black panel with a 1px dim-green rule, not a floating card
- Top bar is shell chrome: `~/north` left, `~/product` `~/docs` links, `./start` CTA right — all prompt-prefixed, 1px bottom rule
- Whitespace is generous but mechanical; nothing is a soft blob

SECTIONS
1. Hero: a `$ build` command line, an oversized headline "Built by engineers.", one dek line, `./start` CTA plus `:docs` ghost
2. Three output blocks: ship, measure, price — each a `$` line, kicker, one line, `less` link
3. Feature band: two columns, left a `$ cat` cover block of mono lines, right a numbered list of four claims
4. Pricing strip: three flat panels, the middle one with a full-green border
5. Closing CTA band: a wide panel with one amber `./start` CTA
6. Three-column shell footer: ~/product / ~/company / ~/colophon

INTERACTION
- Hover brightens borders to full green and speeds the cursor blink; links gain a 1px green underline. No lift, no soft shadow
- Focus is a 2px solid #33FF66 outline, never a glow
- The hero cursor blinks on a steady 1s step; respect prefers-reduced-motion by freezing it

MOTION
- Motion is minimal and mechanical: a 1s cursor blink, a 120ms border brighten on hover, nothing eases
- Use steps(), no bounce, no slide. The only "animation" is the cursor and an optional type-in on the hero command
- Entrance is a monospace type-in (character by character) on the hero `$` line, 20ms per char; other blocks appear instantly
- prefers-reduced-motion: no blink, no type-in, states change instantly

TECHNICAL
- React, Tailwind CSS, a .term panel (mono + prompt prefix + cursor). One homepage route.

DON'Ts
- Do not call this dark-ui: Terminal has zero rounded corners and zero cards-with-shadows; dark-ui is a charcoal dashboard
- No sans for UI, no rounded pills, no gradient, no glass, no blur
- No color other than green and amber, no neon magenta, no photo
- Do not output only a headline plus two empty cells. Do not clone one `$` line as the whole page

Card

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Terminal card. Not a page, not a dashboard.

STYLE
- Terminal: near-black panel #0A0E0A, 1px solid #1C3A1C dim-green border, monospace type, green #33FF66 text
- A $ prompt prefix before the title; a blinking block cursor ▋ after the last line
- Radius 0. No fill color, no gradient. Shadow 0 0 0 1px #0A0E0A only (panels sit flat)
- Kicker in amber #FFB000, body in #33FF66 at 85% alpha

LAYOUT
- One card only: a $ prompt, a title line, one output line, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover brightens the border to full #33FF66 and the cursor blink speeds up. Never a lift or a soft shadow

CONSTRAINTS
- This is NOT dark-ui: zero rounded corners, zero cards-with-shadows; the metaphor is the shell, not a dashboard
- Monospace only — no rounded sans, no system font, no color other than green/amber
- No glass, no gradient, no blur

TECHNICAL
- React, Tailwind CSS, a .term panel (mono + prompt prefix). One component

Buttons

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Terminal button row only: run (filled), save (outline), skip (ghost). Not a card, not a page.

STYLE
- Radius 0. run: fill #0A0E0A, 1px solid #33FF66 border, green label, a [ ] bracket frame
- save: transparent, 1px solid #1C3A1C border, dim-green label, [ ] brackets
- skip: text only, amber #FFB000, no brackets; label reads `:skip`

LAYOUT
- One horizontal row, monospace, 12px gap. No card chrome, no helper text

INTERACTION
- Hover turns the border full #33FF66 and the label brighter; active inverts (green fill, black label). No lift

CONSTRAINTS
- Buttons read as shell commands in brackets; rounded pills break the language
- No color other than green/amber, no shadow, no gradient

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button into bracketed term buttons

Navbar

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Terminal site navbar only. Not tabs, not a page.

STYLE
- Bar fill #0A0E0A, 1px solid #1C3A1C bottom rule, radius 0, monospace
- Wordmark `~/north` in green #33FF66 weight 700; links `~/product` `~/docs` in green at 70% alpha
- CTA `./start` : amber #FFB000 text, 1px amber border, no fill

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA right. No panel below, no dropdown

INTERACTION
- Hover underlines the link in full green; CTA border brightens to full amber. Bar never lifts

CONSTRAINTS
- Paths and prompts, not labels: keep the `~/` and `./` shell prefixes
- No rounded corners, no color besides green/amber, no shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a shell bar

Tabs

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Terminal Tabs component with three tabs: overview (selected), billing, activity. Not a navbar, not a page.

STYLE
- Tabs are mono text with a `>` prefix; selected tab `> overview` in full green #33FF66 weight 700, 1px solid #33FF66 bottom rule
- Unselected tabs `  billing` in green at 55% alpha, no rule
- Panel: #0A0E0A, 1px solid #1C3A1C, monospace, a `$` prompt line inside

LAYOUT
- Horizontal tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs moves the `>` and the bottom rule; selected locks. No bounce, no lift

CONSTRAINTS
- Panel and tabs stay in the shell metaphor; no rounded cards, no color besides green/amber
- No pill tabs, no soft shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into shell tabs

What is Terminal?

Terminal is the command line as a design language. Name a monospace stack, a $ prompt, and one phosphor accent. It is dark-ui without the rounded cards.

Elements

Monospace everywhere
Blinking cursor
Prompt prefix

Put this word in the prompt.

Typical colors

#0A0E0A
#33FF66
#FFB000

Use on

Developer tools
Infra and CLI products
Hacker-ethos brands

Prompt formula

[Component] + Terminal + Monospace + Prompt cursor + Phosphor accent

See also

Components

Button→Card→Navbar→Code Block→

Themes

AI SaaS Landing→Login / Sign in→Kanban Board→

BUILD - Build a complete Terminal marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: developer tools, infra and CLI products, hacker-ethos brands first; consumer reuse only the mono, not the prompt metaphor. STYLE - Terminal: monospace on near-black, a single phosphor accent, prompt prefixes, a blinking cursor - Page #0A0E0A; primary text green #33FF66 at 88% alpha; accent amber #FFB000 for one mark per line; dim rule #1C3A1C - Radius 0 everywhere. No cards-with-shadows, no rounded corners, no gradient, no glass - Type: a monospace stack (JetBrains Mono / IBM Plex Mono). No sans for UI, no system font - A `~/` prompt before the wordmark, a `$` before hero commands, a ▋ block cursor after the last hero line LAYOUT - Container max-width 1120px, mono, left-aligned. Every block is a flat near-black panel with a 1px dim-green rule, not a floating card - Top bar is shell chrome: `~/north` left, `~/product` `~/docs` links, `./start` CTA right — all prompt-prefixed, 1px bottom rule - Whitespace is generous but mechanical; nothing is a soft blob SECTIONS 1. Hero: a `$ build` command line, an oversized headline "Built by engineers.", one dek line, `./start` CTA plus `:docs` ghost 2. Three output blocks: ship, measure, price — each a `$` line, kicker, one line, `less` link 3. Feature band: two columns, left a `$ cat` cover block of mono lines, right a numbered list of four claims 4. Pricing strip: three flat panels, the middle one with a full-green border 5. Closing CTA band: a wide panel with one amber `./start` CTA 6. Three-column shell footer: ~/product / ~/company / ~/colophon INTERACTION - Hover brightens borders to full green and speeds the cursor blink; links gain a 1px green underline. No lift, no soft shadow - Focus is a 2px solid #33FF66 outline, never a glow - The hero cursor blinks on a steady 1s step; respect prefers-reduced-motion by freezing it MOTION - Motion is minimal and mechanical: a 1s cursor blink, a 120ms border brighten on hover, nothing eases - Use steps(), no bounce, no slide. The only "animation" is the cursor and an optional type-in on the hero command - Entrance is a monospace type-in (character by character) on the hero `$` line, 20ms per char; other blocks appear instantly - prefers-reduced-motion: no blink, no type-in, states change instantly TECHNICAL - React, Tailwind CSS, a .term panel (mono + prompt prefix + cursor). One homepage route. DON'Ts - Do not call this dark-ui: Terminal has zero rounded corners and zero cards-with-shadows; dark-ui is a charcoal dashboard - No sans for UI, no rounded pills, no gradient, no glass, no blur - No color other than green and amber, no neon magenta, no photo - Do not output only a headline plus two empty cells. Do not clone one `$` line as the whole page