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
#7bc40d
pri-accent
—
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#111111
alt
—
emphasis
—
inverse
—
Heading font
not detected
Body font
Poppins (Google)
Heading line-height
not detected
Mobile h1
?
Mobile overflow
none
Base size
16px
Type scale
not detected
Rounding
not detected
Line width
not detected
Button hover
subtle / none
Text-over-image halo
not detected
Heading tracking
not detected
Label tracking
not detected
Focus ring
not detected
Easing
not detected
Container max
624px
Section padding
not detected
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
Capture audit — what's real vs default
6 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.
Brand primarycaptured: #7bc40d
Secondary colourdefault
Page backgroundcaptured: #111111
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontdefault
Body fontcaptured: Poppins
Heading size (H1)captured: 60px
Heading weightdefault
Heading trackingdefault
Primary button bgdefault
Primary button radiusdefault
Roundingdefault
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speeddefault
Container max-widthcaptured: 624px
Section paddingdefault
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 ·498
#2f2f2f ·338
#ffffff ·337
#191919 ·149
#131313 ·127
#333333 ·64
#7bc40d ·57
#ef7784 ·43
#323232 ·41
#e74e59 ·38
#7cc40c ·36
#111111 ·33
#ba8e74 ·33
#e5e644 ·31
#c33ecf ·31
#ac32f0 ·30
#ca8bff ·29
#bf76d7 ·28
Radii
0px1px2px3px4px5px6px7px8px10px12px15px
Shadow samples
0 8px 8px 0 rgba(0,0,0,.5)
-1px 1px 6px rgba(0,0,0,.3)
rgba(0,0,0,.25) 0 3px 11px 0!important
inset 0 0 3px rgba(0,0,0,.3)
0 5px 0 0 #475459
Character & component map
Shadow usage
heavy
Border usage
heavy
Gradients
present
Uppercase labels
yes (motif)
Letter-spacing
yes
Components observed vs gaps (gaps left empty — never auto-filled)
navobserved
heroobserved
buttonsobserved
cardGAP
pricingGAP
testimonialobserved
feature-gridGAP
galleryGAP
accordion-faqGAP
tabsGAP
tableGAP
formGAP
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.)102×
object-fit76×
CSS mask15×
will-change (perf)15×
sticky positioning6×
scroll-behavior6×
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.
