---

version: alpha

name: Warp-Inspired-design-analysis

description: An inspired interpretation of Warp's design language — an agentic terminal-and-development-environment brand whose surface is a warm near-charcoal canvas (a tint warmer than pure black), broken only by clean Inter typography, the occasional Instrument Serif italic moment, and dense terminal-mockup imagery; CTAs are unusually understated, with shape geometry running tighter than most marketing sites.

colors:

primary: "#f7f5f0"

on-primary: "#2b2622"

ink: "#f7f5f0"

body: "#c9c0ad"

body-strong: "#dad2c1"

mute: "#aea69c"

canvas: "#2b2622"

canvas-soft: "#383330"

hairline: "#3f3a36"

typography:

display-xl:

fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif

fontSize: 64px

fontWeight: 400

lineHeight: 70.4px

letterSpacing: -1.6px

display-lg:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 48px

fontWeight: 400

lineHeight: 52.8px

letterSpacing: -1.2px

display-md:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 32px

fontWeight: 500

lineHeight: 40px

letterSpacing: -0.8px

display-sm:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 24px

fontWeight: 500

lineHeight: 32px

letterSpacing: -0.4px

display-serif:

fontFamily: Instrument Serif, Georgia, "Times New Roman", serif

fontSize: 48px

fontWeight: 400

lineHeight: 52px

letterSpacing: -0.5px

body-lg:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 18px

fontWeight: 400

lineHeight: 28px

body-md:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 16px

fontWeight: 400

lineHeight: 24px

body-md-strong:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 16px

fontWeight: 500

lineHeight: 24px

body-sm:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 14px

fontWeight: 400

lineHeight: 20px

body-sm-strong:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 14px

fontWeight: 500

lineHeight: 20px

caption:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 12px

fontWeight: 400

lineHeight: 16px

code:

fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace

fontSize: 13px

fontWeight: 400

lineHeight: 18px

code-md:

fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace

fontSize: 14px

fontWeight: 400

lineHeight: 20px

button-md:

fontFamily: Inter, system-ui, -apple-system, sans-serif

fontSize: 14px

fontWeight: 500

lineHeight: 20px

rounded:

none: 0px

xxs: 1px

xs: 2px

sm: 3px

md: 4px

lg: 6px

pill: 9999px

full: 9999px

spacing:

xxs: 2px

xs: 4px

sm: 8px

md: 10px

lg: 16px

xl: 24px

2xl: 32px

3xl: 48px

4xl: 64px

5xl: 96px

components:

nav-bar:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-strong}"

padding: "{spacing.md} {spacing.xl}"

nav-link:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-strong}"

rounded: "{rounded.sm}"

padding: "{spacing.xs} {spacing.md}"

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

padding: "{spacing.sm} {spacing.lg}"

button-secondary-ghost:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

padding: "{spacing.sm} {spacing.lg}"

button-icon-circular:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

padding: "{spacing.xs}"

text-input:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.body-sm}"

rounded: "{rounded.sm}"

padding: "{spacing.sm} {spacing.md}"

card-content:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

card-mockup:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.code}"

rounded: "{rounded.md}"

padding: "{spacing.lg}"

download-tile:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.body-md-strong}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

press-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

borderColor: "{colors.hairline}"

typography: "{typography.body-md}"

padding: "{spacing.lg} 0"

job-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.body-md-strong}"

padding: "{spacing.lg} 0"

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-xl}"

padding: "{spacing.5xl} {spacing.xl}"

content-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-md}"

padding: "{spacing.5xl} {spacing.xl}"

partner-logo-tile:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

typography: "{typography.body-md-strong}"

rounded: "{rounded.md}"

padding: "{spacing.lg}"

testimonial-card:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: "{spacing.3xl} {spacing.xl}"

ex-pricing-tier:

description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface."

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.ink}"

borderColor: "{colors.hairline}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

ex-pricing-tier-featured:

description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)."

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

ex-product-selector:

description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)."

backgroundColor: "{colors.canvas-soft}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

ex-cart-drawer:

description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)."

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

item-divider: "{colors.hairline}"

ex-app-shell-row:

description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator."

backgroundColor: "{colors.canvas}"

activeIndicator: "{colors.primary}"

rounded: "{rounded.sm}"

padding: "{spacing.sm} {spacing.md}"

ex-data-table-cell:

description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm."

headerBackground: "{colors.canvas-soft}"

headerTypography: "{typography.caption}"

bodyTypography: "{typography.body-sm}"

cellPadding: "{spacing.sm} {spacing.md}"

rowBorder: "{colors.hairline}"

ex-auth-form-card:

description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside."

backgroundColor: "{colors.canvas-soft}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

ex-modal-card:

description: "Modal dialog surface — same chrome as feature-card with elevated shadow."

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

ex-empty-state-card:

description: "Empty-state illustration frame."

backgroundColor: "{colors.canvas-soft}"

rounded: "{rounded.lg}"

padding: "{spacing.2xl}"

captionTypography: "{typography.body-md}"

ex-toast:

description: "Toast notification surface — feature-card shape + medium shadow."

backgroundColor: "{colors.canvas}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

typography: "{typography.body-sm}"

---