Roofhub

Overview

Roofhub is a professional roofing services brand that combines technical expertise with energetic, approachable design. The aesthetic is "Confident Craftsmanship"—a visual language that balances the trustworthiness of established expertise with the dynamism of a modern, action-oriented service provider. The brand serves homeowners and commercial property managers seeking reliable roofing solutions, and the UI evokes both competence and accessibility: you're in capable hands, and getting a quote is straightforward. The color palette anchors on a vibrant burnt-orange primary (#f26a21) paired with a clean white canvas and supporting blues, creating visual energy without sacrificing professionalism. Voice: direct, reassuring, and practical. The brand speaks in clear, benefit-focused language without jargon. Example sentence: "Licensed team, fast inspection, quality materials—your roof gets the attention it deserves."

Colors

The color system is built on a light, professional foundation with a bold accent strategy. Primary (#f26a21, burnt-orange) is the signature action color, used exclusively on CTAs (buttons), key links, and accent elements like the hero tagline highlight. This warm, energetic orange conveys reliability and forward momentum—the color of a hard hat and a job well done. On-primary is pure white (#ffffff) for maximum contrast and legibility on the orange. Primary-container (#ffe4d0, pale peach) and on-primary-container (#8b3d0f, dark brown) form a softer pair for secondary actions and informational contexts. Secondary (#0693e3, vivid cyan-blue) supports data visualization and secondary CTAs, while tertiary (#9b51e0, vivid purple) is reserved for accent highlights and status indicators. The surfa

Typography

The type system pairs Manrope (headlines, display) with Instrument Sans (body, UI) and Inter (labels, buttons), creating a three-tier hierarchy that balances personality with clarity. Manrope's geometric, modern letterforms convey professionalism and forward-thinking energy; it's used at large sizes (56px for display, 40px for headline-lg) with tight line-height (64px, 48px) and negative letter-spacing (-0.02em, -0.015em) to create visual impact on hero sections and page titles. Instrument Sans provides warm, accessible body copy at 18px (body-lg) and 16px (body-md) with generous line-height (28px, 24px) and subtle positive letter-spacing (0.01em) for comfortable reading. Inter handles all interactive labels and buttons at 14px (label-md) and 12px (label-sm) with increased letter-spacing (

Layout

The layout follows a 12-column fluid grid with a fixed max-width of 1140px, centered on the viewport. The hero section uses a two-column split (1fr 1fr) with 40px gap, left column for text and CTAs, right column for hero imagery. Vertical spacing is semantic: 80px padding top/bottom for hero sections, 40px (lg spacing) for section separation, 24px (md spacing) for component grouping, and 12px (sm spacing) for internal component padding. The gutter (24px) is applied consistently to all horizontal container padding. White-space is generous—never crowd elements; use the lg spacing token liberally between major sections to create breathing room. Cards and containers use 24px internal padding (md spacing) with 12px gaps between child elements. The container max-width of 1140px ensures comfortab

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dark overlays or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and subtle separators, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and interactive elements, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. Buttons use md elevation by default to signal interactivity. On hover, cards transition from sm to md shadow with a 200ms ease-out timing function. Input fields and form containers use a 1px solid border in outline-variant (#c4c4c4) i

Shapes

The shape philosophy is "Approachable Precision"—rounded corners signal friendliness and modernity, but not so much that the design feels soft or imprecise. Buttons use the full radius (40px, {rounded.full}) to create pill-shaped CTAs that feel inviting and clickable. Cards and containers use md radius (0.75rem, 12px) for a subtle, professional roundness. Input fields use DEFAULT radius (0.5rem, 8px) for a balanced, neutral appearance. Accent lines and dividers are sharp (2px radius or none) to maintain visual hierarchy. The 40px button radius is the most distinctive shape token—it's used on a

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#f26a21) background with white text, 12px vertical / 24px horizontal padding, 44px height, and full (40px) border-radius. On hover, the background darkens to #e55a0f with a 200ms ease-out transition and md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Active state uses #d04a00. Secondary buttons are transparent with a 2px solid primary border, same padding and height, and on hover shift to primary-container background (#ffe4d0) with on-primary-container text (#8b3d0f). All buttons use {typography.label-md} (Inter, 14px, 600 weight, 0.02em letter-spacing) for consistent labeling.

Containers & Surfaces Cards use surface-container background (#eeeeee) with md radius (12px), md paddi

Do's and Don'ts

**Do**

• Do use the primary orange (#f26a21) exclusively on CTAs and key interactive elements—it's the brand's signature accent and must remain distinctive.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and buttons to signal interactivity; transition over 200ms ease-out.
• Do pair Manrope headlines with Instrument Sans body copy; the contrast between geometric and warm creates visual interest and hierarchy.
• Do use the full 40px border-radius on all buttons; it's the most recognizable shape token and signals modern, approachable design.
• Do maintain generous white-space: use lg spacing (40px) between major sections and md spacing (24px) for component grouping.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels over photographic backgrounds to ensure legibility.

**Don't**

• Don't use the primary orange on non-interactive elements or backgrounds; it must remain reserved for CTAs to maintain visual hierarchy.
• Don't mix Manrope and Instrument Sans at the same size or weight—use Manrope for headlines (28px+) and Instrument Sans for body (18px and below).
• Don't apply sharp 0px border-radius to interactive elements; use at least DEFAULT (8px) to maintain the approachable, modern aesthetic.
• Don't use dark shadows (lg elevation) on cards at rest; reserve lg shadows for modals and floating panels only.
• Don't crowd components; respect the gutter (24px) and spacing tokens—cramped layouts undermine the professional, trustworthy brand voice.
• Don't introduce new accent colors; secondary (cyan-blue) and tertiary (purple) are supporting roles only—primary orange must dominate interactive design.