REstimator Design System

Frozen

• IA, flows and screen structure (V1).
• Type pairing (2026‑06‑16) — not to be re-explored.
• The 5 product rules (below).

Stable and in use

• 147 tokens · dark theme.
• 33 exported components.
• 5 desktop screens from the kit.

Specified, not built

• 6 mobile components (Mobile v1).
• Tablet layer (documented, no artifact).
• templates/ — 0 templates.

Primary UI — Hanken Grotesk

Technical — JetBrains Mono

Regular

400

Medium

500

Semibold

600

Bold

700

tight

1.15

snug

1.35

normal

1.45

relaxed

1.6

ls-body

-0.005em

ls-heading

-0.02em

ls-tight

-0.01em

ls-eyebrow

0.06em

ls-caps

0.05em

Sidebar

248px

Topbar

60px

Document width

1080px

Standard control

40px

Compact control

32px

Rules

• Inline line SVG only. viewBox 24×24, stroke="currentColor", stroke-width ~1.7–1.8 (1.7 for nav/UI, 2 for chevrons/arrows), round caps and joins.
• They inherit text colour and sit at 15–18px.
• No icon font, no sprite, no PNG, no emoji, no unicode pictograms. A “✓” in transient toasts is the only exception.
• For new surfaces, copy the shapes from the kit before reaching for a library. There is no bundled CDN set: the set is small and hand-maintained.

Recurring glyphs

Purpose

The main action control. Exactly one primary (or accent) per view; everything else is secondary or ghost.

API

variant

secondary | primary | accent | ghost

size

sm | md | lg

block

boolean

iconLeft / iconRight

ReactNode (16px)

Variant semantics

• secondary — neutral outline, the workhorse.
• primary — solid charcoal fill, the screen's single main action.
• accent — brand amber fill, reserved for hero send/share actions.
• ghost — no border, low-emphasis inline actions.

Tokens

variant

default 34 | bare 30

danger

boolean

title

required

Icon-only, for the topbar and row actions. title is used both as tooltip and aria-label.

pressed / defaultPressed

boolean

size

md | sm

accent

boolean

disabled

boolean

options

2–3 items

value

string

onChange

(value) => void

More than 3 options → use Select.

API

Behaviour

• Field wraps: label + inline hint (“optional”) + control + note with icon.
• num switches on tabular figures and alignment for money and measurements.
• prefix/suffix for $ and units (m, %).
• Focus: amber border + --re-ring. Disabled: opacity .45.

API

Badge · tone

neutral | ok | warn | crit | info

Badge · dot

boolean

Badge · square

mono code chip

Badge · icon

ReactNode

StatusBadge · status

draft | sent | appr | rej | cancel

StatusBadge · label

overrides the default label

Usage

• StatusBadge maps dot colour + written label automatically. Do not assemble the pill by hand.
• square for codes (GV-A-00148, ESC-RECT): mono, 5px radius.
• State is never communicated by colour alone: always dot + text.

API

Alert · tone

warn | ok | info | crit | neutral

Alert · icon

ReactNode · null hides it

Alert · title

bold lead line

AlertGroup · title

“Alerts and reminders”

AlertGroup · items

ReactNode[]

Behaviour

• The engine is warn-only and never blocks; that is why warn is the default tone and the triangle is the default icon.
• AlertGroup is the titled reminders panel with bullets.
• Microcopy: info/lock icon + a single sentence.

Tokens

This card is the specimen: CardHead (icon tile + title + hint + actions) over a divider, then CardBody.

API

Anatomy

Graphite surface, 1px --re-line border, --re-shadow-sm, --re-r-lg 13px radius. flush when the card wraps a full-bleed table.

Do / Don't

• Do — use a numbered SectionHead for the steps of a long flow (calculator, editor).
• Don't — nest cards inside cards; to group content within a card use SectionHead + dividers.

API

label

uppercase

value

tabular

sub

supporting line

accent

charcoal variant

dot

live status dot

amberValue

figure in amber

Usage

• Dashboard KPI row and status grids.
• accent is for one single highlighted tile per row: it is the charcoal anchor.
• amberValue sparingly: headline figures only (it respects amber rationing).
• dot combines with accent for “Live” panels.

The only sanctioned drawing in the system: schematic plans and elevations generated parametrically from the quote’s own dimensions. They are measured diagrams, with 1px graphite structure lines, token-driven dimension overlays and amber reserved for the entry/railing cue.

Registry

Registry-based: family/variant select a renderer. Stairs ships four: straight (side elevation), L, U and spiral (plan views). Unknown families fall back to a “no technical view” placeholder.

Permitted use

• Calculator and editor previews, history rows, the client-facing document.
• Never hand-draw decorative product art.

API

family

Stairs | others → placeholder

variant

straight | L | U | spiral

dims

width · height · run · steps · tread · riser · diameter

config

string[] of chips

size

compact | standard | large

title / code

override · mono code

showDims

default true

live

“Live” indicator

Densities

• compact — head + drawing + footer.
• standard — + 4 dimensions + chips.
• large — bigger stage + 6 dimensions.

Extending

TechnicalRenderers.register(family, variant, def) · setFamilyLabel · has · variants · families, all chainable. escalones is clamped to 4–16; a chip matching /baranda|pasamano/ draws the railing on recta.

Topbar · Breadcrumbs · UserChip

API

Data entry pattern — long forms

• Numbered steps with SectionHead: Product → Dimensions → Construction options → Finish / installation / zone.
• One card per step; a 2–3 column grid on desktop, 1–2 on tablet, 1 on mobile.
• Units always visible as a suffix, never only in the label.
• Decimal comma on measurements — the step hint is a reminder (“decimals with a comma”).
• Live recalculation: there is no “calculate” button; the result panel shows the “Live” dot.
• Optional fields marked with an inline optional hint, rather than an asterisk on the required ones.

Save bar

The Editor and Parameters screens use a fixed bottom bar with a change count (“1 local calibration change”) + Restore defaults + Save changes. Shadow cast upwards (--re-shadow-bar).

API

Helpers

• Header classes: is-right · is-center · is-sortable.
• Cell classes: re-cell-strong (primary) · re-cell-sub (secondary line).
• Wrap in <Card flush>: the card clips the table’s overflow.
• RowActions is revealed on row hover.

Amounts and figures

• The amount column is right-aligned, tabular-nums, weight 600.
• Code in mono at 11.5px, colour --re-ink-3.
• Two-line row: primary (re-cell-strong) + secondary client · date.

Empty state — the product's real pattern

Empty states explain the rule, they do not just say “no results”.

Pattern rules

• The recommended value is the only amber figure on the screen and sits on the deepest charcoal.
• It is always shown with its range (min / max) and a pin on the track: the number never appears alone.
• The price comes from calibrated Fab_min/Fab_max, not from labour days × rate.
• Always labelled “fabrication value · + VAT”: it is never implied to be a final price.
• The panel carries the “Live” dot: continuous recalculation, no calculate button.

Labour days — a control, not a price

Calculator flow

• 1 Product — family → subcategory (10-category taxonomy).
• 2 Dimensions — measurements in metres, decimal comma.
• 3 Construction options — structure, riser, anti-slip, railing.
• 4 Finish · installation · zone — DTM, installation type, geographic zone.
• The quote header is optional and collapsible: it does not steal focus from the form.

Classification

Families → subcategories is the backbone. TaxonomyIcon accompanies each category in rails, dropdowns, catalogue cards and chips.

Lifecycle and actions

• States: Draft → Sent → Approved / Rejected / Cancelled.
• No hard deletes: the state change is soft and reversible.
• Duplicate is first-class: picking up a previous quote is the most common path.
• Freeze: on publication, the quote freezes its version of the parameters and becomes immutable.
• Override: the manual adjustment is recorded; it does not silently replace the recommended value.

Filters and search

• Search by number, client or project in a single input with a leadIcon.
• Type/state filters on one line; on mobile they scroll horizontally, with a solid amber active state.
• The result count is always visible (“58 results”).

Desktop ≥ 1200

Horizontal space to spare: the full breakdown stays sticky beside the form, as it already worked.

Tablet 834

Form at a comfortable width; a bottom peek bar with the recommended value + range + CTA. It expands without covering fields.

Mobile 390

Pinned result header (recommended + range + size); “View breakdown” opens the sheet. Actions live in a fixed bar.

Base viewport

390 × 844

Fluid range

360–430

Grid

4px (--re-s*)

Screen padding

16 (s4)

Gap between cards

14

Card

r13 · pad 16

Control

h42 · r7

Touch target

≥ 44

Safe area

env(safe-area-inset-bottom)

Component adaptation rules

• Nothing is merely “hidden”. If an element does not fit, it is replaced by its touch equivalent.
• One dominant action per tap: the whole row opens; secondary actions move to a ⋯ overflow.
• Chips on one line with horizontal scroll; the active one is solid amber, never wrapping to two lines.
• No sub-copy in touch headers: title + back and nothing else.
• One brand mark per header: monogram = app, avatar = user.
• The bottom sheet carries only the breakdown: it never becomes navigation.

Full spec: Mobile v1 — Implementation spec

1 · Styles

Link one single file. It is an @import manifest: it brings fonts, colours, typography, spacing, elevation and the base reset.

2 · Theme

Nothing to configure: dark is the system’s only theme, and it is what :root applies by default.

3 · Components

Rules for new surfaces

• Never a literal hex: always var(--re-*). If a token is missing, it is added to the system, not to the screen.
• Never re-explore typography: it is frozen.
• Respect amber rationing: recommended value · active rail/tab · CTA · logo.
• Icons: copy the shapes from the kit; 24×24, stroke 1.7–1.8, round caps.
• No emoji, no gradients, no glass, no decorative blur.
• The 5 product rules in §00 are not negotiable from design.
• Figures: tabular-nums and Uruguayan format, always.

Migrating to Figma

• The §01 tokens map 1:1 to Figma variables (colour, number for spacing/radius, string for families).
• The §02 variants map to component properties (variant, size, tone, status).
• The three breakpoints in §07 map to page/frame widths 390 · 834 · 1440.