Design System — Components & Tokens

01 / Typography

Nebula Sans · 300 Light

The quick brown fox jumps over the lazy dog

Nebula Sans · 400 Book

The quick brown fox jumps over the lazy dog

Nebula Sans · 500 Medium

The quick brown fox jumps over the lazy dog

Nebula Sans · 600 Semibold

The quick brown fox jumps over the lazy dog

Nebula Sans · 700 Bold

The quick brown fox jumps over the lazy dog

Nebula Sans · 900 Black

The quick brown fox jumps over the lazy dog

JetBrains Mono · 400 / 500 / 700

const SYSTEM_METRICS = { revenue: 4.2, users: "2.1M", ms: 40 };

Page Title 38px / 700 / 1.12 Page Title Headline

Section Title 24px / 650 / 1.25 Section Chapter Header

Subsection 18px / 600 / 1.35 Subsection Subheader

Body Prose 16px / 400 / 1.65 Standard editorial body paragraph measure.

Meta Kicker 11px Mono / 700 / 1.4 CATEGORY KICKER // 2026

02 / Color Palette

Brand & Status Tokens

Primary Red-Orange #FF4D26

Slate Cyan #0284C7

Sage Emerald #059669

Warm Ochre #D97706

Surfaces (90% White System)

--bg-canvas #FFFFFF

--bg-surface #FAFAFA

--bg-subtle #F5F5F7

--bg-paper #F6F3EB

Text & Border Tokens

--text-primary #09090B

--text-body #27272A

--text-secondary #71717A

--border-hairline #E4E4E7

03 / Spacing Rhythm (Fibonacci Harmonic Scale)

--space-3xs (3px)

--space-2xs (5px)

--space-xs (8px)

--space-s (13px)

--space-m / prose (21px)

--space-l / heading (34px)

--space-xl / block (55px)

--space-2xl / section (89px)

--space-3xl / layout (144px)

04 / Corner Radii & Squircle Geometry

--radius-s: 6px

--radius-m: 12px

--radius-l: 16px

--radius-xl: 20px

--radius-full: 9999px

05 / Article Components & Layout System

All 17 editorial primitives, spatial ladders, and line-height invariants are housed in a live benchmark article rendered in the production sheet layout.

Presto Oct 14, 2026

Article Components & Layout Rules

Complete interactive benchmark of all 17 article primitives and every vertical spacing combination on the 9px baseline grid.

06 / Article Card Systems & Feeds

Modular card layouts and presentation styles: 2-column editorial, 3-column feed, and compact small list style with optimal image specifications.

Used for featured article pairs, case study highlights, and side-by-side reading recommendations.

Presto Sep 15, 2026

Why Custom Apps Are So Expensive

Behind the polished glass of a production application lies a multi-person infrastructure engine.

Phone App vs. Web Link App (Mobile App vs. Web App)

Presto Sep 18, 2026

Phone App vs. Web Link App (Mobile App vs. Web App)

Understanding the real architectural and commercial differences between native mobile and web.

Standard catalog grid layout powering the main /stories publication feed and topic archives.

Presto Sep 15, 2026

Why Custom Apps Are So Expensive

Behind the polished glass of a production application lies a multi-person infrastructure engine.

Presto Sep 18, 2026

Phone App vs. Web Link App

Understanding the real architectural differences between mobile apps and web apps.

Presto Sep 22, 2026

Redesigning Withings Health Mate

Rebuilding health tracking telemetry into a minimal, high-glance dashboard interface.

High-density editorial list layout with 92px square flush thumbnails, meta pill, excerpt, and hover navigation arrows.

Why Custom Apps Are So Expensive

The real labor math behind agency price tags and the solo founder burnout trap.

6 min read

Phone App vs. Web Link App (Mobile App vs. Web App)

Understanding the real architectural and commercial differences between native mobile and browser apps.

5 min read

Redesigning Withings Health Mate

Rebuilding health tracking telemetry into a minimal, high-glance dashboard interface.

7 min read

Text-only pull card with vertical accent notch, and inline citation pills that flow directly inside prose text.

ARCHITECTURE GUILD • 5 min read

Phone App vs. Web Link App (Mobile App vs. Web App)

Understanding the real architectural and commercial differences between native App Store mobile apps and browser-based Web Apps.

When planning product distribution, founders must choose between mobile store gatekeepers or browser agility Phone App vs. Web Link App to avoid burning through initial capital before proving customer traction.