613 Garage Door Repair

Overview

613 Garage Door Repair is a locally owned Ottawa service brand that transforms emergency garage door problems into confident, same-day solutions. The design system embodies **Confident Minimalism**—a no-nonsense aesthetic that pairs a bold, warm red accent (#c9302c) with crisp cool neutrals (ink #0f1114, gray-700 #3d434c) and clean sans-serif typography. The brand personality is direct, trustworthy, and action-oriented: technicians show up on time, fix it right, and back their work with a real warranty. The UI evokes reliability through bold headlines (Inter 800 weight, -0.03em letter-spacing), generous white space, and a red CTA button that commands attention without shouting. Voice: precise, honest, never corporate-speak. Example: 'Your spring broke—keep the door closed and call us. We'll be there same-day with a free written estimate.'

Colors

The color system is built on a **warm-cool contrast model**. Primary red (#c9302c) is the signature accent—used exclusively on CTAs, active states, and brand moments—paired with its darker variant (#a52521) for hover states and depth. The surface stack uses cool grays: surface-dim (#f7f8fa) for subtle backgrounds, surface-container (#d1d5da) for dividers, and on-surface (#1f242b) for body text at 16px. The inverse stack (inverse-surface #0f1114, inverse-on-surface #d8dae0) powers dark overlays on hero images and modals, with a semi-transparent overlay gradient (rgba(15,17,20,0.80) to rgba(15,17,20,0.10)) creating depth without obscuring the background image. Secondary amber (#b8862b) and tertiary gold (#e6a817) are reserved for trust badges and star ratings. Error states reuse primary red

Typography

Inter is the sole typeface, loaded at weights 400, 500, 600, 700, 800, 900 via Google Fonts. The type hierarchy is built on **aggressive letter-spacing reduction** to convey confidence: display (60px, 800 weight, -0.03em) for hero headlines, headline-lg (40px, 700 weight, -0.02em) for section titles, and body-md (16px, 400 weight) for body copy at 24px line-height. All headings use line-height 1.1–1.2 to feel compact and punchy. Labels use 600 weight with +0.01em letter-spacing for clarity on small surfaces. On hero overlays and dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to white text to ensure legibility over photographic backgrounds. The lead paragraph uses 18px body-lg at 1.65 line-height with on-surface-variant color (#5b626c) to create visual hierarchy without r

Layout

The layout uses a **12-column fluid grid** with a fixed container max-width of 1200px and 28px horizontal gutters on mobile/tablet, scaling to 40px on desktop. Sections use 84px vertical padding (56px on mobile) to create breathing room between content blocks. The hero section spans full viewport height with a dark overlay gradient (105deg, rgba(15,17,20,0.80) to rgba(15,17,20,0.10)) over a background image, positioning the h1 and lead copy in the left 60% of the viewport. Trust bars and metric bands use 24px internal padding with surface-container-lowest (#f2f4f6) backgrounds. Cards are laid out in a 3-column grid on desktop, 2 columns on tablet, 1 column on mobile, with 24px gaps. The sticky navigation (height 76px) uses backdrop-filter: saturate(180%) blur(14px) with rgba(255,255,255,0.

Elevation & Depth

Depth is conveyed through **layered shadows and backdrop blur**, not color darkening. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards/Inputs): 0 1px 2px rgba(15, 17, 20, 0.06) with 1px solid border at surface-container-low (#e6e9ed). Level 3 (Buttons/Hover): 0 4px 14px rgba(201, 48, 44, 0.22) on primary buttons, lifting on hover to 0 8px 22px rgba(201, 48, 44, 0.30) with transform: translateY(-1px). Level 4 (Modals/Overlays): 0 12px 32px rgba(15, 17, 20, 0.10) with a semi-transparent dark backdrop (rgba(10, 10, 10, 0.35)). Hero section uses a multi-stop gradient ove

Shapes

The shape system follows **Geometric Precision**—a balance between sharp functionality and subtle approachability. Buttons and inputs use 6px border-radius (DEFAULT) for a modern, slightly rounded square feel that avoids both harsh corners and excessive softness. Cards and larger containers use 10px (md) for a more pronounced roundness. Hero badges and small UI elements use 3px (sm) for precision. Full-width badges and pill-shaped elements use 9999px (full) for maximum roundness. The rationale: 6px feels contemporary and tech-forward without being trendy, 10px adds visual weight to card contai

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses background #c9302c, white text, 14.4px vertical padding, 26.4px horizontal padding, 6px border-radius, and box-shadow 0 4px 14px rgba(201, 48, 44, 0.22). On hover, the background shifts to #a52521, shadow increases to 0 8px 22px rgba(201, 48, 44, 0.30), and the button lifts via transform: translateY(-1px) over 200ms cubic-bezier(0.22, 0.61, 0.36, 1). **button-primary-lg** scales to 56px height with 32px horizontal padding for hero CTAs. **button-ghost-light** is used on dark overlays: background rgba(255, 255, 255, 0.08), white text, 1.5px border at rgba(255, 255, 255, 0.28), and on hover shifts to rgba(255, 255, 255, 0.16) with border rgba(255, 255, 255, 0.5). All buttons use Inter 600 weight at 14px

Do's and Don'ts

**Do**

• Do use primary red (#c9302c) exclusively on CTAs, active navigation links, and error states—never on passive elements or backgrounds.
• Do apply box-shadow 0 4px 14px rgba(201, 48, 44, 0.22) to all interactive elements on hover, paired with transform: translateY(-1px) for tactile feedback.
• Do use Inter 800 weight for hero headlines with -0.03em letter-spacing to convey confidence and authority.
• Do maintain 28px horizontal gutters on mobile and 40px on desktop to ensure readability and breathing room.
• Do use backdrop-filter: blur(8px) on overlay badges and ghost buttons to create depth without adding visual noise.

**Don't**

• Don't use red on non-interactive elements, backgrounds, or decorative surfaces—it dilutes the CTA signal.
• Don't apply border-radius > 10px to buttons or inputs; keep them geometric and precise (6px DEFAULT).
• Don't use system fonts or serif typefaces; Inter is the sole typeface across all weights and sizes.
• Don't reduce letter-spacing on body copy below 0em; maintain readability at 16px body-md.
• Don't apply shadows to flat surfaces or hero sections; reserve elevation for cards, buttons, and overlays only.