BASIC CHAOS — design principles

One system, three modes. Loud where the work is presented. Day and night where the work is done. Nothing glows. House shape: round controls, soft everything else. Words first; house glyphs where words don't fit.

The idea

The hub page got it right by accident: one blue, one dark, huge type, nothing else. Maximal, present, concise, total. That confidence is the brand. The mistake would be applying it to everything — a tool shouting at you all day is unusable. So the system has one brand voice and two working modes that share its DNA.

Loud is for landing pages, hubs, headers, and brand moments. Sky on ink, ink on sky. One giant uppercase statement per page. Hard edges, zero decoration.

Day is lights on: slate and chalk. Gesso washes — cool, layered chalks (#ECEEED, lift #F5F6F5, deep #DDE1E1) — make the workspace of opportunity, and the brand ink #333333 writes on top of it, present, holding its order. Slate #6E7A80 is the quiet voice; sky deep #2F7FBE carries links and focus. Warmth exists only as moments — --bc-warm, the data oranges, a flagged line — never as the field.

Night is lights out: layered charcoals, warm paper text #EFECE5, sky as the accent, data pastels doing the talking. Paper is where the system keeps its warmth.

Day and night are the same skeleton relit. A tool switches between them by swapping one body class; nothing else changes.

The one loud moment

Every tool gets exactly one: the header band. Not a slab floating in a light header — the whole header is the moment. A full-width ink band; the app name rides it in sky, controls ride it in chalk. It works unchanged over day and night: bold on chalk, lifted on charcoal. If a tool has two loud moments, it has none. Standalone app marks still exist for footers and about pages.

The maker is a builder and enabler: the tools exist so people can do their thing. So the working modes stay calm and legible, the personality lives in that one band, in the voice of the microcopy, and in decisiveness — state changes are total (a drop zone inverts completely on drag-over), never subtle.

Not a SaaS dashboard, not a SaaS tool

The conventions to refuse: rounded cards, dashed drop zones, glowing dots, soft shadows, blue-black backgrounds, sun/moon icons for theme toggles. Instead:

Structure is fields, not lines. The field is the unit and it bleeds: a section is a full-width band of color running edge to edge, with the content aligned to a column inside it (bc-band + bc-band-inner). A box floating in margins is over. The inset plane (bc-inset) survives as the documented exception for the rare place a bleed genuinely can't work. Big blocks of color and space do the separating: a section is a bold uppercase head with room around it; a table's header is a plane and its rows alternate shades; the hero is an ink field, the download call is a sky field. Lines turned out to distract from the text — they fought the ink instead of serving it — so they're gone as structure. --rule survives as a token for the rare data hairline, nothing more. Depth is a shade shift between chalks or charcoals, never a shadow. The mode toggle is a word: "night" when it's day, "day" when it's night.

No outlines. An outlined square is harsh — a hollow box pretending to be a thing. Anything secondary is a solid deeper field instead: quiet buttons are chalk-deep or char-deep, danger buttons are a full red field, drop zones are borderless color fields that invert on drag. The single exception is keyboard focus, which keeps a square accent outline because visibility for keyboard users is non-negotiable.

Color is a field, not a dot. Tiny color chips next to labels are AI-tool furniture. Here the color block is the cell: the name, number, or state lives inside the field, and the field takes all the space it's given (bc-mark, bc-mark--fill, bc-plane and its variants). A live status is a green field that says LIVE. It does not pulse, it does not glow. (A glow that encodes data — like pressure halos in the Creature field — is data visualization, not decoration, and stays.)

State is a wash. Focus, hover, and selection share one move: the plane tints sky (--wash — #DFF2FC by day, #33424D by night). A focused input doesn't grow a border; it changes color. Forms are plane fields; buttons are square and shouted.

Press is the wash gone deep. An active control drops to --press (washed controls) or one decisive shade (solid buttons: ink drops to slate-deep by day, sky drops to sky-deep by night). The drop is instant; the release eases back at normal speed. No scale, no shadow, no glow — feedback is a plane change, like everything else.

Errors are a wash too. An invalid field tints danger (--wash-danger) and one small line under it says what's wrong. No red borders, no icons, no tooltips, no native browser bubbles — forms carry novalidate and the message comes from script, appearing on submit and clearing as the person types. Field-level errors sit under their field; whole-form failures (the server said no) use one .bc-error line near the actions.

Color

Two brand colors: sky #87CEFA and ink #333333. For working tools the volume is adjustable: bc-soft lowers day or night to a quiet, close-stepped ramp (the nebenote temperature, made official), bc-paper warms the room for reading-and-writing tools, bc-bright opens the white room (off-white — the no-pure-white law holds), and bc-carbon goes past charcoal for focused late tools (near-black, same law). A tool may also swap sky for exactly one muted accent alternate — moss, clay, slate, or plum (bc-accent-*) — so not every tool is blue; the wash and press retint with it. These are alternates, not additions: one accent per tool, and loud never swaps. Sky deep is sky's reading voice for paper backgrounds, not a third color. Papers and charcoals are fixed neutrals. If a design needs another color, the design is wrong — unless the color is data: the pastel role palette (sound, light, emitter, free, motion, weather, fatigue, loop, reservoir). Danger red exists for tools because delete buttons are real.

Type

Two voices, one logic. Body stays the system grotesque; the shout scale (display, head, app mark) speaks in the display face: PolySans where the project ships it (licensed, not bundled), Space Grotesk as the free stand-in (SIL OFL — closest free match to the geometric-grotesque personality; Archivo Black is the fallback candidate if a project wants the old title-card brutality), system grotesque as the floor. All of it swaps at the token level (--bc-font-display); markup never changes.

The shout scale: display-xl (loud, once per page), display (loud sections), head (the working shout, 20–28px, same 800 weight and uppercase). Below: title 24, body 15, label 11 uppercase letter-spaced, mono for machine output. Labels are always uppercase and letter-spaced. Body text never is.

Images

Images are content, never decoration. No shadows; corners follow the shape axis. Captions are plain labels. Three treatments: plain (default — if the image is the work, show the work), plate (for images that fight the background), duotone (grayscale + sky multiply, loud brand moments only — never on screenshots, never on work being presented). A night-img variant (slight desaturate + dim) exists for photos that fight the charcoal. Treatments are CSS; originals stay untouched.

The plate follows one rule in every mode: it is always darker than what it carries. Slate by day — white screenshots pin to it like prints on gray board. Deep charcoal by night. Ink when loud. The decision is contrast, not category: a photo or a dark dashboard shot already reads on chalk, so it stays plain; a white wireframe bleeds into chalk, so it gets the plate. If you can't see the image's edge, mount it.

Space and shape

Spacing is a 4px scale: 4, 8, 12, 16, 24, 32, 48, 80. Nothing in between. Geometry comes from the shape axis (see Shape); the modes differ in light, not geometry.

Motion

Almost none. Loud gets one move: block links shift right on hover. Working modes get state transitions (bars, opacity, rule color, drop-zone inversion) at 150–400ms. Nothing bounces, nothing fades in on scroll, nothing pulses.

Don't

No glow. No gradients. No decorative shadows. No structural lines — planes and space separate things. No outlines except keyboard focus. No tiny color dots. No pure black or pure white. No dashed borders. No icons where a word works. No third brand color. No cards. No sun/moon toggle icons. No spinners — the indeterminate bar is the only moving element.

Icons

Words first — that law stands. But real tools have corners where a word doesn't fit: the gear in a top bar, the remove target on a chip, a menu row's affordance. For those, the house glyph set: 58 icons, sourced from Phosphor's Bold weight (MIT licensed, phosphoricons.com — full license text in ICONS-LICENSE.txt) — thick strokes with open counters, drawn in currentColor so they inherit any plane they sit on. The set used to draw from Fill, but filled glyphs collapse into solid blocks at small sizes; Bold keeps the chunk and stays legible. Regular/Light/Thin/Duotone are too thin for the system; Bold is the only weight the house set draws from. They live in icons.svg (sheet: icons.html) and are used via <svg class="bc-icon"><use href="#i-gear"/></svg>. Rules: never decorative, never beside a word that already says it, always an aria-label when standalone. Text actions (bc-action — the lowercase underlined "sort→", "new +", "esc" pattern from nebenote) remain the first choice for inline controls.

Shape

The house shape, decided by looking: round controls, gentle everything else. Buttons, toggles, and segments are pills — the things you touch invite the touch. Marks, fields, and rows round gently at 6px; planes and slabs at 12px. Pointy rectangles are out. The hard edge survives only where a field bleeds — a band has no corners to round, and that is where the loud confidence lives now. This is the default — no class needed. All primitives read four radius tokens (--r-el: 6px, --r-field: 6px, --r-btn: 999px, --r-plane: 0); the pure stances (bc-shape-square, bc-shape-soft, bc-shape-round, explicit bc-shape-house) remain as body classes for comparison in shapes-demo.html.

Apps

Native-packaged webviews (Capacitor, Electron) use app.css on top of the tokens: top bar (the loud moment, safe-area aware), word-based tab bar, list rows as alternating planes with a sky-wash selection, segmented controls and word toggles whose active state is a full inverted plane, bar buttons, sheets without handle-nubs. Touch targets are 44px minimum, inputs are 16px to stop iOS zoom, and the editor is a plane that fills the space left. app-demo.html shows a full day and night phone side by side.

Applying it

New project: link tokens.css (+ ui.css for the extended set, app.css for packaged apps), put bc-loud, bc-day, or bc-night on the body — optionally add bc-soft or bc-paper for a subtler room, and at most one bc-accent-* alternate — use the primitives (bc-header+bc-appmark, bc-head, bc-section, bc-mark, bc-field/bc-input/bc-select/bc-textarea, bc-drop, bc-btn, bc-table, bc-figure, bc-plate …). Build anything else from the tokens, not from new values. For mode switching, toggle the body class and remember the choice in localStorage.

Existing variable-driven app: you may not need to touch markup at all. gNote was rebranded with a single override stylesheet (basicchaos-theme.css) that remaps its CSS variables to the system palette and squares the geometry — loaded after its own styles, removable in one line.

Reference: index.html — the front door, linking every page, demo, and proof on the site; components.html — every component rendered and labeled with its selectors and source file; icons.html — the glyph sheet. Proofs: creature-dashboard-retrofit.html (night dashboard), ../dishdrop/ (day/night tool), gNote theme override, nebenote site + app.

Source of truth: PRINCIPLES.md — this page is generated from it.