CalebLewallen
64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
---
|
|
name: Bold Industrial
|
|
description: 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.
|
|
|
|
colors:
|
|
surface:
|
|
primary: '#ffffff'
|
|
secondary: '#f1f1f1'
|
|
contrast: '#0a162b'
|
|
brand:
|
|
primary: '#0a162b' # Deep Navy
|
|
secondary: '#f9a825' # Industrial Orange
|
|
accent: '#f39c12'
|
|
text:
|
|
primary: '#000000'
|
|
secondary: '#4b5563'
|
|
on-dark: '#ffffff'
|
|
border:
|
|
subtle: '#e5e7eb'
|
|
strong: '#0a162b'
|
|
|
|
typography:
|
|
font-family: 'Metropolis, sans-serif'
|
|
headings:
|
|
style: 'Heavy, Uppercase'
|
|
h1: '64px / 1.1'
|
|
h2: '48px / 1.2'
|
|
h3: '24px / 1.3'
|
|
body:
|
|
style: 'Normal'
|
|
size: '16px / 1.6'
|
|
|
|
layout:
|
|
spacing-unit: 8px
|
|
container-max-width: 1200px
|
|
border-radius: 4px # Industrial/Geometric sharp corners
|
|
|
|
principles:
|
|
- 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. |