System overview
- Hero
- visual-led · center
- Surface
- dark
- Density
- sparse
- Content width
- 1600px full-width canvas
- Confidence
- medium
- Primary action
- Start now
Color system
Dark surfaces use 8 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 339.Surface
Repeated container or section fill; relative occurrence score 134.Surface
Repeated container or section fill; relative occurrence score 80.Primary text
Observed display foreground with 6.6:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 5.3:1.Primary action
Fill used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
A single-family system uses Inter across display and reading roles, differentiated by size and weight.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Start Your Data Business Today
Inter · 84px/84px · weight 700 · tracking -2.1px · color rgb(255, 255, 255) · preview scaled3 Steps To Get Started
Inter · 36px/40px · weight 700 · tracking 0px · color rgb(16, 24, 40)Join DeepReach as a Data Partner — collect real-world operation data with a wearable device and turn…
Inter · 18px/28px · weight 400 · tracking 0px · color rgb(229, 231, 235)Illustrative example only. Actual earnings vary and are not guaranteed. Earnings depend on task…
Inter · 12px/16px · weight 400 · tracking 0px · color rgb(153, 161, 175)info@deepreach.ai
Inter · 14px/20px · weight 400 · tracking 0px · color rgb(74, 85, 101)Spacing & shape
Spacing
- Base unit
- 8px
- Section gap
- 40px
- Container
- 40px
40px32px16px24px8px64px48px12px96px112pxShape
Rounded geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Media
- 6px
- Pills
- 50px
- Containers
- 24px
Inspect borders & shadows · 7
1px solid rgba(255, 255, 255, 0.851)1px solid rgb(209, 213, 220)1px solid rgb(229, 231, 235)rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.7) 0px 6px 22px 0pxrgba(241, 204, 82, 0.8) 0px 0px 8px 2pxrgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4pxrgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1pxComponent grammar
Hero
Opening proposition
Visual led, center-aligned opening anchored by “Start now”.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- center
- Heading
- Inter · 84px / 700
- Media
- video-led
Primary action
Conversion
“Start now” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #ffffff
- Text
- #000000
- Border
- none
- Radius
- 9999px
- Padding
- 16px 32px 16px 32px
- Type
- Inter · 16px / 500
Form control
Input and selection
2 style-matched form control instances were found among 2 candidates; properties describe the dominant observed cluster.
Inspect 6 properties
- Text
- #0a0a0a
- Border
- none
- Radius
- 999px
- Padding
- 0px 0px 0px 0px
- Type
- Inter · 16px / 400
- Candidate pool
- 2
Media frame
Visual proof
20 style-matched media elements were found among 30 rendered candidates; cover fitting and 6px are the most repeated treatments.
Inspect 4 properties
- Fit
- cover, contain, fill
- Ratios
- 1.64, 1.03, 1.91, 1.60
- Radius
- 6px, 0px
- Candidate pool
- 30
Footer
Closing navigation
3 visible actions close the page on a #fafaf8 surface.
Inspect 7 properties
- Background
- #fafaf8
- Text
- #0a0a0a
- Border
- 1px solid rgb(209, 213, 220)
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Inter · 16px / 400
- Links
- 3
Layout & narrative
The homepage continues through 7 observed sections, moving from the opening proposition into 3 Steps To Get Started, See What You Can Earn, From Our Data Partners.
- Structure
- Visual marquee narrative
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- 2 columns
- Closing
- Utility footer with 3 actions
Full section sequence · 7
- 3 Steps To Get Started
- See What You Can Earn
- From Our Data Partners
- Join The Global Network
- Ready to Start Your Data Business?
- Input your info
- Reserve your device
Imagery, motion & responsive
Imagery
Video led media acts as the page’s primary visual proof rather than decoration.
cover fitting · 6px repeated radiusInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 23 images/canvas elements and 7 videos across the analyzed homepage.
Motion
12 declared keyframes and 20 active animations were inspectable at capture; observed timing uses 0.15s, 0.25s, 0.2s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- fadeInScale, float, qsPulse, vn-logo-pulse, vn-spin, vu-spin, umi-spin, spin, pulse, enter, exit, jnblink
- Durations
- 0.15s, 0.25s, 0.2s, 1s, 0.1s
- Easings
- ease, ease-in-out, ease, ease, linear, ease-out, ease, ease, ease
- States
- disabled, transition-all, hover, focus, active
Mobile
The same 0 visible navigation actions remain at mobile width. Hero remains center-aligned; mobile heading size is 48px.
Observed multi-column desktop regions collapse to a single-column mobile flow.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #695b42 canvas with #ffffff primary copy before adding secondary surfaces.
- Use Inter at 84px/84px, weight 700, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Start now” within the center-aligned visual-led hero.
- Video 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 media.
- Do not reuse the #ffffff action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Inter.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.




