chesco/DESIGN.md

name, description, colors, typography, layout, principles

name	description	colors	typography	layout	principles
Bold Industrial	A high-impact, industrial-grade design system built for reliability and professional grit. It balances a clean light-mode foundation with heavy typography and bold navy and orange accents.	surface brand text border primary secondary contrast #ffffff #f1f1f1 #0a162b primary secondary accent #0a162b #f9a825 #f39c12 primary secondary on-dark #000000 #4b5563 #ffffff subtle strong #e5e7eb #0a162b	font-family headings body Metropolis, sans-serif style h1 h2 h3 Heavy, Uppercase 64px / 1.1 48px / 1.2 24px / 1.3 style size Normal 16px / 1.6	spacing-unit container-max-width border-radius 8px 1200px 4px	High Impact Use large, bold typography to communicate strength. Functional Clarity Clear service grids and high-contrast call-to-actions. Regional Pride Large watermark typography for location-based identity.

Bold Industrial Design System

This document outlines the visual identity for Chester Valley Home Services.

Visual Tone

The "Bold Industrial" style is designed to look tough, reliable, and established. It moves away from generic corporate aesthetics in favor of a specialized, high-performance look that resonates with homeowners looking for professional grade work.

Color Usage

• Deep Navy (#0a162b): Used for headers, footers, and primary buttons to establish authority.
• Industrial Orange (#f9a825): Used for primary CTAs and status highlights.
• White (#ffffff): The primary background for maximum legibility in light mode.

Components

Buttons

• Primary: Solid Deep Navy with White text, minimal 4px radius.
• Secondary: Solid Industrial Orange with Black text.
• Ghost: Deep Navy border with Navy text.

Cards

• Service cards should use thin borders (#e5e7eb) and generous internal padding (32px).
• Iconography should be simple, single-color glyphs.