Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 21, 2026
Sketch design system
Light monochrome interface measured from sketch.com: Reckless type with InterVariable, tonal surfaces and 20px corners.
- Background
- #F5F5F5
- Primary
- #151515
- Type
- Reckless
- Corners
- 20px
From sketch.com ↗ · 315 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Sketch
Sketch colors
13 roles measured on the page, grouped by where each color is used.
Surfaces
Snow
#F5F5F5backgroundPage background · 1×Snow
#F9F9F9surface-container-lowRaised areas one step from the page · 1×Snow
#FAFAFAsurface-containerCards and panels · 1×White
#FFFFFFsurface-container-highHover and pressed fills · 7×White 48%
#FFFFFF7AoverlayTranslucent fill for cards and controls · 1×Text
Charcoal
#212123on-surfacePrimary text and headings · 16×Near Black
#000000on-surface-strongHeadings and emphasis · 8×Graphite
#494949on-surface-variantSecondary text · 8×Slate
#585858on-surface-mutedMuted text and metadata · 30×White
#FFFFFFon-primaryText and icons on primaryAccents
Charcoal
#151515primaryPrimary buttons and calls to action · 4×Vivid Indigo
#0000EEsecondaryMost used accent color · 3×Borders
Near Black 10%
#0000001AoutlineBorders and dividers · 2×Gradients
Sketch fonts
2 families.
AaRecklessWeights 500Reckless, serif
AaInterVariableWeights 400, 600InterVariable, Inter, system-ui, -apple-system
headline-displayPage title (h1)Sketch76px · 500 · 1 · -0.02em
mobile 48px
mobile 48px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog44px · 500 · 1.09 · -0.023em
mobile 32px
mobile 32px
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog22px · 600 · 1.09
body-smSecondary and small textThe quick brown fox jumps over the lazy dog15px · 400 · 1.6
captionCaptions and fine printThe quick brown fox jumps over the lazy dog14px · 400 · 1.5
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 600 · 1.5
Contrast
Text on #F5F5F5
AaAAA
14.7:1AaAAA
19.3:1AaAAA
8.3:1AaAA
6.5:1Spacing
4px grid · 91% of values fit
xs4pxsm8pxmd14pxlg32pxxl52pxgutter24pxsection128pxmargin32pxcontainer1200pxShapes
Corner radii, most used first.
lg20px · 28×
xl24px · 16×
sm3px · 4×
md16px · 4×
Depth
Shadow
Ring
Shadow
Shadow
Components
Rebuilt from the measured CSS.
Get started
Email address
Card
Inline link
Motion
Interface transitions
0.001s0.25s0.4scubic-bezier(0.455, 0.03, 0.515, 0.955)ease
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F5F5F5 for the page and lift surfaces in small steps: #F9F9F9, #FAFAFA, #FFFFFF.
- Keep text in 4 levels: #212123, #000000, #494949, #585858.
- Let contrast carry emphasis; primary actions use #151515 on #F5F5F5.
- Set headlines in Reckless with tight tracking (-0.02em).
- Keep spacing on the 4px grid.
- Use 20px corners on most elements; larger surfaces also use 24px, 3px and 16px.
- Introduce new font families beyond Reckless and InterVariable.
- Add saturated accent colors; the measured palette is almost entirely neutral.
- Make interface transitions slower than 0.4s.
DESIGN.md208 lines
---
version: alpha
name: Sketch
description: "Light monochrome interface measured from sketch.com: Reckless type with InterVariable, tonal surfaces and 20px corners."
colors:
background: "#F5F5F5"
surface: "#F5F5F5"
on-surface: "#212123"
on-background: "#212123"
on-surface-strong: "#000000"
on-surface-variant: "#494949"
on-surface-muted: "#585858"
surface-container-low: "#F9F9F9"
surface-container: "#FAFAFA"
surface-container-high: "#FFFFFF"
overlay: "#FFFFFF7A"
outline: "#0000001A"
primary: "#151515"
on-primary: "#FFFFFF"
secondary: "#0000EE"
typography:
headline-display:
fontFamily: Reckless
fontSize: 76px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.02em
headline-lg:
fontFamily: Reckless
fontSize: 44px
fontWeight: 500
lineHeight: 1.09
letterSpacing: -0.023em
body-md:
fontFamily: InterVariable
fontSize: 16px
fontWeight: 400
lineHeight: 1
body-lg:
fontFamily: InterVariable
fontSize: 22px
fontWeight: 600
lineHeight: 1.09
body-sm:
fontFamily: InterVariable
fontSize: 15px
fontWeight: 400
lineHeight: 1.6
caption:
fontFamily: InterVariable
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
label-md:
fontFamily: InterVariable
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
headline-display-mobile:
fontFamily: Reckless
fontSize: 48px
fontWeight: 500
lineHeight: 1
headline-lg-mobile:
fontFamily: Reckless
fontSize: 32px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -0.016em
rounded:
sm: 3px
md: 16px
lg: 20px
xl: 24px
spacing:
base: 4px
xs: 4px
sm: 8px
md: 14px
lg: 32px
xl: 52px
gutter: 24px
section: 128px
margin: 32px
container: 1200px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-md}"
rounded: "{rounded.xl}"
padding: 11px 16px 12px 24px
height: 47px
input-field:
backgroundColor: "{colors.surface-container-low}"
textColor: "{colors.on-surface-strong}"
typography: "{typography.body-md}"
rounded: "{rounded.md}"
padding: 12px 14px
card:
backgroundColor: "{colors.surface-container}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: "{rounded.lg}"
padding: 100px 100px 78px 78px
link:
textColor: "{colors.on-surface-muted}"
---
# Sketch Design System
## Overview
Sketch describes itself as: “Sketch puts the focus back on you and your work. Made by designers, for designers.” The interface is light, built on **Snow (#F5F5F5)** with **Charcoal (#212123)** text and almost no color: actions are carried by contrast, not hue.
Type is set in **Reckless** and **InterVariable**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 20px.
Measured from [sketch.com](https://www.sketch.com/) on October 21, 2026 at 1440×900 and 390×844 from 315 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 13 roles, plus gradient stops #32ADF7, #744BD0, #E97F42, #FCC1C1.
- **Snow (#F5F5F5):** Page background, seen 1 time. Token `background`.
- **Charcoal (#212123):** Primary text and headings, seen 16 times. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 8 times. Token `on-surface-strong`.
- **Graphite (#494949):** Secondary text, seen 8 times. Token `on-surface-variant`.
- **Slate (#585858):** Muted text and metadata, seen 30 times. Token `on-surface-muted`.
- **Snow (#F9F9F9):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Snow (#FAFAFA):** Cards and panels, seen 1 time. Token `surface-container`.
- **White (#FFFFFF):** Hover and pressed fills, seen 7 times. Token `surface-container-high`.
- **White 48% (#FFFFFF7A):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Near Black 10% (#0000001A):** Borders and dividers, seen 2 times. Token `outline`.
- **Charcoal (#151515):** Primary buttons and calls to action, seen 4 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Indigo (#0000EE):** Most used accent color, seen 3 times. Token `secondary`.
## Typography
**Reckless** and **InterVariable** share the interface. Fallback stack: `Reckless, serif`. Other loaded fonts: Inter.
- **headline-display:** Reckless 76px at weight 500, line height 1, tracking -0.02em (48px on mobile). Page title (h1).
- **headline-lg:** Reckless 44px at weight 500, line height 1.09, tracking -0.023em (32px on mobile). Section headings (h2).
- **body-md:** InterVariable 16px at weight 400, line height 1. Body text.
- **body-lg:** InterVariable 22px at weight 600, line height 1.09. Lead paragraphs.
- **body-sm:** InterVariable 15px at weight 400, line height 1.6. Secondary and small text.
- **caption:** InterVariable 14px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** InterVariable 16px at weight 600, line height 1.5. Buttons, navigation and labels.
## Layout
Spacing follows a 4px grid: 91% of measured gaps and paddings are multiples of 4px.
- **Scale:** xs 4px, sm 8px, md 14px, lg 32px, xl 52px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1200px.
- **Page margin:** 32px on each side of full-width sections.
## Elevation & Depth
Raised elements use soft drop shadows. The most used recipes:
- `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`
- `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- `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`
Hairline rings and inset highlights also appear: `rgb(230, 230, 230) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px inset`.
## Shapes
Most elements use 20px corners. Measured radii, most used first:
- **lg (20px):** 28 elements.
- **xl (24px):** 16 elements.
- **sm (3px):** 4 elements.
- **md (16px):** 4 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Get started”):** #151515 fill, #FFFFFF text, 16px/600, 24px radius, padding 11px 16px 12px 24px, 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`.
- **input-field (“Email address”):** #F9F9F9 fill, #000000 text, 16px/400, 16px radius, padding 12px 14px, shadow `rgb(230, 230, 230) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px inset`.
- **card:** #FFFFFF7A fill, #212123 text, 16px/400, 20px radius, padding 100px 100px 78px 78px, shadow `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`.
- **link:** transparent fill, #000000A3 text, padding 0px.
## Do's and Don'ts
- Do use #F5F5F5 for the page and lift surfaces in small steps: #F9F9F9, #FAFAFA, #FFFFFF.
- Do keep text in 4 levels: #212123, #000000, #494949, #585858.
- Do let contrast carry emphasis; primary actions use #151515 on #F5F5F5.
- Do set headlines in Reckless with tight tracking (-0.02em).
- Do keep spacing on the 4px grid.
- Do use 20px corners on most elements; larger surfaces also use 24px, 3px and 16px.
- Don't introduce new font families beyond Reckless and InterVariable.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.4s.
## Motion
Interface transitions are quick: 0.001s, 0.25s, 0.4s. Longer ambient animations run 6s.
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`, `ease`, `ease-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/sketch.com/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the Sketch DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Reckless type, spacing, corners and buttons instead of its own defaults.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Sketch’s official design system?
No. Sitepeel measured it from sketch.com’s public page on October 21, 2026. It is an independent analysis, not made or approved by Sketch.
Can I use Sketch’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Sketch’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.