marriedbyjosh.com/

open ↗ 2026-06-11 12:10 UTC · 8 css files · 852kb css

rendered capture (headless)

Live reference

Preview — our components × captured values

A-side — Captured ↗Every component in the captured values · gaps shown · device toggle B-side — Proposed ↗My proposed CSS applied — the generative "what it could become" C-side — Derived ↗A complete, coherent library derived by rule from the captured DNA

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

#2b2317

pri-accent

#a14b5d

secondary

—

sec-accent

—

Surfaces — page · alt · emphasis · inverse

page

#f4e5e8

alt

—

emphasis

—

inverse

—

btn hover

#823c4a

Heading font: DM Sans Variable → Google: Dm Sans
Body font: DM Sans Variable → Google: Dm Sans
Heading line-height: 1
Mobile h1: 60px → 30px
Mobile overflow: none
Base size: 16px
Type scale: not detected
Rounding: Pill (9999px)
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: not detected
Section padding: not detected
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

Contact form — how the fields render

field border

#e8e2de

field fill

#faf7f5

field text

#2b2317

focus

#e8e2de

submit

#a14b5d

Captured from: marriedbyjosh.com/contact (inner page)
Fields: 8 · multi-column
Field border: 1px solid #e8e2de
Field radius: 10px
Field height: 47px
Field padding: 10.4px 14.4px 10.4px 14.4px
Field font: DM Sans Variable 16px
Field shadow: not detected
Focus state: shadow (3px #e8e2de)
Label: 600 15.2px
Submit: "Send wedding enquiry" · #a14b5d · radius 99px

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

10 of 27 values captured from this site. The rest fall back to library defaults — shown so nothing hardcoded can pass as captured.

Brand primarycaptured: #2b2317
Secondary colourdefault
Page backgroundcaptured: #f4e5e8
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: DM Sans Variable
Body fontcaptured: DM Sans Variable
Heading size (H1)captured: 32px
Heading weightcaptured: 700
Heading trackingdefault
Primary button bgcaptured: #a14b5d
Primary button radiuscaptured: 9999
Roundingcaptured: 9999px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 200ms
Container max-widthdefault
Section paddingdefault
Accent gradientdefault
Image treatmentdefault
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 ·470

#ffffff ·136

#2b2317 ·42

#faf7f5 ·28

#f4e5e8 ·21

#1a1611 ·21

#a14b5d ·17

#ac8bc1 ·14

#f5e6d3 ·14

#e8dcc6 ·14

#823c4a ·14

#43392a ·14

#e8e2de ·7

#f0ebe7 ·7

#10b981 ·7

#f59e0b ·7

#ef4444 ·7

#3b82f6 ·7

Radii

0px2px3.4px4px5px6px8px10px12px99pxpill

Shadow samples

var(--shadow-border)

var(--shadow-border-hover)

0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)

var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)

Character & component map

Shadow usage: heavy
Border usage: light
Gradients: present
Uppercase labels: yes (motif)
Letter-spacing: yes

Components observed vs gaps (gaps left empty — never auto-filled)

navobserved
heroGAP
buttonsobserved
cardobserved
pricingGAP
testimonialGAP
feature-gridGAP
galleryGAP
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.)21×
object-fit14×
sticky positioning7×
scroll-behavior7×

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.