Style Guide
Brand
Colors
Primary
#1b1b1b
Primary Dark
#000000
Secondary
#5c5d5b
Accent
#267373
Coconut
#8B5A2B
Gray
#f7f7f5
Brand
Typography
Poppins — Headings
H1
Heading One
H2
Heading Two
H3
Heading Three
H4
Heading Four
Roboto — Body
Body (base)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Body Large (prose-lg)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Eyebrow
Eyebrow Text
Components
Prose Content
This is how WordPress content renders inside .prose. Body text uses Roboto at a comfortable reading size with relaxed line height.
A Subheading
Paragraphs have consistent bottom margin. Links look like this and transition on hover. The prose container is capped at the content width for readability.
- Unordered list item one
- Unordered list item two
- Unordered list item three
Another Subheading
- Ordered list item one
- Ordered list item two
- Ordered list item three
This is a blockquote. It uses a left accent border and italic styling to stand apart from body text.
Layout
Spacing & Layout
Container Widths
.container-narrow — 800px
.container — 1200px
Section Spacing
.section — py-16 / md:py-24
.section-sm — py-12 / md:py-16