Tokens, typography, components, and layout patterns for delawarewillowbrook.com
All site colors. Terracotta is the primary action color. Forest green and red are semantic (approved/denied). Dark band (#2B2D2B) is used for the header, hero sections, and dark backgrounds.
Montserrat for all headings, labels, and buttons. DM Sans for all body copy. Both self-hosted in production via @fontsource packages — no Google Fonts requests on the live site.
Geometric house silhouette in terracotta with Montserrat wordmark. Three variants: on dark (primary), on cream, on white. Use horizontal lockup in the nav bar; stacked mark optional for favicons and print.
Three button types. Primary (terracotta fill) for main CTAs. Secondary (outlined) for secondary actions. Ghost (light border) for dark backgrounds.
Used on DRB project cards to indicate request frequency and approval status. Semantic colors: green = approved/good, red = denied/not-approved, amber = info/note, blue = new addition.
Standard information card with icon header and content body. Used for project categories in the DRB section. Wide grid (repeat auto-fill 320px) on desktop, single column on mobile.
Three semantic variants for inline information callouts on the DRB page.
Important: HOA approval is separate from city permits. You're still responsible for checking with the City of Delaware or Delaware County if your project requires a building permit.
What's a site plan? A drawing of your lot from a bird's-eye view. A hand-drawn sketch is fine as long as it includes measurements.
By using a fire pit, you agree to hold the HOA harmless from any accidents. Check local fire ordinances — Delaware County may have seasonal burn restrictions.
Used for the DRB application walkthrough. Numbered terracotta circles, card white background.
Nav bar (sticky, dark band) + hero section. Nav links are Montserrat 600 at 78% opacity; active/hover lifts to 100%. CTA button uses terracotta fill.
Standards, meeting info, documents, and the Design Review Board — all in one place for all 213 homeowners.
Used for high-contrast sections (general conditions, key rules). Eyebrow stays terracotta; heading white; body text #ccc.
No matter what you're building or changing, these conditions always apply to your project. Government permits are separate from HOA approval. Call 811 before any digging.