DESIGN.md is a structured markdown file that defines your project's brand spec — tokens (colors, typography, spacing, radius), voice, narrative, principles, personas, states, and motion. AI coding agents (Claude Code, Codex, OpenCode, Cursor) read it as authoritative context before generating any UI, so the output looks like your brand instead of generic 'modern minimalist' slop.

How does oh-my-design work?

Run `npx oh-my-design-cli install-skills` once in your project. It installs 9 skills (apply, init, harness, remember, learn, sync, reference-capture, asset-fetch, experiment-gallery), 11 sub-agents (master orchestrator + 10 specialists), 4 hooks, and 108 reference DESIGN.md files. After restarting your AI coding agent, you just talk in natural language — skills route to the right sub-agents automatically.

Does it call any AI provider during install?

No. The install is a pure markdown copy — zero API calls, zero data leaves your machine. Your AI coding agent (Claude Code, Codex, OpenCode, or Cursor) is the inference layer; install just teaches it where to look.

Which AI coding agents are supported?

Claude Code, Codex, OpenCode, and Cursor (via .cursor/rules). The skill markdown files are agent-agnostic; hooks ship for Claude Code specifically.

What is the design harness?

The omd-harness skill runs a 10-phase design pipeline (Discovery → Research → IA → Wireframes → Design system → Components → Asset sourcing → Microcopy → Validation → Handoff). It dispatches sub-agents in parallel where independent, asks 3 mandatory user checkpoints, and emits a v0/Cursor-ready package. Trigger it by saying things like 'design the entire onboarding from scratch' or '/omd-harness '.

Yes — MIT licensed, open source, no signup, no API key, no paid tier. The references in the bundle belong to their respective companies and are reproduced for educational reference only.

Design System

LINE

LINE is the messaging platform that anchors daily life across Japan, Taiwan, Thailand, and Indonesia, and its visual identity reflects exactly that role — confident, friendly, instantly recognizable. The page chrome is bright white with the famous LINE Green (#07b53b) reserved for the brand mark and the most important interactive moments. Headlines are

Color Palette

Brand

Accent

Neutrals

Semantic

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display50px · 600 · 1.25

Design at scale

32px32px · 600 · 1.25

Section heading

heading-lg24px · 600 · 1.4

Subheading

body16px · 400 · 1.5

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

small12px · 400 · 1.5

Supporting text

caption12px · 400 · 1.5

Caption · timestamp · 2026

label10px · 500 · 1.5

BADGE / LABEL

Fonts

Primary

Inter

Open · OFL

Install via Google Fonts

Primary

SF Pro

Commercial

Apple's system font. Free for Apple platforms.

Install via Apple Developer

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Section gap	32px
Card padding	16px
Element gap	12px

Border Radius

Element	Value	Preview
buttons	50px
inputs	50px
cards	16px
dialogs	16px
badges	8px
pillPill	9999px
circleCircle	50%

Elevation

Sticky header on scroll

Modal / popup

App download icon hover

Guidelines

Use weight 700 for everything visible — headlines, buttons, pills, nav, captions. LINE doesn't whisper.
Use pill-shaped buttons (border-radius: 50px). This is LINE's tactile signature.
reserve LINE Green (#07b53b) for the brand mark, the active selected state, and the primary "Download LINE" CTA. It's a finite signal.
lead with the locale-aware font stack: SFPro, Arial, Noto Sans JP, Noto Sans KR — Japanese and Korean as first-class.
Use oversized display headlines (40-70px) with high vertical spacing. LINE's marketing is editorial, not utilitarian.
dim inactive UI with alpha (rgba(30, 30, 30, 0.7)) instead of swapping to a different gray hex.

Don't

Use weight 300 or 400 for interactive text. Buttons that look quiet read as broken in LINE's voice.
Use 4px, 8px, or any "rectangular" radius for primary CTAs — that breaks the brand language entirely.
Use LINE Green for warnings, links, or general accents — it dilutes the brand association.
load a custom web font. LINE's audience reads on phones across many markets; system fonts are fastest and most native.
pack a viewport with multiple competing CTAs. One scroll = one service block = one message.
introduce shadow to flatten interactive controls. LINE chrome is overwhelmingly flat — depth comes from photography.

Components

Buttons

Active Pill (`.productCategory`)

Background`#07b53b` (LINE Green)

Text`#ffffff`

Radius50px (fully pill-shaped)

Padding8px 15px

Font14-16px / 700

Use: Active/selected category pill, primary CTA — verified live on line.me

Inactive Pill

Backgroundtransparent

Text`rgba(30, 30, 30, 0.7)`

Radius50px

Padding8px 15px

Font14-16px / 700

Hovertext opacity transitions to `rgba(30, 30, 30, 1)`

Use: Unselected category pill — no shadow, no border

Hover Pressed

Background`#069030` (LINE Green Dark, inferred)

Text`#ffffff`

Radius50px

Padding8px 15px

Use: Hover/pressed state for primary pill

Inputs

Default

Background`#ffffff`

Text`#1e1e1e`

Border1px solid `rgba(0, 0, 0, 0.06)`

Radius12px

Padding12px 16px

Font16px / 400 / SFPro

Focusborder `#07b53b`

Use: Inferred from §1-§2 baseline (no explicit DS variant in source).

Cards

Service / Feature Card

Background`#ffffff`

Text`#1e1e1e`

Border1px solid `rgba(0, 0, 0, 0.06)` (whisper-light)

Radius12px

Padding20-24px

Shadow`0 2px 8px rgba(0, 0, 0, 0.04)`

Use: Service / feature card with icon (32-40px) + title (16px / 700) + 1-line description (14px / 400 `rgba(30,30,30,0.7)`)

Image-Led Card (LINE STICKERS, WEBTOON tiles)

Background`#ffffff` (image fills 70-80%)

Radius12px (image inside `border-radius: 12px 12px 0 0`)

Padding0px (title strip uses `rgba(0, 0, 0, 0.6)` overlay + white text at bottom)

Use: Image-dominant tile

App Download Tile

Background`#ffffff`

Border1px solid `rgba(0, 0, 0, 0.06)`

Radius12px

Padding12px (56px square touch target)

Hoverbackground tints to very light green or gray

Use: App store badges (Apple, Google Play, Desktop)

Badges

Default

Background`#07b53b`

Text`#ffffff`

Radius50px

Padding4px 10px

Font12px / 700 / SFPro

Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — pill-style badge matching LINE's pill control language.