Web Design System

The AI‑Native
Web System.

A living reference for the SDS public web experience. The brand now leads with AI‑Native as a stamped descriptor — always hyphenated, capital A‑N — applied to the platform, the workflow language, and the section-head pattern. The plum stage, sage / bone interludes and the single coral CTA per screen remain unchanged.

Color.

Eight brand colors, organized into a small set of semantic roles. Plum dominates marketing surfaces; sage and bone return us to neutral; coral commits the visitor to an action; lavender highlights what matters most in language.

A 70 / 20 / 7 / 3 distribution keeps the brand consistent across a long scroll. Coral never exceeds ~3% of a section's area — it's an arrow, not a wall.

Type.

One typeface — Space Grotesk — across display, headings, body and UI. Its slight humanist curves keep dense layouts approachable; its tight letterforms hold up at 128 px on the hero. We pair it with a system mono for code, kickers, and timestamps.

Spacing.

A 4 px base scale, doubling-with-a-comma. Use the named tokens — not raw pixels — so section rhythm stays in sync across pages. Sections breathe at --sp-9 top & bottom (96 px) on desktop.

Radii.

Soft, not round. 6 px is the SDS default — applied to nearly everything that has an edge. Pills are reserved for tags and the rare circular control.

Shadows.

Cards on plum stage rarely cast shadows — we rely on hairline borders. Shadows belong to light surfaces and to hover lifts. Three steps, all built around the plum hue at low alpha so they read warm.

Motion.

One easing curve does almost everything: cubic-bezier(0.2, 0.8, 0.2, 1). It accelerates fast and lands soft — the right feel for confident, "we got this" UI.

Buttons & CTAs.

The signature is the split-arrow CTA: a label and an arrow well separated by a tint of the button color. It is the most-used component on the site. Everything else exists to support it.

Forms.

Inputs are quiet by default — a hairline border on a faint tint — and brighten to lavender on focus. Form chrome stays out of the way so the call-to-action button does the work.

Eyebrows & tags.

The eyebrow is how every section introduces itself — a square coral or lavender bullet followed by tracked uppercase text. Pill tags carry content metadata: "Featured Article", "Case Study", "Event".

Cards & tiles.

Three card archetypes carry most of the marketing site: the resource card (eyebrow / title / link), the solid tile (a single statement, one color), and the breakout (an oversized coral block with a white action strip).

Navigation.

Sticky top nav, transparent at rest, plum-tinted glass once you scroll past 20 px. Sign-in is text; the demo button is the split coral CTA. The toggle on small screens becomes a single coral square — the brand's quiet party trick.

Iconography.

We standardize on Lucide — line, stroke 1.75, rounded joins, in a 24-grid. Coral is reserved for the single most important icon on a screen — a primary action. Everything else inherits plum or bone. Never emoji. Never Unicode glyphs.

Patterns & texture.

Four recurring background expressions. They live behind content — never compete with it. Dots fading from a corner; lavender washes; a coral glow over plum ink; a diamond network drifting across the dotted hero.

Dashboard chrome.

Marketing visuals borrow product-UI vocabulary: status pills, monospace timestamps, dotted dividers, and tracked column headers. The result is editorial visuals that still feel like software you can trust. Use sparingly — coral picks out the one most important data point per visual, nothing else.

Section system.

A long marketing page is a film score, not a checklist. We alternate plum and sage sections in a deliberate rhythm and break them with a coral or lavender interlude. Each section starts with an eyebrow, lands on one headline word in color, then commits to a single CTA.

Voice.

We talk like an operations team that has shipped — not a vendor pitching one. Short sentences. Real verbs. We point to specific outcomes ("$300K+ in annual savings"), not vague ones ("transformative impact"). When we use "AI", we say what it does.