Macaw Metals · Design System
Warm editorial-industrial.
Light, material, photography-led — the look of an established American building-products manufacturer, not a dark tech demo. This page locks the system. Confirm this direction before we scale to full pages.
Onsite roll-forming
Your panels, formed at the curb and on the roof the same day.
A sample composition — eyebrow, display headline, deck, spec, and CTAs over real photography. This is the editorial rhythm every page inherits.
Typography
A deliberate, fluid type scale.
An all-Archivo system: Archivo Expanded for display
headlines, Archivo for body/UI, and Spline Sans Mono
for spec labels. Sizes use clamp() — responsive, zero layout shift. Self-hosted.
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Metal that lasts a lifetime
Type system · locked
One family, three roles.
An all-Archivo identity with a mono accent — tight, industrial, cohesive. Weight and width do the work: Expanded for headlines, regular for reading.
PNW-grade metal roofing and siding, delivered or formed at the curb and on the roof the same day — affordable and ahead of schedule.
COVERAGE 16″ · 24 GA · CONCEALED FASTENER
Color
Neutrals dominate. Brand color is the accent.
Warm paper and graphite carry the site. Blue is the one consistent interactive accent; red and gold appear rarely as small confident pops; navy anchors the dark bands. The logo is where all four colors live together.
Neutrals
Brand — used with discipline
All pairings target WCAG AA. Note: pure --macaw-blue on paper is reserved for fills; text uses the darker --blue-ink for AA.
Motion
Calm, purposeful, editorial.
Scroll reveals, subtle parallax, count-up stats, refined hover, and a standing-seam
light-sweep. Nothing pulses or glows. Everything resolves to static for
prefers-reduced-motion.
↑ Numbers animate when scrolled into view (refresh & scroll up to replay).
Components
Core building blocks.
Buttons
Product / project card (hover: image scale + accent rule draws in)
Roofing
Standing Seam
Concealed-fastener panels in 16″–18″ coverage. ‹CONFIRM›
Siding
Vertical Panel
A labeled placeholder — exactly how unshot slots read.
Spec block
SSQ II Profile
- Coverage
- ‹CONFIRM›
- Gauge
- 24 / 26 GA ‹CONFIRM›
- Substrate
- Steel / Aluminum
- Min slope
- ‹CONFIRM›
- Fastener
- Concealed
Interactive finish selector (click a swatch — preview crossfades)
Like this direction?
Sign off and we scale it across Home, Products, Colors, Gallery, and the article hub.