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
- Slim header: wordmark in mono, links for Docs, Pricing and Changelog, a GitHub star count pill, and a 'Get started' button.
- 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.
- A tabbed code panel with three or four language/framework tabs, showing a real, runnable ten-line example per tab.
- Three-up 'why' row written as claims with numbers, not adjectives.
- A benchmark table comparing against two alternatives, with the winning cell tinted accent.
- Architecture explainer: a CSS-drawn box-and-arrow diagram with a paragraph beside it.
- Open-source band: star count, contributor avatars, licence, and a link to good-first-issues.
- Pricing: a free/open tier next to a hosted tier, presented as two plain bordered panels.
- 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.