# Sketch Design System

> A refined, monochrome canvas where crisp geometric typography meets soft, atmospheric gradient backdrops.

**Source:** https://sketch.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sketch relies on a stark, high-contrast monochrome foundation (`#000000` text on `#ffffff` surfaces) to let its product UI and atmospheric background gradients carry the visual weight. Typography pairs the expressive, tightly tracked serif `Reckless` for display with the utilitarian `InterVariable` for body and UI. UI elements favor pronounced border radii (20px–28px for cards, 24px for buttons) and employ highly crafted, multi-layered inset shadows to create tactile depth on primary actions without relying on chromatic accents.

## Signature DNA
1. **Tactile Button Depth** (Primary actions use a complex 4-layer shadow with inset highlights and dark drops to appear physical against the flat canvas, observed on all primary CTAs).
2. **Expressive Display Serif** (`Reckless` at 500/600 weight with tight tracking, up to -1.5px at 76px, establishes an editorial authority that contrasts with the technical product).
3. **Monochrome Foundation** (The complete absence of saturated brand colors in the UI layer; `#000000` and `#212123` drive all hierarchy, allowing the colorful product screenshots to pop).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-black` | `#000000` | Primary text, button backgrounds, borders | 113 | 1.0 | computed_style, brand_page |
| `color-foundation-white` | `#ffffff` | Page background, card surfaces, button text | 61 | 1.0 | computed_style, brand_page |
| `color-foundation-ink` | `#212123` | Secondary text, ghost button text | 354 | 0.8 | computed_style |
| `color-foundation-button` | `#151515` | Primary button background | 10 | 0.6 | computed_style |
| `color-foundation-muted` | `#5c5c5c` | Tertiary text, subtle labels | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-blue` | `#0000ee` | Standard text links | 11 | 0.8 | computed_style |
| `color-swiper-theme` | `#007aff` | Carousel/swiper accent (declared token) | N/A | N/A | `--swiper-theme-color` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `Reckless` | 500, 600, 700 | Display, section headings | Playfair Display | Commercial |
| `InterVariable` | 400, 500, 600 | Body, UI, navigation, captions | Inter | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `type-display-xl` | 76px | 76px | -1.5px | 500 | Hero titles | `h1.hero__title` |
| `type-display-lg` | 56px | 56px | -1.5px | 500 | Secondary hero titles | `h1.hero__title.entrance` |
| `type-display-md` | 48px | 52px | -1px | 500 | Major section titles | `h3.comparison-table__main-title` |
| `type-heading-lg` | 36px | 36px | -0.5px | 600 | Data headers | `span.comparison-header__value` |
| `type-heading-md` | 32px | 40px | -0.5px | 500 | Card titles | `h3.subscription-card__name` |
| `type-heading-sm` | 24px | 24px | normal | 500 | Sub-titles, currency | `span.subscription-card__currency` |
| `type-body-lg` | 18px | 28px | normal | 500 | FAQ questions | `h4.faq__item__question-text` |
| `type-body-md` | 16px | 24px | normal | 400 | Default running text | `p` |
| `type-body-sm` | 15px | 24px | normal | 400 | Feature lists | `span.subscription-card__feature-text` |
| `type-caption` | 12px | 14.4px | normal | 400 | Billing disclaimers | `div.subscription-card__billing` |

### Principles
1. **Negative tracking on display:** `Reckless` is tightly tracked (-1.0px to -1.5px) at sizes above 48px to create a compact, lockup-like headline.
2. **Inter for all UI:** `InterVariable` handles all interactive elements, body copy, and dense data tables.
3. **Monochrome text:** Text is strictly `#000000`, `#212123`, or `#5c5c5c`. Color is never used for typographic hierarchy.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 9 |
| `space-2` | 8px | 60 |
| `space-3` | 12px | 19 |
| `space-4` | 16px | 26 |
| `space-5` | 20px | 9 |
| `space-6` | 24px | 25 |
| `space-8` | 32px | 51 |
| `space-10` | 40px | 12 |
| `space-13` | 52px | 10 |
| `space-20` | 80px | 55 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Sharp edges, base containers | 413 occurrences |
| `radius-sm` | 8px | Small controls | 9 occurrences |
| `radius-md` | 16px | Inner card elements | 3 occurrences |
| `radius-lg` | 20px | Standard feature cards | 27 occurrences |
| `radius-xl` | 24px | Primary buttons | 16 occurrences |
| `radius-2xl` | 28px | Pricing cards, large surfaces | 15 occurrences |
| `radius-pill` | 9999px | Badges, secondary pills | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-none` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px` | Flat surfaces | 6 occurrences |
| `shadow-tactile` | `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset, rgba(0, 0, 0, 0.94) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 4px 0px` | Primary CTA buttons | 10 occurrences |
| `shadow-subtle-inset` | `rgba(0, 0, 0, 0.1) 0px 0.5px 1px 0.5px inset` | Ghost buttons | 3 occurrences |
| `shadow-card` | `rgba(74, 21, 39, 0.2) 0px 0px 1px 0px, rgba(74, 21, 39, 0.1) 0px 12px 24px 0px` | Elevated pricing cards | 4 occurrences |
| `shadow-dropdown` | `rgba(0, 0, 0, 0.08) 0px 0px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px` | Menus/popovers | 2 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get started for free").
**Pages observed:** https://sketch.com, https://sketch.com/pricing
**Spec:** Background `#151515` / Text `#ffffff` / Radius `24px` / Padding `11px 24px 12px` / Typography `16px InterVariable` / Shadow `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset, rgba(0, 0, 0, 0.94) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 4px 0px`
**States observed:** Default | Disabled: not captured

#### Ghost Button
**Role:** Secondary actions.
**Pages observed:** https://sketch.com, https://sketch.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#212123` / Radius `28px` / Padding `4px` / Typography `16px InterVariable` / Shadow `rgba(0, 0, 0, 0.1) 0px 0.5px 1px 0.5px inset`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Pill Button
**Role:** Tertiary actions, tags.
**Pages observed:** https://sketch.com
**Spec:** Background `rgba(0, 0, 0, 0.04)` / Text `#212123` / Radius `9999px` / Typography `16px InterVariable` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Outline Button (Small)
**Role:** Compact secondary actions (e.g., pricing toggles).
**Pages observed:** https://sketch.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#000000` / Border `1px solid #000000` / Radius `24px` / Padding `8px 16px` / Typography `13px InterVariable`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Standard content container.
**Pages observed:** https://sketch.com
**Spec:** Background `#ffffff` / Text `#212123` / Radius `20px` / Padding `32px 32px 0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Elevated Pricing Card
**Role:** Highlighting subscription tiers.
**Pages observed:** https://sketch.com/pricing
**Spec:** Background `rgba(255, 255, 255, 0.9)` / Text `#212123` / Radius `28px` / Padding `36px 36px 52px` / Shadow `rgba(74, 21, 39, 0.2) 0px 0px 1px 0px, rgba(74, 21, 39, 0.1) 0px 12px 24px 0px`
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Section Padding | `80px` (`space-20`) |
| Base Grid Gap | `24px` (`space-6`) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Multi-column grids stack to single column; hero text scales down; horizontal padding reduces. |

## Imagery & decoration
Sketch relies on large, high-fidelity product screenshots floating over soft, multi-color pastel mesh gradients. The UI itself remains strictly monochrome, acting as a neutral frame for the vibrant gradients and product imagery.

## Do's
* Do use the complex inset shadow (`shadow-tactile`) for primary CTAs to give them physical weight.
* Do use `Reckless` for all display typography, ensuring tight negative letter-spacing (-1.0px to -1.5px).
* Do maintain a strict monochrome palette (`#000000`, `#ffffff`, `#212123`) for all structural UI elements.
* Do use generous border radii (`20px` to `28px`) for cards and surfaces.
* Do rely on `InterVariable` for all dense data, pricing tables, and UI controls.

## Don'ts
* **Wrong:** Using a saturated brand color (like blue or orange) for primary buttons. **Right:** Using `#151515` with the tactile inset shadow. **Reason:** The brand is strictly monochrome to let product imagery stand out.
* **Wrong:** Setting `Reckless` with loose or default tracking at large sizes. **Right:** Applying `-1.5px` tracking at 76px. **Reason:** The editorial feel relies on tight, compact letterforms.
* **Wrong:** Using sharp `0px` corners for feature cards. **Right:** Using `20px` or `28px` radii. **Reason:** The system uses soft, rounded geometries to contrast with the crisp typography.

## Similar brands
* Vercel (Monochrome foundation, highly crafted button shadows)
* Linear (High contrast, tight typography, subtle borders)
* Framer (Product-first imagery, neutral UI frame)

## Quick start

```css
:root {
  /* Colors */
  --sketch-black: #000000;
  --sketch-white: #ffffff;
  --sketch-ink: #212123;
  --sketch-button-bg: #151515;
  --sketch-muted: #5c5c5c;

  /* Typography */
  --font-display: 'Reckless', serif;
  --font-ui: 'InterVariable', sans-serif;

  /* Shadows */
  --shadow-tactile: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset, rgba(0, 0, 0, 0.94) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 4px 0px;
  --shadow-card: rgba(74, 21, 39, 0.2) 0px 0px 1px 0px, rgba(74, 21, 39, 0.1) 0px 12px 24px 0px;

  /* Radii */
  --radius-card: 20px;
  --radius-card-lg: 28px;
  --radius-button: 24px;
}
```

## Agent prompt examples
1. "Create a primary CTA button using the Sketch design system. Use `#151515` for the background, `#ffffff` for the text, a `24px` border radius, and apply the specific 4-layer tactile inset shadow."
2. "Build a pricing card. The background should be `rgba(255, 255, 255, 0.9)` with a `28px` border radius. Use the `shadow-card` elevation token. Set the title in `Reckless` at 32px with -0.5px tracking."
3. "Design a hero section heading. Use the `Reckless` font at 76px, weight 500, with -1.5px letter spacing. The text color must be `#000000`."

## Known gaps
Hover, focus, and active states for interactive components were not captured in the source evidence. Mobile-specific typography scaling values are inferred but not explicitly tokenized in the dataset.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://sketch.com | 1440x900 | 2026-06-06T05:00:54.251Z |
| Pricing | https://sketch.com/pricing | 1440x900 | 2026-06-06T05:00:54.251Z |