DESIGN.md examples
168 brandsReal design systems from 168 product sites, in the DESIGN.md format Google published with Stitch. Pick one and your AI coding agent builds in that style. What is DESIGN.md?
Make one from any siteAI 14
-
Anthropic
anthropic.comTypeanthropicSerif · anthropicSans
-
bolt.new
bolt.newTypeSchibsted Grotesk · Silkscreen
-
Cursor
cursor.comTypeCursorGothic · EB Garamond
-
DeepL
deepl.comTyperobotoLatin
-
ElevenLabs
elevenlabs.ioTypeWaldenburg · Inter
-
Granola
granola.aiTypequadrant · melange
-
Hugging Face
huggingface.coTypeSource Sans Pro · IBM Plex Mono
-
Mistral
mistral.aiTypeALTMistral · Inter
-
Perplexity AI
perplexity.aiTypepplxSans
-
Replicate
replicate.comTyperb-freigeist-neue · basier-square
-
Runway
runwayml.comTypeabcNormal
-
Suno
suno.comTypeNeue Montreal · Editorial New
-
Synthesia
synthesia.ioTypeBasiersquare Webfont
-
v0
v0.appTypeGeistSans · Inter
Developer tools 37
-
Astro
astro.buildTypeObviously
-
Auth0
auth0.comTypeAeonik · Aeonik Mono
-
Bun
bun.shTypeArchivo
-
Clerk
clerk.comTypegeistNumbers
-
Cloudflare
cloudflare.comTypeSTK Bureau Sans
-
Datadog
datadoghq.comTypeNationalWeb
-
Deno
deno.comTypeInter · Menlo
-
Docker
docker.comTypeRepro · Inter
-
Flutter
flutter.devTypeGoogle Sans Flex
-
Fly.io
fly.ioTypeMackinac · Fricolage Grotesque
-
GitHub
github.comTypeMona Sans · Mona Sans VF
-
GitLab
gitlab.comTypeGitLab Sans · GitLab Mono
-
Go
go.devTypeRoboto
-
Grafana Labs
grafana.comTypePoppins · Inter
-
MongoDB
mongodb.comTypeSohne Condensed · Sohne
-
Neon
neon.techTypeInter · GeistMono
-
Netlify
netlify.comTypeFigtree · Instrument Sans
-
Next.js
nextjs.orgTypeGeistSans
-
Node.js
nodejs.orgTypeOPEN SANS · SFMono-Regular
-
Postman
postman.comTypegtStandard
-
Prisma
prisma.ioTypeSora · Inter
-
Python.org
python.orgTypeFlux-Regular · SourceSansProBold
-
Railway
railway.comTypeIBM Plex Serif · Inter
-
React
react.devTypeOptimistic Display · Optimistic Text
-
Redis
redis.ioTypeprimaryFont · Space Grotesk
-
Render
render.comTypeRoobert · PPNeueMontreal
-
Resend
resend.comTypedomaine · aBCFavorit
-
Retool
retool.comTypesaansFont · pxGroteskFont
-
Rust
rust-lang.orgTypeAlfa Slab One · Fira Sans
-
Sentry
sentry.ioTypeDammit Sans · Rubik
-
Supabase
supabase.comTypeManrope · Inter
-
Svelte
svelte.devTypeDM Serif Display · Fira Sans
-
Twilio
twilio.comTypeBuffalo · Whitney SSm
-
TypeScript
typescriptlang.orgTypeSegoe UI Web (West European) · JetBrains Mono
-
Vercel
vercel.comTypeGeistSans · Geist Mono
-
Vite
vite.devTypeAPK Protocol · Inter
-
Vue.js
vuejs.orgTypeInter var experimental
UI and animation libraries 7
SaaS and productivity 37
-
37signals
37signals.comTypeLab Grotesque
-
Airtable
airtable.comTypeATSeasonSans · SF Pro Text
-
Arc
arc.netTypeMarlin Soft SQ · Marlin
-
Asana
asana.comTypeTWK Lausanne
-
Atlassian
atlassian.comTypeCharlie Display · Charlie Text
-
Attio
attio.comTypeinterDisplay · inter
-
Basecamp
basecamp.comTypeGraphik
-
Cal.com
cal.comTypeCal Sans · Cal Sans UI Variable Light
-
Calendly.com
calendly.comTypeCalendly Sans · Wulkan Text
-
ClickUp
clickup.comTypePlus Jakarta Sans · Inter
-
Coda
coda.ioTypeCalibre-R · Inter
-
Craft
craft.doTypeUntitledSerifFont · UntitledSansFont
-
Deel
deel.comTypeBagossExtendedFont · BagossCondensedFont
-
Dropbox
dropbox.comTypeSharp Grotesk · Sharp Grotesk 23
-
Fastmail
fastmail.comTyperoca · Proxima Nova
-
Folk
folk.appTypeUxumgrotesque · Inter
-
HEY
hey.comTypeReally Sans Large · Moniker
-
Lattice
lattice.comTypeMatter
-
Linear
linear.appTypeInter Variable · Berkeley Mono
-
Loom
loom.comTypeCharlie Display · Charlie Text
-
Make
make.comTypeSatoshi
-
Miro
miro.comTypeRoobert PRO Medium · Noto Sans
-
monday.com
monday.comTypePoppins
-
n8n
n8n.ioTypen8n Baumer Uniwidth · Inter
-
Notion
notion.comTypeNotionInter
-
Obsidian
obsidian.mdTypeSystem fonts
-
Plain
plain.comTypeABC Favorit Regular · ABC Favorit Medium
-
Raycast
raycast.comTypeInter · Segoe UI Variable
-
Rippling
rippling.comTypebasel
-
Slack
slack.comTypeSalesforce-Avant-Garde · Salesforce-Sans
-
Superhuman
superhuman.comTypeSuper Sans VF
-
Todoist
todoist.comTypeGraphik · Inter
-
Trello
trello.comTypeCharlie Display · Charlie Text
-
Twenty
twenty.comTypealeo · hostGrotesk
-
Typefully
typefully.comTypeInter · inter-arrows-subset
-
Zapier
zapier.comTypeDegular Display · Inter
-
Zoom
zoom.usTypeNewsreader · Inter
Fintech and payments 13
-
Brex
brex.comTypeinter
-
Family
family.coTypeFamily · Inter
-
Lemonsqueezy
lemonsqueezy.comTypeCircularpro book · Inter
-
Mercury
mercury.comTypearcadiaDisplay · arcadia
-
Monzo
monzo.comTypeMonzoSansDisplay · MonzoSansText
-
Paddle
paddle.comTypeserrifCondensed · Inter
-
PayPal
paypal.comTypePayPal Pro · PayPal Pro Text VF
-
Plaid
plaid.comTypePlaid Sans · Cern
-
Ramp
ramp.comTypeLausanne
-
Robinhood
robinhood.comTypePhonic · Capsule Sans Text
-
Square
squareup.comTypeSquare Sans Display VF · Exact Block
-
Stripe
stripe.comTypesohne-var
-
Wise
wise.comTypeWise Sans · Inter
Marketing and analytics 11
-
Amplitude
amplitude.comTypeGellix · IBM Plex Sans
-
Buffer
buffer.comTypeStolzl · Figtree
-
Dub
dub.coTypesatoshi · Inter
-
Grammarly
grammarly.comTypematter · Matter
-
Hootsuite
hootsuite.comTypeMontserrat
-
HubSpot
hubspot.comTypeHubSpot Serif · HubSpot Sans
-
Intercom
intercom.comTypeSaans · Serrif
-
Later
later.comTypeSuper X sans Display · Inter Tight
-
Mailchimp
mailchimp.comTypeMeans Web · Graphik Web
-
Mixpanel
mixpanel.comTypeGarnett Medium · Garnett Regular
-
PostHog
posthog.comTypeRoundHog
Design tools and site builders 13
-
Descript
descript.comTypebrett · gamuthDisplay
-
Excalidraw
excalidraw.comTypeTimes New Roman · Assistant
-
Figma
figma.comTypefigmaSans · figmaMono
-
Framer
framer.comTypeGT Walsheim Medium · Inter
-
LottieFiles
lottiefiles.comTypeDM Sans LF · Inter LF
-
Pitch
pitch.comTypeMark Pro Bold · Mark Pro Regular
-
Readymag
readymag.comTypecustom 157067
-
Rive
rive.appTypeOrbitron · Inter
-
Sketch
sketch.comTypeReckless · InterVariable
-
Spline
spline.designTypeSpline Sans
-
Squarespace
squarespace.comTypeClarkson · Clarkson Serif
-
Webflow
webflow.comTypeWF Visual Sans Variable
-
wix.com
wix.comTypewix-madefor-display-v2 · wix-madefor-text-v2
Inspiration 7
E-commerce and brands 12
-
Allbirds
allbirds.comTypeSelf Modern · Geograph
-
Apple
apple.comTypeSF Pro Display · SF Pro Text
-
Glossier
glossier.comTypeApercu
-
Gumroad
gumroad.comTypeABC Favorit · Arial
-
IKEA
ikea.comTypeOmani Rial
-
Nike
nike.comTypeNike Futura ND · Helvetica Now Text
-
Nothing
nothing.techTypeNType82-Regular · Ndot-Regular
-
Oura Ring
ouraring.comTypeEditorial New · AkkuratLL
-
Rivian
rivian.comTypeLiga · Adventure
-
Shopify
shopify.comTypeShopify-Inter · ui-monospace
-
Sonos
sonos.comTypeaktiv-grotesk
-
teenage engineering
teenage.engineeringTypete-20
Media and consumer apps 14
-
Airbnb
airbnb.comTypeAirbnb Cereal VF
-
BBC
bbc.comTypeBBC Reith Serif · BBC Reith Sans
-
Booking.com
booking.comTypeAvenir Next
-
Discord
discord.comTypeAbcgintodiscordnord · Abcgintodiscord
-
Duolingo
duolingo.comTypefeather · duolingo-sans
-
Headspace
headspace.comTypeHeadspace Apercu
-
Netflix
netflix.comTypeNetflix Sans
-
Pinterest
pinterest.comTypePin Sans
-
Spotify
spotify.comTypeSpotifyMixUITitle · SpotifyMixUI
-
Strava
strava.comTypeBoathouse
-
Substack
substack.comTypeCahuenga
-
The Verge
theverge.comTypepolySans · fkRomanStandard
-
Uber
uber.comTypeUberMove
-
WIRED
wired.comTypeWiredDisplay · Apercu
Security and privacy 3
No brand matches that. Make a DESIGN.md from its site instead.
Make one from any siteMake one from any site
Not listed? Paste any link and get its DESIGN.md and style guide, measured from the live page.
Questions about DESIGN.md examples
What is a DESIGN.md file?
A plain-text design system for AI coding agents: color, type, spacing and component tokens at the top, short rules underneath. Google published the format with Stitch. Read what DESIGN.md is and how it works.
How do I use one of these examples?
Download the file, put it in your project’s root folder and ask your agent to follow it. Setup guides: Claude Code, Cursor, Codex and v0, Lovable and Bolt.
Is there a DESIGN.md template?
Any example here works as one. Pick a site close to what you are building, keep the file’s sections and change the colors, fonts and rules to your own brand.
How do I get a DESIGN.md from a website that isn’t listed?
Paste its link into the DESIGN.md generator. It measures the live page and writes the file in under a minute. Our guide shows how to create a DESIGN.md from a website.
What is the best DESIGN.md file?
The one that matches the product you are making. A developer tool reads best with a dev tool’s file, a shop with a store’s. Good files are short: a clear palette, a type scale and a few rules.
Are these the brands’ official design systems?
No. Each file is an independent measurement of a public page, not made or approved by the brand. Use them to learn and prototype, and don’t copy logos, names or content.
Are the examples free?
Yes. Open, copy or download any of them, with no account.