Buro Happold

Overview

Buro Happold's design system embodies Architectural Minimalism—a discipline rooted in precision, clarity, and structural integrity. The brand serves integrated consulting engineers and advisors who transform complex building and city challenges into elegant, value-led solutions. The visual language is deliberately restrained: a pure white canvas (#ffffff) paired with a signature lime-green accent (#c4d600) that commands attention without excess. This high-contrast, functional aesthetic evokes confidence and technical mastery, positioning the firm as both innovative and grounded in engineering rigor.

The brand voice is authoritative yet approachable, speaking in concrete terms about impact and delivery. Tone is direct, avoiding hyperbole; vocabulary favors precision over poetry. Example: 'We deliver integrated solutions that transform buildings and cities—on time, on budget, with measurable environmental benefit.' The personality balances technical depth with human-centered design thinking, reflecting a firm that understands both the mathematics of structures and the lived experience of spaces.

Colors

The color system operates on a principle of maximum contrast and functional clarity. Primary (#c4d600) is the brand's signature accent—a vivid, high-saturation lime-green deployed on call-to-action buttons, key interactive elements, and accent highlights. It appears sparingly but decisively, commanding visual hierarchy without overwhelming. On-primary is pure black (#000000), ensuring WCAG AAA contrast (21:1 ratio) for accessibility and legibility at small sizes.

The surface stack anchors the system in a clean, professional aesthetic: surface (#ffffff) is the dominant canvas, with surface-container variants (ranging from #fafafa to #d8d8d8) providing subtle depth for layered UI elements. On-surface (#212529) is a near-black text color that reads crisply against white without the harshness

Typography

The type system uses a proprietary font family stack (bh-black, bh-medium, bh-light) paired with system fallbacks, creating a distinctive voice that reinforces brand identity. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 700 weight) structures major section breaks. Body text (18px for body-lg, 16px for body-md, both 400 weight) maintains generous line-height (28px and 24px respectively) for readability across devices. Labels and UI text use tighter letter-spacing (0.04–0.05em) to signal hierarchy and draw focus to interactive elements.

When displaying small labels (12px) over busy photographic backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. Headline weights (600–700) are reserved fo

Layout

The layout operates on a 12-column grid with a maximum container width of 1300px, enabling flexible responsive behavior across breakpoints (mobile, tablet, desktop). The grid uses consistent gutter spacing of 24px between columns, with section separation achieved through lg spacing (40px) for major content blocks and md spacing (24px) for nested components. White-space is treated as a design element, not wasted space: generous margins around text blocks (40px vertical, 24px horizontal) create visual breathing room and emphasize content hierarchy.

Container max-widths vary by context (1000px for carousels, 1300px for main content, 1440px for full-bleed sections) to accommodate different content types while maintaining readability. The spacing scale is semantic: xs (4px) for micro-interacti

Elevation & Depth

Depth in this system is conveyed through subtle shadow and border treatments rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on list items, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating overlays and expanded dropdowns. Most surfaces use no shadow (box-shadow: none !important) to maintain the clean, flat aesthetic; shadows are applied sparingly to signal interactivity or modal priority.

Borders provide the primary visual separation: 1p

Shapes

The shape philosophy is Structural Clarity: rounded corners are minimal and purposeful, reflecting the brand's engineering precision. Most UI elements use a tight border-radius of 3.75px (0.25rem converted to px), creating subtle softness without compromising geometric integrity. Buttons, inputs, and cards all use this default radius, maintaining visual consistency across interactive surfaces.

Full-circle radius (50% / 9999px) is reserved for avatar images and badge elements, where the circular form signals personal identity or status. Larger radii (1rem for lg, 1.5rem for xl) appear rarely—o

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #c4d600 background with black text (15px, 600 weight, 48px height, 15px vertical padding, 32px horizontal padding). On hover, the background shifts to #a8b800 (primary-fixed-dim) with a 200ms ease-in-out transition. Button-secondary uses a transparent background with a 1px outline border (#999999) and black text; on hover, the background becomes #e0e0e0 (surface-container-high). Button-ghost is transparent with green text, used for tertiary actions; hover state applies a subtle rgba(196, 214, 0, 0.08) background. All buttons use border-radius: 3.75px and font-family: sans-serif (overriding the body font for UI clarity).

Containers & Surfaces Cards use a white background (#ffffff) with a 1px solid #ccc

Do's and Don'ts

**Do**

• Do use primary green (#c4d600) sparingly on CTAs and key interactive elements—it should command attention through contrast, not frequency.
• Do maintain 24px gutter spacing between grid columns and 40px vertical spacing between major sections to create visual rhythm and readability.
• Do apply 3.75px border-radius consistently across buttons, inputs, and cards to signal approachability without compromising technical authority.
• Do use the bh-medium and bh-black font families for headlines and UI text; reserve bh-light for secondary labels and fine print.
• Do apply md-level shadows (0 3px 8px rgba(0, 0, 0, 0.15)) only to modals and floating elements; keep cards and standard surfaces flat (no shadow).
• Do ensure all text meets WCAG AAA contrast ratios: primary text on white must be #212529 or darker; white text on primary must use pure black (#000000).

**Don't**

• Don't use primary green as a background for large content areas—it should accent, not dominate. Reserve it for buttons, badges, and highlight bars.
• Don't apply border-radius greater than 1.5rem to standard UI elements; the brand's precision is undermined by excessive softness.
• Don't mix font families within a single component; use bh-medium for body and labels, bh-black for headlines, and bh-light only for secondary text.
• Don't add shadows to cards or standard surfaces; shadows are reserved for modals and floating overlays to maintain visual hierarchy clarity.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds unless contrast is verified at WCAG AAA (7:1 ratio minimum).
• Don't exceed 1300px container max-width on desktop; content should remain scannable and readable without excessive line lengths.