Website Design Explorer

Style

Terminal mono

A dark screen, one monospaced face and a single cursor green; content is set like command output, with prompts, aligned columns and plain rules instead of cards.

  • raw
  • cool
  • serious
  • dense
  • retro
  • cool

Copy the idea

See it live

Example: landing page of a command-line backup tool for small studios for Burrowkeep, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

When to use it and the principles behind it. The palette, type, spacing and the do's and don'ts are drawn below; the brief you copy carries all ten sections.

Use it when

  • Developer tools, command-line products and APIs whose users live in a terminal
  • Changelogs, status pages and documentation that should read like plain facts
  • Brands that want to feel exact, quiet and a little underground

Avoid it when

  • The audience is not technical and would read the prompts as noise
  • The page needs photographs, warmth or a friendly, rounded feel
  • Long reading text where a proportional face would be kinder

Principles

  • One monospaced typeface for everything; size and weight carry the hierarchy, never a second family
  • A near-black ground with pale green-white text, like a screen in a dim room
  • Content reads as a session: a prompt, a command, then its output
  • Lists line up in fixed-width columns of keys and values, not boxes or tiles
  • Plain 1 px rules and dashed dividers separate sections; no cards, no shadows
  • One bright green for prompts, actions and the cursor; amber only for warnings and small notes

Imagery and motion

  • Imagery: No photos or illustrations: prompts, command output, aligned tables and a blinking block cursor are the pictures.
  • Motion: At most a blinking cursor and lines that appear as if typed; nothing slides or bounces, and all of it stops for reduced motion.

Palette

  • Dim screenbackground#0b100d
  • Raised linesurface#121a15
  • Phosphor whitetext#d6f5de
  • Faded outputmuted#8fb39a
  • Cursor greenaccent#3ddc84
  • Warning amberaccent-2#f2c14e
  • Grid ruleborder#2a3b30

Text on background: 16.43:1 — passes AA

Type

Headings Space Mono, weights 700

The quick brown fox jumps over the lazy dog

Bold, set no bigger than it needs to be; headings read like section banners

Body Space Mono, weights 400

The quick brown fox jumps over the lazy dog

Regular for everything else, with generous line height so dense columns stay readable

Scale A single fixed-width face; columns align because every character is the same width.
  • 44pxThe quick brown fox jumps over the lazy dog
  • 30pxThe quick brown fox jumps over the lazy dog
  • 22pxThe quick brown fox jumps over the lazy dog
  • 17pxThe quick brown fox jumps over the lazy dog
  • 15pxThe quick brown fox jumps over the lazy dog
  • 13pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 4px
  • 8px
  • 16px
  • 24px
  • 40px
  • 64px

Tight inside lists and tables, with clear blank lines between sections, as in a terminal.

Corner radii
  • 0px
  • 2px
Borders
1 px rules and dashed dividers in the grid-rule green; frames drawn as lines, never filled boxes
Shadows
None; the screen is flat

Do and don't

Do

  • Write examples as a short session: prompt, command, output
  • Line up keys and values in fixed-width columns
  • Put the background colour on green buttons, never white
  • Wrap long output lines instead of letting them scroll sideways

Don't

  • No second typeface
  • No rounded cards, gradients or drop shadows
  • No more than one bright colour for actions
  • No real command or program names in the copy

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.