---
version: alpha
name: Sketch
description: Design tool with a warm, human-first identity — Reckless serif display paired with Inter Variable, signature amber-yellow CTA against a light canvas, and soft decorative gradients that feel hand-painted rather than engineered.

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#f9f9f9"          # opaque approx of rgb(249,249,249) — slightly off-white
  surface-section: "#faf7f5"  # warm off-white used for alternate sections

  # Text / ink
  ink: "#212123"              # near-black from dembrandt high-confidence neutral
  ink-secondary: "#5c5c5c"    # muted gray for secondary text
  on-background: "#212123"

  # Brand accent — Sketch signature amber yellow
  primary: "#fdb300"          # Sketch amber yellow — CTAs, active nav pills
  on-primary: "#212123"       # dark text on yellow for contrast
  primary-hover: "#e5a200"    # darkened amber for hover state /* estimated */

  # Interactive / state
  focus-ring: "#212123"       # black outline focus ring
  border: "#e6e6e6"           # opaque approx of rgb(230,230,230) — input borders
  border-subtle: "#f0f0f0"    # very subtle divider /* estimated */

  # Shadow tints
  shadow-soft: "#000000"      # opaque approx — used at low alpha for ambient shadows

  # Decorative gradient stops (hero + section accents)
  gradient-blue: "#32adf7"    # rgb(50, 173, 247) — from dembrandt gradient data
  gradient-purple: "#744bd0"  # rgb(116, 75, 208)
  gradient-orange: "#e97f42"  # rgb(233, 127, 66)
  gradient-pink: "#fc7a9b"    # rgb(252, 122, 155)
  gradient-violet: "#b47eee"  # rgb(180, 126, 238)

typography:
  display-hero:
    fontFamily: "Reckless, Georgia, Times New Roman, serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -2px
  display:
    fontFamily: "Reckless, Georgia, Times New Roman, serif"
    fontSize: 76px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -1.5px
  heading-section:
    fontFamily: "Reckless, Georgia, Times New Roman, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.09
    letterSpacing: -1px
  heading-feature:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.09
    letterSpacing: 0px
  body-large:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  nav-link:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  button-ui:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "InterVariable, Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 52px
  5xl: 64px
  6xl: 100px

rounded:
  none: 0px
  xs: 3px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 11px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 11px 24px
  button-dark-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.background}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 11px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-pill-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 6px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  notification-banner:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 20px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 32px
---

# Sketch Design System

## Overview

Sketch's visual identity is the friendliest in the professional design-tool category — a warm, human-first experience that feels less like a sophisticated technical product and more like an invitation. The canvas is pure white (`{colors.background}`) with gentle off-white section breaks, and the signature amber-yellow (`{colors.primary}`) applied to primary CTAs functions as a stamp of warmth and optimism. This isn't a cold, engineer-approved yellow; it's the color of sunlight at 4pm, of creative energy.

The typography split tells the brand's whole story in two voices: Reckless, a transitional serif with personality, carries all hero and section headings at weight 500 — its slightly editorial, humanist quality signals that Sketch respects craft and aesthetics, not just function. Inter Variable handles every body and UI element, providing a clean, professional companion. The contrast between the two typefaces creates a conversational rhythm: Reckless opens the thought, Inter delivers the detail. Letter-spacing on display text is negative (-1px to -2px) but never extreme — Sketch wants presence without aggression.

Decorative gradients appear as gentle washes behind hero sections — soft blues, purples, and oranges (`{colors.gradient-blue}`, `{colors.gradient-violet}`, `{colors.gradient-orange}`) that feel more watercolor-painted than code-generated. These gradients never dominate; they tint the ambient space while the actual content — product screenshots, clear hierarchy, concrete benefit statements — does the persuading.

**Key Characteristics:**
- Reckless serif at weight 500 for all display text — editorial warmth, not tech minimalism
- Signature amber-yellow (`{colors.primary}`) exclusively for primary CTAs and active nav pills
- Pure white canvas with warm off-white section dividers (`{colors.surface-section}`)
- Inter Variable for all body and UI copy — clean, highly legible, familiarly neutral
- Multi-color decorative gradients as background ambience — blue, purple, orange, pink strip
- Generous rounded corners (`{rounded.lg}`–`{rounded.xl}`) across all containers and buttons
- Negative letter-spacing only on Reckless display levels (-1px to -2px); Inter runs at 0px
- Layered inset button shadows for subtle dimensionality on the primary CTA
- `"calt"` and `"liga"` OpenType features enabled across both type families
- Soft ambient box-shadows (rgba black at very low opacity) — depth without drama
- Breakpoints at standard intervals from 360px to 1920px, with fine-grained mobile steps

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): Page canvas, card backgrounds, nav. The dominant surface.
- **Near-White Surface** (`{colors.surface}`): Subtle off-white for form inputs, alternate container backgrounds.
- **Warm Section Tint** (`{colors.surface-section}`): Very slightly warmer off-white for hero sections and alternating page blocks.

### Text / Ink
- **Near-Black** (`{colors.ink}`): All headings, primary body text, dark CTA backgrounds. Not pure black — softer, more humane.
- **Muted Gray** (`{colors.ink-secondary}`): Secondary text, metadata, tertiary labels, hover-state text treatment.

### Brand Accent
- **Sketch Yellow** (`{colors.primary}`): The signature amber-yellow. Used exclusively for the primary "Get started" CTA and for active navigation pills. One brand color, used precisely — never decorative.
- **Yellow Hover** (`{colors.primary-hover}`): Slightly deepened amber for button hover state, keeping contrast intact.

### Borders & Structure
- **Light Border** (`{colors.border}`): Input outlines, subtle card strokes. Near-invisible but structurally present.
- **Focus Ring** (`{colors.focus-ring}`): Solid near-black focus outline for keyboard accessibility.

### Gradient System
A vibrant horizontal strip spanning `{colors.gradient-blue}` → `{colors.gradient-purple}` → `{colors.gradient-orange}` appears as a decorative accent. Smaller gradient panels in pink-to-violet (`{colors.gradient-pink}` → `{colors.gradient-violet}`) and warm peach tones surface in feature section backgrounds.

## Typography

### Font Family
- **Display**: `Reckless`, with fallbacks: `Georgia, Times New Roman, serif`
- **Body / UI**: `InterVariable`, with fallbacks: `Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif`
- **OpenType Features**: `"calt"`, `"liga"` enabled on both families for contextual alternates and ligatures

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 96px Reckless 500, -2px tracking — hero headlines, above-fold moments |
| `display` | 76px Reckless 500, -1.5px tracking — large section openers |
| `heading-section` | 44px Reckless 500, -1px tracking — feature section titles |
| `heading-feature` | 22px InterVariable 600 — card headings, feature sub-titles |
| `body-large` | 24px InterVariable 400 — hero sub-copy, prominent descriptions |
| `body` | 16px InterVariable 400 — standard body, nav links, form labels |
| `body-medium` | 16px InterVariable 600 — emphasized body, inline CTAs |
| `nav-link` | 16px InterVariable 400, line-height 1.0 — navigation items |
| `button-ui` | 16px InterVariable 600, line-height 1.0 — all button labels |
| `caption` | 12px InterVariable 500 — metadata, small labels, badges |

### Principles
- **Two voices, one conversation**: Reckless opens every section with warmth; Inter closes it with precision. Never mix within a single text element.
- **Negative tracking only at display scale**: Reckless headings compress at -1px to -2px. Inter body and UI text runs at 0px tracking — no forced tightening of reading text.
- **Weight restraint**: Reckless is always 500. Inter shifts between 300 (light supporting text), 400 (body), 500 (medium emphasis), 600 (UI elements and headings) — a tight band that avoids heavy-bold at small sizes.
- **Generous line-heights for body**: 1.33–1.65 on Inter body text for comfortable reading across paragraphs.

## Layout

### Spacing System
Base unit is **8px**, with common values at 8, 12, 16, 24, 32, 40, 52, 64, 100px. Scale lives in YAML (`xs` through `6xl`).

The spacing personality is generous but not extravagant — section padding in the 52–100px range, component internals at 12–24px. Sketch pages breathe without feeling sparse.

### Grid & Container
- Max content width: approximately 1220px, centered
- Column patterns: full-width hero, 2-column feature pairings, 3-column card grids
- Navigation: sticky horizontal bar at 12px vertical padding
- Hero sections: centered text with product screenshot below or beside

### Whitespace Philosophy
- **Air as trust signal**: The generous spacing between sections communicates stability — this is a mature product, not a startup in a hurry.
- **White canvas is the product promise**: A design tool whose marketing site looks like a well-laid-out Sketch file. The medium is the message.
- **Warm off-white breaks**: Section alternations use `{colors.surface-section}` rather than full background color changes — subtle enough to feel like breathing, not jarring.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text sections |
| Subtle (Level 1) | `rgba(0,0,0,0.08) 0 4px 8px` | Feature cards, product cards |
| Button (Level 2) | Layered inset: white highlight + near-black bottom inset + ambient | Primary CTA buttons |
| Input (Level 3) | `rgb(230,230,230) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px inset` | Form fields, input containers |
| Focus Ring | `3px solid {colors.focus-ring}` | All interactive elements on keyboard nav |

**Shadow Philosophy**: Sketch uses shadows to suggest physical presence without theatrical depth. The primary button carries a multi-layer inset shadow (white highlight on top, dark shadow at bottom, ambient below) that makes it feel like a tactile button you could push. Cards use a single soft ambient — low opacity, large radius. No hard shadows, no colored glows. Depth is modest, light is assumed to be from above.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 3px | Checkbox radius, minimal UI details |
| `sm` | 8px | Image thumbnails, small containers |
| `md` | 12px | Cards, notification banners, feature tiles |
| `lg` | 20px | Larger feature cards, section containers, gallery items |
| `xl` | 24px | Primary CTA buttons, prominent containers |
| `pill` | 9999px | Tags, nav pills, badge elements |

The radius system leans rounded rather than circular — Sketch doesn't use full-circle shapes. The dominant radius is `{rounded.lg}` (20px) for containers and `{rounded.xl}` (24px) for buttons, creating a consistently soft, approachable geometry across the interface.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants
- **`button-primary`** — Amber-yellow CTA with near-black text, 24px radius, layered inset shadow. The page's single most distinctive element. Used for "Get started for free."
- **`button-dark`** — Near-black fill with white text. Secondary primary action, used in nav for "Get started" at higher hierarchy.
- **`button-ghost`** — Transparent with near-black text. Used for lower-priority actions, alternative routes.

### Cards
- **`card`** — White surface, 20px radius, soft ambient shadow. Standard feature card.
- **`card-surface`** — Slightly off-white variant for cards on alternate section backgrounds.

### Navigation
- **`nav-bar`** — White horizontal bar, 12px vertical padding, Inter 400 links, amber pill for active item, dark "Get started" button right-aligned.
- **`nav-pill-active`** — Amber-yellow pill badge, `{rounded.pill}` radius, used to highlight the active nav item (e.g., "Pricing" in the screenshot).

### Inputs
- **`input`** — Off-white background, subtle 1px border shadow, 16px radius. Clean, minimal.
- **`input-focus`** — Background shifts to pure white; border shadow removed. Focus confirmed by ring.

### Badges & Banners
- **`badge`** — Pill-shaped, off-white bg, muted text. Used for "new beta" indicators, feature tags.
- **`notification-banner`** — Soft card below hero for beta announcements or product updates.

## Do's and Don'ts

### Do
- Use `{colors.primary}` amber-yellow exclusively for the highest-priority CTA on any given screen — its value comes from rarity
- Set Reckless display text at weight 500 only — lighter or bolder breaks the editorial warmth
- Pair `{typography.display-hero}` or `{typography.heading-section}` (Reckless) with `{typography.body-large}` (Inter) as immediate sub-copy — the two-voice pattern is load-bearing
- Apply negative letter-spacing only on Reckless (`-1px` to `-2px`); keep Inter at `0px`
- Use `{rounded.lg}` (20px) as the default container radius — soft but not pill-like
- Let product screenshots do the persuading — frame them with generous padding, subtle `{rounded.sm}` radius
- Use `{colors.surface-section}` for alternating section backgrounds — a gentle warmth, not a hard background switch
- Keep gradient decorations behind content, at low opacity — they tint the ambient, never compete

### Don't
- Don't add `{colors.primary}` to text, borders, or decorative elements — it belongs to CTAs only
- Don't use bold-weight Reckless (700+) — weight 500 is the brand
- Don't apply the gradient strip as a primary design element — it is ambient decoration, not a hero graphic
- Don't use tight letter-spacing on Inter body text — the zero-tracking is intentional for readability
- Don't introduce a secondary accent color — the entire palette is near-achromatic except for the amber CTA
- Don't use heavy hard-edged shadows — ambient soft shadows only
- Don't go below 16px for any UI or body text — Sketch's accessible, design-literate audience expects legibility
- Don't use square corners on buttons or interactive elements — `{rounded.xl}` minimum

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <360px | Tightest layout, single column, hero text at ~44px |
| Mobile | 360px–639px | Single column, stacked hero, hamburger nav |
| Large Mobile | 640px–767px | Slightly expanded margins |
| Tablet | 768px–1023px | 2-column feature grids begin, nav shows partial links |
| Small Desktop | 1024px–1219px | Full nav, 2–3 column grids, hero at ~76px |
| Desktop | 1220px–1439px | Full layout, 96px hero display |
| Wide | 1440px–1919px | Max-width container centered, margins expand |
| Ultra-wide | ≥1920px | Locked max-width, ambient margins |

### Touch Targets
- Buttons: 24px border-radius buttons minimum 44px height via padding — WCAG AA compliant
- Nav links: 16px text with generous padding; hamburger menu on mobile

### Collapsing Strategy
- **Navigation**: Full horizontal nav (logo + links + CTA) → hamburger at ≤767px
- **Hero text**: 96px Reckless → ~76px at tablet → ~44px at mobile; tracking preserves proportionally
- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically at mobile
- **Card grids**: 3-column → 2-column → 1-column across mobile/tablet/desktop
- **Section spacing**: 100px vertical → 52px → 32px from desktop to mobile

### Image Behavior
- Product screenshots scale responsively within padded containers
- `{rounded.sm}` radius preserved at all sizes
- Screenshots lazy-load on scroll; decorative gradient backgrounds are CSS-only (no image assets)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / CTA: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Surface alternate: `{colors.surface}`

### Example Component Prompts

- "Create a hero section on a white (`{colors.background}`) canvas. Headline: 96px Reckless weight 500, letter-spacing -2px, color `{colors.ink}`. Sub-copy: 24px InterVariable weight 400, line-height 1.33. CTA button: amber-yellow (`{colors.primary}`) background, `{colors.on-primary}` text, InterVariable 16px weight 600, border-radius 24px, padding 11px 24px, layered inset box-shadow. Add a soft multi-color gradient strip (blue `{colors.gradient-blue}`, purple `{colors.gradient-purple}`, orange `{colors.gradient-orange}`) as a decorative background element at low opacity."
- "Design a feature card on white surface. Heading: 22px InterVariable weight 600, color `{colors.ink}`. Body: 16px InterVariable 400, line-height 1.5, color `{colors.ink-secondary}`. Border-radius `{rounded.lg}` (20px). Padding 24px. Soft ambient shadow: rgba(0,0,0,0.08) 0 4px 8px."
- "Build a navigation bar with white background, padding 12px 32px. Logo left. Center links in InterVariable 16px 400. Active link wrapped in amber-yellow pill (`{colors.primary}`, `{rounded.pill}`, padding 6px 12px, near-black text). Right side: `{colors.ink}` filled button (border-radius 24px, white text, 16px Inter 600)."
- "Create a form input with off-white background (`{colors.surface}`), border-radius `{rounded.lg}`, padding 12px 14px, 1px border using `rgb(230,230,230)` inset shadow. On focus: background to pure white, ring outline 3px solid `{colors.focus-ring}`."
- "Compose a badge/tag pill using `{colors.surface}` background, `{colors.ink-secondary}` text, InterVariable 12px weight 500, border-radius `{rounded.pill}`, padding 4px 10px. For a 'beta' or 'new' label context."

### Iteration Guide

1. Start with a white (`{colors.background}`) canvas — never gray or off-white as the primary background
2. Use `{colors.primary}` amber-yellow for exactly one CTA per view — its power is scarcity
3. Reckless (weight 500) for headlines; immediately switch to InterVariable for body — the contrast is the personality
4. Keep shadows soft: ambient rgba at ≤0.08 opacity, large blur radius, no hard edges
5. Rounded corners throughout: `{rounded.lg}` (20px) for containers, `{rounded.xl}` (24px) for buttons — never sharp
6. Letter-spacing: negative on Reckless display only; always 0px on Inter
7. Add product screenshot as visual anchor — Sketch markets by showing what you can make with it

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Sketch. Brand names and trademarks belong to their respective owners.