Style Guide
Typography
Font Families
Instrument Serif
Display headings / h1 (font-display)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog (Italic)
Degular Text
Headings h2-h6, UI elements, buttons, navigation (font-sans)
Medium 500 — The quick brown fox jumps over the lazy dog
Semibold 600 — The quick brown fox jumps over the lazy dog
Bold 700 — The quick brown fox jumps over the lazy dog
FreightText Pro
Body text — paragraphs, lists, content areas (font-serif)
Book 400 — The quick brown fox jumps over the lazy dog
Book Italic — The quick brown fox jumps over the lazy dog
Semibold 600 — The quick brown fox jumps over the lazy dog
Display Headings
Instrument Serif, weight 400. H1 uses text-size-display automatically. Use .display-* classes for non-H1 elements.
| Token | Desktop | Mobile | Class / Element |
|---|---|---|---|
size-display | 90px | 50px | h1 (auto) |
size-display-lg | 72px | 45px | .display-lg |
size-display-md | 64px | 40px | .display-md |
size-display-sm | 45px | 32px | .display-sm |
size-display-xs | 35px | 26px | .display-xs |
h1 / size-display (90px / 50px)
Root Structure
.display-lg (72px / 45px)
Display Large
.display-md (64px / 40px)
Display Medium
.display-sm (45px / 32px)
Display Small
.display-xs (35px / 26px)
Display Extra Small
Component Headings
Degular Text, auto-applied via semantic HTML tags. Negative letter-spacing (-0.04em) for h2-h5, positive (+0.04em uppercase) for h6.
| Element | Desktop | Mobile | Weight | LH | LS | Other |
|---|---|---|---|---|---|---|
h2 | 45px | 30px | 500 | 1.1 | -0.04em | — |
h3 | 30px | 22px | 600 | 1.1 | -0.04em | — |
h4 | 28px | 24px | 500 | 1.1 | -0.04em | — |
h5 | 25px | 20px | 500 | 1.2 | -0.04em | — |
h6 | 16px | 16px | 600 | 1.1 | +0.04em | uppercase |
h2 — 45px / 30px, Medium 500
Heading Two
h3 — 30px / 22px, Semibold 600
Heading Three
h4 — 28px / 24px, Medium 500
Heading Four
h5 — 25px / 20px, Medium 500
Heading Five
h6 — 16px / 16px, Semibold 600, Uppercase
Heading Six
Body Typography
FreightText Pro, weight 400. Base <p> is 18px/16px. Use .p-* classes for variants.
| Token | Desktop | Mobile | Class |
|---|---|---|---|
size-p-xl | 35px | 28px | .p-xl |
size-p-lg | 24px | 20px | .p-lg |
size-p | 18px | 16px | <p> (auto) |
size-p-sm | 14px | 14px | .p-sm |
size-p-xs | 12px | 12px | .p-xs |
.p-xl (35px / 28px)
Root Structure is a small woodworking and landscaping company based in Omaha, Nebraska.
.p-lg (24px / 20px)
We specialize in custom outdoor structures, pergolas, decks, and landscape design that blends natural materials with modern craftsmanship.
Base <p> (18px / 16px)
Our team brings over 15 years of experience to every project, from initial consultation through final walkthrough. Bold text appears like this and links look like this.
.p-sm (14px / 14px)
This is smaller supporting text for captions, metadata, dates, or secondary information.
.p-xs (12px / 12px)
Extra small text for fine print, spec labels, and micro-copy.
UI Typography
Degular Text Semibold (600). Used for buttons, subtitles, micro-labels, and spec text.
| Token | Size | LS | Use |
|---|---|---|---|
size-ui-subtitle | 18px | 0.2em | Section subtitles, overlines |
size-ui-button | 16px | 0 | Buttons, nav items |
size-ui-micro | 14px | 0.2em | Tags, badges, micro-labels |
size-ui-spec | 12px | 0 | Spec text, code labels |
size-ui-subtitle (18px, LS 0.2em)
Section Subtitle
size-ui-button (16px)
size-ui-micro (14px, LS 0.2em)
Micro Label
size-ui-spec (12px)
Spec Text
List Examples
Unordered List
- Custom pergolas, decks, and outdoor structures
- Landscape design and installation
- Hardscaping and retaining walls
- Seasonal maintenance and care plans
Ordered List
- Initial consultation and site assessment
- Design concepts and material selection
- Project timeline and proposal
- Build and final walkthrough
Colors
Brown Family
Brown
#60471D
brand-brown
Brown Dark
#4D3817
brand-brown-dark
Brown 80%
80% opacity
brand-brown/80
Brown 40%
40% opacity
brand-brown/40
Green Family
Forest Green
#5A823B
brand-green
Green Dark
#476B2E
brand-green-dark
Sage
#D3DF97
brand-sage
Green 20%
20% opacity
brand-green/20
Neutrals
Cream
#F7F5ED
brand-cream
White
#FFFFFF
white
Border Line
#D4D4D4
border-line
Black
#000000
black
Effects
Border Radius
rounded-sm
4px
rounded-md
8px
rounded-lg
12px
rounded-pill
999px
Shadows
Subtle
Hover hints, light elevation
shadow-subtle
Card
Cards, elevated surfaces
shadow-card
Elevated
Modals, overlays, dropdowns
shadow-elevated
Interactive Elements
Buttons
Light Background
Dark Background
Links
Paragraph Links
This is a paragraph with a link inside it that transitions to a darker green on hover. Here is another link to verify consistency.
Links on Dark Background
Spacing
Content Grid
The site uses a .full / .content container system. Content area is 90vw with 5vw margins on each side. Vertical border lines mark the content edges.
| Class | Width | Use |
|---|---|---|
.full | 100% | Full-width section wrapper |
.content | 90vw | Content-width container |
.content-frame | 90vw (absolute) | Positioned content boundary |
Common Spacing Values
| Use | Desktop | Mobile | Tailwind |
|---|---|---|---|
| Module padding (vertical) | 80px | 48px | py-12 lg:py-20 |
| Section gap | 64px | 40px | mb-10 lg:mb-16 |
| Component gap | 32px | 24px | gap-6 lg:gap-8 |
| Element gap | 16px | 12px | gap-3 lg:gap-4 |