Quick look above; the showcases render the full Slipstream bank with sample data. Captured values only on A-side — anatomy stays ours until we craft a library.
Style Guide preset (skin)
primary
#5598d3
pri-accent
#8acfef
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#ffffff
alt
—
emphasis
—
inverse
—
btn hover
#8acfef
Heading font
Inter (Google)
Body font
Inter (Google)
Heading line-height
1.2
Mobile h1
60px → 34px
Mobile overflow
240px ⚠
Base size
16px
Type scale
not detected
Rounding
Sharp (0px)
Line width
not detected
Button hover
not detected
Text-over-image halo
not detected
Heading tracking
not detected
Label tracking
not detected
Focus ring
not detected
Easing
not detected
Container max
570px
Section padding
not detected
Accent gradient
not detected
Icon stroke
not detected
Spacing unit
not detected
Transition
300ms
Link underline
false
Button
not detected
rendered (getComputedStyle on laid-out page) — higher fidelity than the regex engine
Contact form — how the fields render
field border
#000000
field fill
#000000
field text
#000000
focus
#000000
submit
#8acfef
Captured from
meticulouscardetailing.com.au (home page)
Fields
5 · multi-column
Field border
1px solid #000000
Field radius
4px
Field height
59px
Field padding
7px 20px 7px 20px
Field font
Inter 18px
Field shadow
not detected
Focus state
shadow (3px #000000)
Label
no visible labels
Submit
"Get My Quote" · #8acfef · radius 0px
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
11 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.
Brand primarycaptured: #5598d3
Secondary colourdefault
Page backgroundcaptured: #ffffff
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: Inter
Body fontcaptured: Inter
Heading size (H1)captured: 24px
Heading weightcaptured: 500
Heading trackingdefault
Primary button bgcaptured: #8acfef
Primary button radiuscaptured: 0
Roundingcaptured: 0px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 300ms
Container max-widthcaptured: 570px
Section paddingdefault
Accent gradientdefault
Image treatmentdefault
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)
Palette by frequency
#ffffff ·1
#e5e4ff ·1
#6366f1 ·1
#1a1a1a ·1
#666666 ·1
Radii
pill
Shadow samples
none / flat
Character & component map
Shadow usage
none/flat
Border usage
light
Gradients
rare/none
Uppercase labels
no
Letter-spacing
no
Components observed vs gaps (gaps left empty — never auto-filled)
navGAP
heroGAP
buttonsGAP
cardGAP
pricingGAP
testimonialGAP
feature-gridGAP
galleryGAP
accordion-faqGAP
tabsGAP
tableGAP
formGAP
footerGAP
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 →
Nothing notable beyond what we already capture.
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.
Not reviewed yet. Ask Claude in chat to “read this teardown” and I'll add observations + generative proposals here.
