Better Design
Back to library

Caution

B2B · YC Summer 2026

Visit website

Automated design study · full homepage

Light, left-aligned type-led product story with soft geometry and image-led proof.

Caution: Verifiable Compute Platform opens with “Know what runs on a server” in a left-aligned type-led hero.
Evidence & method · 3 capture notes
Source
https://caution.co/
Captured
2026-09-08
Extractor
2.5.0
Evidence
hero, middle, closing, mobile
  • Automated interpretation; editorial review is pending.
  • Animated or layered text alternatives were detected; the analysis records the most visually prominent state at capture.
  • Section-sequence extraction was bounded to 18 unique headings and 24 qualified regions from 20 unique headings across 27 raw groups and 8 qualified regions across 9 roots.
  • The hero heading was read from semantic heading markup.
  • 12 responsive breakpoint declarations were inspectable.
  • 1 stylesheet was inspectable; 0 cross-origin stylesheets were unavailable to rule inspection.
  • Computed styles describe the captured render; source design tokens and proprietary font files were not copied.

Captured screens

2026-09-08 · source viewport 1600 × 1000

Caution hero homepage design evidence. Hero viewport evidence; animated text state captured.
Hero1600 × 1000
Caution mid-page homepage design evidence. Mid-page viewport evidence; animated text state captured.
Mid-page1600 × 1000
Caution closing homepage design evidence. Closing viewport evidence; animated text state captured.
Closing1600 × 1000
Caution mobile homepage design evidence. Mobile viewport evidence; animated text state captured.
Mobile390 × 844

System overview

Hero
type-led · left
Surface
light
Density
balanced
Content width
1400px
Confidence
low
Primary action
None detected

Color system

Light surfaces use 7 repeated semantic colors; hierarchy is carried mainly by tonal contrast.

Canvas

Page canvas

Dominant rendered page background.
Surface 1

Surface

Repeated container or section fill; relative occurrence score 209.
Surface 2

Surface

Repeated container or section fill; relative occurrence score 193.
Surface 3

Surface

Repeated container or section fill; relative occurrence score 188.
Primary text

Primary text

Observed display foreground with 17.2:1 contrast against the captured canvas.
Secondary text

Secondary text

Observed reading foreground; measured canvas-reference contrast is 12.9:1.
Border

Border and divider

Most repeated inspectable border color.

Typography

A single-family system uses Plus Jakarta Sans 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.
display

Know what runs on a server

Plus Jakarta Sans · 88px/92.4px · weight 550 · tracking 0px · color rgb(15, 15, 15) · preview scaled
heading

Get started

Plus Jakarta Sans · 76px/83.6px · weight 600 · tracking -1.52px · color rgb(15, 15, 15) · preview scaled
body

Caution is a verifiable compute platform that adds an extra layer of integrity guarantees on top of…

Plus Jakarta Sans · 20px/30px · weight 350 · tracking 0.2px · color rgb(35, 43, 43)
body-small

Caution is backed by Y Combinator. Learn more.

Plus Jakarta Sans · 12.48px/17.472px · weight 400 · tracking 0.1248px · color rgb(255, 255, 255)
label

Learn more about Caution on Y Combinator

Plus Jakarta Sans · 12.48px/17.472px · weight 500 · tracking 0.1248px · color rgb(255, 255, 255)

Spacing & shape

Spacing

Base unit
4px
Section gap
36px
Container
16px
12px10px8px16px20px36px14px15px13px17px

Shape

Soft geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.

Containers
8px
Cards
10px
Buttons
3px
Pills
9999px
Media
20px
Inspect borders & shadows · 7
Borders
2px solid rgb(15, 15, 15)1px solid rgba(80, 80, 80, 0.600)1px solid rgb(184, 194, 204)2px solid rgb(184, 194, 204)3px solid rgb(15, 15, 15)
Shadows
rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.03) 0px 0px 20px 0px insetrgba(100, 180, 255, 0.45) 0px 0px 25px 0px

Component grammar

Token-based examples, not original components. Source fonts may fall back locally.

Hero

Opening proposition

1 observed

Type led, left-aligned opening anchored by the primary message.

Inspect 4 properties
Pattern
type-led
Alignment
left
Heading
Plus Jakarta Sans · 88px / 550
Media
image-led

Navigation

Global wayfinding

1 observed

Static navigation with 9 visible actions in the desktop opening.

Inspect 7 properties
Text
#0f0f0f
Border
none
Radius
0px
Padding
0px 0px 0px 0px
Type
Plus Jakarta Sans · 16px / 400
Position
static
Height
53px

Content card

Repeated content module

17 observed

17 style-matched content card instances were found among 68 candidates; properties describe the dominant observed cluster.

Example content
Inspect 6 properties
Text
#0f0f0f
Border
none
Radius
0px
Padding
0px 0px 0px 0px
Type
Plus Jakarta Sans · 16px / 400
Candidate pool
68

Badge or tag

Compact status or category label

14 observed

14 style-matched badge or tag instances were found among 14 candidates; properties describe the dominant observed cluster.

Example label
Inspect 7 properties
Background
#0f0f0f
Text
#ffffff
Border
none
Radius
10px
Padding
2.56px 7.68px 4.48px 7.68px
Type
Plus Jakarta Sans · 12.8px / 500
Candidate pool
14

Media frame

Visual proof

4 observed

4 style-matched media elements were found among 41 rendered candidates; fill fitting and 0px are the most repeated treatments.

Inspect 4 properties
Fit
fill, cover
Ratios
1.00, 5.62, 3.31, 4.88, 3.53
Radius
0px, 20px
Candidate pool
41

Footer

Closing navigation

1 observed

17 visible actions close the page on a #0f0f0f surface.

Inspect 7 properties
Background
#0f0f0f
Text
#0f0f0f
Border
none
Radius
0px
Padding
0px 0px 0px 0px
Type
Plus Jakarta Sans · 16px / 400
Links
17

Layout & narrative

The homepage continues through 20 observed sections, moving from the opening proposition into Verifiable compute, Stronger integrity guarantees, Works everywhere it matters.

Structure
Long-form product catalogue
Hero pattern
Type-led hero: display copy is the primary graphic
Grid
2 columns
Closing
Index footer with 17 actions
Full section sequence · 20
  1. Verifiable compute
  2. Stronger integrity guarantees
  3. Works everywhere it matters
  4. How teams use Caution
  5. One workflow for secure enclaves
  6. Deploy in minutes
  7. Frequently asked questions
  8. Get started
  9. From engineers trusted by industry leaders
  10. Prove what was deployed
  11. Verifiable LLM inference over sensitive data
  12. Verifiable oracles & data feeds
  13. Verifiable confidential AI for PHI
  14. Verifiable model training pipelines
  15. Verifiable custody & signing operations
  16. Verifiable nodes
  17. Verifiable staking infrastructure
  18. Initialize
  19. Deploy
  20. Verify

Imagery, motion & responsive

Imagery

Image led media acts as the page’s primary visual proof rather than decoration.

fill fitting · square-edged frames
Inspect imagery inventory
Composition
Multiple visual elements share the first viewport.
Inventory
41 images/canvas elements and 0 videos across the analyzed homepage.

Motion

10 declared keyframes and 8 active animations were inspectable at capture; observed timing uses 0.5s, 0.2s, 0.3s.

Reduced-motion rules detected
Inspect motion inventory
Libraries
CSS / browser-native or bundled source not identifiable
Keyframes
scroll, fadeIn, terminal-blink, scroll-indicator-fade-in, scroll-dot-pulse, cta-arrow-nudge, marquee-up, marquee-down, ticker-scroll, ticker-scroll-reverse
Durations
0.5s, 0.2s, 0.3s, 0.4s, 0.35s
Easings
steps(5), ease, ease, ease, cubic-bezier(0.4, 0, 0.2, 1), ease, cubic-bezier(0.4, 0, 0.2, 1), linear, ease, ease, ease, ease-in-out
States
hover, transition-all, active, focus

Mobile

Desktop navigation reduces from 9 visible actions to 0. Hero alignment changes from left to center; mobile heading size is 56px.

4 multi-column content regions remain on mobile.
Inspect responsive test
Viewport
390 × 844
Overflow
No horizontal overflow detected

Reproduction guidance

Do

  • Pair the observed #ebf3ff canvas with #0f0f0f primary copy before adding secondary surfaces.
  • Use Plus Jakarta Sans at 88px/92.4px, weight 550, for the primary display moment.
  • Let the left-aligned type-led hero establish hierarchy before secondary content.
  • Image led media acts as the page’s primary visual proof rather than decoration.

Don’t

  • Do not mix in arbitrary radii; 8px is the repeated treatment on containers.
  • Do not introduce an accent hue that is absent from the captured palette.
  • Do not introduce extra type families beyond Plus Jakarta Sans.
  • Do not copy transition-all declarations; keep only purposeful transform or opacity motion.