Skip to content
Fredrin

Developer

Terminal

Monospace, phosphor-green, and unapologetically built for developers.

A console-dark page that talks to engineers the way engineers want: an install command above the fold, real code samples, and benchmarks instead of adjectives.

Best for
CLIs, infrastructure tools, open-source libraries and API products.
Type
"Geist Mono", "JetBrains Mono", ui-monospace, monospaceHeadings in monospace at 400 weight — the restraint is the point — capped at 44px. Body in sans at 15/1.7 so long explanations stay readable. Every code sample in mono at 13/1.6.
Palette
Background #06090CSurface #0E141AInk #D7E3ECMuted #7E8C99Accent #3DDC84Border #1C2731
Page structure
  1. Slim header: wordmark in mono, links for Docs, Pricing and Changelog, a GitHub star count pill, and a 'Get started' button.
  2. Hero: a one-line description of what it does, a single sentence on who it is for, and a copyable `$ npm i …` command block with a copy button — no illustration.
  3. A tabbed code panel with three or four language/framework tabs, showing a real, runnable ten-line example per tab.
  4. Three-up 'why' row written as claims with numbers, not adjectives.
  5. A benchmark table comparing against two alternatives, with the winning cell tinted accent.
  6. Architecture explainer: a CSS-drawn box-and-arrow diagram with a paragraph beside it.
  7. Open-source band: star count, contributor avatars, licence, and a link to good-first-issues.
  8. Pricing: a free/open tier next to a hosted tier, presented as two plain bordered panels.
  9. Footer: four columns of links, a status-page dot, and the licence line.
Tags
dark · monospace · technical · open-source

The creation prompt

617 words, self-contained — paste it into a chat session with your coding agent and it builds Terminal end to end.

Build a landing page for a developer tool or open-source project using the "Terminal" theme — Monospace, phosphor-green, and unapologetically built for developers.

## Art direction
Looks like a well-configured terminal. Near-black canvas, panels one step lighter with a 1px cool-grey border, and phosphor green used only for prompts, links and the primary action. Everything aligns to a strict grid; radii stay at 6px. No illustrations, no mascots — the code sample is the hero image.

## Colour palette (use these exact values)
- Background: #06090C
- Surface / cards: #0E141A
- Primary text: #D7E3EC
- Secondary text: #7E8C99
- Accent (buttons, links, active state): #3DDC84
- Text on accent: #06090C
- Borders / dividers: #1C2731
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Geist Mono", "JetBrains Mono", ui-monospace, monospace
- Body: "Inter", system-ui, sans-serif
- Headings in monospace at 400 weight — the restraint is the point — capped at 44px. Body in sans at 15/1.7 so long explanations stay readable. Every code sample in mono at 13/1.6.

## Page structure
1. Slim header: wordmark in mono, links for Docs, Pricing and Changelog, a GitHub star count pill, and a 'Get started' button.
2. Hero: a one-line description of what it does, a single sentence on who it is for, and a copyable `$ npm i …` command block with a copy button — no illustration.
3. A tabbed code panel with three or four language/framework tabs, showing a real, runnable ten-line example per tab.
4. Three-up 'why' row written as claims with numbers, not adjectives.
5. A benchmark table comparing against two alternatives, with the winning cell tinted accent.
6. Architecture explainer: a CSS-drawn box-and-arrow diagram with a paragraph beside it.
7. Open-source band: star count, contributor avatars, licence, and a link to good-first-issues.
8. Pricing: a free/open tier next to a hosted tier, presented as two plain bordered panels.
9. Footer: four columns of links, a status-page dot, and the licence line.

## Components and detailing
Code blocks are the signature component — surface fill, 1px border, 6px radius, a chrome bar with a filename and a copy button, syntax-highlighted with green for strings and muted grey for comments. Buttons are 38px, 6px radius, accent fill for primary and a bordered ghost otherwise. Tables are dense with hairline row rules. Terminal blocks show a green `$` prompt that is excluded from the copied text.

## Motion
Almost none, on purpose. Tab switches are instant. The copy button swaps to a check for 1.5s. The only flourish is a caret blinking in the hero command block, and it stops after five blinks.

## Copy and imagery
Precise and unmarketed. Lead with the verb: what it does in one line. Show real APIs with real argument names — never `foo`/`bar`. Include numbers you can defend (p99 latency, bundle size, cold-start ms) and name the alternatives directly rather than saying 'the competition'.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.

Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.