hero.terminal-ascii-banner · ASCII banner

A hero pattern from Terminal Mono, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.terminal-ascii-banner". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The product name set as a huge bold mono banner across the full width, a rule, then a muted --help flag in 1–2, the description in 3–8 and bracketed actions in 9–12.
Slots
headline, eyebrow, subhead, cta, cta2
Grid areas
banner full · flag 1-2 · description 3-8 · actions 9-12 (12-column grid, 1-based inclusive spans)
Notes
If you can, render the banner as figlet-style ASCII art in a <pre> (with the real name as visually hidden h1 text); otherwise set the h1 in the mono face at step 8 (the only text above step 7 in the style), heaviest weight, lowercase.
Tokens
bg #0B0F0C · text #C8D3C5 · heading #E6F0E3 · accent #3DDC84 · accent2 #279558 · JetBrains Mono / JetBrains Mono · radius 0px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • The product name as a full-width banner: figlet-style ASCII art in a `<pre>` if you can (keep a visually hidden h1 with the real name), otherwise the h1 at step 8, heaviest weight, lowercase, tight. A 1 px rule, then: a muted `--help` flag on 1–2, the description on 3–8, a bracketed primary button and a text link right-aligned in 9–12.

We make complicated companies simple to choose

Brand & product studio

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies