A developer-tool landing that feels compiled from the same source as the product — light surface, lilac accent, Azeret Mono. A Rust-built, AI-native terminal.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Warp’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Technical minimalism at 2px spatial resolution with a monospace voice. The captured surface is light — near-white #fcfcfc background, warm #F6F2EE panels, near-black #0a0908 text — but the identity is built from a terminal cadence: Azeret Mono carries headings and labels with measured letter-spacing (0.6–0.75px), Inter handles reading body, and the radius scale never exceeds 6px so every surface keeps a squared technical edge. Accent is rationed like a status LED — lilac (#c59fff / #c7aeff) plus a warm terra (#d97757) at single-digit frequency. Elevation is drawn with a single 1px umber hairline (#c4c0ba), not shadows. There are NO gradients in this capture; structure and emphasis come from type, border, and disciplined color — never from a wash.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light near-white #fcfcfc canvas + warm #F6F2EE panels + near-black #0a0908 text + homeopathic lilac #c59fff/#c7aeff and warm terra #d97757 accents), the monospace-forward typographic cadence (Azeret Mono for headings and labels with 0.6–0.75px letter-spacing, Inter for body, theFuture for oversized display), the 2px-base spacing scale, the border-first elevation (1px #c4c0ba hairline before any shadow), the sub-6px radius discipline, and the cubic-bezier(0.4, 0, 0.2, 1) motion curve at 0.15s for state changes. Critically: ship ZERO gradients — this language earns its energy from type and border, not from color washes. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default and call out any decision that deviates.
Layout
Grid
Content width
Bounded
Framing
Flat
Grid strength
Strong
Light, near-monochrome canvas — #fcfcfc background paired with warm #F6F2EE panels and near-black #0a0908 text doing the overwhelming majority of surface work. Secondary text descends through warm grays: #5f5d59 (secondary) → #646159 (muted). The accent budget is tiny and rationed: lilac #c59fff / #c7aeff for emphasis and a warm terra #d97757 as the single brand-tier hue, both appearing at single-digit frequency. There are NO gradients in this capture — color carries meaning through placement and scarcity, never through washes.
Mode strategylight-first
Near-black #0a0908 text (the dominant reading + button-fill color, ~956 measured occurrences) on the #fcfcfc / #F6F2EE light surface
Panel + surface pair #F6F2EE used to separate cards and sections from the #fcfcfc body without introducing a border on every edge
Lilac accent #c59fff (--color-tertiary) / #c7aeff (text-pink) reserved for emphasis and highlight — single-digit surface frequency, never a fill
Warm terra #d97757 is the sole brand-tier hue (isBrandTier: true) — used as a rare focal accent, not decoration
Button fill inverts the canvas: #0a0908 background with #f8f5ee near-cream text for primary CTAs
Three-family system: Azeret Mono (headings + UI labels, the monospace brand voice), Inter (reading body + small UI), theFuture (oversized display headings only, 56–72px).
Monospace carries authority: Azeret Mono headings use measured positive letter-spacing — 0.6px at 12px heading, 0.75px at 15px body-mono. Do not substitute a geometric sans here; the mono cadence is the signature.
Inter handles body at 16px/24px (weight 400) and small text at 14px/20px and 12px/16px. Reading paragraphs never run in mono.
Display headings (theFuture) sit tight with negative tracking: -1.96px at 56px, -1.8px at 72px, and the --heading CSS var defines 80px / weight 400 / -0.035em. Display weight stays 400 — theFuture is not bolded.
Body line-height is generous (--body-line-height: 1.6) for the 16px reading layer; mono UI labels run tighter at 28px line-height on 14px for dense control rows.
Weight discipline is narrow: 400 (reading + display) / 500 (UI labels, mono + sans) / 700 only for rare bold emphasis. Mono is available at 400 and 500.
Eyebrow / overline labels use 10–11px Inter at wide tracking (2.8px) uppercase-feel — the only place letter-spacing goes large.
2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 — the 4px (×180) and 12px (×98) steps dominate, with a 2px floor for optical micro-correction.
Container max-width 1280px (--layout-max-width / --content-max-width: 80rem). Narrower bounded rails at 576 / 672 px for prose and form clusters.
Gutter values for flex/grid: 4 / 6 / 8 / 10 / 12 / 16 / 24 px dominate; larger 40 / 56 / 64 px gaps appear only between major sections.
Card / button padding pulls from the scale — buttons use the --btn-padding token (0.25rem 1rem = 4px 16px); cards run 16–24px. No magic numbers.
Section vertical rhythm leans on the 24 / 28 / 32px steps; --scroll-padding-top is 5.25rem to clear the sticky nav.
Surface styleFlat
Primary structural device is a 1px hairline border in muted umber #c4c0ba — observed 119 times. Reach for this before any shadow.
Drop shadows are whisper-soft and rare: shadow-md is `rgba(0,0,0,0.12) 0 8px 30px` and the --img-shadow token is `0 8px 30px rgb(0 0 0 / 0.12)`. Never a bloom, never a halo.
Many surfaces carry NO shadow at all (--shadow: none, --card-border: none) — separation comes from the #F6F2EE panel shift against the #fcfcfc body.
Inset 1px shadows handle focus/outline states: `rgb(55, 50, 69) 0 0 0 1px inset` and `rgb(31, 31, 31) 0 0 0 1px inset` — a drawn ring, not an outer glow.
Techniques
Umber hairline as surface delimiter
Default separation is a `1px solid #c4c0ba` border (the single most frequent border in the capture, 119 occurrences). Cards and inputs lean on this hairline plus the warm #F6F2EE panel fill rather than a drop shadow. Keep it 1px and solid — dashed is off-language.
Soft single-shadow lift for media
When elevation is genuinely needed (product imagery, floating cards), use exactly one soft shadow: `box-shadow: 0 8px 30px rgb(0 0 0 / 0.12)` (the --img-shadow token). Never stack shadows; never raise opacity past ~0.12 for ambient lift or ~0.28 for the rare modal (shadow-2xl).
Radius scale is tiny and granular: 1 / 2 / 3 / 4 / 5 / 6 px. Nothing exceeds 6px — the squared technical edge is identity, not an oversight.
The --radius token is 0.125rem (2px); --img-radius is 0.125rem; --btn-radius is 0rem (buttons are square-cornered). Default new surfaces to 3–4px, inputs to 2px, and keep buttons sharp unless a soft 4px is explicitly wanted.
Icons are stroke-based at ~1.5–2px weight, sized 16–20px (logos render at 20×20). No filled or duotone variants.
Tap targets minimum 40×40px on pointer, 44×44px on touch — buttons honor the --btn-padding (4px 16px) within those minimums.
Hovercolor / background-color shift (0.15s on cubic-bezier(0.4, 0, 0.2, 1)) — the dominant interactive transition (47 occurrences at 0.15s), opacity fade (0.15s on cubic-bezier(0.4, 0, 0.2, 1)), transform / translate / scale (0.2–0.3s on cubic-bezier(0.4, 0, 0.2, 1)) for lifts and nudges
Scroll patterns
Story / composer reveals on the custom curve cubic-bezier(0.16, 1, 0.3, 1) at 0.24–0.32s (warp-lite-story-reveal, warp-lite-composer-reveal)
Opacity + transform reveals at 0.4–0.5s on cubic-bezier(0.4, 0, 0.2, 1) for grouped content entrances
A single 50s linear marquee (scroll-left) for the trusted-by logo rail — the only loop animation
No parallax beyond subtle translateY — atmospheric, never theatrical
Primary easing: cubic-bezier(0.4, 0, 0.2, 1) — the standard ease anchoring 82 of the captured transitions. Default to it for almost everything interactive.
Reveal easing: cubic-bezier(0.16, 1, 0.3, 1) — an expressive ease-out reserved for storytelling reveals (story/composer), never for plain hover affordance.
Durations cluster tight: 0.15s (state change, 47×) is the workhorse; 0.2s (19×) for transforms; 0.3–0.5s for reveals and scroll choreography. Do not invent values outside {0.15, 0.2, 0.3, 0.4, 0.5}s.
Loop animations are forbidden except the explicit logo marquee (scroll-left, 50s linear) and loaders.
useReducedMotion mandatory — all reveals collapse to opacity-only or disable; the page respects both prefers-reduced-motion media queries observed in the capture.
Spring animations forbidden — deterministic cubic-bezier or linear only.
Monospace labels lead UI controls — buttons, tabs, and metadata read in Azeret Mono so the interface feels terminal-native.
Segmented / tab controls for binary or small-set choices; not toggle switches for content modes.
Tooltips reveal on hover + focus, dismiss instantly on blur.
Modals (z-index 80) for confirmations; toasts surface at z-index 100–200 with aria-live. Never nested modals.
Form validation: inline below field on blur; primary submit stays disabled until pristine validation passes.
Empty states: a mono caption label + one-line Inter copy + a square primary action button. No illustrations.
Loading states: inline spinner (loading-spinner-in) for buttons, shimmer (warp-lite-shimmer) for content blocks. No full-page overlays.
Approachdesktop-first
Desktop-first because the audience is developers on wide displays — the container holds at 1280px (80rem) and the densest content (mono tables, command rows) is designed for the wide rail first. Mobile reflows the same language without inventing an alternate architecture; the page is the page, just narrowed.
Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder (matches the captured breakpoints).
Container max-width 1280px; bounded prose rails at 576 / 672 px for narrow content.
Hide-on-mobile is banned — if a control exists on desktop it must reach mobile via reflow.
Tap target minimum 44×44 on touch; 40×40 on pointer devices.
Display type scales down with tracking compensation: theFuture hero 80 → 56 → ~40px, with negative tracking easing toward zero at smaller sizes.
focus-visible: inset 1px ring (`box-shadow: rgb(55, 50, 69) 0 0 0 1px inset` or the #c59fff accent on inputs) — replaces the default outline. Mandatory on every interactive element.
All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
Color contrast: #0a0908 text on #fcfcfc background ≈ 19:1 (AAA); secondary #5f5d59 on #fcfcfc ≈ 5.6:1 (AA). Never drop body text below 4.5:1.
The lilac accent #c59fff / #c7aeff is light — never use it for body text on the light canvas; reserve it for borders, underlines, and focus where contrast requirements differ.
ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast and status regions.
Motion respects prefers-reduced-motion — reveals reduce to opacity-only or disable; the logo marquee pauses.
Tap targets minimum 44×44 on touch; 40×40 on pointer.
Screen-reader-only content uses `sr-only`; never `display:none` for meaningful context. Decorative logo images carry empty alt.
Framer MotionNext/ImageLucide
Motion library is not directly named in the capture (no library signature in the chunk regex), but the profile — discrete cubic-bezier(0.4, 0, 0.2, 1) transitions at 0.15s plus named reveal keyframes on cubic-bezier(0.16, 1, 0.3, 1) — matches a Framer Motion / CSS-keyframe hybrid. Images run a Next/Image-style pipeline with 60% lazy-loading; logos are SVG-first (30 svg vs 9 png). Icons stroke-based, 16–20px.
Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true, margin: '-10%' }}` for story/composer reveals, using `ease: [0.16, 1, 0.3, 1]` and `duration: 0.32`
Interactive transitions use `ease: [0.4, 0, 0.2, 1]` and `duration: 0.15` — constants only
useReducedMotion guard wraps every animation primitive — no exceptions
Next/Image with `sizes` always set; `priority` only on the LCP candidate (above-fold logo / hero media)
SVG-first for logos and icons; PNG only where a vector is unavailable. No canvas, no WebGL, no Lottie
Lead UI labels and headings with Azeret Mono at 0.6–0.75px letter-spacing — the monospace voice is the identity.
Reach for the 1px #c4c0ba umber hairline before any shadow; let the #F6F2EE panel shift carry the rest of the structure.
Ration the accent: lilac #c59fff / #c7aeff and terra #d97757 stay at single-digit surface presence — borders, underlines, focus, never fills.
Keep every corner ≤ 6px; default buttons square (0px) or a tight 3–4px.
Default interactive motion to 0.15s on cubic-bezier(0.4, 0, 0.2, 1); reserve cubic-bezier(0.16, 1, 0.3, 1) for storytelling reveals.
Pass every page through useReducedMotion before shipping.
Invert the canvas for primary CTAs — #0a0908 fill with #f8f5ee text.
Never add a gradient — this capture has ZERO (gradients: []). The energy comes from type and border, not color washes. A gradient is off-language here.
Never exceed a 6px corner radius — the squared technical edge is load-bearing identity.
Never run body paragraphs in Azeret Mono — mono is for headings and labels; Inter carries reading text.
Never substitute a drop shadow for the 1px hairline as the default separator; soft shadow (≤ 0.12 opacity) is for genuine media lift only.
Never spray the lilac accent into fills or large surfaces — it works because it is scarce.
Never invent durations outside {0.15, 0.2, 0.3, 0.4, 0.5}s or a fifth interactive easing beyond {cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.16, 1, 0.3, 1), ease-in-out, linear}.
Never animate `height: auto` — use measured transforms or scaleY.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing base 2px, scale 2/4/6/8/10/12/14/16/20/24/28/32.
Container max 1280px (80rem) — do not exceed; bounded rails at 576 / 672.
Three families: Azeret Mono (headings/labels), Inter (body), theFuture (display ≥ 56px). No fourth display font.
Weight ladder: 400 / 500 / 700 (700 only for rare bold). Display stays 400.
Contrast audit: body text on the light canvas ≥ 4.5:1 (WCAG AA); #0a0908 on #fcfcfc ≈ 19:1.
Image audit: loading='lazy' on every non-LCP image; SVG-first for logos and icons.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 13 nodes across 6 levels, shallow to deep by color.
body5
divbanner
Header1
Nav
Main1
div (×6)1
Section
Section
Footer1
div1
div1
div1
Nav
Accessibility
Contrast matrix
78 combinations - 30 pass AA - 16 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox19.90
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0A0908
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox19.90
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#0A0908
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox18.27
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0A0908
bg
#F8F5EE
APCA Lc
+100
Use
foreground on background
AaThe quick brown fox18.27
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F8F5EE
bg
#0A0908
APCA Lc
-101
Use
background on foreground
AaThe quick brown fox17.14
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#1C1A26
APCA Lc
-106
Use
background on background
AaThe quick brown fox17.14
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#1C1A26
bg
#FFFFFF
APCA Lc
+104
Use
background on background
AaThe quick brown fox15.74
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F8F5EE
bg
#1C1A26
APCA Lc
-100
Use
background on background
AaThe quick brown fox15.74
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#1C1A26
bg
#F8F5EE
APCA Lc
+98
Use
background on background
AaThe quick brown fox10.99
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0A0908
bg
#C4C0BA
APCA Lc
+70
Use
foreground on neutral
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
