Every component, labeled

The complete BASIC CHAOS component set. Each entry names its CSS classes and source file. House shape: round controls, soft elements (6px), hard planes. Toggle night above — every component reads the mode from one body class.

Type scale

display-xl and display are loud-only. head is the working shout. One family; weight and case do the work.

Color tokens

Mode variables (--bg --surface --deep --text --muted --wash --plate --accent --danger) are set by bc-loud / bc-day / bc-night. Build from these, never from new hex values.

Surface ramps + accent alternates

bc-soft is the quiet ramp (the nebenote temperature, official). bc-paper warms the room for reading-and-writing tools. Accent alternates swap sky for one muted voice — wash and press retint with it. One accent per tool; loud never swaps.

Header band + app mark

The one loud moment per tool. Full-width ink band, sky name, chalk controls. Standalone .bc-appmark (with its own ink slab) is for footers: app mark

Planes

Structure comes from planes and space, not lines. Big fields of color are always welcome.

Bands

The field is the unit. Color runs edge to edge; content aligns to the column inside (--bc-measure). Boxes floating in margins are over — .bc-inset is the documented exception when a bleed genuinely can't work. --tight and --hero set the vertical breath.

Section

Block links

In loud contexts the same class renders as the giant shouted slab. In working modes: surface plane, hover turns fully sky.

Log — cards + index

Entry cards: surface plane, 2px rule border, plane radius. Meta label on top, display-type title, muted summary, project tags pinned to the bottom. A featured card spans 8 of 12 columns; the rest span 4. Tags hover to sky in every mode.

The index: display-type rows for projects or chapters. Hairline rules, hover shifts the row inward and turns it accent. On loud ink bands the same rows read as the site's project list.

Buttons

Controls are pills (house shape). Primary is ink by day, sky by night. Quiet is a deeper field, never an outline. Danger is a full red field.

Pressed: the field drops one shade — primary to slate-deep by day and sky-deep by night, quiet to --press (the wash gone deep), danger darkens. Instant on press, eased release. Hold a button down to see it. No scale, no shadow.

Forms

Fields are deep planes, no borders. Focus changes the plane to the wash. In apps, app.css bumps them to 44px / 16px type.

Errors are a wash too: .bc-field--error washes the field danger, .bc-field-error is one small line under it. No borders, no icons, no native bubbles — put novalidate on the form, set the message from script, clear it on input. Field-level for validation, .bc-error for whole-form failures (server said no).

Drop zone

A borderless color field. Hover deepens, drag-over inverts completely. State changes are total.

Marks — color as a field

The value lives inside the color. No dots next to labels. --fill makes the mark own its container (see Table).

Table

Header is a deep plane, rows zebra, hover is the wash. No hairlines.

Bars

Recolor the fill with a data token when the bar carries a role.

Mode toggle

A word, never a sun icon. Says where you're going, not where you are. Swap the body class and store the choice in localStorage.

Images

The plate is always darker than what it carries: slate by day, deep charcoal by night, ink when loud. If you can see the image's edge, skip the plate.

App · top bar

The loud moment, app edition. Safe-area aware (env(safe-area-inset-top)). .bca-app is the full-height flex shell; .bca-content scrolls between the bars.

App · tab bar

Words, not icons. The active tab is a full inverted plane. Safe-area padding at the bottom.

App · list rows

52px rows, no separators — zebra shades separate, selection is the wash.

App · segmented control

Pill in the house shape. The active segment is a full inverted plane. Click to try.

App · word toggle

State is a word in a plane — ON is sky, OFF is deep. No sliding thumb. Click to try.

App · bar button

Full-width action, 52px. Ink by day, sky by night; danger is the red field.

App · sheet

Bottom sheet as a lifted plane. No handle nub — the title does the affordance work. Safe-area padding below.

App · editor

16px type so iOS doesn't zoom. Focus keeps the plane calm — writing is already the focus.

Icons — the house glyphs

Words first; a glyph only where a word doesn't fit. 30 glyphs, chunky and filled, currentColor. Full sheet with names: icons.html. Standalone icons always get an aria-label.

Icon button

44px hit area, wash on hover, pill. Inside a header band or top bar it picks up chalk-on-ink colors automatically — the gear in your nebenote header.

Actions — text as control

The nebenote pattern: lowercase, underlined, quiet until hovered. For inline and secondary actions where a pill button would be too much. The action row right-aligns cancel/confirm pairs.

Avatar

Round — it's a thing you tap. Deep plane with initials or a glyph; role colors allowed when they encode something. Takes an img for photos.

Search row

Input plane plus an escape action, straight from the nebenote picker. Swap the action for a keycap when it's a hint, not a button: esc

List head + count

Section label left, action right — RECENT, FAVORITES, GROUPS. Counts are numbers in small deep fields, not bare digits floating at the edge.

Checkbox + radio

Deep planes, no 1px boxes. Checked is a full sky field with an ink check. Real inputs underneath — keyboard and screen readers work.

Slider

Deep plane track, round accent thumb. No tick marks, no value bubble — pair with a mark if the number matters.

Stepper

Pill controls, the value is plain type between them. Click to try.

Disclosure

Native details/summary — free keyboard support. The chevron rotates; nothing else moves.

Menu

A floating plane of actions; rows wash on hover. Danger sits after a gap, never first. Glyphs allowed here — a menu is where words and icons work together.

Dialog

A bg-colored plane over the ink scrim (55%). One question, two text actions. Use .bc-scrim as a fixed overlay in real apps; shown inline here.

Toast

An ink plane, one line, one action, gone in a few seconds. Dock it bottom-center with .bc-toast-dock (safe-area aware). It appears — it does not slide, bounce, or fade.

Chip

A removable mark — for tags, aliases, filters. Selected chips go sky. The remove target is a full 28px, not a 12px x.

Keycap

Shortcut hints as mono keycaps. A hint, not a button — if it's clickable, it's a .bc-action.

Loading

The one legal moving element: an indeterminate bar. No spinners, nothing circular, nothing pulsing. For known progress, use .bc-bar-track with a real width.

Empty state

A quiet plane, a glyph, one sentence, one next step. Never a sad illustration.