Guides hand-authored CSS toward channel variables, modern selectors and verified browser support. USE FOR: writing or reviewing component CSS, styling states and variants, choosing between modern selectors, checking whether a CSS feature is safe to ship,…
Use when two paired font families look mismatched in weight or spacing rather than in size — one reads heavier, or headings look loose beside body text. USE FOR: finding the weight in face B that matches face A, deriving a per-step weight and letter-spacing…
Aligns paired font families by measured x-height so they look the same size at the same step. USE FOR: two fonts that look mismatched at one nominal size, extracting metrics from font files, deriving the correction factor, choosing between size-adjust and…
Writes, checks, supersedes and indexes Architecture Decision Records in the Equinor Design System format — MADR with bullet-list metadata, per-option pros and cons, a flat Decision with Consequences and Confirmation. USE FOR: drafting an ADR from notes or a…
Defines, ports and reviews algorithmic typographic scales. USE FOR: building a size ramp from one base and ratio, choosing or indexing line-height curves, adding a density axis, porting the Equinor Design System scale, emitting scale tokens, CSS, or Figma…
Applies the Equinor Design System spacing ladder: one sequence of rungs, the relationship each rung expresses (page, container, cluster, selectable, seat), inset proportions for controls (squished, squared, stretched), optical padding that makes a control's…
Chooses the right fill rung for an interface element in the Equinor Design System colour ladder — emphasis, muted or ghost for things you can press, canvas or surface for things you cannot — and the state steps within a tier. USE FOR: which background a…