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
#ffee52
pri-accent
#ff705c
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#ff705c
alt
—
emphasis
#ffee52
inverse
#1a1a1c
btn hover
#1a1a1c
Heading font
Circular → Google: Inter
Body font
Circular → Google: Inter
Heading line-height
1
Mobile h1
72px → 40px ⚠ big
Mobile overflow
none
Base size
16px
Type scale
not detected
Rounding
Pill (100px)
Line width
not detected
Button hover
lift
Text-over-image halo
not detected
Heading tracking
not detected
Label tracking
not detected
Focus ring
not detected
Easing
not detected
Container max
not detected
Section padding
100px
Accent gradient
not detected
Icon stroke
not detected
Spacing unit
not detected
Transition
200ms
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
12 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.
Brand primarycaptured: #ffee52
Secondary colourdefault
Page backgroundcaptured: #ff705c
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: Circular
Body fontcaptured: Circular
Heading size (H1)captured: 35.2px
Heading weightcaptured: 900
Heading trackingdefault
Primary button bgcaptured: #1a1a1c
Primary button radiuscaptured: 100
Roundingcaptured: 100px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 200ms
Container max-widthdefault
Section paddingcaptured: 100px
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
#ffffff ·210
#1a1a1c ·174
#ff705c ·174
#ffee52 ·116
#ff8bd1 ·46
#000000 ·38
#4e6280 ·30
#575757 ·16
#fb5d40 ·15
#305555 ·10
#8f8f8f ·9
#242427 ·8
#3fa8f4 ·5
#dadada ·5
#385454 ·5
#3fa9f5 ·4
#93ffd5 ·2
#03e298 ·2
Radii
0px3px8px10px14px15px20px44px52px80px100px200px
Shadow samples
0 0 0 0 var(--color-sunset)
0 0 0 8px hsla(0,0%,100%,0)
0 0 0 8px hsla(0,0%,100%,0)
0 0 15px 0 #ffee52
0 0 0 0 var(--color-sunset)
Character & component map
Shadow usage
moderate
Border usage
moderate
Gradients
present
Uppercase labels
yes (motif)
Letter-spacing
yes
Components observed vs gaps (gaps left empty — never auto-filled)
navobserved
heroobserved
buttonsobserved
cardGAP
pricingobserved
testimonialGAP
feature-gridobserved
galleryGAP
accordion-faqobserved
tabsGAP
tableobserved
formobserved
footerobserved
dropdownobserved
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-snap30×
object-fit27×
scroll-behavior15×
will-change (perf)10×
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.
