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
#d33a2c
pri-accent
#006fc6
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#ffffff
alt
—
emphasis
#d33a2c
inverse
#1b71bb
Heading font
Mija → Google: Bitter
Body font
Elena → Google: Lora
Heading line-height
not detected
Mobile h1
?
Mobile overflow
none
Base size
20px
Type scale
not detected
Rounding
Rounded (11px)
Line width
not detected
Button hover
darken 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
1088px
Section padding
32px
Accent gradient
not detected
Icon stroke
not detected
Spacing unit
not detected
Transition
200ms
Link underline
true
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
#ffffff
field text
#000000
focus
#000000
submit
#0168b8
Captured from
smashingmagazine.com (inner page)
Fields
1 · single-column
Field border
0px none #000000
Field radius
11px
Field height
60px
Field padding
17.1078px 22.8104px 17.1078px 22.8104px
Field font
Elena 22.8104px
Field shadow
not detected
Focus state
none
Label
no visible labels
Submit
"Meow!" · #0168b8 · 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
13 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.
Components observed vs gaps (gaps left empty — never auto-filled)
navobserved
heroGAP
buttonsobserved
cardobserved
pricingGAP
testimonialGAP
feature-gridGAP
galleryGAP
accordion-faqobserved
tabsobserved
tableobserved
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 →
scroll-snap6×
will-change (perf)6×
object-fit3×
filter (blur etc.)2×
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.
