The typographical hierarchy of this design system utilises the serif font Cirka along with the sans-serif Inter. It is set in the 1.250 Major Third Scale at a base size of 14px; this scale and sizing is consistent across all screens, with XXL screens increasing the base size to 30px. All non-actionable text is in var(--primary-text) / #333333 on light backgrounds. These guidelines ensure that legibility and visual hierarchy are maintained throughout the design system.
| Heading 1 |
font-family: 'Cirka', serif;
font-size: 3.052rem;
font-weight: 300;
|
|---|---|
| Heading 2 |
font-family: 'Cirka', serif;
font-size: 2.441rem;
font-weight: 300;
|
| Heading 3 |
font-family: 'Cirka', serif;
font-size: 1.953rem;
font-weight: 400;
|
| Body |
font-family: 'Inter', sans-serif;
font-size: 1rem
font-weight: 300;
|
| Emphasised |
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
|
| Inline Link |
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 300;
color: var(--primary-accent);
text-decoration-style: solid;
:hover {text-decoration-style: wavy;}
|
text-transform: uppercase;
font-weight: 600;
font-size: 0.8em;
letter-spacing: 0.1em;
background-color: var(--primary-accent);
text-decoration: none;
color: var(--secondary-accent);
border: 0.2em solid transparent;
:hover:after {content: " →";}
:hover {color: var(--primary-accent);
background-color: transparent;
border: 0.2em solid var(--primary-accent);}
|
|
text-transform: uppercase;
font-weight: 600;
font-size: 0.8em;
letter-spacing: 0.1em;
color: var(--primary-accent);
text-decoration: none;
border-bottom: 0.2em solid var(--primary-accent);
:after {content: " →";}
:hover {color: var(--primary-text);
border-bottom: 0.2em solid var(--primary-text);}
|