DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Back to designs

DESIGN.md · explainx registry

Kraken

### Kraken - Crypto trading platform. - Purple-accented dark UI, data-dense dashboards - Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgr

Fintech & Crypto#design-md#awesome-design-md#fintech-crypto#kraken

Get a custom design.md for your product

DESIGN.md (markdown body)

Design System Inspired by 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

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)."

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Kraken on explainx.ai?: ### Kraken - Crypto trading platform. - Purple-accented dark UI, data-dense dashboards - Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgr Listed under category “Fintech & Crypto”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.
Need a fresh DESIGN.md from scratch?: Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →