A gallery-white, monochrome system built to disappear behind the content it curates. Near-black ink on a pure white canvas, stadium-pill controls, a ladder of barely-there neutral tints instead of shadows, and the Saans typeface at unusual variable weights. One electric blue accent is reserved for commercial signals; every other color on screen belongs to the product screenshots being showcased.
Saans — a contemporary neo-grotesque used exclusively (Inter shown as substitute). The voice comes from unusual variable-font weight positions: a chunky 652 for every heading, a bookish 456 for text, an airy 300 for hero subtitles. Zero letter-spacing at every size; headlines end with a period.
White surface, 1px soft hairline, 24px corners. The default plan tier.
Soft-canvas fill, borderless — emphasis by tint, not outline. Carries the blue Popular badge.
Avatar with overlapping company mini-badge, quote body in ink, 16px corners.
Full-width ink surface with rounded top corners — the page's polarity-inverted end-stop.
8% ink-wash fill, no border, 16px corners, faint placeholder.
Focus is a 2px ink ring — signaled in monochrome, no accent color.
Soft-canvas stadium track; the active option is a white pill.
A horizontally-centered stadium bar detached from the viewport edge — soft-canvas fill, ink links, primary pill CTA. Persists on scroll.
The iOS icon silhouette at every size — library counters, nominee rows, brand marquees.
Squircle icon + heading-3 wordmark, scrolling in full-bleed strips.
Curator portraits stay strictly black-and-white; caption overlays the lower edge.
| Feature row | ✓ | ✓ | ✓ |
| Feature row | — | ✓ | ✓ |
| Feature row | — | ✓ | ✓ |
Feature rows divided by 1px soft-canvas rules; the recommended plan's column washed in soft canvas.
8px base unit with 4px half-steps. Card interiors use lg (24px); section gaps run section (80px) to section-lg (120px).
Pills for everything interactive (9999px), 16px on inputs and media tiles, 24px on content cards — plus the signature 30% squircle on app icons.
| Name | Width | Key changes |
|---|---|---|
| xs | < 600px | Minimum layout; auth split-panel drops its screenshot marquee |
| sm | 600–719px | Single-column layouts; display type scales down from 80px |
| md | 768–840px | Pricing cards stack 1-up; portrait grid drops to 2-up; nav links collapse |
| lg | 1024px | Comparison table condenses; testimonial masonry drops to 3 columns |
| xl | 1280px | Default desktop grid |
| 2xl | ≥ 1536px | Max content width engaged; marquees widen |
Touch targets: the fixed-height CTA pills and toggle segments clear 44×44 WCAG-AAA; inputs pad to a similar height. Collapsing: the floating nav pill persists across breakpoints, tightening to logomark + CTA; pricing 2-up, portrait 3-up, and testimonial 4-up grids collapse column-by-column; section padding compresses from section-lg (120px) toward section (80px); display type scales down while keeping weight 652.