add new designs

2026-04-01 15:58:51 +03:00
parent 3976d28923
commit ed3c8649c3
53 changed files with 9390 additions and 2 deletions
--- a/design-md/kraken/DESIGN.md
+++ b/design-md/kraken/DESIGN.md
@@ -0,0 +1,125 @@
+# Design System: 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)."
--- a/design-md/kraken/README.md
+++ b/design-md/kraken/README.md
@@ -0,0 +1,23 @@
+# Kraken Inspired Design System
+
+[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) extracted from the public [kraken](https://kraken.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `DESIGN.md` | Complete design system documentation (9 sections) |
+| `preview.html` | Interactive design token catalog (light) |
+| `preview-dark.html` | Interactive design token catalog (dark) |
+
+Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Kraken design language.
+
+## Preview
+
+A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
+
+### Dark Mode
+![Kraken Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/kraken/preview-dark-screenshot.png)
+
+### Light Mode
+![Kraken Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/kraken/preview-screenshot.png)
--- a/design-md/kraken/preview-dark.html
+++ b/design-md/kraken/preview-dark.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Kraken (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root { --white:#101114; --black:#e8e8ec; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#9497a9; --silver:#686b82; --border:#2a2c34; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
+  .nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
+  .nav-links a:hover { color:var(--purple); }
+  .nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
+
+  .hero { padding:64px 24px; text-align:center; }
+  .hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
+  .hero h1 span { color:var(--purple); }
+  .hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
+  .btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
+  .btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
+  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
+  .section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
+  .color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--silver); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
+  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--silver); }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
+  .form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
+  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
+  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
+  .form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
+  .spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
+  .radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
+  .elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
+  .footer a { color:var(--purple); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
+<div style="position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;">Dark Mode</div>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Brand</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
+<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
+<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
+<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
+<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
+<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
+<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
+<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>
--- a/design-md/kraken/preview.html
+++ b/design-md/kraken/preview.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Kraken (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root { --white:#fff; --black:#101114; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#686b82; --silver:#9497a9; --border:#dedee5; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
+  .nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
+  .nav-links a:hover { color:var(--purple); }
+  .nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
+
+  .hero { padding:64px 24px; text-align:center; }
+  .hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
+  .hero h1 span { color:var(--purple); }
+  .hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
+  .btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
+  .btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
+  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
+  .section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
+  .color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--silver); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
+  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--silver); }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
+  .form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
+  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
+  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
+  .form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
+  .spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
+  .radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
+  .elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
+  .footer a { color:var(--purple); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Brand</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
+<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
+<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
+<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
+<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
+<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
+<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
+<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>