What is Sketch's primary brand color?

Sketch does not have a single chromatic brand voltage in the conventional sense. The primary CTA renders in charcoal (#151515) rather than in a brand color. The hero canvas is a pastel sunrise gradient stacking lavender, cream-peach, and coral. The closest thing to a brand accent is the coral peach #ff7843, which appears 12 times in the captured page — but exclusively inside product-mockup card backgrounds and the Sketch diamond mark, never as a page-level surface fill or CTA. This is the inverse of single-voltage discipline at Stripe or Cloudflare: instead of holding one accent in reserve, Sketch holds NO accent and lets the gradient carry the chromatic argument.

What typefaces does Sketch use, and what should I use as substitutes?

Sketch runs two voices: Reckless (a contemporary serif from Displaay Type Foundry) for the display tier at weight 500 — 76px hero h1 and section h2 share the same display step — and InterVariable (Rasmus Andersson's variable Inter) for every body, label, button, and nav surface at 11-22px in weights 400-600. The pairing is the distinguishing typographic move: most design tools commit to sans-only marketing copy. Reckless transfers cleanly to Lora or DM Serif Display at the same weight if you need an open-source substitute; InterVariable ships open from Rasmus Andersson and needs no substitution.

What is Sketch's corner-radius philosophy?

Sketch runs a generous-soft scale concentrated on three values: 20px on cards (frequency 25), 24px on the primary CTA pill (frequency 5), and the full pill at 9999px on secondary chips (frequency 9). 8px appears rarely as a sub-radius on small chips and dropdowns; 28px and 12px appear once each. The scale tops out at 24px with no 32 or 40px outer-card tier, and the pill-versus-rounded-pill distinction (24px CTA, 9999px chip) is the system's structural shape language. The CTA at 24px radius is unusual — most SaaS sites either go fully-pill or stay at 8-12px tight.

Why does Sketch use a pastel sunrise gradient instead of a solid hero canvas?

The hero band stacks lavender at the top, cream-peach in the middle, and coral at the bottom — a soft sunrise that fades through the entire above-fold section. The gradient calls back to the 1990s and 2000s Mac OS sunrise wallpapers that the original Sketch users grew up with; it's a positioning move against the dev-tool category's drift toward black canvases. Below the fold the page resets to a neutral white canvas where the same Reckless serif anchors editorial sections. The band flip — gradient hero into white editorial — is the page's structural device: the gradient signals the brand heritage, the white editorial signals current product depth.

Sketch Design System

Sketch's marketing system pairs a 76px Reckless serif with a pastel sunrise gradient hero and a 24-px-rounded charcoal CTA.

About Sketch DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source sketch.com

Design & Creative Tools

Sketch's marketing site does what almost no other Mac-native design tool attempts: it opens on a pastel sunrise gradient instead of a solid hero canvas. Lavender fades through cream-peach to coral as the hero band scrolls; the headline "Designers, welcome home." renders in a 76px Reckless serif in near-black weight 500, with a 24-px-rounded charcoal CTA pill beneath. Where Figma keeps its hero on warm orange and Adobe XD pushed dark indigo, Sketch returns to a softer palette closer to a 1990s Mac OS sunrise wallpaper than to a 2026 SaaS landing page. The gradient is the brand argument: a deliberate counter-move to the dev-tool category's drift toward black canvases and saturated voltages.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from the page CSS — near-black ink (the primary text and CTA color), the coral peach voltage, the legacy hyperlink blue, plus a handful of gradient end-stops and product-mockup accent tints; 12 typography tokens splitting Reckless across two display sizes (76px h1, 44px sub-display) in weight 500 and InterVariable across every body / label / nav tier at 11-22px in weights 400-600; 6 radius tokens covering the 20px card / 24px CTA / pill scale; 8 spacing tokens on an 8px base; and 14 components covering the charcoal CTA pill, the gradient hero, the Reckless display heading, the product card with tactile shadow, and the dark text input.

Feed this file to an AI coding tool and it reproduces Sketch's specific moves: Reckless serif at weight 500 across display, pastel sunrise gradient hero, charcoal CTA pill at 24px radius, InterVariable workhorse body, and coral accent reserved for in-product chip decoration. The token references resolve cleanly without invention. One move worth borrowing only if your brand can sustain it: the pastel sunrise gradient depends on the brand having a clear visual heritage to call back to — for SaaS without that history it reads as decoration rather than as positioning.

What makes it distinct

Pastel sunrise gradient herolavender, cream-peach, and coral instead of a solid hero canvas, the move that distinguishes Sketch from every other Mac-native dev tool
Reckless serif at weight 50076px hero h1 and 76px section h2 share a single display step, a serif-display moment most design tools have abandoned for sans
Charcoal CTA pillprimary buttons render at #151515 with 24px radius, not the brand-color voltage most SaaS pages reach for
Coral accent reserved for in-product chipsthe gradient-yellow Sketch diamond and coral peach #ff7843 appear inside product card mockups, never as page-level surface fills
InterVariable as workhorseevery body, label, button, and nav surface runs InterVariable at 14-22px in weights 400-600

Live at sketch.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

sketch.com

Explore Sketch

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.