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 6 skills (apply, init, harness, remember, learn, sync), 11 sub-agents (master orchestrator + 10 specialists), 4 hooks, and 67 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 Systems

Kraken

kraken

Design System Inspiration of Kraken

1. Visual Theme & Atmosphere

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (#7132f5, #5741d8, #5b1ecf) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.

Key Characteristics:

Kraken Purple (#7132f5) as primary brand with darker variants (#5741d8, #5b1ecf)
Kraken-Brand (display) + Kraken-Product (UI) dual font system
Near-black (#101114) text with cool blue-gray neutral scale
12px radius buttons (rounded but not pill)
Subtle shadows (rgba(0,0,0,0.03) 0px 4px 24px) — whisper-level
Green accent (#149e61) for positive/success states

2. Color Palette & Roles

Primary

Kraken Purple (#7132f5): Primary CTA, brand accent, links
Purple Dark (#5741d8): Button borders, outlined variants
Purple Deep (#5b1ecf): Deepest purple
Purple Subtle (rgba(133,91,251,0.16)): Purple at 16% — subtle button backgrounds
Near Black (#101114): Primary text

Neutral

Cool Gray (#686b82): Primary neutral, borders at 24% opacity
Silver Blue (#9497a9): Secondary text, muted elements
White (#ffffff): Primary surface
Border Gray (#dedee5): Divider borders

Semantic

Green (#149e61): Success/positive at 16% opacity for badges
Green Dark (#026b3f): Badge text

3. Typography Rules

Font Families

Display: Kraken-Brand, fallbacks: IBM Plex Sans, Helvetica, Arial
UI / Body: Kraken-Product, fallbacks: Helvetica Neue, Helvetica, Arial

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing
Display Hero	Kraken-Brand	48px	700	1.17	-1px
Section Heading	Kraken-Brand	36px	700	1.22	-0.5px
Sub-heading	Kraken-Brand	28px	700	1.29	-0.5px
Feature Title	Kraken-Product	22px	600	1.20	normal
Body	Kraken-Product	16px	400	1.38	normal
Body Medium	Kraken-Product	16px	500	1.38	normal
Button	Kraken-Product	16px	500–600	1.38	normal
Caption	Kraken-Product	14px	400–700	1.43–1.71	normal
Small	Kraken-Product	12px	400–500	1.33	normal
Micro	Kraken-Product	7px	500	1.00	uppercase

4. Component Stylings

Buttons

Primary Purple

Background: #7132f5
Text: #ffffff
Padding: 13px 16px
Radius: 12px

Purple Outlined

Background: #ffffff
Text: #5741d8
Border: 1px solid #5741d8
Radius: 12px

Purple Subtle

Background: rgba(133,91,251,0.16)
Text: #7132f5
Padding: 8px
Radius: 12px

White Button

Background: #ffffff
Text: #101114
Radius: 10px
Shadow: rgba(0,0,0,0.03) 0px 4px 24px

Secondary Gray

Background: rgba(148,151,169,0.08)
Text: #101114
Radius: 12px

Badges

Success: rgba(20,158,97,0.16) bg, #026b3f text, 6px radius
Neutral: rgba(104,107,130,0.12) bg, #484b5e text, 8px radius

Cards

Default Card

Background: #ffffff
Border: 1px solid rgba(148,151,169,0.16)
Radius: 12px
Padding: 24px
Shadow: rgba(0,0,0,0.03) 0px 4px 24px (subtle lift)

Stat / Metric Card

Background: #ffffff, radius 16px, padding 20px 24px
Title: 12px weight 500 #686b82 (muted)
Value: 28px weight 700 #101114
Delta: 12px weight 500 — #149e61 for positive, #d54848 for negative

Featured / Promotional Card

Background: linear-gradient(135deg, #7132f5 0%, #5741d8 100%) (purple gradient)
Text: #ffffff, radius 16px, padding 32px
Subtle inner glow via box-shadow: inset 0 0 60px rgba(255,255,255,0.08)
Use sparingly for premium/upgrade prompts

5. Layout Principles

Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px

Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%

6. Depth & Elevation

Subtle: rgba(0,0,0,0.03) 0px 4px 24px
Micro: rgba(16,24,40,0.04) 0px 1px 4px

7. Do's and Don'ts

Do

Use Kraken Purple (#7132f5) for CTAs and links
Apply 12px radius on all buttons
Use Kraken-Brand for headings, Kraken-Product for body

Don't

Don't use pill buttons — 12px is the max radius for buttons
Don't use other purples outside the defined scale

8. Responsive Behavior

Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px

9. Agent Prompt Guide

Quick Color Reference

Brand: Kraken Purple (#7132f5)
Dark variant: #5741d8
Text: Near Black (#101114)
Secondary text: #9497a9
Background: White (#ffffff)

Example Component Prompts

"Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."

Design System

Kraken

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, wh

#7132f5primary#149e61accentInter

Color Palette

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

#7132f5

#5741d8

#5b1ecf

#101114

#686b82

#9497a9

#ffffff

#dedee5

#149e61

#026b3f

Primary

#7132f5

Accent

#149e61

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)·700·line-height: 1.25·letter-spacing: -0.01emDisplay

Section heading— Heading XL

2rem (32px)·700·line-height: 1.25Heading 1

Subheading— Heading L

1.5rem (24px)·700·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

3 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

Kraken Brand

Brand-only

Kraken's custom display typeface. Not publicly distributed.

Not publicly distributed.

Primary

Kraken Product

Brand-only

Kraken's custom UI typeface. Not publicly distributed.

Not publicly distributed.

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

2px

3px

4px

5px

6px

8px

10px

12px

Component Radius (per-type)

Button

12px

Input

12px

Card

12px

Dialog

12px

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)