System overview
- Hero
- compact · left
- Surface
- light
- Density
- dense
- Content width
- 1504px
- Confidence
- medium
- Primary action
- Sign up $10 credit for new accounts
Color system
Light surfaces use 7 repeated semantic colors; the primary action carries the strongest interactive emphasis.
Page canvas
Dominant rendered page background.Surface
Repeated container or section fill; relative occurrence score 133.Surface
Repeated container or section fill; relative occurrence score 1.Primary text
Observed display foreground with 16.0:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 5.7:1.Primary action
Foreground used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns Spectral to display text; Space Grotesk Variable to body, body-small text; JetBrains Mono to label text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Capability market
Spectral · 36px/35.28px · weight 300 · tracking -0.54px · "cv02", "ss01", "ss03" · color rgb(22, 24, 25)2012 publishers across 8520 listings — trust standing and credit price ranges.
Space Grotesk Variable · 14px/24px · weight 400 · tracking 0px · "cv02", "ss01", "ss03" · color rgb(89, 97, 93)Parallel Structured web extraction Extract clean, structured content from any URL in one fixed-price…
Space Grotesk Variable · 12px/18px · weight 500 · tracking -0.12px · "cv02", "ss01", "ss03" · color rgb(10, 95, 146)Browse by provider
JetBrains Mono · 11px/16px · weight 400 · tracking 1.1px · "cv02", "ss01", "ss03" · color rgb(8, 124, 86)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- Not reliably detected
- Container
- 16px
8px2px10px12px4px16px20px6px11px28pxShape
Soft geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Containers
- 6px
- Buttons
- 4px
- Cards
- 6px
- Inputs
- 6px
- Media
- 0px
Inspect borders & shadows · 5
1px solid rgb(199, 203, 199)1px solid rgb(123, 129, 126)1px solid transparent1px solid rgb(8, 124, 86)None observedComponent grammar
Hero
Opening proposition
Compact, left-aligned opening anchored by “Sign up $10 credit for new accounts”.
Inspect 4 properties
- Pattern
- compact
- Alignment
- left
- Heading
- Spectral · 36px / 300
- Media
- image-led
Navigation
Global wayfinding
Static navigation with 6 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #161819
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Space Grotesk Variable · 16px / 400
- Position
- static
- Height
- 48px
Primary action
Conversion
“Sign up $10 credit for new accounts” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 5 properties
- Text
- #120a0f
- Border
- none
- Radius
- 6px
- Padding
- 11.2px 20px 11.2px 20px
- Type
- Space Grotesk Variable · 16px / 400
Content card
Repeated content module
8 style-matched content card instances were found among 8 candidates; properties describe the dominant observed cluster.
Inspect 7 properties
- Background
- #fafbf8
- Text
- #161819
- Border
- 1px solid rgb(199, 203, 199)
- Radius
- 6px
- Padding
- 16px 16px 16px 16px
- Type
- Space Grotesk Variable · 16px / 400
- Candidate pool
- 8
Form control
Input and selection
1 style-matched form control instance was found among 1 candidates; properties describe the dominant observed cluster.
Inspect 7 properties
- Background
- #fafbf8
- Text
- #161819
- Border
- 1px solid rgb(123, 129, 126)
- Radius
- 6px
- Padding
- 0px 10px 0px 36px
- Type
- Space Grotesk Variable · 13px / 400
- Candidate pool
- 1
Badge or tag
Compact status or category label
37 style-matched badge or tag instances were found among 38 candidates; properties describe the dominant observed cluster.
Inspect 6 properties
- Text
- #0a5f92
- Border
- none
- Radius
- 6px
- Padding
- 0px 0px 0px 0px
- Type
- Space Grotesk Variable · 12px / 500
- Candidate pool
- 38
Media frame
Visual proof
32 style-matched media elements were found among 33 rendered candidates; contain fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- contain, fill
- Ratios
- 1.00
- Radius
- 0px
- Candidate pool
- 33
Footer
Closing navigation
3 visible actions close the page on a transparent surface.
Inspect 6 properties
- Text
- #161819
- Border
- 1px solid rgb(199, 203, 199)
- Radius
- 0px
- Padding
- 28px 0px 28px 0px
- Type
- Space Grotesk Variable · 16px / 400
- Links
- 3
Layout & narrative
The page continues as an unlabeled visual sequence below the first viewport.
- Structure
- Editorial product narrative
- Hero pattern
- Compact hero: navigation and proposition share a shallow opening
- Grid
- 1 column
- Closing
- Utility footer with 3 actions
Imagery, motion & responsive
Imagery
Image led media acts as the page’s primary visual proof rather than decoration.
contain fitting · square-edged framesInspect imagery inventory
- Composition
- Multiple visual elements share the first viewport.
- Inventory
- 33 images/canvas elements and 0 videos across the analyzed homepage.
Motion
12 declared keyframes and 0 active animations were inspectable at capture; observed timing uses 0.2s, 0.16s, 2.6s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- balance-flash, ledger-row-in, rise-in, scroll-rise-in, home-machine-route, home-machine-stage, home-machine-receipt, select-content-in, collapsible-down, collapsible-up, dialog-in, dialog-out
- Durations
- 0.2s, 0.16s, 2.6s, 0.26s, 0.4s
- Easings
- ease, cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.23, 1, 0.32, 1), linear
- States
- hover, focus, active, disabled
Mobile
The same 6 visible navigation actions remain at mobile width. Hero alignment changes from left to center; mobile heading size is 30px.
2 multi-column content regions remain on mobile.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #f2f3f0 canvas with #161819 primary copy before adding secondary surfaces.
- Use Spectral at 36px/35.28px, weight 300, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Sign up $10 credit for new accounts” within the left-aligned compact hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 6px is the repeated treatment on containers.
- Do not reuse the #120a0f action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Spectral and Space Grotesk Variable and JetBrains Mono.
- Do not add card shadows; the source separates content without repeated elevation.