Clune Construction

Overview

Clune Construction's design system embodies **Industrial Precision with Human Warmth**—a brand aesthetic that reflects the company's role as a national general contractor delivering data center and commercial interiors projects. The visual language combines bold construction-industry red (#d22d1f) with clean, purposeful typography in Aeonik and abundant white space (surface: #ffffff). The brand personality is confident yet approachable: the UI conveys expertise and accountability without coldness. The emotional response is one of trust and capability—users feel that Clune understands complex projects and will execute them with integrity.

The voice is direct, professional, and grounded in action. Clune speaks in concrete terms: "We deliver exceptional client experience through integrity, accountability, and precision." Vocabulary favors clarity over flourish—"perfect project," "employee owner," "building the future." The brand avoids jargon when possible and explains technical concepts in accessible language. Example sentence in Clune's voice: "Our data center expertise spans 500+ megawatts of mission-critical infrastructure—built on time, on budget, on spec."

Colors

The color system is anchored by **Primary Red (#d22d1f)**, the signature accent used on all call-to-action buttons, active states, and brand-critical interactive elements. This warm, confident red appears on the "Sign up" and "Contact" CTAs, establishing visual hierarchy and guiding user attention. Secondary Blue (#1863dc) supports navigation and secondary actions, while Tertiary Green (#008000) is reserved for status indicators and success states. The surface stack is deliberately light and neutral: pure white (#ffffff) as the base, with subtle grays (#f4f4f4, #ebebeb, #e0e0e0) for container hierarchy. On-surface text is near-black (#0f0f0f), ensuring 16:1 contrast for accessibility. Error states use #e40101 for critical warnings. The outline color (#212121) is used for borders and divide

Typography

The type system uses **Aeonik** exclusively across all scales, a geometric sans-serif that conveys modernity and precision—fitting for a construction-tech brand. Display (80px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (48px, 700 weight) is used for section titles and key messaging. Headline-md (32px, 700 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for longer-form content, with generous line-height for legibility. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 700 weight, 0.01em tracking) is applied to buttons, form labels, and UI microcopy. Label-sm (12px, 700 weight, 0.05em tracking) is used for badges, captions, and se

Layout

The layout follows a **12-column grid system** with a max-width of 1280px, providing a structured yet flexible canvas for content. The gutter is 24px, applied consistently between columns and sections. White space is treated as a design element, not wasted space: sections are separated by 40px (lg spacing) vertically, creating rhythm and preventing cognitive overload. Container padding uses 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 4px (xs spacing) on mobile. The hero section spans full-width with a background image overlay, using the full viewport height to establish presence. Card-based layouts use 12px (sm spacing) for internal padding on smaller cards, 24px (md spacing) for standard cards, and 40px (lg spacing) for major content blocks. Fluid typography

Elevation & Depth

Depth is conveyed through **subtle shadow layering and strategic use of surface containers**, avoiding heavy drop-shadows that would feel dated. Level 1 (Base): The white surface (#ffffff) is the foundation, with no shadow. Level 2 (Standard Card): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift from the background. This shadow is applied to all .card elements and input fields to indicate they are interactive or contain grouped content. Level 3 (Elevated/Hover): On hover, cards transition to box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), signaling interactivity and invit

Shapes

The shape philosophy is **Geometric Precision with Approachable Softness**—reflecting construction's need for exactitude while maintaining human accessibility. Buttons use full-radius (50px border-radius) to feel friendly and clickable, with padding of 8px 30px to create a compact, action-oriented form factor. Cards and containers use 6px (md radius) for a subtle roundness that softens the grid without feeling organic or playful. Input fields also use 50px radius to match button styling, creating visual cohesion in form layouts. Smaller UI elements like badges use full-radius (50px) to emphasi

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses backgroundColor: {colors.primary} (#d22d1f), textColor: white, rounded: 50px, padding: 8px 30px, height: 44px, and fontWeight: 700 (label-md typography). On hover, the background shifts to {colors.primary-container} (#ff5c4e), maintaining warmth while signaling interactivity. The transition occurs over 200ms (ease-out). On active/pressed state, the background darkens to #b8251a, providing tactile feedback. **button-secondary** uses transparent background with a 2px solid border in primary red, textColor in primary red, and the same rounded/padding/height specs. On hover, the background fills with {colors.surface-container-low} (#f2f2f2), creating a subtle fill effect. Secondary buttons are used fo

Do's and Don'ts

**Do**

• Do use primary red (#d22d1f) exclusively for primary CTAs and high-priority interactive elements—it's the brand's signature and should never be diluted or overused.
• Do maintain 24px (md spacing) as the default padding/margin for cards and sections; this rhythm is fundamental to the system's visual coherence.
• Do apply Aeonik at 700 weight for all headlines and button text; the bold geometric forms reinforce confidence and precision.
• Do use the full-radius (50px) border-radius on buttons and inputs to create a consistent, friendly interaction model.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-out timing to feel responsive without being jarring.
• Do maintain 16:1 contrast between on-surface (#0f0f0f) and surface (#ffffff) for WCAG AAA accessibility compliance.

**Don't**

• Don't use secondary blue (#1863dc) or tertiary green (#008000) as primary CTAs—they dilute the brand's signature red and confuse visual hierarchy.
• Don't apply shadows heavier than 0 15px 25px rgba(0, 0, 0, 0.1); deeper shadows feel dated and contradict the modern, clean aesthetic.
• Don't mix typefaces; Aeonik is the sole font family across all scales. Mixing introduces visual chaos and undermines the geometric precision.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 6px, lg: 8px, xl: 20px, full: 50px); arbitrary radii break the system's coherence.
• Don't place small text (label-sm) over photography without applying text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) for legibility.
• Don't reduce padding below 8px on buttons or 10px on inputs; tighter spacing feels cramped and reduces touch-target accessibility.