www.velocityfrequentflyer.com/

open ↗ 2026-06-11 12:39 UTC · 20 css files · 12895kb 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

#e10a0a

pri-accent

#e10a0a

secondary

—

sec-accent

—

Surfaces — page · alt · emphasis · inverse

page

#000000

alt

—

emphasis

—

inverse

#ffffff

btn hover

#cd0c0c

Heading font: Montserrat (Google)
Body font: GT America → Google: Inter
Heading line-height: 1.33
Mobile h1: 24px → 24px
Mobile overflow: none
Base size: 14px
Type scale: not detected
Rounding: Slightly rounded (4px)
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: 1232px
Section padding: 48px
Accent gradient: not detected
Icon stroke: not detected
Spacing unit: not detected
Transition: 250ms
Link underline: true
Button: not detected

rendered (getComputedStyle on laid-out page) — higher fidelity than the regex engine

Capture audit — what's real vs default

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

Brand primarycaptured: #e10a0a
Secondary colourdefault
Page backgroundcaptured: #000000
Text colourdefault
Text colour (inverse)default
Heading colourdefault
Link colourdefault
Link colour (inverse)default
Heading fontcaptured: Montserrat
Body fontcaptured: GT America
Heading size (H1)captured: 64px
Heading weightcaptured: 800
Heading trackingdefault
Primary button bgcaptured: #e10a0a
Primary button radiuscaptured: 4
Roundingcaptured: 4px
Line / border widthdefault
Button hoverdefault
Focus ringdefault
Easingdefault
Transition speedcaptured: 250ms
Container max-widthcaptured: 1232px
Section paddingcaptured: 48px
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

#000000 ·1376

#ffffff ·623

#e10a0a ·308

#2d054e ·248

#512698 ·198

#aa77ff ·154

#ece0ff ·90

#9a0000 ·87

#1d1c1f ·70

#e8e8e8 ·66

#977dc1 ·59

#fa7d9c ·54

#991851 ·51

#e4e4e4 ·50

#f9f9f9 ·46

#333333 ·46

#1f1a4f ·44

#e22b53 ·41

Radii

0px1px2px3px4px5px6px6.4px8px9.6px10px12px

Shadow samples

0 5px 20px rgba(0,0,0,.14902)

var(--cardBoxShadow)

0 0 var(--grid32) var(--grid32) var(--white)

1px 8px 5px rgba(0,0,0,.01176),1px 3px 3px rgba(0,0,0,.01961),0 1px 2px rgba(0,0,0,.01961),0 0 rgba(0,0,0,.01961)

0 0 rgba(0,0,0,.01961),0 1px 2px rgba(0,0,0,.01961),1px 3px 3px rgba(0,0,0,.01961),1px 8px 5px rgba(0,0,0,.01176),2px 13px 5px rgba(0,0,0,0),4px 21px 6px rgba(0,0,0,0)

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
testimonialGAP
feature-gridobserved
galleryGAP
accordion-faqobserved
tabsGAP
tableGAP
formGAP
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 →

object-fit585×
sticky positioning63×
scroll-snap28×
filter (blur etc.)12×
scroll-behavior12×
mix-blend-mode7×
will-change (perf)4×

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.