Typography

H1.larger – Semibold 96px @ 112px line height – Bold – Italic

H1.large – Semibold 64px @ 88px line height – Bold – Italic

H1 – Semibold 48px @ 64px line height – Bold – Italic

H2 – Semibold 32px @ 40px line height – Bold – Italic

H3 – Semibold 24px @ 32px line height – Bold – Italic

H4 – Semibold 16px @ 24px line height– Bold – Italic

p – Regular 16px @ 24px line height – Bold – Italic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ornare velit. Mauris a nulla efficitur, venenatis felis non, fermentum libero. Praesent congue porttitor lorem eu accumsan.

p.small – Regular 14px @ 24px line height – Bold – Italic

p.small-copy – Regular 14px @ 20px line height – Bold – Italic.

NOTE: non-standard line height! So p.small is our 14px size text, and is mostly to be used for short, labelling things. Sometimes however, we way want to use 14px for copy (not very often). On our type scale, line height should be one of 16px or 24px… but 16 is too tight, 24 too loose, so we’re gonna knowingly break a rule. p.small-copy has a line height of 20px.

• Here is
• an
• unordered list

1. Here is
2. a
3. numbered list

Palette

Blacks & Greys

Brand

Product extended

Cards / elevation

Note box-shadow… box-shadow: var(--box-shadow); in _vars.css

Buttons

As <button>

“Naked” button

Sometimes you want to use the button element for things that DON’T look like these - in that case, applying the “.Naked” class resets it back to defaults for you to style at will.

As <a>

Sometimes we have a link, but we want it to look like a button.

Links

What up fam - common or garden link

What about a link within another piece of text?

Form elements