(Style guide)
Variables · Type · Components
v1.0
Styleguide.
Template
Every colour, type style and component in Arbiter comes from CSS variables. Change a variable once and the whole site follows.
Section (01)
Colours
Bone 50
#f6f6f3
Bone 100
#edede8
Bone 150
#dbdbd2
Ink 500
#747474
Ink 900
#191919
Ink 950
#111110
Seal
#d4401f
Section (02)
Typography
Mega
Mega
12vw / 0.86 / Switzer 500
Heading 1
Heading one
6rem / 0.95 — sample is an H2 with heading-style-h1
Heading 2
Heading two
4.75rem / 0.98
Heading 3
Heading three
2.75rem / 1.05
Heading 4
Heading four
1.75rem / 1.2
Serif accent
Libre Caslon
Libre Caslon Condensed italic — accents only
Text large
The quick brown fox argues the case.
1.5rem / 1.35
Text medium
The quick brown fox argues the case.
1.125rem / 1.5
Text regular
The quick brown fox argues the case.
1rem / 1.5
Text small
The quick brown fox argues the case.
0.875rem / 1.45
Label
Section label
Roboto Mono — 0.75rem / uppercase / 0.06em
Section (03)
Buttons
Section (04)
Labels & links
Section (05)
Forms
Section (06)
Rich text
Rich text H3
Paragraph inside rich text with a link.
- List item one
- List item two
A blockquote, set in the serif.
Arbiter template
Make it
yours.