System overview
- Hero
- type-led · center
- Surface
- light
- Density
- balanced
- Content width
- 1176px
- 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 28.Surface
Repeated container or section fill; relative occurrence score 6.Surface
Repeated container or section fill; relative occurrence score 2.Primary text
Observed display foreground with 15.4:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 5.0: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 Helvetica Neue to display, body text; SFMono Regular to label text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Give your agent more than web search.
Helvetica Neue · 64px/62.72px · weight 600 · tracking -3.52px · color rgb(37, 37, 34)Plan the VidCon trip next month. Find travel options that fit my schedule. Draft personalized cold…
Helvetica Neue · 16px/23.2px · weight 400 · tracking 0px · color rgb(37, 37, 34)X
SFMono Regular · 14px/20px · weight 400 · tracking 0.56px · color rgb(110, 112, 104)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 48px
- Container
- 16px
8px4px16px48px24px20px6px14px42px32pxShape
Sharp geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Containers
- 9px
- Pills
- 9999px
- Media
- 0px
- Buttons
- 0px
Inspect borders & shadows · 7
1px solid rgb(222, 223, 217)1px solid rgb(207, 208, 199)1px solid rgb(174, 176, 168)1px solid rgb(0, 0, 0)1px solid rgb(17, 18, 15)rgb(255, 255, 255) 0px 0px 0px 0pxrgba(255, 255, 255, 0.95) 0px 1px 0px 0px inset, rgba(28, 29, 24, 0.1) 0px 18px 42px 0px, rgba(28, 29, 24, 0.05) 0px 3px 10px 0pxComponent grammar
Hero
Opening proposition
Type led, center-aligned opening anchored by “Join waitlist”.
Inspect 4 properties
- Pattern
- type-led
- Alignment
- center
- Heading
- Helvetica Neue · 64px / 600
- Media
- image-led
Navigation
Global wayfinding
Static navigation with 6 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #11120f
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Helvetica Neue · 16px / 400
- Position
- static
- Height
- 67px
Primary action
Conversion
“Join waitlist” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #5b43d6
- Text
- #ffffff
- Border
- none
- Radius
- 0px
- Padding
- 8px 20px 8px 20px
- Type
- Helvetica Neue · 16px / 600
Media frame
Visual proof
18 style-matched media elements were found among 25 rendered candidates; contain fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- contain, fill
- Ratios
- 1.00, 2.69, 2.32, 2.41, 1.43
- Radius
- 0px
- Candidate pool
- 25
Footer
Closing navigation
5 visible actions close the page on a #ffffff surface.
Inspect 7 properties
- Background
- #ffffff
- Text
- #6e7068
- Border
- 1px solid rgb(17, 18, 15)
- Radius
- 0px
- Padding
- 20px 48px 20px 48px
- Type
- SFMono Regular · 14px / 400
- Links
- 5
Layout & narrative
The homepage continues through 3 observed sections, moving from the opening proposition into Click MCP, Use cases, Make your agents more capable.
- Structure
- Editorial product narrative
- Hero pattern
- Type-led hero: display copy is the primary graphic
- Grid
- 1 column
- Closing
- Utility footer with 5 actions
Full section sequence · 3
- Click MCP
- Use cases
- Make your agents more capable.
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
- 25 images/canvas elements and 0 videos across the analyzed homepage.
Motion
8 declared keyframes and 10 active animations were inspectable at capture; observed timing uses 0.3s, 0.5s, 0.52s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- click-enter, click-copy-in, click-tool-in, click-panel-in, click-card-in, pulse, enter, exit
- Durations
- 0.3s, 0.5s, 0.52s, 0.54s, 0.56s, 0.16s, 0.42s
- Easings
- cubic-bezier(0.2, 0.75, 0.25, 1), ease, linear
- States
- transition-all, hover, focus, disabled
Mobile
The same 6 visible navigation actions remain at mobile width. Hero remains center-aligned; mobile heading size is 40px.
1 multi-column content region remains on mobile.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #ffffff canvas with #252522 primary copy before adding secondary surfaces.
- Use Helvetica Neue at 64px/62.72px, weight 600, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Join waitlist” within the center-aligned type-led hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 9px is the repeated treatment on containers.
- Do not reuse the #5b43d6 action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Helvetica Neue and SFMono Regular.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.