www.cafemarinapizzeria.com.au/

open ↗ 2026-06-11 12:04 UTC · 16 css files · 977kb 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

#c14679

pri-accent

#007bff

secondary

—

sec-accent

—

Surfaces — page · alt · emphasis · inverse

page

#06020e

alt

—

emphasis

—

inverse

—

Heading font: Georgia → Google: Lora
Body font: Jost (Google)
Heading line-height: 1.1
Mobile h1: 84px → 50px ⚠ big
Mobile overflow: none
Base size: 16px
Type scale: not detected
Rounding: Slightly rounded (6px)
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: 1160px
Section padding: not detected
Accent gradient: not detected
Icon stroke: not detected
Spacing unit: not detected
Transition: 300ms
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

#e2e4eb

field fill

#ffffff

field text

#495057

focus

#e2e4eb

submit

#c14679

Captured from: www.cafemarinapizzeria.com.au/home/contact (inner page)
Fields: 5 · single-column
Field border: 2px solid #e2e4eb
Field radius: 8px
Field height: 50px
Field padding: 10px 50px 10px 10px
Field font: Jost 14px
Field shadow: not detected
Focus state: none
Label: 600 16px
Submit: "Submit" · #c14679 · radius 6px · full-width

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

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: #c14679
Secondary colourdefault
Page backgroundcaptured: #06020e
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: Georgia
Body fontcaptured: Jost
Heading size (H1)captured: 40px
Heading weightcaptured: 800
Heading trackingdefault
Primary button bgcaptured: #c14679
Primary button radiuscaptured: 6
Roundingcaptured: 6px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 300ms
Container max-widthcaptured: 1160px
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

#ffffff ·575

#000000 ·332

#0b1315 ·90

#007bff ·86

#6c757d ·78

#dc3545 ·63

#28a745 ·63

#212529 ·50

#f8f9fa ·44

#ffc107 ·42

#17a2b8 ·42

#343a40 ·42

#c14679 ·42

#dee2e6 ·40

#575757 ·40

#e9ecef ·33

#655656 ·33

#06020e ·32

Radii

0px1px1.6px2px3px3.2px4px4.8px5px6px7px8px

Shadow samples

inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)

inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)

inset 1px 0 1px rgba(0,0,0,.1)

inset 0 1px 1px rgba(0,0,0,.1)

inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)

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
testimonialGAP
feature-gridGAP
galleryGAP
accordion-faqGAP
tabsobserved
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 →

filter (blur etc.)39×
object-fit34×
sticky positioning14×

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.