System overview
- Hero
- visual-led · left
- Surface
- light
- Density
- sparse
- Content width
- 1600px full-width canvas
- Confidence
- medium
- Primary action
- Join waitlist
Color system
Light 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 11.Surface
Repeated container or section fill; relative occurrence score 1.Surface
Repeated container or section fill; relative occurrence score 1.Primary text
Observed display foreground; its canvas-reference contrast is 1.8:1 and may rely on a local hero surface.Secondary text
Observed reading foreground; measured canvas-reference contrast is 9.5:1.Primary action
Fill used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns Fraunces to display text; Inter to body, label text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.You’d use voice everywhere. If nobody could hear you.
Fraunces · 54.4px/55.488px · weight 500 · tracking -2.176px · color rgb(23, 25, 15)Talk to yourself silently. Our wearable transcribes it—mouth closed, nothing to overhear.
Inter · 17.6px/25.52px · weight 500 · tracking -0.176px · color rgb(23, 25, 15)Careers
Inter · 12px/normal · weight 700 · tracking 0.72px · color rgba(255, 255, 255, 0.878)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- Not reliably detected
- Container
- 24px
4px2px14px24px18px28pxShape
Rounded geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Pills
- 50px
- Buttons
- 10px
- Media
- 0px
Inspect borders & shadows · 2
1px solid rgba(25, 25, 16, 0.122)rgba(23, 25, 15, 0.04) 0px 1px 2px 0px, rgba(23, 25, 15, 0.08) 0px 8px 24px 0pxComponent grammar
Hero
Opening proposition
Visual led, left-aligned opening anchored by “Join waitlist”.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- left
- Heading
- Fraunces · 54.4px / 500
- Media
- image-led
Primary action
Conversion
“Join waitlist” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #e8632b
- Text
- #fdfbf6
- Border
- none
- Radius
- 10px
- Padding
- 14px 24px 14px 24px
- Type
- Inter · 14px / 500
Media frame
Visual proof
1 style-matched media element was found among 2 rendered candidates; cover fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- cover, fill
- Ratios
- 1.60, 6.00
- Radius
- 0px
- Candidate pool
- 2
Layout & narrative
The experience remains a single composed scene rather than a multi-section narrative.
- Structure
- Single-scene landing
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- Single-column flow
- Closing
- No footer detected
Imagery, motion & responsive
Imagery
Image led media acts as the page’s primary visual proof rather than decoration.
cover fitting · square-edged framesInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 2 images/canvas elements and 0 videos across the analyzed homepage.
Motion
8 declared keyframes and 1 active animation were inspectable at capture; observed timing uses 1.1s, 0.2s, 0.15s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- app-loading-icon-in, app-loading-icon-breathe, app-loading-ring, app-loading-meta-in, app-loading-line-scan, app-loading-ambient-a, app-loading-ambient-b, hwvgbZ
- Durations
- 1.1s, 0.2s, 0.15s, 0.7s, 7s, 8.5s, 2.4s
- Easings
- ease, cubic-bezier(0.16, 1, 0.3, 1), ease-in-out, ease, ease, ease, ease, ease, cubic-bezier(0.16, 1, 0.3, 1), ease-in-out, ease, cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94), ease
- States
- hover, focus, active
Mobile
The same 0 visible navigation actions remain at mobile width. Hero alignment changes from left to center; mobile heading size is 28.08px.
Primary content reads as a single-column mobile flow.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #064f1d canvas with #17190f primary copy before adding secondary surfaces.
- Use Fraunces at 54.4px/55.488px, weight 500, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Join waitlist” within the left-aligned visual-led hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 50px is the repeated treatment on pills.
- Do not reuse the #e8632b action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Fraunces and Inter.
- Do not spread the observed shadow treatment across every container; keep elevation selective.