Style Teardownteardown
← all teardowns

theinternet.com.au/

open ↗ 2026-06-11 12:17 UTC · 0 css files · 441kb css
rendered capture (headless)
desktop
desktop capture
mobile · 390px
mobile capture

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
#1e1b15
pri-accent
#bb4111
secondary
—
sec-accent
—
Surfaces — page · alt · emphasis · inverse
page
#fff9e5
alt
#f4f3f0
emphasis
—
inverse
#1e1b15
Heading font
Iowan Old Style → Google: Inter
Body font
ui-sans-serif → Google: Lora
Heading line-height
1
Mobile h1
72px → 36px ⚠ big
Mobile overflow
none
Base size
16px
Type scale
not detected
Rounding
Slightly rounded (8px)
Line width
not detected
Button hover
not detected
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
150ms
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
#d4cec4
field fill
#fff9e5
field text
#1e1b15
focus
#d4cec4
submit
#3b352b
Captured from
theinternet.com.au/contact/ (inner page)
Fields
5 · single-column
Field border
1px solid #d4cec4
Field radius
8px
Field height
42px
Field padding
10px 16px 10px 16px
Field font
ui-sans-serif 14px
Field shadow
not detected
Focus state
shadow (2px #d4cec4)
Label
500 14px
Submit
"Send message" · #3b352b · radius 8px · 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

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

  • Brand primarycaptured: #1e1b15
  • Secondary colourdefault
  • Page backgroundcaptured: #fff9e5
  • Text colourdefault
  • Text colour (inverse)default
  • Heading colourdefault
  • Link colourdefault
  • Link colour (inverse)default
  • Heading fontcaptured: Iowan Old Style
  • Body fontcaptured: ui-sans-serif
  • Heading size (H1)default
  • Heading weightcaptured: 300
  • Heading trackingdefault
  • Primary button bgcaptured: #1e1b15
  • Primary button radiuscaptured: 8
  • Roundingcaptured: 8px
  • Line / border widthdefault
  • Button hoverdefault
  • Focus ringdefault
  • Easingdefault
  • Transition speedcaptured: 150ms
  • 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 ·175
#ffffff ·84
#6a7282 ·21
#eae7e1 ·14
#15130f ·14
#155dfc ·14
#fff9e5 ·7
#fdeee8 ·7
#fbdcd0 ·7
#f6baa2 ·7
#f29773 ·7
#e95216 ·7
#bb4111 ·7
#8c310d ·7
#f4f3f0 ·7
#d4cec4 ·7
#bfb6a6 ·7
#a99d89 ·7
Radii
0px2px3.4px4px5px6pxpill
Shadow samples
var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
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)
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
rare/none
Uppercase labels
yes (motif)
Letter-spacing
yes
Components observed vs gaps (gaps left empty — never auto-filled)
  • navobserved
  • heroGAP
  • buttonsobserved
  • cardGAP
  • pricingGAP
  • testimonialobserved
  • feature-gridGAP
  • galleryGAP
  • accordion-faqobserved
  • 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 →

  • scroll-snap35×
  • filter (blur etc.)21×
  • sticky positioning7×
  • object-fit7×
  • 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.