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
#650d85
pri-accent
#7f4694
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#000000
alt
—
emphasis
#5c1680
inverse
#ffffff
Heading font
ProximaVara → Google: Nunito Sans
Body font
ProximaVara → Google: Nunito Sans
Heading line-height
1.2
Mobile h1
20px → 20px
Mobile overflow
none
Base size
16px
Type scale
not detected
Rounding
Very rounded (25px)
Line width
not detected
Button hover
swap background
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
32px
Accent gradient
not detected
Icon stroke
not detected
Spacing unit
not detected
Transition
not detected
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
#000000
field text
#000000
focus
#000000
submit
#9e9e9e
Captured from
www.pocketsmith.com/about/#contact (inner page)
Fields
4 · single-column
Field border
0px none #000000
Field radius
0px
Field height
48px
Field padding
0px 0px 0px 0px
Field font
ProximaVara 16px
Field shadow
not detected
Focus state
shadow (3px #000000)
Label
no visible labels
Submit
"SEND EMAIL" · #9e9e9e · radius 2px
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: #650d85
Secondary colourdefault
Page backgroundcaptured: #000000
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: ProximaVara
Body fontcaptured: ProximaVara
Heading size (H1)captured: 100px
Heading weightcaptured: 400
Heading trackingdefault
Primary button bgcaptured: #650d85
Primary button radiuscaptured: 25
Roundingcaptured: 25px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speeddefault
Container max-widthdefault
Section paddingcaptured: 32px
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 ·690
#000000 ·391
#650d85 ·282
#494f51 ·198
#f2eef4 ·174
#111111 ·174
#009e79 ·166
#6b2c81 ·128
#7f4694 ·120
#303741 ·108
#f75c57 ·108
#40b69b ·104
#421b50 ·96
#f98480 ·90
#333333 ·85
#f7f7f7 ·66
#9160a3 ·60
#edf4f3 ·60
Radii
0px1px1.6px2px3px4px5px5.6px6px8px10px12px
Shadow samples
0 4px 10px #0000
0 4px 10px #0003
0 2px 3px #0000004d
0 4px 20px #0000000f
0 20px 60px #0003
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
cardobserved
pricingobserved
testimonialobserved
feature-gridobserved
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 →
object-fit161×
CSS mask74×
filter (blur etc.)49×
scroll-snap36×
sticky positioning18×
mix-blend-mode12×
will-change (perf)6×
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.
