Design Reference
Brand Guide
Living reference for every visual decision on the West Over Woods Construction website. Check this page before styling any component or page.
Logo
Source: src/assets/images/branding/West-Over-Woods-Construction-logo.png
Brand Colors
Primary
#43a942 var(--color-primary) Primary green — hover states, active states. Not for text on light backgrounds (fails WCAG).
Secondary
#107139 var(--color-secondary) Dark green — button backgrounds, eyebrow text, links, emphasis. Passes WCAG AA on all light backgrounds.
Accent
#012104 var(--color-accent) Deepest green — headings, dark sections, high contrast
Light
#EAF7EB var(--color-light) Tinted background — hero sections, navbar, light fills
Border
#D0EBCF var(--color-border) Pale sage — borders, dividers, subtle separation
Dark
#151716 var(--color-dark) Near-black — body text, dark UI elements
Neutral Palette
Neutral
#f9f9f9 var(--color-neutral) Off-white — footer, alternating section backgrounds
Base 100
#ffffff var(--color-base-100) White — primary page background
Base 200
#f2f2f2 var(--color-base-200) Light gray — hover states, code backgrounds
Base 300
#e5e5e5 var(--color-base-300) Mid gray — borders, disabled states
Typography
Headings
Montserrat
'Montserrat', sans-serif Bold (700) — all h1–h5 elements
Body
Lato
'Lato', sans-serif Regular (400) — body text, line-height 1.8
UI / Buttons
Source Sans 3
'Source Sans 3', sans-serif Semibold (600) — buttons, nav, eyebrows, h6
Type Scale
4.1rem / 70px · 700
Expert Residential Construction
2.94rem / 50px · 700
Rooted in the Willamette Valley
1.88rem / 32px · 700
Direct & Accountable Management
1.64rem / 28px · 700
Build Smarter, Waste Less
1.41rem / 24px · 700
The Master's Eye for Detail
0.94rem / 16px · 600
Core Values
1.0625rem / 17px · 400
West Over Woods Construction is a certified, family-run business serving the greater Willamette Valley and the Northern Coast.
Buttons
Primary
.btn .btn-primary Background: var(--color-secondary) → hover: var(--color-primary)
Outline
.btn .btn-outline Ghost
.btn .btn-ghost White (for dark sections)
.btn .btn-white Light (for image overlays)
.btn .btn-light Background: var(--color-light) → hover: white. Used in CtaFooter on photo backgrounds.
Button Specs
- Font: Source Sans 3, 600 weight, 1.05rem
- Padding: 15px 30px
- Border-radius: 8px
- Transition: background-color, border-color, color — 200ms ease-in-out
- States: hover, focus-visible (2px outline), active
Section Backgrounds
.section-light — var(--color-light) #EAF7EB — hero, CTA sections .section-neutral — var(--color-neutral) #f9f9f9 — about, alternating sections .section-dark — var(--color-accent) #012104 — values, quotes .bg-base-100 — #ffffff — default content sections Components
Eyebrow
Core Values
.eyebrow Source Sans 3, 600, uppercase, 0.08em tracking, var(--color-secondary). On dark sections, override with !text-primary.
Card
Card Title
Cards use bg-base-100 with a subtle border (var(--color-border)) and shadow-card. Padding: 2rem. Border-radius: 0.75rem.
.card background + border + shadow-card + rounded-xl + p-8
Process Card
Used inside the ProcessSection component on every service page. Section background is bg-secondary, card background is bg-light, number badge is bg-secondary, heading is text-accent.
Design & Planning
We discuss your vision, develop detailed plans, and handle permits so every phase of the project meets Oregon code.
Execution
We execute the work with owner oversight, keeping you informed at every step and protecting your home throughout.
Service Card
Link card for a service. Square image flush to the left edge, label and arrow on the right. Image is sourced from the centralized
SERVICE_IMAGES map in
src/data/service-images.ts,
keyed by the service slug. Updating a service page's hero image updates every card that links to it. Used on the About page services grid, in the RelatedServices block, and anywhere a service needs to be surfaced with imagery.
<ServiceCard label="Kitchen Remodeling" href="/services/kitchen-remodeling/" />
Props: label (string), href (string, must be a key in SERVICE_IMAGES), alt (optional override), imageSize (optional, default 112px).
Separator
.separator 3rem wide, 3px tall, var(--color-primary)
Article / Prose Image
All images inside article prose (tips, guides, case studies) use rounded-xl corners and shadow-lifted. Applied globally via .prose img in global.css. The same treatment applies to the tip/article hero image rendered above the prose block.
/* global.css — auto-applied to all prose images */ .prose img { border-radius: 0.75rem; box-shadow: var(--shadow-lifted); width: 100%; } /* Astro Image component — hero image above article */ class="rounded-xl shadow-lifted w-full object-cover aspect-[16/9]" Shadows
shadow-soft Dropdowns, subtle depth
shadow-card Cards, content blocks
shadow-lifted Images, featured content
shadow-deep Modals, overlays
Contrast Reference (WCAG AA)
Minimum 4.5:1 for normal text, 3.0:1 for large/bold text. All pairings below pass AA.
On Light Backgrounds (Light, Border, White)
- Eyebrow text: var(--color-secondary) #107139 — 5.5:1+ on all light surfaces
- Headings: var(--color-accent) #012104 — 15.6:1+
- Body text: var(--color-dark) #151716 — 9.7:1+
- Avoid: var(--color-primary) #43a942 for text — only 2.7:1 on light backgrounds
On Dark Sections (Accent #012104)
- Eyebrow text: var(--color-primary) #43a942 — 5.7:1
- Headings / body: white — 15.6:1+
- Muted text: white/80 minimum for body, white/60 for tertiary info
Footer (Secondary #107139 bg)
- Section headings: white/90 — 4.9:1
- Body / links: white/80 — 3.8:1 (passes for bold/semibold text)
- Muted / copyright: white/70 — 2.9:1 (acceptable for decorative, not critical info)
Spacing & Layout
- Max container width: 1200px
- Section padding: 5rem top/bottom (80px), 1rem sides (scales to 2.5rem on desktop)
- Content padding: px-4 (mobile) → md:px-10 (desktop)
- Grid gaps: gap-6 (images), gap-8 (cards/values), gap-12 (two-column layouts)
- Bottom margins: mb-4 (tight), mb-6 (standard), mb-8 (generous), mb-12 (section intros)
