ascii/ui

Thirty components. Weight is character density, frames are strings, color is signal, glitch is feedback. The full rules are at the bottom.

Button

The rim says how loud it is: @ for primary, = for the rest, / for danger.

Input

Focus turns the frame to cyan @. An error turns it into a wall of !.

Toggles

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

Slider

This one is wired to the page: it sets the RGB split, the tearing and the streaks. A real range input sits on top.

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

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

Progress

Same 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.

Crumbs

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

Calendar

A month of buttons. Today is magenta, your pick is a slab.

Command

Commands is a component too. It runs this site.

Dropdown

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

Empty

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

OTP

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

Type any six digits.

Kbd

Keys in brackets. These ones are real.

Pager

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.

Divider

Four weights of nothing.

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

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.

Toast

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

Segment

Radios dressed as slabs.

Board view.

Tooltip

Hover, focus or tap. It types itself in.

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, 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.

Components composed into the pieces every product ends up needing. The content is from Static, a made-up uptime monitor that screams when things break. Six of them are about Fede, who made this. Filter by Personal to see only those.

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. Asset intelligence and connected data across maintenance workflows.
2. MaintainXSr. Product Designer. Led Reporting, Search, Automations and Chat, mobile first, until the acquisition.
3. PomeloProduct design for fintech infrastructure.
4. MercadoLibreProduct design at marketplace scale.

Cases

Four cards, four LCD thumbnails. Tap one.

Pick a case study.

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.

Orders

A checklist that counts. The domain is maintenance, because of course it is.

• Replace conveyor belt motor
  Highdue todayJP
• Calibrate line 3 torque sensor
  Mediumdue tomorrowAL
• Inspect forklift 07 hydraulics
  Mediumdue WedMR
• Restock gloves, size L
  Lowdue FriFK
• Grease palletizer bearings
  Lowdue next weekJP

Sidebar

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

• Work orders 12
• Assets 148
• Parts 1,204
• Reporting 6
• Automations 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:12Deployreporting-web shipped build 4812.
2. 08:47AlertLine 3 torque sensor out of range for 4 minutes.
3. 08:03Comment"Can the chart be a pie?" It cannot.
4. YesterdayClosedForklift 07 hydraulics, 2h 10m.

404

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

Charts drawn on the character grid. Density carries the value, color carries the meaning. Tap them.

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, on the same halftone bar as the slider.

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.

Six presets, six color roles, four support shades and one ramp. Change any of them and the whole site follows, including the hero, the charts and the game. Copy the tokens when you like what you see.

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

Eight characters from 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

What you would paste into your own project.

The hero, with the hood open. Feed it a picture, type your own words, turn the knobs, then leave with a poster or a snapshot.

Source

Feed the hero a picture. A photo, or the camera. Nothing leaves this page. Ring brings it back.

Words

Two lines, up to 8 characters each. Five or fewer render at double size.

Knobs

Everything the glitch engine exposes.

Poster

A random poster from your code. Reroll until you like one, then save it.

Three phone apps rebuilt in this language. A feed, a player, a chat. They all work as far as a prototype can, so tap around.

Feed

A small bird app. Like, repost, post. Counters glitch when they change.

Player

A music player. Play generates a little tune from the ramp, so turn sound on.

Chat

Messaging with a bot that answers in ramp. Send anything.

Signal

A component kit that looks like a broken broadcast and behaves like plain HTML. Copy a component, own the code, change the characters.

Why

Four ideas hold the whole thing together.

How

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.

FAQ

Get it

Bad signal on the outside, good HTML on the inside.

ascii/ui. An example one pager built from its own components. Set in Geist Mono.