Styleguide, Phase 0
Styleguide
Tokens and primitives. Tracking tightens to −0.03em at 39px and above.
Wordmark on ink. Curve A is live.
Wordmark, ink
- Curve A, 0.7× / 0.06
- Curve B, 1× / 0.09
- Curve C, 1.2× / 0.14
Wordmark on foam. Curve A is live.
Wordmark, foam
- Curve A, 0.7× / 0.06
- Curve B, 1× / 0.09
- Curve C, 1.2× / 0.14
Type scale, ratio 1.25
Type scale
- --text-6xl, 76pxGrowth that keeps coming
- --text-5xl, 61pxGrowth that keeps coming
- --text-4xl, 49pxGrowth that keeps coming
- --text-3xl, 39pxGrowth that keeps coming
- --text-2xl, 31pxGrowth that keeps coming
- --text-xl, 25pxGrowth that keeps coming
- --text-lg, 20pxGrowth that keeps coming
- --text-base, 16pxGrowth that keeps coming
- --text-xs, 13pxGrowth that keeps coming
Body sample set in Instrument Sans at 16px with a line-height of 1.55. This paragraph is long enough to show where the 68 character measure wraps the line, which is the maximum width for running text.
£1,480 £12,900 £7,050
.num: Bricolage, tabular-nums
ink ground. Rail note sits here.
ink ground. Rail note moves inline under 768px.
ink #0A1A2F
Primary ground
Body sample set in Instrument Sans at 16px with a line-height of 1.55. This paragraph is long enough to show where the 68 character measure wraps the line, which is the maximum width for running text.
Tab through to see the focus ring (foam, 2px, 2px offset).
List item one
List item two
List item three
Hairline: list separator, no ticks
depth ground. Rail note sits here.
depth ground. Rail note moves inline under 768px.
depth #12293F
Raised surfaces, alternate sections
Body sample set in Instrument Sans at 16px with a line-height of 1.55. This paragraph is long enough to show where the 68 character measure wraps the line, which is the maximum width for running text.
Tab through to see the focus ring (foam, 2px, 2px offset).
List item one
List item two
List item three
Hairline: list separator, no ticks
foam ground. Rail note sits here.
foam ground. Rail note moves inline under 768px.
foam #ECEEF0
Light ground; text on dark
Body sample set in Instrument Sans at 16px with a line-height of 1.55. This paragraph is long enough to show where the 68 character measure wraps the line, which is the maximum width for running text.
Tab through to see the focus ring (ink, 2px, 2px offset).
List item one
List item two
List item three
Hairline: list separator, no ticks
Accents
Accents
signal #00C2A8
Data, links, marks, the swell line
marker #FFD166
This page's one decorative use. Never for focus.
Rule
Rule
Rules between sections on this page run 1 to 8. The minor ticks inside the rail increase by one each time.