ascii/ui, a design system drawn in ASCII

Where to start

Questions

How it was made

A design system with one material: the character.

[>] Play the reel

The problem

Most component kits look like the same kit. ASCII interfaces look different, and most are screenshots or terminal toys: pure text breaks screen readers and does not reflow on a phone. The brief was a kit made of characters that still works like a kit, with a keyboard, a screen reader, a phone, and copy and paste. The person in charge is a product designer, so every rule had to be one a script can check.

By the numbers

Counted from the repo and the built site. A script recounts them before every release and fails if this page says otherwise.

What it is

• 36 components, 34 in the kit
• 16 blocks
• 5 charts
• 7 kit versions published, each still served
• 190 kB gzip on first visit, cap 200
• ################################.
• 62 kB gzip for the 2 kit files

What checks it

• 22 checks before every release
• 22 test scripts
• 11 screen widths, 360 to 1920
• 7 accessibility modes
• 0 requests to anyone else
• 0 animation frames at rest when the system asks for reduced motion

The bar is the weight against its cap, 6 kB a #. The seven modes: keyboard, screen reader names, reduced motion, forced colors, more contrast, print, touch.

Rules the scripts enforce

Each rule has a script, and each script is a step in the release bar. A rule no script checks is a suggestion.

Em dashes are looked for in the source, the docs, the built site and the commit log. Cyan is read from every CSS rule that paints with it: each one needs a focus state. Taps are drawn at 44px, and the script fails anything under 40.

Principles

• Plain HTML underneath. The characters are paint. A button stays a button, so keyboards and screen readers work.
• Every frame is a string. A border is one character repeated, so a new character reskins the part.
• Weight is density. @ is the loudest thing on the page and . is the quietest.
• One grid, 1ch by 21px. Widths are counts of characters, heights are counts of rows.
• Glitch is feedback. It fires on touch and on state changes. At rest, the page reads.
• One file, no dependencies. No framework, no bundler. The site ships as one HTML file and works from file://.

Process

One HTML file for nine versions. v10 made it a repo, with docs and Playwright scripts for QA.

.  v1   HTML on a character grid
:  v2   frames are strings
=  v3   the ring spins
+  v4   glitch, signal palette
   v5   never published
*  v7   18 more parts, Code tabs
#  v8   6 presets, a ramp editor
%  v10  a repo, docs, QA scripts
@  v11  the kit: 2 files, MIT

Each row is one step heavier on the ramp. v5 is a space because it never shipped.

From v10.8 on, the work ran in rounds. Auditors read the site in parallel, one lens each, and change nothing. Their findings are split by file, so no two builders touch the same one.

@ audit   read only, in parallel
:
@ plan    fixes split by file
:
@ build   one worktree each
:
@ review  reviewer and ux-critic
:
@ release every step passes
:
@ ship    main, Vercel, live

ROUND   AUDIT       BUILD
v10.8   ########    ##### 8 auditors, 5 builders.
v11.0   ##########  ##### 10 auditors, 5 builders.
v11.1   #######     #### 7 auditors, 4 builders.
v11.2   ##########  ######### 10 auditors, 9 builders.

One # is one agent. v11.1 had seven lenses: a UI designer, legibility, copy, a frontend engineer, an interaction bug hunt, the Code tab's truth, and an LLM reading the docs cold. v11.2 went through a UX checklist: print, high contrast, touch, security, share cards, and four new overlays.

The release bar is one command. It runs 22 steps and stops at the first failure.

[@] clean at 2 sizes, 2 themes
[@] the shipped file loads clean
[@] the Code tab prints the kit
[@] 11 widths, 360 to 1920
[@] one animation clock
[@] no tiny taps, no tiny text
[@] no surprise phone keyboard
[@] every kit part, pasted twice
[@] every Usage tab holds true
[@] reduced motion, both builds
[@] every address lands
[@] the docs match the code
[@] what ships is what builds
[@] every number on this page
[@] under the size budget

release: ok

What did not work

• A masonry gallery. It packed the cards tight and broke the alphabetical order the index promised. It lasted 29 minutes.
• The phone menu. The second patch made it worse, so it was rebuilt instead.
• Three views: Play, Apps and One pager. They read as a portfolio, and this is a kit.
• Thirty bitmap titles in a row. A wall of shouting. Now there is one per page.
• A Try it strip on Home. It lasted nine hours.
• A Code tab that printed the site's own engine. Now it prints the kit, and a script pastes every component twice into a blank page to prove it works.
• Still not done: the WebGL CRT pass, Safari and Firefox on real devices, and an audit by someone who uses a screen reader.

Credits

Designed by Fede Kotek. Built with Claude Code. This is v11.5, with kit 1.3.1.

Rules

@@ %% ## ** ++ == :: ..

• Weight is character density. @ is the loudest thing on the page and . is the quietest.
• Frames, rules, fills and shadows are strings of characters. Hierarchy comes from which character.
• Big type is a bitmap: every pixel of a headline is a block of characters.
• Color is signal: magenta acts and marks the worst state, cyan focuses, lime confirms, yellow warns.
• Glitch is feedback. It fires when you touch something or when a state changes, and the slider turns it down to zero.
• Everything arrives broken and fixes itself: elements glitch in as they enter the screen, text decodes left to right.
• Sound is feedback too. Square-wave blips and crushed noise, never music.
• Nothing jumps. State changes travel through the ramp, one character at a time, at a low frame rate.
• Underneath it is plain HTML: buttons, inputs, a dialog.

Foundations

What every component is made of: 14 color tokens, one grid, a ramp of nine steps (space to @), eight tones and six states. Presets in Themes swap the colors. The rest stays put.

Button

The rim says how loud it is: @ for primary, = for the rest, / for danger. The last one is disabled: a faint rim and a gray label.

Input

Focus turns the frame to @ in the focus color. An error turns it into a wall of !.

Toggles

Checkbox, radio and switch. Native inputs, the glyph is only the paint.

Slider

Pick a value on a range. A real range input sits on top of the halftone bar. This one sets the page's glitch.

Tabs

The active tab is a solid slab. Arrow keys move between tabs.

<button class="btn btn-primary
  frame tone-heavy">
  <span class="mid">
    <span class="label">
      Publish site
    </span>
  </span>
</button>

.tone-heavy {
  --h: "@@@@@@@@@@@@...";
  --s: "@@";
}
.frame::before,
.frame::after {
  content: var(--h);
  overflow: hidden;
}
.mid::before,
.mid::after {
  content: var(--s);
}

Card and dialog

Title on a bar of @, walls of #, and a shadow made of colons. Publishing opens the dialog.

Progress

How far along a task is, on the halftone bar. The spinner lives inside the button.

Details

A native details element. The marker flips between [+] and [-] and the answer decodes as it opens.

Badge

Inverse slabs for status, brackets for everything else.

Alert

A card with a hazard rim. The title says what happened, the body says what to do.

Select

A native select inside the same frame as the input.

Skeleton

Loading is a wave moving through the ramp.

Avatar

Initials on a slab, or a picture pushed through the LCD.

Breadcrumb

Slashes do the separating. The current page is a slab.

Calendar

A month of buttons. Today is the action color, your pick is a slab.

Command

The command menu. On this site it is Search: press / and type. Site only, not in the kit.

Dropdown

A button that opens a menu. Arrows move, Escape closes.

Empty

When there is nothing, say so and offer the next step.

Input OTP

Six brackets. They advance on their own and take a paste.

Type any six digits.

Kbd

Shortcuts, as keys in brackets. These ones work on this page.

Icon

Thirty-nine icons made of the same characters as the text. Each comes in two sizes: one row, to sit in a line of text, and three rows, for an empty state. Tap one to copy it.

Pagination

Brackets around every page, a slab under the current one.

Picture

An LCD panel cut into twelve sectors. Every cell is three subpixels and each sector can run its own mode. Tap a sector. Site only, not in the kit.

Separator

Splits content without a box. Four weights of nothing, and a rule with a word in it.

Sheet

A dialog that comes up from the bottom in seven steps.

Spinner

Five ways to wait.

Textarea

The same frame, four rows tall, with a counter.

Timeline

Events in order. Nodes are @, the wire is colons.

1. ShippedSearch v2 went to 100 percent of accounts.
2. In review14 comments in Figma, 3 of them useful.
3. KickoffOne problem statement, zero solutions. As it should be.

Data table

A real table that sorts, filters, picks rows and pages. Take the script away and it is still a table.

Toast

One line, typed in from the left. Lime for good news, yellow for the other kind.

Toggle group

Pick one of a few options. Radios dressed as slabs. Arrow keys move the pick, Tab leaves the group.

Board view.

Tooltip

A short hint for a control, on hover, focus or tap. It types itself in.

Popover

A small panel next to its button, for things that do not deserve a dialog. Escape or a click outside puts it away.

Combobox

Type and the list gets shorter. For when a Select would scroll forever.

Alert dialog

A dialog that asks before something you cannot undo. A tap outside does not count as an answer.

Context menu

The menu under the right mouse button. Press and hold on a phone, Shift F10 on a keyboard.

Login

Two fields, one loud button, one quiet one. Submit it empty to see it complain.

Stats

The number is a bitmap, the trend is eighteen characters of ramp.

Table

A real table. Tap a row to select it.

No incident selected.

Pricing

Three cards. The popular one gets the @ rim.

Profile

An about block. The portrait is an LCD panel, so load your own face.

Career

A timeline with opinions.

1. NowAutodeskSr. Product Designer.
2. MaintainXSr. Product Designer. B2B, mobile first.
3. PomeloProduct design for fintech infrastructure.
4. MercadoLibreProduct design at marketplace scale.

Cases

Four cards, four LCD thumbnails. Tap one.

Pick a case study to read its one line.

Now

What is going on outside of work.

Reading

Solo Leveling

Playing

Path of Exile 2, doing expected value math on loot

Next

Octopath Traveler, on the ROG Ally X

Training

First pull-up |

Cooking

Asado, polenta, homemade Greek yogurt

Walking

A beagle, daily, at his pace

Recipe

Sunday asado. Change the servings and the quantities follow, in metric.

Build

A character sheet on the halftone bar. Reroll it.

Tasks

A checklist that counts. It is release day, because it always is.

• Rotate the staging API keys
  Highdue todayJP
• Fix the login redirect loop
  Mediumdue tomorrowAL
• Write the release notes
  Mediumdue WedMR
• Update the status page
  Lowdue FriFK
• Archive last quarter's dashboards
  Lowdue next weekJP

Sidebar

App navigation with counts. The arrow follows the current page.

• Incidents 12
• Services 148
• Alerts 1,204
• Dashboards 6
• Workflows 9

Settings

These two switches are wired to the real page.

Crit

A feedback form with a verdict.

Activity

A feed is a timeline with timestamps.

1. 09:12Deploystatus-web shipped build 4812.
2. 08:47AlertProbe fra-1 out of range for 4 minutes.
3. 08:03Comment"Can the chart be a pie?" It cannot.
4. YesterdayClosedINC-509, checkout timeouts, 2h 10m.

404

The one page where the signal is lost for real. It never settles.

Bars

Requests per day. Bars grow through the ramp and cap out lighter.

Tap a bar.

Line

p95 latency, live. Spikes turn yellow. Tap the chart to break production.

p95 --

Regions

Probe success by region, one halftone bar each.

Heatmap

Uptime by day. Lime is fine, yellow is degraded, magenta is an outage.

Tap a day.

Donut

Traffic by source. Yes, another donut.

Tap a slice.

Presets

Pick a signal. The page is the preview.

Colors

Every color has a job: surface, text, action, focus, success, warning. The four support shades follow the preset.

Ramp

Nine steps, space to @, lightest to heaviest. Every frame, fill, chart and explosion is an index into them. Swap the characters and you have a different kit.

Classic ramp.

Tokens

The theme you are looking at, as CSS. Paste it after ascii-ui.css, or download tokens.css for a page. For Figma or Tokens Studio, download tokens.json: both modes, the grid, the ramp and the motion.

Signal

The bad signal, for your own pages: four effects an element asks for with data-aui-signal, then two kinds of scanlines for the whole page. Nothing runs until asked. Reduced motion, high contrast and print keep all of it still.

Labs

Five small labs. Each one is a piece of the system you can poke.

The ramp

Brightness picks the character. Drag across the patch to move the light, and use the slider to change the exposure.

Frames are strings

A border is one long string clipped by overflow. Type any character and the frame rebuilds itself out of it.

Type is a bitmap

Headlines are a 5 by 7 pixel face where every pixel is four characters. Type up to eight and watch it develop.

The glitch engine

Four effects, fired one at a time. On the rest of the page they fire on their own when state changes.

Sound is oscillators

No audio files. Square waves for blips, a sawtooth for errors and filtered noise for the glitches.