Design System

The captured foundations and component behavior, with source values kept intact. Examples are interactive previews; they do not deliver requests.

Color

White#ffffff

Cards, panels, inverse copy

Navy#032b3a

Hero scrims and dark brand details

Blue Gray#233d48

Default ink, borders, navigation, icons

Gold#e2a808

Primary actions, rules, selected markers, accents

Gold Hover#f0bb26

Hover fill for ordinary gold CTAs

Gold Ink#8a6603

Small accent copy, inline links, focus indicator

Charcoal#333333

Dark surfaces and strong body copy

Surface Hover#eeece7

Hover fill for pale service-link rows

Soft#f0f0f0

Page ground and secondary surfaces

Typography

Archivo Variable · 500 · 58px desktop / 40px phone · 1.03 line height

AC repair and HVAC service for Phoenix homes.

Archivo Variable · 500 · 44px desktop / 34px phone · 1.08 line height

What does your system need?

Inter Variable · 400 · 18px desktop / 16px phone

Owner-led repair, maintenance, and installation with honest recommendations, fair value, and more than 15 years of HVAC experience.

Both variable fonts are served locally. Heading tracking is −0.025em. Body/UI sizes follow 12, 14, 16, 18, 20, and 24px, with 400/500/600/700 weights.

Spacing and corners

The base spacing unit is 4px. Half steps also occur in the source. Common panel padding is 20–40px; desktop menu columns use 28px.

4px1 × 4px

8px2 × 4px

12px3 × 4px

16px4 × 4px

20px5 × 4px

24px6 × 4px

32px8 × 4px

48px12 × 4px

64px16 × 4px

80px20 × 4px

Element	Radius
Fields / utility controls	4px
Buttons / cards / menu	5px
Image heroes	6px
Contact / privacy panels	8px / 12px
Header booking action	Fully rounded

Buttons and focus

Ordinary gold buttons change to #f0bb26 over 150ms. The booking pill expands its white fill over 480ms while its duplicate label moves −30px over 420ms. Try hover or keyboard focus. Reduced motion removes these transitions.

Form fields

Name

Visual field preview. No details are sent or saved.

48px field height, 16px input type/padding, 4px radius. The dark-field surface is white at 5.5%; its border is white at 28%. Hover raises the border to 48%. Focus uses a gold border and an 8% white fill.

Responsive rules

Boundary	Captured behavior
`640px`	Homepage H1 rises to 52px; hero padding and minimum height increase.
`768px`	Phone action bar hides; catalogue grid becomes two columns.
`1024px`	Desktop nav/booking action appear; catalogue becomes four columns; homepage H1 becomes 58px.
`1280px`	Header telephone link appears.

Hero maximum width: 1380px. Navigation maximum width: 1202px. Contact panel: 380px; privacy panel: 720px. Safe-area padding keeps the phone actions clear of the device edge.

Accessibility patterns

The captured source uses native landmarks, one H1 per page, a keyboard skip link, labelled fields, native validation, live status messages, Escape handling, and reduced-motion rules. The default focus ring is 2px gold-ink with a 2px offset; components on dark grounds use their own white/gold overrides.

Gold on the pale page ground is not suitable for small reading text. The source has some low-contrast proof labels and commercial numerals; those are documented source limitations, not an accessibility certification.

Download design tokens