# Sketch

> `sketch@1.0.0`

Sketch is a Mac-native vector design tool that pioneered the modern app-design workflow — symbols, libraries, components, and Cloud handoff. The brand voice is craft-forward, precise, and Mac-aligned. Visually, the identity is the diamond mark in Sketch Yellow (#FDB300) on a clean white canvas with near-black body text. Where competing design tools commit to blues and purples, Sketch keeps its distinctive warm yellow.


**Tags:** `saas`, `design-tools`, `sketch`, `vector-design`

## Atoms

### Palette

**Sketch** · `sketch@1.0.0` · Proprietary — All Rights Reserved

> Sketch's brand palette, anchored on Sketch Yellow (#FDB300) — the signature warm yellow-orange that has carried the diamond mark since the platform's early days. The institutional voice pairs that yellow with a clean white canvas and near-black body text on marketing surfaces. Where competing design tools commit to blues and purples, Sketch holds to a distinctive warm yellow. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `sketch-yellow` | Sketch Yellow | `#FDB300` |
| `sketch-white` | Sketch White | `#FFFFFF` |
| `sketch-black` | Sketch Black | `#000000` |
| `sketch-canvas-dark` | Sketch Canvas Dark | `#1C1C1E` |
| `sketch-surface-light` | Sketch Surface Light | `#F5F5F7` |
| `sketch-surface-dark` | Sketch Surface Dark | `#2C2C2E` |
| `sketch-text-secondary` | Sketch Text Secondary | `#6E6E73` |
| `sketch-text-tertiary` | Sketch Text Tertiary | `#A1A1A6` |
| `sketch-yellow-hover` | Sketch Yellow Hover | `#FFC633` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `sketch-white` | `#FFFFFF` |
| `surface` | `sketch-surface-light` | `#F5F5F7` |
| `surface-elevated` | `sketch-white` | `#FFFFFF` |
| `text-primary` | `sketch-black` | `#000000` |
| `text-secondary` | `sketch-text-secondary` | `#6E6E73` |
| `text-tertiary` | `sketch-text-tertiary` | `#A1A1A6` |
| `primary` | `sketch-yellow` | `#FDB300` |
| `primary-hover` | `sketch-yellow-hover` | `#FFC633` |
| `accent` | `sketch-yellow` | `#FDB300` |
| `accent-hover` | `sketch-yellow-hover` | `#FFC633` |
| `warning` | `sketch-yellow` | `#FDB300` |
| `warning-hover` | `sketch-yellow-hover` | `#FFC633` |
| `error` | `sketch-yellow` | `#FDB300` |
| `success` | `sketch-yellow` | `#FDB300` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `sketch-canvas-dark` | `#1C1C1E` |
| `surface` | `sketch-surface-dark` | `#2C2C2E` |
| `surface-elevated` | `sketch-surface-dark` | `#2C2C2E` |
| `text-primary` | `sketch-white` | `#FFFFFF` |
| `text-secondary` | `sketch-text-tertiary` | `#A1A1A6` |
| `text-tertiary` | `sketch-text-secondary` | `#6E6E73` |
| `primary` | `sketch-yellow` | `#FDB300` |
| `primary-hover` | `sketch-yellow-hover` | `#FFC633` |
| `accent` | `sketch-yellow` | `#FDB300` |
| `accent-hover` | `sketch-yellow-hover` | `#FFC633` |
| `warning` | `sketch-yellow` | `#FDB300` |
| `warning-hover` | `sketch-yellow-hover` | `#FFC633` |
| `error` | `sketch-yellow` | `#FDB300` |
| `success` | `sketch-yellow` | `#FDB300` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `sketch-yellow` | `#FDB300` |
| `on-identity` | `sketch-black` | `#000000` |
| `primary` | `sketch-yellow` | `#FDB300` |
| `primary-hover` | `sketch-yellow-hover` | `#FFC633` |
| `accent` | `sketch-yellow` | `#FDB300` |
| `accent-hover` | `sketch-yellow-hover` | `#FFC633` |
| `success` | `sketch-yellow` | `#FDB300` |
| `warning` | `sketch-yellow` | `#FDB300` |
| `error` | `sketch-yellow` | `#FDB300` |
| `background-light` | `sketch-white` | `#FFFFFF` |
| `background-dark` | `sketch-canvas-dark` | `#1C1C1E` |
| `surface-light` | `sketch-surface-light` | `#F5F5F7` |
| `surface-dark` | `sketch-surface-dark` | `#2C2C2E` |
| `text-primary-light` | `sketch-black` | `#000000` |
| `text-primary-dark` | `sketch-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** sketch-yellow, sketch-white, sketch-black
- **forbidden:** any-non-brand-color

> The Sketch diamond mark renders in Sketch Yellow as the canonical fill. Recoloring the mark into off-brand hues violates Sketch's brand-use guidance. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Sketch's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the diamond mark. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Sketch Black (#000000) on Sketch White (#FFFFFF) clears AA at 21:1. Note: Sketch Yellow on white fails AA for small text and should not be used as a body-text color. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, place the yellow diamond on the dark canvas (which clears AA at large sizes) or use a monochrome white variant for small wordmark lockups. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Sketch's trademark guidance forbids use of the Sketch name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Sketch-skinned surfaces must clear AA on body text; Sketch Yellow must not be used as a body-text color on light backgrounds because it fails AA. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Sketch's marketing surfaces render headings in the 500–700 band; lighter weights undermine the craft-forward voice of the brand. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** sketch-white, sketch-black, sketch-canvas-dark
- **doesNotPairWith:** sketch-surface-light

> Sketch Yellow reads cleanly against pure white and against near-black; on a warm off-white surface the yellow loses separation and the mark muddies. 

## Provenance

- **Source:** <https://www.sketch.com/press>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Sketch and the Sketch logo are trademarks of Sketch B.V. The primary brand color Sketch Yellow (#FDB300) is documented on Sketch's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Sketch name and mark is governed by Sketch's brand-use guidance at sketch.com/press. 
- **Imported:** `2026-05-18`
- **Notes:** Sketch's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `sketch@1.0.0` from the encyclopedia.*