DSDesign system

The visual system. Shown, not described.

Every page on this site is built from a small set of primitives. Tokens, materials, typography, motion, and a handful of named components. /principles explains the rules. This page shows the result.

01Color

One accent. Coral. Used sparingly — for active states, hover affordances, and the single underline under the punch word of every headline. Violet is the cool base. Cyan appears only in ambient washes.

brand-coral

#F472B6

brand-violet

#8B5CF6

cyan-500

#06B6D4

emerald-400

#34D399

semantic only

02Typography

Inter with SF-Pro-leaning OpenType features (cv02 rounded g, cv11 single-storey a, ss03 shorter 8). JetBrains Mono for tabular numerals + mono labels. Three sizes per screen. No more.

font-display 5xl-7xl

Display headline.

text-base zinc-400

Body paragraph at 16px with 1.78 line height. Apple-grade reading rhythm. The body is meant to be read, not skimmed.

.mono-label

01Mono label

.spec-stat-value

35%

03Materials

Two materials. Both real frosted glass — backdrop-saturate(140%) plus a top-edge inner highlight so the eye reads thickness, not flatness.

.surface-glass

The default card material. Used everywhere a card needs to feel like a surface, not a tint.

backdrop-blur(20px) saturate(140%)

.surface-frost

The premium variant. Stronger blur + saturate, soft coral wash from the top-left corner. Used for hero accessories.

backdrop-blur(28px) saturate(160%)

04Buttons

Two button physics. Both use Apple's slow-out cubic-bezier so they feel weighted instead of springy. Hover lifts 1px + adds a 5px coral aura. Active snaps down in 50ms.

try hover + click

05Page anatomy

Every marketing hero follows the same five-line rhythm. Same numbered eyebrow, same display headline with one underlined punch word, same 3-pool aurora behind.

EXSample hero

A familiar pattern.

Mono-label, font-display headline with restrained coral hairline on the punch word, max-w-2xl lede. Then content. Same shape every time.

5-line rhythm

06Motion

One ease curve everywhere: cubic-bezier(0.16, 1, 0.30, 1). Slow out, deliberate arrival. Apple's product-video curve.

· Hero cursor: 1.2s slow-out arrival
· Button hover: 420ms slow-out lift + coral aura
· Button active: 50ms snap-down
· Aurora pools: 9-15s ambient drift, randomized phases
· Section dot rail: 300ms smooth-step transitions

07Primitives

Eleven shared React components. Refactoring any one of them propagates to every page that uses it — which is most pages.

<Navigation>
<Footer>
<DocHeader>
<FeatureRow>
<TestimonialsCarousel>
<DesktopShowcase>
<EnterpriseTrustSignals>
<ServicePipeline>
<CaseStudyBlock>
<ArchitectureReferenceCard>
<FAQAccordion>
<AnimatedButton>
<SectionRail>
<CommandPalette>
<ScrollProgress>

08⌘K

Global keyboard navigator. ⌘K (Mac) / Ctrl+K (everywhere else) opens a frosted-glass command palette with fuzzy search across every page on the site. Linear / Vercel / Cron-grade.

⌘ Ktry it now