← Design system
Design system · one system, three modes

Basic
Chaos

Loud where the work is presented. Day and night where the work is done. Same blue, same ink, same type logic everywhere. Nothing glows. House shape: round controls, soft everything else — see components.html for the full labeled component set.

Loud · block links
Creature Deklination Line 1d

The signature move: full-width ink slabs, shouted text, no icons, no arrows. Hover shifts the slab right — the only animation the loud layer gets.

Type · one family, weight does the work
display-xl · 800 · loudShout
display · 800 · loudSection shout
head · 800 · day/nightThe working shout
title · 700Panel or page title
body · 400 · 15pxBody text carries the explanation. Plain, readable, no tricks.
label · 700 · 11pxUppercase letter-spaced label
mono · 11pxt116880 emit=0.09 led=30 E=5.8
Brand palette
Sky#87CEFA
Sky deep#2F7FBE
Ink#333333
Chalk#ECEEED
Paper#EFECE5

Sky deep is sky's reading voice — same hue, dark enough for links on chalk. Paper is night's text and the warmth reserve; it doesn't carry day.

Day · working voice, lights on

Slate and chalk.
The ink holds its order.

The tool mode for daylight. Gesso washes of chalk make the workspace; the brand ink writes on top — present, holding its order. Slate is the quiet voice, sky deep carries links and focus. Warmth appears only in moments, never as the field.

The one loud moment: the header band

A floating slab in a light header was awkward. So the whole header is the moment: a full-width ink band, the app name riding it in sky, controls in chalk. Bold, then out of the way.

Dish Drop

The same band unchanged over night — ink lifts off charcoal, the name still pops. One element, both modes. The mode toggle stays a word, not a sun icon. Standalone app marks still exist for footers and about pages.

Forms

Drop files here or click to upload

The drop zone is a full color field — no border, no dashes, no outline. Hover deepens it, drag-over inverts it completely. State changes are total, not subtle.

Dragging state — inverted

Chalks and slate

Deep#DDE1E1
Base#ECEEED
Lift#F5F6F5
Line#C7CDCD
Slate#6E7A80
Slate deep#47535A
Wash#DFF2FC
Warm#F07D5D

Gesso washes, cool and layered. Slate speaks quietly. Warm is a moment — a mark, a flag, a held note — never the field.

Images in the light

One rule, every mode: the plate is always darker than what it carries. By day that means slate — white screenshots pin to it like prints on gray board. Anything that already reads against chalk (photos, dark dashboard shots) stays plain, no plate.

Creature build, plain on chalk
Photo · plain — it reads on chalk by itself
Process diagram on slate plate
Screenshot · slate plate — mounted, present
Process diagram bare on chalk
Screenshot · bare — don't. White bleeds into chalk.
Night · working voice, lights out

Charcoal, not black.
Pastels in the night.

Built from type, not boxes. Structure is a heavy rule and a bold uppercase head. Surfaces are layered charcoals; text is warm paper, never white. Nothing rounds, nothing glows, nothing floats.

Status

LIVE · tick 116880 Creature v06.5

Status is a color field with the state written inside it — not a dot next to a word. The field is the signal.

activation 0.62
fatigue 0.18

Forms at night

Drop files here or click to upload

Data

CellRoleActEnergyState
C2Sound0.410.92active
C8Light0.120.88resting
C6Emitter0.770.64active

The role color fills the whole cell and the name lives inside it — no tiny chips. No lines either: the header is a plane, rows alternate shades, hover is the sky wash. Values can live in fields too when they carry state: 0.91 0.12.

Pastels in the night

The color is the field; the name lives inside it.

Sound#5EC8F8
Light#F0A35E
Emitter#5EE08A
Free#8B95FF
Motion#B98BFF
Weather#6EE0C2
Fatigue#F0625E
Loop#E0772B

Charcoals

Deep#1D1F21
Base#26282B
Lift#2F3235
Line#3C4043
Wash#33424D

Depth comes from shade shifts, never from shadows. Wash is the sky-tinted plane for focus, hover, and selection — state without lines.

Spacing · 4px base

4 · 8 · 12 · 16 · 24 · 32 · 48 · 80. Nothing in between.

Images

Images are content, never decoration. Square corners, no shadows. Captions are labels under a heavy rule. Three treatments cover everything.

Creature build, plain
Photo · plain — the default
Creature build, ink duotone
Photo · duotone — loud brand moments only
Creature build, night
Photo · night — sits back with the pastels
Process diagram on plate
Screenshot · on a plate — mounted, not floating
Process diagram bare
Screenshot · bare — don't. Light UI bleeds into the night.
The rules, short version
Do
One shout per page. One header band per tool. Weight and case, not new fonts. Structure from planes of color and space — big blocks, not lines. Color as full fields with the value inside. Chalk by day, charcoals by night, pastels only as data. Screenshots on plates, photos plain. State changes total, not subtle.
Don't
No glow, no shadows, no gradients. Shape comes from the shape axis, never hardcoded. No structural lines — planes and space separate things; the only outline left is keyboard focus. No tiny color dots. No pure black, no pure white. No dashed borders. No icons where a word works. No third brand color. No cards.

Full reasoning in PRINCIPLES.md · tokens in tokens.css · all components labeled in components.html · app demo in app-demo.html · shape stances in shapes-demo.html · proofs: creature-dashboard-retrofit.html, ../dishdrop/, gNote theme, nebenote site + app