Monospace everything
Every character takes the same width, so text lines up in perfect columns.
Interfaces that look like a command line. Everything is monospaced text: frames are drawn with box characters, buttons sit in brackets and a cursor blinks, waiting for your next command.
user@atlas:~$ open kit copy prompt
Terminal style borrows the look of command-line tools. Monospace text, box-drawing characters and a single glowing colour make pages feel fast, technical and honest.
Every character takes the same width, so text lines up in perfect columns.
Frames, logos and dividers are drawn with characters like ═ ║ ╔ and █.
Amber or green text on black, like old monitors, with a soft glow.
Brackets, prompts, slashes and hashes turn UI labels into little commands.
Terminals were once the only way to talk to a computer. Developers kept the look alive long after graphical screens took over.
The American Standard Code for Information Interchange defines the character set that terminal art is built from.
Video display terminals put glowing text screens on office desks.
Bulletin board systems decorate their menus with colourful block-character art.
Email signatures and forums fill with pictures drawn from letters and symbols.
Developer tools and portfolios style their sites like terminals, and command-line apps get polished interfaces.
Terminal motion is typing. Lines appear one character at a time, and the cursor never stops blinking.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Command-line products present docs and landing pages in terminal style.
Developers build homepages you can navigate by typing commands.
Coding events use terminals to set the mood.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
One phosphor colour on black. Green and red appear only for success and error messages. Tap a swatch to copy its hex value.
:root{
--amber: #FFB000;
--dim-amber: #C08A2A;
--rust: #8A6010;
--screen-black: #120C02;
--green-ok: #7CFF6B;
--red-error: #FF5F4A;
}A single monospace family at every size. Hierarchy comes from weight, brackets and hashes.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "JetBrains Mono",ui-monospace,monospace;
--font-b: "JetBrains Mono",ui-monospace,monospace;
--font-m: "JetBrains Mono",ui-monospace,monospace;
--fs-d: clamp(35px, 9vw, 64px);
--fs-1: 35.4px; --fs-2: 29.1px;
--fs-3: 23.8px; --fs-4: 19.5px;
--fs-body: 16px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: 0;
text-transform: none;
line-height: 1.15;
}
/* fonts: JetBrains Mono for everything */Everything aligns to character columns. Dashed and box-drawn frames split the screen.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No radius, no shadow. Dashed borders and bracket characters replace decoration.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Terminal / ASCII kit · Anti-Boring */
:root{
--bg:#120C02;
--surface:#1A1206;
--surface2:#150E04;
--fg:#FFB000;
--muted:#C08A2A;
--accent:#FFB000;
--accent-fg:#120C02;
--accent2:#2A1D08;
--accent2-fg:#FFB000;
--border:#8A6010;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"JetBrains Mono",ui-monospace,monospace;
--font-b:"JetBrains Mono",ui-monospace,monospace;
--font-m:"JetBrains Mono",ui-monospace,monospace;
--h-weight:800;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.15;
--gap:24px;
--pad:24px;
--focus:rgba(255,176,0,.4);
--ok:#7CFF6B;
--warn:#FFB000;
--danger:#FF5F4A;
--info:#6FC3FF;
--field-bg:#0C0801;
--field-shadow:none;
--media:repeating-linear-gradient(0deg,rgba(255,176,0,.25) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 50%,#3A2806,#120C02);
--code-bg:#0A0601;
--code-fg:#FFB000;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:16px;
--fs-4:19.5px;
--fs-3:23.8px;
--fs-2:29.1px;
--fs-1:35.4px;
--fs-d:clamp(35px, 9vw, 64px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn::before{content:"[ "}.btn::after{content:" ]"}
.btn:hover{transform:none;background:var(--fg);color:var(--bg)}
.btn-2{border-color:var(--fg)}
.btn-ghost{border:0;text-decoration:underline}
.btn-ghost::before{content:"> "}.btn-ghost::after{content:""}
.card{border-style:dashed}
.card h3::before,.card h4::before{content:"## "}
.badge{border-radius:0;background:transparent;color:var(--fg);border-color:var(--fg)}
.badge::before{content:"<"}.badge::after{content:">"}
.label::before{content:"$ "}
.input,.select,.textarea{caret-color:var(--fg)}
.check,.radio,.switch,.switch::before{border-radius:0}
.alert{border-left:0;border:1px dashed var(--c)}
.alert b::before{content:"["}.alert b::after{content:"]"}
.progress{border-radius:0}
.progress i{background:repeating-linear-gradient(90deg,var(--fg) 0 8px,transparent 8px 10px)}
.tab::before{content:"./"}
.crumbs li+li::before{content:"/"}
.table th{border-bottom:1px dashed var(--fg)}
.table td,.table th{border-bottom-style:dashed}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F5F1E6;
--surface:#FFFDF6;
--surface2:#EDE7D6;
--fg:#2A1D08;
--muted:#6B5634;
--accent:#2A1D08;
--accent-fg:#F5F1E6;
--accent2:#E4DCC6;
--accent2-fg:#2A1D08;
--border:#2A1D08;
--field-bg:#FFFDF6;
--code-bg:#2A1D08;
--ok:#2E7D32;
--warn:#8A5A00;
--danger:#B3261E;
--info:#1E5A9C;
}
html.alt body{text-shadow:none}html.alt body::after{opacity:.25}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a command-line developer tool in an authentic Terminal / ASCII style.
Palette: Amber #FFB000, Dim amber #C08A2A, Rust #8A6010, Screen black #120C02, Green ok #7CFF6B, Red error #FF5F4A.
Typography: JetBrains Mono for all text, 800 weight for headings.
Layout: Hero with a large ASCII block-letter logo, then a box-drawn frame whose title sits in the top border, containing the intro and a prompt line with bracketed buttons and a blinking cursor.
Signature details: Amber #FFB000 on near-black #120C02, faint glow on text, CRT scanlines, dashed borders, headings prefixed with #, buttons wrapped in [ ].
Components: Bracketed buttons that invert on hover, dashed cards with ## titles, <badges>, $ prefixed labels, dashed tables, striped progress bars.
Motion: Typing lines with steps() easing, a blinking block cursor.
Avoid: rounded corners, proportional fonts, gradients, colourful palettes, ASCII art read aloud to screen readers.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Long paragraphs in monospace are tiring. Keep them short and add spacing.
Box-drawing art is read aloud character by character. Hide decorative ASCII from assistive tech.
Too much text glow smears letters. Keep it faint.
If something looks like a command field, people will try typing. Make it work or make it clearly decorative.