newbuild
Style Guide
Typography, color, and component reference.
Colors
Primary
--color-primary
var(--color-primary)
Secondary
--color-secondary
var(--color-secondary)
Brand
--color-brand
var(--color-brand)
Background
--color-background
var(--color-background)
Accent
--color-accent
var(--color-accent)
Fonts
--font-sans
Aa Bb Cc Dd Ee
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
weights
Thin 100
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Black 900
--font-display
Aa Bb Cc Dd Ee
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
weights
Thin 100
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Black 900
Typography
H1
Display
var(--text-h1)
H2
Heading Two
var(--text-h2)
H3
Heading Three
var(--text-h3)
H4
Heading Four
var(--text-h4)
H5
Heading Five
var(--text-h5)
H6
Heading Six
var(--text-h6)
Body — base
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Body — muted
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Lead / Intro
A larger introductory paragraph used to open sections or pages with context before the body copy begins.
Small / Label
Small utility text, captions, and metadata labels.
Eyebrow / Overline
Section label
Lists
Unordered
- First list item
- Second list item
- Third list item with a longer label
- Fourth list item
Ordered
- First list item
- Second list item
- Third list item with a longer label
- Fourth list item
Buttons
Text Links
An inline text link sits naturally within body copy.
A bold text link for when more emphasis is needed.
A standalone arrow link → Learn more
Grid
grid-2 — 2 cols · stack on mobile
grid-3 — 3 cols · stack ≤ tablet portrait
grid-4 — 4 cols · 2 cols tablet portrait · stack on mobile
grid-5 — 5 cols · stack ≤ tablet portrait
grid-6 — 6 cols · 3 cols tablet portrait · 2 cols mobile
Form Elements