Design reference

Palette

Eleven greys and four colours. The greys carry structure; the colours carry meaning, and each of the four means one thing. A colour used for emphasis is a colour that has stopped meaning anything.

• --groundThe page.
• --surfaceA panel, raised off the page.
• --surface-sunkA response, sunk into it.
• --lineA border that separates.
• --line-faintA border that only groups.
• --inkText being read.
• --ink-mutedText being skimmed.
• --ink-faintA label on something else.
• --verifiedA chain that verified. Nothing else.
• --faultAn error. Never disagreement.
• --steelInteraction. Never status.
• --hatchData that is absent.

Node scale

Fifteen categories, one hue each. These are names for kinds of node, not grades of certainty: nothing here says a hadith is stronger than a ruling. The graph engines read these tokens at runtime rather than carrying their own tables, which is what three drifted copies had taught us to do.

• --node-allah
• --node-prophet
• --node-angel
• --node-divine-name
• --node-verse
• --node-hadith
• --node-narrator
• --node-root-word
• --node-topic
• --node-entity
• --node-ruling
• --node-scholar
• --node-school
• --node-concept
• --node-default

Type

Four families, each self-hosted. Display sets a heading, UI sets an interface, mono sets anything a machine produced, and Amiri sets Arabic — never a Latin face stretched over it.

Space

Eleven steps. There is no --space-5, --space-7 or --space-9, and reaching for one does not fail loudly: an undefined custom property makes the whole declaration invalid and the browser drops it without a word.

Panel

A bordered box. One name, because the legacy sheets had four — glass-panel, queue-card, mufti-box and gov-metric-card were four spellings of this.

Control

One button. The variant changes weight, never shape — a rounded button beside a square one reads as two systems.

Field

A field and its button share a line and stack rather than shrink. The button keeps its width; without that it compresses until the label meets the border.

Tabs

Selection is carried by aria-selected and visibility by hidden — one state each, and both the ones a screen reader already reads. The pair they replaced, an .active class and a .d-none utility, needed a stylesheet to keep them in step and told assistive technology nothing.

Spec

A labelled value. The label is quiet because the reader came for the value; the label is only there to say what the value is.

Marks

Two marks, and no third. Gold says a chain verified; rust says something failed. Neither says important, and neither may be borrowed to mean it. Where a figure has not been computed the page says so in words rather than printing a zero that reads as a measurement.

Output

Where a response lands. Sunk rather than raised: it is what the surface returned, not something the surface is offering.

Retired

These still resolve, because the legacy sheets are still imported and deleting a token does not restyle the pages that read it — it leaves them reading a property that no longer exists. They are not to be used in new work, and the count of their call sites may fall but never rise.