Style guide
Every token, text style and named section used in this template. Change a value here and it changes everywhere — that is the point of the system.
Colour tokens
— Color/Ink-900 (#0F1922) — main text and dark bands (call bar, hero, footer)
— Color/Ink-800 (#1A2733) — cards inside a dark band
— Color/Ink-600 (#46525E) — secondary text and captions
— Color/Ink-400 (#6B7785) — form field borders and placeholders
— Color/Ink-200 (#C3CCD6) — secondary text on dark backgrounds
— Color/Surface-0 (#FFFFFF) — page background and cards
— Color/Surface-50 (#F6F8FA) — alternating section background
— Color/Surface-100 (#ECEFF3) — inset blocks and the demo notice
— Color/Action-Emergency-500 (#FFB01A) — call button, hover
— Color/Action-Emergency-600 (#F5A300) — call button fill, and nothing else
— Color/Action-Emergency-700 (#D98B00) — call button, pressed
— Color/Action-Emergency-800 (#A66800) — call button border on light backgrounds
— Color/Trust-600 (#1F5D7A) — insurance, process and credentials bands and links, never a button
— Color/Trust-50 (#EAF1F5) — documentation and method blocks
— Color/Line-200 (#D7DEE6) — decorative separators only
— Color/Success-600 (#1E7A4B) — form confirmation
— Color/Warning-600 (#8A5A00) — form warning (text and a 2px left rule)
— Color/Error-600 (#C1272D) — form error
— Color/Focus-Ring (#F5A300) — keyboard focus ring
Text styles
— Text/H1 · on dark — Archivo 800, 64 / 48 / 36 px
— Text/H2 · on dark — Archivo 700, 40 / 34 / 28 px
— Text/H3 · on dark — Archivo 700, 28 / 24 / 21 px
— Text/Phone · on dark — Archivo 700, 34 / 30 / 26 px
— Text/Overline · on dark — IBM Plex Sans 600, 14 / 14 / 14 px
— Text/Body L · on dark — IBM Plex Sans 400, 20 / 19 / 18 px
— Text/Body · on dark — IBM Plex Sans 400, 17 / 17 / 17 px
— Text/Body S · on dark — IBM Plex Sans 400, 15 / 15 / 15 px
— Text/Caption · on dark — IBM Plex Sans 400, 14 / 14 / 14 px
— Text/Button · on dark — IBM Plex Sans 600, 17 / 17 / 17 px
— Text/Nav · on dark — IBM Plex Sans 500, 16 / 16 / 16 px
— Text/Input — IBM Plex Sans 400, 17 / 17 / 17 px
Two sets exist because half the sections sit on dark bands. A text on a dark band uses the inverted style; nothing else changes.
24/7 emergency line — (555) 555-0142
[Edit: add your state contractor license number here, and any mold or specialty license you actually hold. Delete this line if none applies in your state.]
© 2026 Fielder Restoration. All rights reserved.