The Overlake School

Overview

The Overlake School design system embodies Institutional Warmth—a visual language that balances academic authority with human approachability. The brand serves families and educators seeking a college-preparatory environment rooted in inclusive community values. The aesthetic draws from natural materials (deep forest greens, warm golds, soft creams) and institutional typography (Merriweather for headlines, Inter for body) to communicate both rigor and care. The UI evokes a sense of belonging: a place where students discover their authentic path within a supportive ecosystem.

The voice is direct, encouraging, and grounded in specificity. Overlake speaks with the confidence of educators who know their students by name and the warmth of a community that celebrates individual potential. The tone avoids corporate jargon; instead, it uses concrete, human-centered language. Example: 'Our students thrive when they're known—in the classroom, on the field, and in the halls.'

Colors

The color system is rooted in natural authority and warmth. Primary (#fdb813) is a golden accent used exclusively on high-priority CTAs (the 'Menu' button, key links) and interactive focus states—it commands attention without aggression. Secondary (#005829), a deep forest green, anchors the header and establishes institutional trust; it appears in navigation, badges, and secondary buttons. Tertiary (#eb7923), a warm rust-orange, supports secondary actions and highlights (e.g., 'Meet Overlake' CTA). The surface stack (cream #f9f7f0 through charcoal-touched #2d2c2a) provides breathing room and hierarchy without harsh contrast. On-surface text (#21201f) maintains readability at 16px+ body sizes. Error states use a clinical red (#dc3545) only when necessary, paired with light error-container (

Typography

The type system pairs Merriweather (serif, 700 weight) for headlines—evoking institutional gravitas and readability in print—with Inter (sans-serif, 400–700) for body and UI text. Display (60px, -0.04em letter-spacing) anchors hero sections; Headline-lg (40px, 700 weight) introduces major sections; Headline-md (28px, 600 weight) breaks up content. Body-lg (18px, 28px line-height) is used for introductory paragraphs and card descriptions; Body-md (16px, 24px line-height) is the default for body copy and list items. Label-md (14px, 600 weight, 0.05em letter-spacing) is applied to all button text and small UI labels; Label-sm (12px, 500 weight) is reserved for badges and metadata. On small labels over busy backgrounds (e.g., badges on hero images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter is 24px (md spacing token), applied consistently between columns and around container edges. Hero sections span full-width with 40px (lg spacing) vertical padding; card grids use 24px gaps. White-space philosophy: generous margins between sections (lg: 40px) create visual breathing room and guide the eye through content hierarchy. Container padding follows the spacing scale: 24px (md) for standard cards, 40px (lg) for hero sections, 12px (sm) for compact list items. The header is fixed at the top with 13px vertical padding (from computed styles), and the primary CTA ('Menu' button) is positioned at 1138px from the left edge (right-aligned). Section separators use outline-variant (#ccc8c0

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than aggressive drop-shadows. Level 1 (Base): the surface (#f9f7f0) with no shadow, used for body backgrounds and flat content areas. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted containers—this creates gentle separation from the base. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal overlays to signal interaction. Interactive elements (buttons, inputs) use no shadow at rest; on hover, they transition to Level 2 sh

Shapes

The shape philosophy is 'Institutional Softness'—rounded corners that feel approachable without sacrificing formality. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel modern and clickable; secondary buttons use lg (20px) for a softer square. Cards and containers use lg (20px) to balance modern aesthetics with readability. Input fields use DEFAULT (8px) for subtle rounding that doesn't distract. List items and small UI elements use md (16px) for consistency. The header and navigation use no border-radius (0px) to anchor the top of the page. Badges use full (9999px)

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the golden accent (#fdb813) with full rounding (9999px), 11px vertical / 24px horizontal padding, and 44px height. On hover, the background shifts to #ffc400 (inverse-primary) over 200ms; on active, it darkens to #e6a800. The secondary button uses a transparent background with a 2px primary-colored border, lg rounding (20px), and 48px height; on hover, it fills with primary-container (#ffe8a3). The tertiary button (button-tertiary) uses the secondary green (#005829) with DEFAULT rounding (8px) and 40px height; on hover, it darkens to #004620. All buttons use label-md typography (14px, 600 weight, 0.05em letter-spacing) for consistency.

Containers & Surfaces Cards (card component)

Do's and Don'ts

**Do**

• Do use the golden primary (#fdb813) exclusively on high-priority CTAs and interactive focus states—never on body text or backgrounds.
• Do pair Merriweather headlines with Inter body text; never reverse or mix weights beyond the specified scale (Merriweather max 700, Inter 400–700).
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lifted elements; reserve lg shadow for hover states and modals.
• Do use the full spacing scale (xs 4px, sm 12px, md 24px, lg 40px, xl 64px) consistently; never invent intermediate values.
• Do transition all interactive state changes (hover, focus, active) over 200ms cubic-bezier(0.2, 0, 0, 1) for smooth, predictable feedback.

**Don't**

• Don't use the secondary green (#005829) as a primary accent or CTA color—it's reserved for the header, badges, and secondary buttons.
• Don't apply border-radius > 20px to cards or containers; full rounding (9999px) is reserved for buttons and badges only.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear typographic hierarchy.
• Don't use hard shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.3)) or multiple layered shadows; the elevation system uses only md and lg.
• Don't apply the primary gold (#fdb813) to more than 15% of the page; it should feel like a deliberate accent, not a dominant color.