/ Frontier AI · Inspired
A near-black canvas, white outline pills, and Universal Sans set at weight 400 with aggressive negative tracking. The pill is the only interactive shape; the eyebrow is the only ornament; the system reads as an engineering log, not a marketing site.
/ 01 · Color
The brand is dark-canvas only. White is the primary "color" — used as outline, fill, and ink. A muted accent palette of sunset / dusk / twilight / breeze lives in tokens but appears rarely on the marketing surface, reserved for product illustrations.
/ 02 · Typography
Universal Sans (Inter substitute) at weight 400 carries every display, body, and button. Geist Mono uppercase with positive tracking (1.4 px) carries every eyebrow, label, and metric counter. Negative tracking at display sizes is the brand's visual signature.
/ 04 · Cards
Cards are tight 8 px rectangles in canvas-card (#191919) with a 1 px hairline border. No shadow. No gradient. The brand uses hairline elevation only.
Charcoal fill, 1 px hairline border, 24 px interior padding. Default chrome for any content block on dark canvas.
ReadSame chrome as card-content. Hosts an SVG illustration plus headline, body, and a single outline pill CTA at the foot.
Custom VoicesSame chrome and the same translucent-white outline pill. The repetition IS the system — the pill carries every CTA across the site.
Read the docs/ 05 · Forms
Text inputs sit on the lighter canvas-soft (#1A1C20) with a 1 px hairline border, 8 px radius, and white ink. The same body-md type-stack carries the value as carries any paragraph.
/ 06 · Spacing
A 4 px base unit ladders the entire system. Hero / content bands sit on 64 px section padding at desktop; cards interior pad at 24 px.
/ 07 · Border radius
Two effective radii do all the work: 8 px for any card chrome and 9999 px for every interactive element. Full-bleed bands carry zero radius.
/ 08 · Elevation
The brand uses no shadows. Two levels — flat and hairline — carry every depth cue. Cards, buttons, and inputs all stop at the 1 px hairline border.
/ 09 · Signature
The hero band, content band, monospace eyebrow, hairline divider, sticky nav, and footer encode the brand's full surface vocabulary. Every page reduces to a stack of these blocks.
/ hero-band
96 px Universal Sans weight 400 with -2.4 px tracking on a near-black canvas. The negative tracking is the voice.
/ content-band
Standard 48 px display-md preceded by a Geist Mono uppercase eyebrow. Padding 64 px vertical on desktop.
Geist Mono uppercase tracked 1.4 px. The brand's signature label — reads like a code comment.
1 px solid #212327. Carries every section boundary on dark.
/ 10 · Responsive
Two breakpoints carry the system: a tablet reflow at 1024 px and a mobile reflow at 720 px. Hero scales 96 → 48 px; grids collapse 2-up → 1-up; nav inline links collapse into a hamburger.
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768 px | Hero scales 96 → 48 px; grids 1-up; hamburger nav; type-row stacks. |
| Tablet | 768 – 1023 px | Hero 72 px; section padding 72 / 32; nav center hides. |
| Desktop | ≥ 1024 px | Full 96 px hero, 2-up product card grid, 64 / 48 section padding. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.