02 Foundations

Foundations

Colour, type roles, space, layers and breakpoints: the values every contract is built from.

§ Values

Colour

Semantic roles, not palette steps. Paper and Lamp give every role a value; required text is proved at 4.5:1 on every surface it may sit on. Washes carry text; tints never do.

Role	Property	Paper	Lamp
Surfaces
surface	`--preceda-color-paper`	`#F4EFE4`	`#161210`
surfaceRaised	`--preceda-color-paper-raised`	`#FBF8F1`	`#1E1915`
surfaceSunken	`--preceda-color-paper-sunken`	`#ECE5D6`	`#100D0B`
surfaceHover	`--preceda-color-paper-hover`	`#EFE8DA`	`#241E19`
Ink
ink	`--preceda-color-ink`	`#191512`	`#EFE7D8`
inkSecondary	`--preceda-color-ink-secondary`	`#4A423B`	`#B9AD9B`
inkTertiary	`--preceda-color-ink-tertiary`	`#70655C`	`#90857A`
inkDisabled	`--preceda-color-ink-disabled`	`#ADA396`	`#554C43`
Rules
rule	`--preceda-color-rule`	`#D6CCBB`	`#352D27`
hairline	`--preceda-color-hairline`	`#E7DFD0`	`#27211C`
ruleStrong	`--preceda-color-rule-strong`	`#B9AD99`	`#4B4139`
Binding
binding	`--preceda-color-binding`	`#6B1F2A`	`#8F3442`
bindingHover	`--preceda-color-binding-hover`	`#561722`	`#A13C4B`
bindingInk	`--preceda-color-binding-ink`	`#6B1F2A`	`#CC6A6C`
bindingTint	`--preceda-color-binding-tint`	`rgba(107, 31, 42, 0.07)`	`rgba(178, 75, 87, 0.12)`
bindingWash	`--preceda-color-binding-wash`	`rgba(107, 31, 42, 0.07)`	`rgba(178, 75, 87, 0.06)`
actionInk	`--preceda-color-action-ink`	`#F4EFE4`	`#EFE7D8`
Gilt
gilt	`--preceda-color-gilt`	`#A8874F`	`#C9A66B`
giltInk	`--preceda-color-gilt-ink`	`#7B6239`	`#C9A66B`
giltTint	`--preceda-color-gilt-tint`	`rgba(168, 135, 79, 0.12)`	`rgba(201, 166, 107, 0.12)`
giltWash	`--preceda-color-gilt-wash`	`rgba(168, 135, 79, 0.06)`	`rgba(201, 166, 107, 0.12)`
Verification
verified	`--preceda-color-verified`	`#6B1F2A`	`#CC6A6C`
flagVerify	`--preceda-color-flag-verify`	`#7B551A`	`#C9A66B`
verifyWash	`--preceda-color-verify-wash`	`rgba(123, 85, 26, 0.10)`	`rgba(201, 166, 107, 0.12)`
struck	`--preceda-color-struck`	`#70655C`	`#90857A`
error	`--preceda-color-error`	`#6B1F2A`	`#CC6A6C`
Interaction
focus	`--preceda-color-focus`	`#6B1F2A`	`#C9646F`
selection	`--preceda-color-selection`	`rgba(107, 31, 42, 0.16)`	`rgba(178, 75, 87, 0.28)`

Type roles

Product code chooses a role, never a size. Each role fixes family, size, leading, weight, tracking, caps and numerals; nothing is set below 12px. Apply with .preceda-type-<role> or the --preceda-type-<role>-* properties.

display

serif · 56/1.08 · 400 · -0.012em

Front-page promise, marketing heroes. One per page.

The reporter that drafts.

title

serif · 30/1.2 · 400 · -0.005em

Case names, matter titles, dialog titles.

Arnesh Kumar v. State of Bihar

heading

serif · 24/1.25 · 400 · -0.005em

Section heads inside a page or sheet.

Grounds for anticipatory bail

subheading

serif · 20/1.4 · 400

Standfirsts, instrument titles, register headings.

Application under Section 482 BNSS

reading

serif · 17/1.55 · 400

Long reading: judgments, letters, the case page.

No arrest should be made only because the offence is non-bailable and cognizable; 1234567890.

body

serif · 15/1.55 · 400

The desk draft, correspondence and table cells.

The Applicant is the brother-in-law of the complainant and was, at all material times, outside India.

sans · 14/1.45 · 400

Controls, navigation and compact metadata.

Matters · Judges · Account · Saved 2 min ago

small

sans · 12/1.45 · 400 · 0.01em · tabular

Margin notes, times, the working line, attachment hints.

Reading authorities on 482 BNSS · 41 s

label

serif · 14/1.3 · 400 · 0.14em · small caps

Running heads, senders, column heads, spine labels.

In the Court of Sessions, Saket

folio

serif · 13/1.4 · 400 · tabular

Paragraph numbers, page and edition folios, datelines.

1 2 3 · Draft · 10:53

citation

mono · 13/1.6 · 400 · tabular

Neutral and reporter citations, identifiers, codes.

(2014) 8 SCC 273 · 2014 INSC 463

Small caps carry their own tracking (0.14em). Numerals: tabular 1,318 · 4,212 for citations and tables; oldstyle 1234567890 optionally in prose.

Space

A 4px scale. Step N is N × 4px, published as --preceda-space-N. The same numbers as Tailwind's default spacing, so p-4 and --preceda-space-4 agree.

space-00px · 0

space-14px · 0.25rem

space-28px · 0.5rem

space-312px · 0.75rem

space-416px · 1rem

space-520px · 1.25rem

space-624px · 1.5rem

space-832px · 2rem

space-1040px · 2.5rem

space-1248px · 3rem

space-1664px · 4rem

space-2080px · 5rem

space-2496px · 6rem

Layers

Six stacking layers, lowest first. Native <dialog> and popover use the browser's top layer; these order everything that does not. Never write a raw z-index.

base--preceda-layer-base0
sticky--preceda-layer-sticky10
dock--preceda-layer-dock20
popover--preceda-layer-popover30
toast--preceda-layer-toast40
dialog--preceda-layer-dialog50

Breakpoints

Four min-width thresholds. 390 is the reference phone; the matter workspace leaves its desk-first mobile layout at 1024. Exported as TypeScript constants and documented @custom-media lines.

phone390px
tablet640px
desk1024px
wide1440px