Reference
Design system.
The colours, type scale, icons, buttons and components this site is built from. Kept as a page so a change to the design can be checked against it.
Colour
brand
#1E4FA8
brand-dark
#0B2B66
brand-soft
#DDE8F7
brand-tint
#EEF3FB
ink
#0F1D33
body
#4B5A72
muted-ink
#7A88A3
line
#E2E8F0
panel
#F4F7FC
red
#C0392B
Type
Outfit 700 — hero heading
Outfit 700 — page heading
Outfit 700 — section heading
Outfit 700 — card title
Inter 400 at 14px is the body size. Everything a visitor reads at length is set in it, at a line height of 1.55, which is what the compiled stylesheet applies to the document as a whole.
Tabular figures: US$1,799 – $2,999
Eyebrow — 11px, 0.15em, brand
Components
Buttons
Brand
Dark
Outline
Cert chips
CEFDAISO 13485IEC 60601
Pills
Category
In stock
Best seller
Form field
Ring icons
Inline icons
Card, hover state
Hairline card
One-pixel border, 8px corners, and on hover it lifts two pixels and takes the brand border.
Section heading