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
#2e1d5b
pri-accent
#5507be
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#000000
alt
—
emphasis
—
inverse
—
btn hover
#f4eff9
Heading font
rubik-medium → Google: Rubik
Body font
wfont_b465c5_14d8ea00d37e4988bef1f1f4cfcc5ffd
Heading line-height
1
Mobile h1
64px → 40px ⚠ big
Mobile overflow
none
Base size
10px
Type scale
not detected
Rounding
Pill (999px)
Line width
not detected
Button hover
swap background + underline
Text-over-image halo
not detected
Heading tracking
not detected
Label tracking
not detected
Focus ring
not detected
Easing
not detected
Container max
1200px
Section padding
40px
Accent gradient
not detected
Icon stroke
not detected
Spacing unit
not detected
Transition
400ms
Link underline
false
Button
not detected
rendered (getComputedStyle on laid-out page) — higher fidelity than the regex engine
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.
Brand primarycaptured: #2e1d5b
Secondary colourdefault
Page backgroundcaptured: #000000
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: rubik-medium
Body fontcaptured: wfont_b465c5_14d8ea00d37e49…
Heading size (H1)captured: 32px
Heading weightcaptured: 400
Heading trackingdefault
Primary button bgcaptured: #24c4b5
Primary button radiuscaptured: 999
Roundingcaptured: 999px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 400ms
Container max-widthcaptured: 1200px
Section paddingcaptured: 40px
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)
Palette by frequency
#000000 ·1286
#ffffff ·671
#2e1d5b ·307
#116dff ·194
#2b5672 ·88
#212121 ·59
#edd3fa ·44
#5507be ·42
#080808 ·31
#eeeeee ·29
#5d5d61 ·21
#a874ed ·18
#df3131 ·16
#646464 ·16
#e03939 ·15
#4f4f4f ·14
#8f8f8f ·14
#f6effa ·14
Radii
0px1px1.5px2px3px4px5px6px7px8px10px20px
Shadow samples
var(--boxShadow,none)
var(--boxShadow,none)
var(--shd,0 1px 4px #0009)
var(--shd,0 1px 4px #0009)
var(--shd,0 1px 4px #0009)
Character & component map
Shadow usage
heavy
Border usage
heavy
Gradients
present
Uppercase labels
occasional
Letter-spacing
yes
Components observed vs gaps (gaps left empty — never auto-filled)
navobserved
heroGAP
buttonsobserved
cardobserved
pricingGAP
testimonialGAP
feature-gridGAP
galleryobserved
accordion-faqGAP
tabsGAP
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 →
filter (blur etc.)416×
mix-blend-mode107×
container queries103×
CSS mask90×
object-fit82×
scroll-snap46×
will-change (perf)19×
sticky positioning13×
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.
