npm - ai-spector - Versions diffs - 0.4.0 → 0.4.2 - Mend

ai-spector 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/README.md +10 -2
package/assets/themes/airbnb/preview.html +281 -0
package/assets/themes/airtable/preview.html +209 -0
package/assets/themes/apple/preview.html +461 -0
package/assets/themes/binance/preview.html +1013 -0
package/assets/themes/bmw/preview.html +255 -0
package/assets/themes/bugatti/preview.html +879 -0
package/assets/themes/cal/preview.html +620 -0
package/assets/themes/claude/preview.html +873 -0
package/assets/themes/clay/preview.html +360 -0
package/assets/themes/clickhouse/preview.html +833 -0
package/assets/themes/cohere/preview.html +854 -0
package/assets/themes/coinbase/preview.html +208 -0
package/assets/themes/composio/preview.html +980 -0
package/assets/themes/cursor/preview.html +428 -0
package/assets/themes/elevenlabs/preview.html +296 -0
package/assets/themes/expo/preview.html +580 -0
package/assets/themes/ferrari/preview.html +1168 -0
package/assets/themes/framer/preview.html +930 -0
package/assets/themes/hashicorp/preview.html +1238 -0
package/assets/themes/ibm/preview.html +473 -0
package/assets/themes/intercom/preview.html +229 -0
package/assets/themes/kraken/preview.html +213 -0
package/assets/themes/lamborghini/preview.html +428 -0
package/assets/themes/linear.app/preview.html +418 -0
package/assets/themes/lovable/preview.html +393 -0
package/assets/themes/meta/preview.html +656 -0
package/assets/themes/minimax/preview.html +1293 -0
package/assets/themes/mintlify/preview.html +443 -0
package/assets/themes/miro/preview.html +218 -0
package/assets/themes/mistral.ai/preview.html +850 -0
package/assets/themes/mongodb/preview.html +304 -0
package/assets/themes/nike/preview.html +1182 -0
package/assets/themes/notion/preview.html +409 -0
package/assets/themes/nvidia/preview.html +411 -0
package/assets/themes/ollama/preview.html +725 -0
package/assets/themes/opencode.ai/preview.html +402 -0
package/assets/themes/pinterest/preview.html +277 -0
package/assets/themes/playstation/preview.html +1125 -0
package/assets/themes/posthog/preview.html +794 -0
package/assets/themes/raycast/preview.html +735 -0
package/assets/themes/renault/preview.html +652 -0
package/assets/themes/replicate/preview.html +878 -0
package/assets/themes/resend/preview.html +399 -0
package/assets/themes/revolut/preview.html +278 -0
package/assets/themes/runwayml/preview.html +712 -0
package/assets/themes/sanity/preview.html +1180 -0
package/assets/themes/sentry/preview.html +996 -0
package/assets/themes/shopify/preview.html +611 -0
package/assets/themes/spacex/preview.html +265 -0
package/assets/themes/spotify/preview.html +275 -0
package/assets/themes/stripe/preview.html +464 -0
package/assets/themes/supabase/preview.html +1002 -0
package/assets/themes/superhuman/preview.html +996 -0
package/assets/themes/tesla/preview.html +971 -0
package/assets/themes/theverge/preview.html +1143 -0
package/assets/themes/together.ai/preview.html +944 -0
package/assets/themes/uber/preview.html +1164 -0
package/assets/themes/vercel/preview.html +412 -0
package/assets/themes/voltagent/preview.html +813 -0
package/assets/themes/warp/preview.html +580 -0
package/assets/themes/webflow/preview.html +191 -0
package/assets/themes/wired/preview.html +1049 -0
package/assets/themes/wise/preview.html +274 -0
package/assets/themes/x.ai/preview.html +452 -0
package/assets/themes/zapier/preview.html +417 -0
package/dist/cli.js +37 -1
package/dist/cli.js.map +1 -1
package/dist/commands/graph-visualize.d.ts.map +1 -1
package/dist/commands/graph-visualize.js +1 -22
package/dist/commands/graph-visualize.js.map +1 -1
package/dist/commands/prototype.d.ts +19 -0
package/dist/commands/prototype.d.ts.map +1 -1
package/dist/commands/prototype.js +78 -3
package/dist/commands/prototype.js.map +1 -1
package/dist/prototype/config.d.ts +9 -1
package/dist/prototype/config.d.ts.map +1 -1
package/dist/prototype/config.js +29 -0
package/dist/prototype/config.js.map +1 -1
package/dist/prototype/htpasswd.d.ts +5 -0
package/dist/prototype/htpasswd.d.ts.map +1 -0
package/dist/prototype/htpasswd.js +33 -0
package/dist/prototype/htpasswd.js.map +1 -0
package/dist/prototype/theme-preview.d.ts +17 -0
package/dist/prototype/theme-preview.d.ts.map +1 -0
package/dist/prototype/theme-preview.js +73 -0
package/dist/prototype/theme-preview.js.map +1 -0
package/dist/prototype/types.d.ts +8 -0
package/dist/prototype/types.d.ts.map +1 -1
package/dist/prototype/validate.d.ts.map +1 -1
package/dist/prototype/validate.js +19 -0
package/dist/prototype/validate.js.map +1 -1
package/dist/util/open-browser.d.ts +3 -0
package/dist/util/open-browser.d.ts.map +1 -0
package/dist/util/open-browser.js +24 -0
package/dist/util/open-browser.js.map +1 -0
package/package.json +4 -2
package/scaffold/.ai-spector/.docflow/config/language.json +4 -0
package/scaffold/cursor/WORKFLOW.md +2 -1
package/scaffold/cursor/skills/_skill-router.md +1 -1
package/scaffold/cursor/skills/ai-spector/references/generate-workflow.md +8 -0
package/scaffold/cursor/skills/ai-spector/references/language-picker.md +70 -0
package/scaffold/cursor/skills/ai-spector/references/project-conventions.md +13 -4
package/scaffold/cursor/skills/ai-spector-generate-basic-design/SKILL.md +1 -0
package/scaffold/cursor/skills/ai-spector-generate-detail-design/SKILL.md +1 -0
package/scaffold/cursor/skills/ai-spector-generate-prototype/SKILL.md +13 -5
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/auth-picker.md +61 -0
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/runbook.md +32 -10
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/theme-picker.md +118 -0
package/scaffold/cursor/skills/ai-spector-generate-srs/SKILL.md +1 -0
package/scaffold/prototype/README.md +24 -3

package/assets/themes/binance/preview.html ADDED Viewed

@@ -0,0 +1,1013 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Binance</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 {
+    --binance-yellow: #F0B90B;
+    --binance-gold: #FFD000;
+    --light-gold: #F8D12F;
+    --active-yellow: #D0980B;
+    --focus-blue: #1EAEDB;
+    --white: #FFFFFF;
+    --snow: #F5F5F5;
+    --binance-dark: #222126;
+    --dark-card: #2B2F36;
+    --ink: #1E2026;
+    --secondary-text: #32313A;
+    --slate: #848E9C;
+    --steel: #686A6C;
+    --muted: #777E90;
+    --hover-dark: #1A1A1A;
+    --crypto-green: #0ECB81;
+    --crypto-red: #F6465D;
+    --border-light: #E6E8EA;
+    --shadow-subtle: rgba(32, 32, 37, 0.05);
+    --shadow-pill: rgb(153, 153, 153);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    background: var(--white);
+    color: var(--ink);
+    line-height: 1.5;
+    font-weight: 400;
+  }
+  /* Nav */
+  .nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--white);
+    border-bottom: 1px solid var(--border-light);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 48px;
+    height: 64px;
+  }
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+  .nav-brand {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink);
+    text-decoration: none;
+  }
+  .nav-brand:link,
+  .nav-brand:visited,
+  .nav-brand:hover,
+  .nav-brand:active { color: var(--ink); }
+  .nav-github {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--secondary-text);
+    text-decoration: none;
+    padding: 6px 10px;
+    border: 1px solid var(--border-light);
+    border-radius: 6px;
+    transition: background 200ms ease;
+  }
+  .nav-github:hover { background: var(--snow); }
+  .nav-github svg { display: block; }
+  .nav-links {
+    display: flex;
+    gap: 32px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--secondary-text);
+    text-decoration: none;
+  }
+  .nav-links a:hover { color: var(--hover-dark); }
+  .nav-cta {
+    background: var(--binance-yellow);
+    color: var(--ink);
+    border: none;
+    border-radius: 6px;
+    padding: 8px 24px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    transition: background 200ms ease;
+  }
+  .nav-cta:hover { background: var(--active-yellow); }
+  /* Hero */
+  .hero {
+    background: var(--white);
+    padding: 80px 48px 64px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 50%;
+    transform: translateX(-50%);
+    width: 600px;
+    height: 300px;
+    background: radial-gradient(ellipse at center, rgba(240,185,11,0.12) 0%, transparent 70%);
+    pointer-events: none;
+  }
+  .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
+  .hero h1 {
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 1.08;
+    margin-bottom: 20px;
+    color: var(--ink);
+  }
+  .hero h1 span { color: var(--binance-yellow); }
+  .hero-subtitle {
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--slate);
+    margin-bottom: 40px;
+    line-height: 1.5;
+  }
+  .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .btn-primary-pill {
+    background: var(--binance-yellow);
+    color: var(--ink);
+    border: none;
+    border-radius: 50px;
+    padding: 14px 40px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    box-shadow: 0px 2px 10px -3px var(--shadow-pill);
+    transition: background 200ms ease;
+  }
+  .btn-primary-pill:hover { background: var(--active-yellow); }
+  .btn-outline-pill {
+    background: var(--white);
+    color: var(--binance-yellow);
+    border: 1px solid var(--binance-yellow);
+    border-radius: 50px;
+    padding: 14px 40px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    box-shadow: 0px 2px 10px -3px var(--shadow-pill);
+    transition: all 200ms ease;
+  }
+  .btn-outline-pill:hover { background: var(--binance-yellow); color: var(--ink); }
+  /* Sections */
+  .section {
+    padding: 64px 48px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-dark {
+    background: var(--binance-dark);
+    color: var(--white);
+    max-width: none;
+  }
+  .section-dark .section-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-title {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 12px;
+  }
+  .section-desc {
+    font-size: 16px;
+    color: var(--slate);
+    margin-bottom: 40px;
+    max-width: 600px;
+  }
+  .section-dark .section-desc { color: var(--slate); }
+  .section-divider {
+    border: none;
+    border-top: 1px solid var(--border-light);
+  }
+  /* Color Palette */
+  .color-category { margin-bottom: 40px; }
+  .color-category h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: var(--slate);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 12px;
+  }
+  .color-swatch { overflow: hidden; }
+  .swatch-block {
+    height: 72px;
+    width: 100%;
+    border-radius: 8px;
+  }
+  .swatch-info { padding: 8px 0; }
+  .swatch-name { font-size: 13px; font-weight: 600; color: var(--ink); }
+  .swatch-hex { font-size: 12px; color: var(--slate); font-family: 'IBM Plex Sans', monospace; }
+  .swatch-role { font-size: 11px; color: var(--steel); margin-top: 2px; }
+  /* Typography */
+  .type-sample { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border-light); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--slate);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+  }
+  .type-display { font-size: 60px; font-weight: 700; line-height: 1.08; }
+  .type-h1 { font-size: 34px; font-weight: 700; line-height: 1.0; }
+  .type-h2 { font-size: 28px; font-weight: 500; line-height: 1.0; }
+  .type-h3 { font-size: 24px; font-weight: 700; line-height: 1.0; }
+  .type-h4 { font-size: 20px; font-weight: 600; line-height: 1.25; }
+  .type-body-lg { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--slate); }
+  .type-body { font-size: 16px; font-weight: 500; line-height: 1.5; }
+  .type-body-semi { font-size: 16px; font-weight: 600; line-height: 1.3; }
+  .type-caption { font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--slate); }
+  .type-small { font-size: 12px; font-weight: 600; line-height: 1.0; color: var(--slate); }
+  .type-tiny { font-size: 11px; font-weight: 500; line-height: 1.0; color: var(--steel); }
+  /* Buttons Section */
+  .button-row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+  .button-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--slate);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+  }
+  .btn-yellow {
+    background: var(--binance-yellow);
+    color: var(--ink);
+    border: none;
+    border-radius: 6px;
+    padding: 10px 32px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    transition: background 200ms ease;
+  }
+  .btn-yellow:hover { background: var(--active-yellow); }
+  .btn-gold-pill {
+    background: var(--binance-gold);
+    color: var(--white);
+    border: 1px solid var(--binance-gold);
+    border-radius: 50px;
+    padding: 10px 32px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    box-shadow: 0px 2px 10px -3px var(--shadow-pill);
+    transition: background 200ms ease;
+  }
+  .btn-gold-pill:hover { background: var(--active-yellow); }
+  .btn-white-pill {
+    background: var(--white);
+    color: var(--binance-yellow);
+    border: 1px solid var(--binance-yellow);
+    border-radius: 50px;
+    padding: 10px 32px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    box-shadow: 0px 2px 10px -3px var(--shadow-pill);
+    transition: all 200ms ease;
+  }
+  .btn-white-pill:hover { background: var(--binance-yellow); color: var(--ink); }
+  .btn-disabled {
+    background: var(--border-light);
+    color: var(--slate);
+    border: none;
+    border-radius: 6px;
+    padding: 10px 32px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: not-allowed;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+  }
+  .dark-btn-row {
+    background: var(--binance-dark);
+    padding: 24px 32px;
+    border-radius: 12px;
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  /* Cards */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+  .card {
+    background: var(--white);
+    border: 1px solid var(--border-light);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0px 3px 5px 0px var(--shadow-subtle);
+    transition: box-shadow 200ms ease;
+  }
+  .card:hover { box-shadow: 0px 3px 5px 5px rgba(8, 8, 8, 0.05); }
+  .card-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(240, 185, 11, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+    font-size: 20px;
+    color: var(--binance-yellow);
+    font-weight: 700;
+  }
+  .card h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
+  .card p { font-size: 14px; color: var(--slate); line-height: 1.5; }
+  .card-dark {
+    background: var(--dark-card);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 12px;
+    padding: 24px;
+  }
+  .card-dark h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--white); }
+  .card-dark p { font-size: 14px; color: var(--slate); line-height: 1.5; }
+  /* Ticker */
+  .ticker-row {
+    display: flex;
+    gap: 32px;
+    flex-wrap: wrap;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--border-light);
+    margin-bottom: 40px;
+  }
+  .ticker-item { display: flex; align-items: center; gap: 8px; }
+  .ticker-symbol { font-size: 14px; font-weight: 600; color: var(--ink); }
+  .ticker-price { font-size: 14px; font-weight: 500; color: var(--ink); }
+  .ticker-change { font-size: 14px; font-weight: 600; }
+  .ticker-up { color: var(--crypto-green); }
+  .ticker-down { color: var(--crypto-red); }
+  /* Forms */
+  .form-group { margin-bottom: 24px; max-width: 480px; }
+  .form-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ink);
+    margin-bottom: 8px;
+  }
+  .form-input {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 16px;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    background: var(--white);
+    color: var(--ink);
+    outline: none;
+    transition: border-color 200ms ease;
+  }
+  .form-input::placeholder { color: var(--slate); }
+  .form-input:focus { border-color: var(--binance-yellow); box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2); }
+  .form-input-error {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 16px;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    border: 1.5px solid var(--crypto-red);
+    border-radius: 8px;
+    background: var(--white);
+    color: var(--ink);
+    outline: none;
+  }
+  .form-error-text { font-size: 12px; color: var(--crypto-red); margin-top: 4px; }
+  .form-search {
+    width: 100%;
+    padding: 12px 16px 12px 40px;
+    font-size: 16px;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    border: 1px solid var(--border-light);
+    border-radius: 50px;
+    background: var(--snow);
+    color: var(--ink);
+    outline: none;
+    transition: border-color 200ms ease;
+  }
+  .form-search::placeholder { color: var(--slate); }
+  .form-search:focus { border-color: var(--binance-yellow); }
+  .form-textarea {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 16px;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    background: var(--white);
+    color: var(--ink);
+    outline: none;
+    resize: vertical;
+    min-height: 100px;
+    transition: border-color 200ms ease;
+  }
+  .form-textarea:focus { border-color: var(--binance-yellow); box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2); }
+  /* Spacing */
+  .spacing-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
+  .spacing-box {
+    background: var(--binance-yellow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--ink);
+    border-radius: 4px;
+    min-height: 40px;
+  }
+  /* Radius */
+  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 72px;
+    height: 72px;
+    background: var(--binance-yellow);
+    margin-bottom: 8px;
+  }
+  .radius-label { font-size: 12px; color: var(--slate); font-weight: 600; }
+  .radius-context { font-size: 11px; color: var(--steel); }
+  /* Elevation */
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+  }
+  .elevation-card {
+    padding: 24px;
+    background: var(--white);
+    border-radius: 12px;
+    text-align: center;
+  }
+  .elevation-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+  .elevation-desc { font-size: 12px; color: var(--slate); }
+  .elevation-flat { border: 1px solid var(--border-light); }
+  .elevation-subtle { box-shadow: 0px 3px 5px 0px rgba(32, 32, 37, 0.05); border: 1px solid var(--border-light); }
+  .elevation-medium { box-shadow: 0px 3px 5px 5px rgba(8, 8, 8, 0.05); }
+  .elevation-pill { box-shadow: 0px 2px 10px -3px rgb(153, 153, 153); }
+  /* Footer */
+  .footer {
+    text-align: center;
+    padding: 48px;
+    border-top: 1px solid var(--border-light);
+    font-size: 14px;
+    color: var(--slate);
+  }
+  .footer a { color: var(--ink); text-decoration: none; font-weight: 600; }
+  .footer a:hover { color: var(--binance-yellow); }
+  @media (max-width: 768px) {
+    .nav { padding: 0 16px; }
+    .nav-links { display: none; }
+    .hero { padding: 48px 16px 40px; }
+    .hero h1 { font-size: 36px; }
+    .hero-subtitle { font-size: 16px; }
+    .section { padding: 40px 16px; }
+    .section-dark { padding: 40px 16px; }
+    .card-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: repeat(2, 1fr); }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .type-display { font-size: 36px; }
+    .ticker-row { gap: 16px; }
+  }
+  /* getdesign.md nav centering */
+  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
+  .nav > .nav-left { justify-self: start; }
+  .nav > .nav-links { justify-self: center; }
+  .nav > :last-child { justify-self: end; }
+</style>
+</head>
+<body>
+<!-- Nav -->
+<nav class="nav">
+  <div class="nav-left">
+    <a class="nav-brand" href="https://getdesign.md/" target="_blank" rel="noopener noreferrer">getdesign.md</a>
+    <a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+      </svg>
+      awesome-design-md
+    </a>
+  </div>
+  <ul class="nav-links">
+    <a href="#colors">Colors</a>
+    <a href="#typography">Typography</a>
+    <a href="#buttons">Buttons</a>
+    <a href="#cards">Cards</a>
+    <a href="#forms">Forms</a>
+    <a href="#spacing">Spacing</a>
+  </ul>
+  <button class="nav-cta">Get Started</button>
+</nav>
+<!-- Hero -->
+<section class="hero">
+  <div class="hero-content">
+    <h1>Design System Inspired by <span>Binance</span></h1>
+    <p class="hero-subtitle">A complete design token catalog extracted from Binance.US â BinancePlex typography, golden accent palette, and fintech component patterns.</p>
+    <div class="hero-buttons">
+      <button class="btn-primary-pill">Explore Tokens</button>
+      <button class="btn-outline-pill">View Source</button>
+    </div>
+  </div>
+</section>
+<!-- Ticker -->
+<section class="section">
+  <div class="ticker-row">
+    <div class="ticker-item">
+      <span class="ticker-symbol">BTC</span>
+      <span class="ticker-price">$71,234.21</span>
+      <span class="ticker-change ticker-up">+2.34%</span>
+    </div>
+    <div class="ticker-item">
+      <span class="ticker-symbol">ETH</span>
+      <span class="ticker-price">$3,891.45</span>
+      <span class="ticker-change ticker-up">+1.12%</span>
+    </div>
+    <div class="ticker-item">
+      <span class="ticker-symbol">BNB</span>
+      <span class="ticker-price">$642.80</span>
+      <span class="ticker-change ticker-down">-0.87%</span>
+    </div>
+    <div class="ticker-item">
+      <span class="ticker-symbol">SOL</span>
+      <span class="ticker-price">$182.33</span>
+      <span class="ticker-change ticker-up">+5.61%</span>
+    </div>
+  </div>
+</section>
+<!-- Colors -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Binance Yellow is the singular accent in a monochrome system â gold for action, grey for data, dark for depth.</p>
+  <div class="color-category">
+    <h3>Primary & Brand</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#F0B90B;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Binance Yellow</div>
+          <div class="swatch-hex">#F0B90B</div>
+          <div class="swatch-role">Primary CTA, brand accent</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#FFD000;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Binance Gold</div>
+          <div class="swatch-hex">#FFD000</div>
+          <div class="swatch-role">Pill buttons, secondary CTA</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#F8D12F;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Light Gold</div>
+          <div class="swatch-hex">#F8D12F</div>
+          <div class="swatch-role">Gradient endpoint, hover</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#D0980B;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Active Yellow</div>
+          <div class="swatch-hex">#D0980B</div>
+          <div class="swatch-role">Pressed/active state</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="color-category">
+    <h3>Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#FFFFFF; border:1px solid #E6E8EA;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Pure White</div>
+          <div class="swatch-hex">#FFFFFF</div>
+          <div class="swatch-role">Primary canvas, cards</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#F5F5F5;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Snow</div>
+          <div class="swatch-hex">#F5F5F5</div>
+          <div class="swatch-role">Input bg, alternating rows</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#222126;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Binance Dark</div>
+          <div class="swatch-hex">#222126</div>
+          <div class="swatch-role">Dark sections, footer</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#2B2F36;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Dark Card</div>
+          <div class="swatch-hex">#2B2F36</div>
+          <div class="swatch-role">Cards on dark bg</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="color-category">
+    <h3>Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#1E2026;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Ink</div>
+          <div class="swatch-hex">#1E2026</div>
+          <div class="swatch-role">Primary text, headings</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#32313A;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Secondary Text</div>
+          <div class="swatch-hex">#32313A</div>
+          <div class="swatch-role">Nav links, body copy</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#848E9C;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Slate</div>
+          <div class="swatch-hex">#848E9C</div>
+          <div class="swatch-role">Metadata, descriptions</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#686A6C;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Steel</div>
+          <div class="swatch-hex">#686A6C</div>
+          <div class="swatch-role">Disabled, subtle labels</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#E6E8EA;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Border Light</div>
+          <div class="swatch-hex">#E6E8EA</div>
+          <div class="swatch-role">Card borders, dividers</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="color-category">
+    <h3>Semantic</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#0ECB81;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Crypto Green</div>
+          <div class="swatch-hex">#0ECB81</div>
+          <div class="swatch-role">Positive, up, success</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#F6465D;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Crypto Red</div>
+          <div class="swatch-hex">#F6465D</div>
+          <div class="swatch-role">Negative, down, error</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-block" style="background:#1EAEDB;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Focus Blue</div>
+          <div class="swatch-hex">#1EAEDB</div>
+          <div class="swatch-role">Focus ring, a11y state</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Typography -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">BinancePlex custom typeface (IBM Plex Sans as web substitute) â tabular numerals, 500-700 weights for financial authority.</p>
+  <div class="type-sample">
+    <div class="type-label">Display Hero â 60px / 700 / 1.08</div>
+    <div class="type-display">Buy, sell & trade crypto</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Heading 1 â 34px / 700 / 1.00</div>
+    <div class="type-h1">Trusted by millions</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Heading 2 â 28px / 500 / 1.00</div>
+    <div class="type-h2">Take your crypto journey further</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Heading 3 â 24px / 700 / 1.00</div>
+    <div class="type-h3">Advanced Trading</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Heading 4 â 20px / 600 / 1.25</div>
+    <div class="type-h4">Feature Card Title</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Body Large â 20px / 500 / 1.50</div>
+    <div class="type-body-lg">The most trusted US-based crypto exchange with institutional-grade security.</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Body â 16px / 500 / 1.50</div>
+    <div class="type-body">Standard body text used throughout the platform for product descriptions and educational content.</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Body SemiBold â 16px / 600 / 1.30</div>
+    <div class="type-body-semi">Navigation links and emphasized text</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Caption â 14px / 500 / 1.43</div>
+    <div class="type-caption">$71,234.21 +2.34% | Last updated 2 min ago</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Small â 12px / 600 / 1.00</div>
+    <div class="type-small">BADGE LABEL</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-label">Tiny â 11px / 500 / 1.00</div>
+    <div class="type-tiny">Chart annotation, micro-label</div>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Buttons -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">Pill buttons (50px radius) for CTAs, standard buttons (6px radius) for form actions. Yellow drives all primary actions.</p>
+  <div class="button-label">Standard Buttons (6px radius)</div>
+  <div class="button-row">
+    <button class="btn-yellow">Primary</button>
+    <button class="btn-disabled" disabled>Disabled</button>
+  </div>
+  <div class="button-label" style="margin-top:32px;">Pill Buttons (50px radius)</div>
+  <div class="button-row">
+    <button class="btn-primary-pill">Primary Pill</button>
+    <button class="btn-gold-pill">Gold Pill</button>
+    <button class="btn-outline-pill">Outlined Pill</button>
+  </div>
+  <div class="button-label" style="margin-top:32px;">On Dark Background</div>
+  <div class="dark-btn-row">
+    <button class="btn-primary-pill">Get Started</button>
+    <button class="btn-outline-pill" style="background:transparent; color:#F0B90B; border-color:#F0B90B;">Learn More</button>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Cards -->
+<section class="section" id="cards">
+  <h2 class="section-title">Cards & Containers</h2>
+  <p class="section-desc">12px radius, 5% opacity shadow â barely visible elevation that builds trust through subtle depth.</p>
+  <div style="margin-bottom:40px;">
+    <div class="button-label">Light Cards</div>
+    <div class="card-grid">
+      <div class="card">
+        <div class="card-icon">$</div>
+        <h4>Low Fees</h4>
+        <p>Trade with competitive fees starting at 0.1% for makers and takers.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">S</div>
+        <h4>Security First</h4>
+        <p>Institutional-grade security with SOC 2 compliance and cold storage.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">24</div>
+        <h4>24/7 Support</h4>
+        <p>Round-the-clock customer service with real human agents.</p>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="button-label">Dark Cards</div>
+    <div class="section-dark" style="padding:32px; border-radius:12px;">
+      <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;">
+        <div class="card-dark">
+          <div class="card-icon">T</div>
+          <h4>Trade</h4>
+          <p>Access 150+ cryptocurrencies with advanced charting tools.</p>
+        </div>
+        <div class="card-dark">
+          <div class="card-icon">S</div>
+          <h4>Stake</h4>
+          <p>Earn rewards on your holdings with flexible staking options.</p>
+        </div>
+        <div class="card-dark">
+          <div class="card-icon">P</div>
+          <h4>Portfolio</h4>
+          <p>Track your holdings in real-time with detailed analytics.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Forms -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Clean inputs with #E6E8EA borders, 8px radius for standard fields, 50px for search pills.</p>
+  <div class="form-group">
+    <label class="form-label">Search (50px pill radius)</label>
+    <input type="text" class="form-search" placeholder="Search coins...">
+  </div>
+  <div class="form-group">
+    <label class="form-label">Default Input</label>
+    <input type="text" class="form-input" placeholder="Enter your email">
+  </div>
+  <div class="form-group">
+    <label class="form-label">Focus State</label>
+    <input type="text" class="form-input" value="user@example.com" style="border-color:#F0B90B; box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2);">
+  </div>
+  <div class="form-group">
+    <label class="form-label">Error State</label>
+    <input type="text" class="form-input-error" value="invalid@">
+    <div class="form-error-text">Please enter a valid email address</div>
+  </div>
+  <div class="form-group">
+    <label class="form-label">Textarea</label>
+    <textarea class="form-textarea" placeholder="Describe your issue"></textarea>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Spacing -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit system with progressive scaling for financial UI density.</p>
+  <div class="spacing-row">
+    <div class="spacing-box" style="width:16px; height:40px;"><span style="font-size:10px;">4</span></div>
+    <div class="spacing-box" style="width:32px; height:40px;">8</div>
+    <div class="spacing-box" style="width:48px; height:40px;">12</div>
+    <div class="spacing-box" style="width:64px; height:40px;">16</div>
+    <div class="spacing-box" style="width:80px; height:40px;">20</div>
+    <div class="spacing-box" style="width:100px; height:40px;">25</div>
+    <div class="spacing-box" style="width:128px; height:40px;">32</div>
+    <div class="spacing-box" style="width:192px; height:40px;">48</div>
+    <div class="spacing-box" style="width:256px; height:40px;">64</div>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Border Radius -->
+<section class="section">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From tight data cards to full pill buttons â radius communicates interaction level.</p>
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:2px;"></div>
+      <div class="radius-label">2px</div>
+      <div class="radius-context">Micro</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:6px;"></div>
+      <div class="radius-label">6px</div>
+      <div class="radius-context">Buttons</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:8px;"></div>
+      <div class="radius-label">8px</div>
+      <div class="radius-context">Inputs</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:10px;"></div>
+      <div class="radius-label">10px</div>
+      <div class="radius-context">Tags</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:12px;"></div>
+      <div class="radius-label">12px</div>
+      <div class="radius-context">Cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:24px;"></div>
+      <div class="radius-label">24px</div>
+      <div class="radius-context">Video</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:50px;"></div>
+      <div class="radius-label">50px</div>
+      <div class="radius-context">Pill CTA</div>
+    </div>
+  </div>
+</section>
+<hr class="section-divider">
+<!-- Elevation -->
+<section class="section">
+  <h2 class="section-title">Depth & Elevation</h2>
+  <p class="section-desc">Whisper-light shadows at 5% opacity â trust through clarity, not drama.</p>
+  <div class="elevation-grid">
+    <div class="elevation-card elevation-flat">
+      <div class="elevation-name">Flat</div>
+      <div class="elevation-desc">Border only, no shadow</div>
+    </div>
+    <div class="elevation-card elevation-subtle">
+      <div class="elevation-name">Subtle</div>
+      <div class="elevation-desc">5% opacity, resting cards</div>
+    </div>
+    <div class="elevation-card elevation-medium">
+      <div class="elevation-name">Medium</div>
+      <div class="elevation-desc">5% spread, hovered cards</div>
+    </div>
+    <div class="elevation-card elevation-pill">
+      <div class="elevation-name">Pill</div>
+      <div class="elevation-desc">Visible shadow, floating CTAs</div>
+    </div>
+  </div>
+</section>
+<!-- Footer -->
+<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
+</body>
+</html>