DESIGN.md examples: free templates for websites and apps.

The fastest way to write a good DESIGN.md is to start from a complete one. Here are 24 free examples, 12 for websites and dashboards and 12 for mobile apps. Each has colors for light and dark mode, fonts, a type scale, corner radius, spacing, and rules for using them, and each is a plain Markdown file your agent can read from its URL.

Updated November 6, 2026 · 5 min read

What a complete DESIGN.md looks like

A DESIGN.md has YAML front matter with the design tokens, followed by sections that explain how to use them. Here is a shortened version of the Swiss example:

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

The full files also include secondary and tertiary colors, a type scale from display to small print, spacing, components, and layout. For the format itself, see DESIGN.md for Codex.

DESIGN.md examples for websites and dashboards

Paper, editorial: Calm, editorial and readable, like a well-set book page. DESIGN.md
Swiss, minimal grid: Black, white and one signal red on a strict grid. DESIGN.md
Ledger, dark SaaS dashboard: A dense, dark interface for numbers, with a terminal-amber accent. DESIGN.md
Mono, developer docs: Plain white pages, Geist type and one cobalt blue, built for docs and dev tools. DESIGN.md
Atelier, luxury fashion: Ivory, ink and a refined serif, like a fashion house lookbook. DESIGN.md
Noir, dark portfolio: Black, bone white and a huge serif. The work is the only color. DESIGN.md
Harbor, enterprise B2B: Navy, white space and steady structure for serious B2B products. DESIGN.md
Nordic, calm SaaS: Muted blues, soft greys and quiet confidence for productivity tools. DESIGN.md
Clinic, healthcare: Calm teal, clear type and plain language for health websites. DESIGN.md
Terra, earthy eco: Moss, linen and clay for brands that work close to the land. DESIGN.md
Chalk, friendly education: Bright, rounded and encouraging, like a good classroom. DESIGN.md
Pop, neo-brutalist: Thick black outlines, hard shadows and lemon yellow. Loud on purpose. DESIGN.md

DESIGN.md examples for mobile apps

App examples add the rules phone screens need: touch targets, a bottom tab bar, screen padding, and how numbers are set.

Stride, fitness app: Big condensed numbers and an energetic orange for movement apps. DESIGN.md
Pantry, food ordering app: Warm, friendly and appetizing, for food and ordering apps. DESIGN.md
Calm, wellness app: Soft sage, a gentle serif and room to breathe. DESIGN.md
Wallet, finance app: Clear balances, calm green and numbers you can trust. DESIGN.md
Focus, task manager app: A white page, one blue and nothing else between you and the task. DESIGN.md
Chatter, messaging app: Round bubbles, a friendly teal and conversations front and center. DESIGN.md
Voyage, travel app: Full-bleed photos, ocean blue and a serif that feels like a postcard. DESIGN.md
Boutique, fashion shopping app: Edge-to-edge photos, a Bodoni serif and black on white, like a shop window. DESIGN.md
Quest, gamified learning app: Streaks, XP and chunky buttons that make practice feel like a game. DESIGN.md
Care, healthcare app: One clear task per screen, for patients who just want to get it done. DESIGN.md
Vinyl, music and podcast app: Cover art first, a hot pink play button and a dark room to listen in. DESIGN.md
Hearth, smart home app: Warm amber light on a dark, quiet home screen. DESIGN.md

Each name links to a live preview in light and dark mode; each DESIGN.md link opens the plain file.

How to use an example

Copy the prompt on the system’s page into Codex or Claude Code. It tells the agent to save the file as DESIGN.md in your project and follow it for every screen.
Or download the file and put it in your project root yourself. Codex reads AGENTS.md automatically but not DESIGN.md, so add a line to AGENTS.md that points to it.
Change what you need. Swap the primary color for your brand color, or ask your agent to adjust the fonts, and keep the rest.

DESIGN.md is a plain-text format, so the same file works in other tools that read it, such as Google Stitch.

Frequently asked questions

Are these DESIGN.md templates free?

Yes. Every example is free to copy and use in your own projects.

Is there a DESIGN.md example for a mobile app?

Yes. Twelve of the examples are built for mobile apps, from fitness and food ordering to banking, messaging, and smart home apps.

Can I make my own DESIGN.md instead?

Yes. Use the DESIGN.md generator to make one from your own colors, fonts, corners, and spacing.