Step 1 — Design tokens v2 · awaiting approval

Around the Clock
Token Sheet

Three surfaces — yellow, white, ink — and one accent, the logo's orange→amber ramp. Yellow is now the primary button fill with ink lettering (16.2:1). Ink is a full section background, not just type. Every pair below is measured against WCAG 2.2 AA.

01

Color

Surfaces + accent

Aa
brand-yellow #FFEC00 Section surfaces and the primary button fill. Always paired with ink lettering — never white, never as text itself.
Aa
ink #0B0B0B All body copy and headings, and a full-bleed section background (nav bar, video panel, footer).
Aa
logo-ramp #FFC400 → #F58220 → #F26522 Lifted from the ATC seal. Accent rules, active-state underlines, urgency badges, hover on dark. Ink text only (6.2–12.3:1).
Aa
paper #FFFFFF Default reading surface, card fill, secondary button fill.

Neutrals + states

gray-100
#F4F4F2
Alt band, input rest fill
gray-300 / gray-400
#D9D9D5 · #8F8F8A
gray-300 decorative only (1.4:1). Control boundaries use gray-400 (3.25:1) or gray-600.
gray-600
#5A5A55
Secondary text on white only (6.9:1)
success
#1B6B3A
Form confirmation, "phones answered now"
error
#B3261E
Inline validation, white surfaces only

Approved pairs (measured)

Ink on yellow
16.2:1 — type and button labels
Ink on white
19.7:1 · gray-600 6.9:1
Yellow on ink
16.2:1 · white on ink 19.7:1
Ink on logo-ramp
12.3:1 at amber → 6.2:1 at deep orange
White on yellow Banned · 1.22:1
Yellow on white Banned · 1.22:1
White on logo-ramp Banned · 2.6:1
Orange on yellow Banned · 2.6:1

The ramp is a surface and rule color, not a text color: on white, orange text is used only at #C2410C (5.18:1) for link hover.

02

Type

Display face
Archivo Black
Heavy, wide, billboard-adjacent — matches the existing hero lettering without imitating it. Headings only, never body.
UI face
Archivo 400/500/600/700
Body, labels, buttons, nav. Same family skeleton as the display face, so the pairing never fights.
TokenSpecimenSizeLine height
display Your wife is hot clamp(2.5rem, 1.4rem + 3.4vw, 4rem) 1.00
h1 24/7 A/C repair in South Florida clamp(2rem, 1.3rem + 2.2vw, 2.75rem) 1.08
h2 Why Choose Around the Clock clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem) 1.15
h3 Residential A/C 1.3125rem / 21px fixed 1.25
body Phones answered 24/7, 365 days. Family-owned for more than 42 years. Same-day service and installation. 1.0625rem / 17px (min 16px) 1.55
meta Lic. CAC053821 · CFC1427081 0.875rem / 14px — never for prose 1.45
03

Spacing

s-1 · 4
s-2 · 8
s-3 · 12
s-4 · 16
s-5 · 24
s-6 · 32
s-7 · 48
s-8 · 64
section-y
Desktop 96px · Mobile 48px
section-x / gutter
Desktop 64px · Mobile 20px · content max 1200px
grid
12 col / 24px gap desktop · 4 col / 16px mobile
04

Components

Buttons on white — 48px tall, 44px min target, 8px min gap

RestHoverFocusActiveDisabled
See all services → See all services → See all services → See all services → See all services
On yellow surfaces — primary flips to ink, ring stays ink
On ink surfaces — yellow fill, ramp on hover, yellow ring

Input · select · error

Enter a 10-digit phone number so a dispatcher can call you back.
Sent. A dispatcher will call you within 15 minutes.

Card (whole-card anchor)

technician photo
Same-day Residential A/C Repairs, replacements, and installs on every major brand. Residential A/C services →

Badges

42 years family-owned 140 trucks Emergency · 24/7 1,000,000+ served Phones answered 24/7
Focus, surface + target rules Ring: 3px solid ink on white and yellow surfaces; 3px solid brand-yellow on ink surfaces; always 2px offset, and outline: none is never used. Surface rhythm: max two consecutive sections may share a background, and ink sections are reserved for the nav bar, the video panel, and the footer. The logo ramp appears as a 4–6px rule or a badge fill — never as a full-section wash. Minimum target 44×44px with 8px separation; mobile nav rows are 48px.