DESIGN.md examples: 3 templates you can copy

Below are three complete DESIGN.md files for three very different apps, followed by a blank template. Copy whichever is closest to your product and change the values. If you're new to the format, what is DESIGN.md explains what the file is for; this page is the examples.

All three use the same four sections, in the same order: colors as a table of role-named tokens, typography, components, and rules. Keeping to that shape matters more than the wording, since tools find the values by looking for it.

Example 1: a dark finance app

Dark interfaces fail in two usual ways: pure black with pure white text, which glares, and gray text that's too dim to read. This file avoids both with a lifted background and a muted text color that still passes contrast.

# Vault design system

## Colors
| Token | Value |
|---|---|
| --background | #0E1114 |
| --foreground | #F2F4F5 |
| --primary | #5EEAA0 |
| --primary-foreground | #06230F |
| --secondary | #181C20 |
| --muted-foreground | #98A2AD |
| --border | #262B31 |
| --radius | 1rem |

## Typography
**Heading Font:** `Geist`
**Body Font:** `Geist`
Scale: 12 / 14 / 16 / 20 / 32 / 48. Headings 600, body 400.
All amounts use tabular figures.

## Components
- Cards are --secondary with a 1px --border, no shadow.
- Primary button: 52px tall, full radius, --primary fill, dark text.
- Transaction rows are 64px with a 40px merchant icon.
- Charts use one line in --primary on a plain background, no grid.

## Rules
- The portfolio value is the largest text on the home screen.
- Green means gain and red (#FF6B6B) means loss. Neither is used for decoration.
- No gradients, glows or glass effects.
- Never show more than one chart per screen.

Example 2: a warm food delivery app

Food apps are led by photos, so the palette stays out of their way: a warm off-white, one appetizing accent, and rules about how images are treated.

# Tiffin design system

## Colors
| Token | Value |
|---|---|
| --background | #FFFBF5 |
| --foreground | #1F1A17 |
| --primary | #E4572E |
| --primary-foreground | #FFFFFF |
| --secondary | #F6EEE3 |
| --muted-foreground | #6F655C |
| --border | #EADFD2 |
| --radius | 1.25rem |

## Typography
**Heading Font:** `Fraunces`
**Body Font:** `Inter`
Scale: 12 / 14 / 16 / 22 / 30. Headings 600, body 400.

## Components
- Restaurant cards lead with a 16:10 photo, radius on all corners.
- Dish rows have a 72px square photo on the right.
- Primary button: 52px tall, full width, pinned to the bottom on cart and checkout.
- Bottom tab bar with 4 tabs: Home, Search, Orders, Account.
- Tags (Vegetarian, Spicy) are small pills in --secondary.

## Rules
- Every restaurant and dish has a real photo. No placeholder boxes.
- The accent is for the order button and prices in the cart only.
- Delivery time is always shown next to the restaurant name.
- Friendly, short copy: "Your order's on its way", not "Order status: dispatched".

Example 3: a calm clinic app

Health products need to read as trustworthy and legible, including to people who've turned their phone's text size up. The rules here are mostly about restraint.

# Clearwell design system

## Colors
| Token | Value |
|---|---|
| --background | #FFFFFF |
| --foreground | #12202B |
| --primary | #0F766E |
| --primary-foreground | #FFFFFF |
| --secondary | #F1F5F4 |
| --muted-foreground | #55636E |
| --border | #DCE3E2 |
| --radius | 0.75rem |

## Typography
**Heading Font:** `Inter`
**Body Font:** `Inter`
Scale: 14 / 16 / 18 / 22 / 28. Headings 600, body 400.
Body text is never smaller than 16.

## Components
- Appointment cards show date, time, doctor and location, in that order.
- Buttons are 48px tall with the --radius corner, never pills.
- Forms are one column with labels above fields and helper text below.
- Status chips: Confirmed (teal), Pending (amber), Cancelled (gray).

## Rules
- One primary action per screen.
- No red except for errors and cancelled appointments.
- Plain words: "blood test", not "haematology panel", unless quoting a report.
- Illustrations are simple line drawings. No stock photos of doctors.

A blank template

# [Product] design system

## Colors
| Token | Value |
|---|---|
| --background |  |
| --foreground |  |
| --primary |  |
| --primary-foreground |  |
| --secondary |  |
| --muted-foreground |  |
| --border |  |
| --radius |  |

## Typography
**Heading Font:**
**Body Font:**
Scale:

## Components
-

## Rules
-

How to adapt an example

Start with the colors, since they change the look most. Replace the eight token values with yours and check two pairs for contrast: foreground on background, and primary-foreground on primary. Both should reach 4.5:1 for text.

Then rewrite the rules, and spend most of your time there. The token table makes screens match your palette, and the rules are what make them look like your product. Good rules are the ones you'd enforce in a design review. "The balance is the largest text on the home screen" is a rule. "Clean and modern" could describe any app, so a tool can't act on it.

Three mistakes come up often:

• Adjectives where values should be. "A soft blue" could be a hundred colors, and #4C7DF0 is one.
• Colors with no roles. A list of six hex codes doesn't say which one is for text.
• Length. A ten-page file buries its five important rules, and some tools read only the start of the file. Outclass reads the first few thousand characters.

Using these in Outclass

Save any example as a .md file, open the Theme panel in an Outclass project and choose Import design guide. The token table fills the project's colors, fonts and radius, and the rules are sent along with every new screen you ask for. All three examples use the token names and font lines Outclass reads directly.

To turn one of these into a full system with components, see how to build a mobile design system. If you only need the visual rules written down for people, a mobile app style guide is the lighter version.