W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Sketch
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/sketch/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/sketch/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Sketch
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Sketch
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Sketch
A clear hierarchy in Sketch's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ sketch-yellow #FDB300 accent-hover
→ sketch-yellow-hover #FFC633 background-dark
→ sketch-canvas-dark #1C1C1E background-light
→ sketch-white #FFFFFF error
→ sketch-yellow #FDB300 identity
→ sketch-yellow #FDB300 on-identity
→ sketch-black #000000 primary
→ sketch-yellow #FDB300 primary-hover
→ sketch-yellow-hover #FFC633 success
→ sketch-yellow #FDB300 surface-dark
→ sketch-surface-dark #2C2C2E surface-light
→ sketch-surface-light #F5F5F7 text-primary-dark
→ sketch-white #FFFFFF text-primary-light
→ sketch-black #000000 warning
→ sketch-yellow #FDB300 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from sketch)
Light mode (14 roles)
accent
→ sketch-yellow accent-hover
→ sketch-yellow-hover background
→ sketch-white error
→ sketch-yellow primary
→ sketch-yellow primary-hover
→ sketch-yellow-hover success
→ sketch-yellow surface
→ sketch-surface-light surface-elevated
→ sketch-white text-primary
→ sketch-black text-secondary
→ sketch-text-secondary text-tertiary
→ sketch-text-tertiary warning
→ sketch-yellow warning-hover
→ sketch-yellow-hover Dark mode (14 roles)
accent
→ sketch-yellow accent-hover
→ sketch-yellow-hover background
→ sketch-canvas-dark error
→ sketch-yellow primary
→ sketch-yellow primary-hover
→ sketch-yellow-hover success
→ sketch-yellow surface
→ sketch-surface-dark surface-elevated
→ sketch-surface-dark text-primary
→ sketch-white text-secondary
→ sketch-text-tertiary text-tertiary
→ sketch-text-secondary warning
→ sketch-yellow warning-hover
→ sketch-yellow-hover Rules (8 typed constraints)
error · 6 rules
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 rule
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 rule
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.