DESIGN.md is a structured markdown file that defines your project's design system — colors, typography, spacing, radius, and UI conventions. AI coding agents like Cursor, Claude Code, and Google Stitch use DESIGN.md to generate consistent, on-brand UI code automatically.

How does oh-my-design generate a design system?

oh-my-design lets you pick from 67 real company design systems (Stripe, Vercel, Linear, Apple, etc.), customize them through an interactive A/B wizard, and export a DESIGN.md file. Ten curated references ship with a full brand philosophy layer — voice, narrative, principles, personas, states, motion — so AI coding agents like Claude Code match your brand. All without any AI API calls.

What is the Design Personality Quiz?

The Design Personality Quiz is a 60-second, 12-question quiz that determines your design type across 4 axes: Temperature (Cool/Warm), Density (Dense/Open), Elevation (Flat/Layered), and Shape (Sharp/Rounded). It matches you to one of 16 design personalities and recommends matching design systems.

Design Systems

Mirotone

miro

Official site

Design System Inspiration of Miro

1. Visual Theme & Atmosphere

Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (#1c1c1e) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.

The typography uses Roobert PRO Medium as the primary display font with OpenType character variants ("blwf", "cv03", "cv04", "cv09", "cv11") and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set ("liga" 0, "ss01", "ss04", "ss05"). The design is built with Framer, giving it smooth animations and modern component patterns.

Key Characteristics:

White canvas with near-black (#1c1c1e) text
Roobert PRO Medium with multiple OpenType character variants
Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)
Blue 450 (#5b76fe) as primary interactive color
Success green (#00b473) for positive states
Generous border-radius: 8px–50px range
Framer-built with smooth motion patterns
Ring shadow border: rgb(224,226,232) 0px 0px 0px 1px

2. Color Palette & Roles

Primary

Near Black (#1c1c1e): Primary text
White (#ffffff): --tw-color-white, primary surface
Blue 450 (#5b76fe): --tw-color-blue-450, primary interactive
Actionable Pressed (#2a41b6): --tw-color-actionable-pressed

Pastel Accents (Light/Dark pairs)

Coral: Light #ffc6c6 / Dark #600000
Rose: Light #ffd8f4 / Dark (implied)
Teal: Light #c3faf5 / Dark #187574
Orange: Light #ffe6cd
Yellow: Dark #746019
Moss: Dark #187574
Pink (#fde0f0): Soft pink surface
Red (#fbd4d4): Light red surface
Dark Red (#e3c5c5): Muted red

Semantic

Success (#00b473): --tw-color-success-accent

Neutral

Slate (#555a6a): Secondary text
Input Placeholder (#a5a8b5): --tw-color-input-placeholder
Border (#c7cad5): Button borders
Ring (rgb(224,226,232)): Shadow-as-border

3. Typography Rules

Font Families

Display: Roobert PRO Medium, fallback: Placeholder — "blwf", "cv03", "cv04", "cv09", "cv11"
Display Variants: Roobert PRO SemiBold, Roobert PRO SemiBold Italic, Roobert PRO
Body: Noto Sans — "liga" 0, "ss01", "ss04", "ss05"

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing
Display Hero	Roobert PRO Medium	56px	400	1.15	-1.68px
Section Heading	Roobert PRO Medium	48px	400	1.15	-1.44px
Card Title	Roobert PRO Medium	24px	400	1.15	-0.72px
Sub-heading	Noto Sans	22px	400	1.35	-0.44px
Feature	Roobert PRO Medium	18px	600	1.35	normal
Body	Noto Sans	18px	400	1.45	normal
Body Standard	Noto Sans	16px	400–600	1.50	-0.16px
Button	Roobert PRO Medium	17.5px	700	1.29	0.175px
Caption	Roobert PRO Medium	14px	400	1.71	normal
Small	Roobert PRO Medium	12px	400	1.15	-0.36px
Micro Uppercase	Roobert PRO	10.5px	400	0.90	uppercase

4. Component Stylings

Buttons

Outlined: transparent bg, 1px solid #c7cad5, 8px radius, 7px 12px padding
White circle: 50% radius, white bg with shadow
Blue primary (implied from interactive color)

Cards: 12px–24px radius, pastel backgrounds

Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding

5. Layout Principles

Spacing: 1–24px base scale
Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)
Ring shadow: rgb(224,226,232) 0px 0px 0px 1px

6. Depth & Elevation

Minimal — ring shadow + pastel surface contrast

7. Do's and Don'ts

Do

Use pastel light/dark pairs for feature sections
Apply Roobert PRO with OpenType character variants
Use Blue 450 (#5b76fe) for interactive elements

Don't

Don't use heavy shadows
Don't mix more than 2 pastel accents per section

8. Responsive Behavior

Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px

9. Agent Prompt Guide

Quick Color Reference

Text: Near Black (#1c1c1e)
Background: White (#ffffff)
Interactive: Blue 450 (#5b76fe)
Success: #00b473
Border: #c7cad5

Example Component Prompts

"Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."

Design System

Miro

Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing

#1c1c1eprimary#1c1c1eaccentInter

Color Palette

Top 18 hex values found in §2 of DESIGN.md, ranked by usage frequency.

#187574

#1c1c1e

#ffffff

#5b76fe

#2a41b6

#ffc6c6

#600000

#ffd8f4

#c3faf5

#ffe6cd

#746019

#fde0f0

#fbd4d4

#e3c5c5

#00b473

#555a6a

#a5a8b5

#c7cad5

Primary

#1c1c1e

Accent

#1c1c1e

Background

#ffffff

Foreground

#09090b

Typography

01 / TYPE SCALE

Type Scale

Rendered in system-ui to clearly show scale & weight. See the cards below for the brand's actual fonts.

Design at scale— Display XXL

3rem (48px)·400·line-height: 1.25·letter-spacing: -0.01emDisplay

Section heading— Heading XL

2.25rem (36px)·400·line-height: 1.25Heading 1

Subheading— Heading L

1.5rem (24px)·400·line-height: 1.4Heading 2

Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.— Body M

1rem (16px)·400·line-height: 1.5Body

Supporting text— Small S

0.75rem (12px)·400·line-height: 1.5Small

Caption · timestamp · 2026— Caption XS

0.75rem (12px)·400·line-height: 1.5Caption

BADGE / LABEL— Smallest XXS

0.625rem (10px)·500·line-height: 1.5·letter-spacing: 0.06emSmallest

02 / FONTS USED BY THIS BRAND

6 fonts extracted from DESIGN.md

License + install link per font. Brand-only fonts mean the company uses a custom typeface that isn't publicly available.

Primary

Inter

Open · OFL

Install via Google Fonts

Display

Roobert PRO

Commercial

Used by Miro. Displaay folded PRO into the main Roobert family page.

Source · Displaay Type

Display

Roobert PRO

Commercial

Used by Miro. Displaay folded PRO into the main Roobert family page.

Source · Displaay Type

Primary

Noto Sans

Open · OFL

Install via Google Fonts

Primary

Roobert PRO

Commercial

Used by Miro. Displaay folded PRO into the main Roobert family page.

Source · Displaay Type

Primary

Roobert PRO

Commercial

Used by Miro. Displaay folded PRO into the main Roobert family page.

Source · Displaay Type

Buttons

Cards

Total Revenue

$45,231

+20.1% from last month

Subscriptions

2,350

+18.2% from last month

Active Now

573

-2.4% from last month

Featured product

A wider example card showing how content sits inside the radius and shadow combination defined by this brand. Card radius is capped at 16px even on pill systems (LINE/Wise/Spotify) so large surfaces stay readable.

Form Elements

Password

Country

Badges & Tabs

Badges (radius capped to 8px)

DefaultSecondaryOutlineDestructiveSuccess

Tabs (pill / underline)

Spacing & Radius

Spacing Scale

8px

10px

12px

20px

24px

40px

50px

Component Radius (per-type)

Button

8px

Input

8px

Card

8px

Dialog

8px

Badge

8px

Elevation

Shadow recipes parsed from §6 of DESIGN.md, or default 5-tier scale if none found.

Subtle

0 1px 2px 0 rgba(0,0,0,0.05)

Default

0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06)

Elevated

0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)

Floating

0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)

Modal

0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)

Design System Inspiration of Miro

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Pastel Accents (Light/Dark pairs)

Semantic

Neutral

3. Typography Rules

Font Families

Hierarchy

4. Component Stylings

Buttons

Cards: 12px–24px radius, pastel backgrounds

Inputs: white bg, 1px solid #e9eaef, 8px radius, 16px padding

5. Layout Principles

6. Depth & Elevation

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

9. Agent Prompt Guide

Quick Color Reference

Example Component Prompts

Color Palette

Typography

Type Scale

6 fonts extracted from DESIGN.md

Buttons

Cards

Featured product

Form Elements

Badges & Tabs

Spacing & Radius

Elevation

Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding