www.mozilla.org
open ↗
Live reference
Preview — our components × captured values
Style Guide preset (skin)
- Heading font
- Mozilla Headline → Google: Inter
- Body font
- Mozilla Text → Google: Inter
- Heading line-height
- 1.1
- Mobile h1
- 48px → 38px ⚠ big
- Mobile overflow
- none
- Base size
- 16px
- Type scale
- not detected
- Rounding
- not detected
- Line width
- not detected
- Button hover
- brighten background + shadow
- Text-over-image halo
- not detected
- Heading tracking
- not detected
- Label tracking
- not detected
- Focus ring
- not detected
- Easing
- not detected
- Container max
- 1232px
- Section padding
- 106px
- Accent gradient
- not detected
- Icon stroke
- not detected
- Spacing unit
- not detected
- Transition
- not detected
- Link underline
- false
- Button
- not detected
rendered (getComputedStyle on laid-out page) — higher fidelity than the regex engine
Contact form — how the fields render
- Captured from
- www.mozilla.org/id/contact/ (inner page)
- Fields
- 1 · single-column
- Field border
- 2px solid #fafafa
- Field radius
- 0px
- Field height
- 40px
- Field padding
- 8px 40px 8px 36px
- Field font
- Mozilla Text 16px
- Field shadow
- not detected
- Focus state
- shadow (3px #fafafa)
- Label
- no visible labels
- Submit
- not detected
Captured form-field facts. These feed the contact-form component — see the field-token proposal in docs/contact-form-component.md.
Capture audit — what's real vs default
8 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.
- Brand primarydefault
- Secondary colourdefault
- Page backgroundcaptured: #ffffff
- Text colourdefault
- Text colour (inverse)default
- Heading colourdefault
- Link colourdefault
- Link colour (inverse)default
- Heading fontcaptured: Mozilla Headline
- Body fontcaptured: Mozilla Text
- Heading size (H1)captured: 66px
- Heading weightcaptured: 600
- Heading trackingdefault
- Primary button bgdefault
- Primary button radiusdefault
- Roundingdefault
- Line / border widthdefault
- Button hoverdefault
- Focus ringdefault
- Easingdefault
- Transition speeddefault
- Container max-widthcaptured: 1232px
- Section paddingcaptured: 106px
- Accent gradientdefault
- Image treatmentcaptured: captured
- Text-over-image halodefault
- Icon strokedefault
- Alt background (derived from page)library default
- Card paddinglibrary default
- Small/large shadow scalelibrary default
- Secondary-button outline stylelibrary default
Inventory (raw evidence)
Character & component map
- Shadow usage
- heavy
- Border usage
- heavy
- Gradients
- present
- Uppercase labels
- no
- Letter-spacing
- yes
- navobserved
- heroobserved
- buttonsobserved
- cardGAP
- pricingGAP
- testimonialGAP
- feature-gridobserved
- galleryobserved
- accordion-faqGAP
- tabsobserved
- tableGAP
- formobserved
- footerobserved
- dropdownGAP
Worth considering — seen here, not yet captured
Notable styling present in this site's CSS that the tool doesn't yet turn into a captured value — candidates for future capture. Full coverage & roadmap →
- sticky positioning14×
Beyond the capture — Claude's read & generative proposals
The character CSS mining can't reach — bespoke anatomy, motifs, the "feel". These are my interpretations and generative suggestions. They are NOT applied to the reconstruction above — they're ideas to react to when this becomes a library's seed.
Mozilla's site is deliberately stark, boxy and editorial — black-and-white with a single coral accent, heavy tight display type, zero rounding. The capture nails the facts; these proposals push that character further into a confident library.
-
Commit to true zero rounding
observed Radius motif is mostly 0 with a stray 4px; buttons captured with no radius.
proposal Force every radius token to 0 on the B-side. Half-measures read as generic; Mozilla's strength is its hard corners.
-
Promote the coral to a deliberate accent
observed Coral #ff4f5e is the most frequent chromatic hue but it's a logo/illustration colour — the action colour is black #161616.
proposal Keep black as the action colour, but use coral as a confident editorial accent: link-hover, eyebrows, and a coral outline that the black CTA flips to on hover.
-
Heavier, tighter display type
observed Headings use Mozilla Headline at weight 700; type scale is a Perfect Fourth.
proposal Push heading weight to 800 and tighten tracking to -0.02em for a louder masthead, and add a 2px rule under H2s for a magazine feel.
-
Snappier motion
observed Transitions captured at ~100ms, ease-in-out, no button lift.
proposal Keep it quick (120ms) but give it a deliberate cubic-bezier so interactions feel engineered rather than soft.
Read by Claude · 2026-06-04. Tell me which proposals to pursue.