zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/miro/DESIGN.md

@@ -1,319 +0,0 @@
----
-id: miro
-name: Miro
-country: US
-category: design-tools
-homepage: "https://miro.com"
-primary_color: "#ffd02f"
-logo:
-  type: simpleicons
-  slug: miro
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: Mirotone
-  url: "https://mirotone.xyz"
-  type: system
-  description: Miro's CSS component library for apps built on the Miro platform.
-  og_image: "https://www.mirotone.xyz/cover.png"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    brand-yellow: "#ffd02f"
-    ink: "#1c1c1e"
-    canvas: "#ffffff"
-    blue: "#5b76fe"
-    blue-pressed: "#2a41b6"
-    coral: "#ffc6c6"
-    teal: "#c3faf5"
-    teal-dark: "#187574"
-    orange: "#ffe6cd"
-    rose: "#ffd8f4"
-    pink: "#fde0f0"
-    red: "#fbd4d4"
-    success: "#00b473"
-    slate: "#555a6a"
-    placeholder: "#a5a8b5"
-    border: "#c7cad5"
-    border-input: "#e9eaef"
-  typography:
-    family: { sans: "Roobert PRO", mono: "Roobert PRO" }
-    display-hero: { size: 56, weight: 400, lineHeight: 1.15, tracking: -1.68, use: "Hero, Roobert PRO Medium" }
-    section:      { size: 48, weight: 400, lineHeight: 1.15, tracking: -1.44, use: "Section heading, Roobert PRO Medium" }
-    card-title:   { size: 24, weight: 400, lineHeight: 1.15, tracking: -0.72, use: "Card title, Roobert PRO Medium" }
-    subheading:   { size: 22, weight: 400, lineHeight: 1.35, tracking: -0.44, use: "Sub-heading, Noto Sans" }
-    feature:      { size: 18, weight: 600, lineHeight: 1.35, use: "Feature, Roobert PRO Medium" }
-    body:         { size: 18, weight: 400, lineHeight: 1.45, use: "Body, Noto Sans" }
-    body-std:     { size: 16, weight: 400, lineHeight: 1.50, tracking: -0.16, use: "Standard body, Noto Sans" }
-    button:       { size: 17.5, weight: 700, lineHeight: 1.29, tracking: 0.175, use: "Button, Roobert PRO Medium" }
-    caption:      { size: 14, weight: 400, lineHeight: 1.71, use: "Caption, Roobert PRO Medium" }
-    micro:        { size: 10.5, weight: 400, lineHeight: 0.90, use: "Uppercase micro label, Roobert PRO" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 8, md: 12, lg: 24, full: 9999 }
-  shadow:
-    ring: "rgb(224,226,232) 0px 0px 0px 1px"
-  components:
-    button-primary: { type: button, bg: "#5b76fe", fg: "#ffffff", radius: 8, padding: "7px 12px", font: "17.5px/700", use: "Primary CTA, blue" }
-    button-outline: { type: button, bg: "transparent", fg: "#1c1c1e", radius: 8, padding: "7px 12px", font: "17.5px/700", use: "Secondary outlined button" }
-    button-circle: { type: button, bg: "#ffffff", radius: 9999, padding: "12px", use: "Circular icon button, ring shadow" }
-    input: { type: input, bg: "#ffffff", fg: "#1c1c1e", radius: 8, padding: "16px", font: "16px/400", use: "Standard input" }
-    card: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Default card with ring-shadow border" }
-    card-pastel: { type: card, bg: "#ffc6c6", fg: "#1c1c1e", radius: 12, padding: "24px", use: "Feature card with pastel surface" }
-    badge: { type: badge, bg: "#5b76fe", fg: "#ffffff", radius: 8, padding: "4px 8px", font: "12px/400", use: "Default badge" }
-    badge-success: { type: badge, bg: "#00b473", fg: "#ffffff", radius: 8, padding: "4px 8px", use: "Success badge" }
-  components_harvested: true
----
-
-# Design System Inspiration of Miro
-
-## 1. Visual Theme & Atmosphere
-
-Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.
-
-The typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`"blwf", "cv03", "cv04", "cv09", "cv11"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`"liga" 0, "ss01", "ss04", "ss05"`). The design is built with Framer, giving it smooth animations and modern component patterns.
-
-**Key Characteristics:**
-- White canvas with near-black (`#1c1c1e`) text
-- Roobert PRO Medium with multiple OpenType character variants
-- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)
-- Blue 450 (`#5b76fe`) as primary interactive color
-- Success green (`#00b473`) for positive states
-- Generous border-radius: 8px–50px range
-- Framer-built with smooth motion patterns
-- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Near Black** (`#1c1c1e`): Primary text
-- **White** (`#ffffff`): `--tw-color-white`, primary surface
-- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive
-- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`
-
-### Pastel Accents (Light/Dark pairs)
-- **Coral**: Light `#ffc6c6` / Dark `#600000`
-- **Rose**: Light `#ffd8f4` / Dark (implied)
-- **Teal**: Light `#c3faf5` / Dark `#187574`
-- **Orange**: Light `#ffe6cd`
-- **Yellow**: Dark `#746019`
-- **Moss**: Dark `#187574`
-- **Pink** (`#fde0f0`): Soft pink surface
-- **Red** (`#fbd4d4`): Light red surface
-- **Dark Red** (`#e3c5c5`): Muted red
-
-### Semantic
-- **Success** (`#00b473`): `--tw-color-success-accent`
-
-### Neutral
-- **Slate** (`#555a6a`): Secondary text
-- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`
-- **Border** (`#c7cad5`): Button borders
-- **Ring** (`rgb(224,226,232)`): Shadow-as-border
-
-## 3. Typography Rules
-
-### Font Families
-- **Display**: `Roobert PRO Medium`, fallback: Placeholder — `"blwf", "cv03", "cv04", "cv09", "cv11"`
-- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`
-- **Body**: `Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing |
-|------|------|------|--------|-------------|----------------|
-| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |
-| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |
-| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |
-| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |
-| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |
-| Body | Noto Sans | 18px | 400 | 1.45 | normal |
-| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |
-| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |
-| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |
-| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |
-| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |
-
-## 4. Component Stylings
-
-### Buttons
-
-**Blue Primary**
-- Background: `#5b76fe` (`--tw-color-blue-450`)
-- Text: `#ffffff`
-- Radius: 8px
-- Padding: 7px 12px
-- Font: 17.5px / 700 / Roobert PRO Medium
-- Hover: `#2a41b6` (`--tw-color-actionable-pressed`)
-- Use: Primary CTA — implied from interactive blue
-
-**Outlined**
-- Background: transparent
-- Text: `#1c1c1e`
-- Border: 1px solid `#c7cad5`
-- Radius: 8px
-- Padding: 7px 12px
-- Font: 17.5px / 700 / Roobert PRO Medium
-- Use: Secondary outlined button
-
-**White Circle**
-- Background: `#ffffff`
-- Radius: 50%
-- Padding: 12px (icon button)
-- Shadow: `rgb(224,226,232) 0px 0px 0px 1px` (ring shadow)
-- Use: Circular icon button
-
-### Inputs
-
-**Default**
-- Background: `#ffffff`
-- Text: `#1c1c1e`
-- Border: 1px solid `#e9eaef`
-- Radius: 8px
-- Padding: 16px
-- Font: 16px / 400 / Noto Sans
-- Placeholder: `#a5a8b5` (`--tw-color-input-placeholder`)
-- Use: Standard input
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Radius: 12px
-- Padding: 16px
-- Shadow: `rgb(224,226,232) 0px 0px 0px 1px` (ring shadow)
-- Use: Default card with ring-shadow border
-
-**Pastel Surface**
-- Background: pastel accent (e.g., `#ffc6c6` Coral, `#c3faf5` Teal, `#ffe6cd` Orange, `#fde0f0` Pink)
-- Text: `#1c1c1e`
-- Radius: 12-24px
-- Padding: 24px
-- Use: Feature card with pastel surface
-
-**Large Panel**
-- Background: `#ffffff`
-- Radius: 24px
-- Padding: 32px
-- Shadow: `rgb(224,226,232) 0px 0px 0px 1px`
-- Use: Large containers
-
-### Badges
-
-**Default**
-- Background: `#5b76fe`
-- Text: `#ffffff`
-- Radius: 8px
-- Padding: 4px 8px
-- Font: 12px / 400 / Roobert PRO Medium
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-**Success**
-- Background: `#00b473` (`--tw-color-success-accent`)
-- Text: `#ffffff`
-- Radius: 8px
-- Padding: 4px 8px
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-## 5. Layout Principles
-- Spacing: 1–24px base scale
-- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)
-- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`
-
-## 6. Depth & Elevation
-Minimal — ring shadow + pastel surface contrast
-
-## 7. Do's and Don'ts
-### Do
-- Use pastel light/dark pairs for feature sections
-- Apply Roobert PRO with OpenType character variants
-- Use Blue 450 (#5b76fe) for interactive elements
-### Don't
-- Don't use heavy shadows
-- Don't mix more than 2 pastel accents per section
-
-## 8. Responsive Behavior
-Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
-
-## 9. Agent Prompt Guide
-### Quick Color Reference
-- Text: Near Black (`#1c1c1e`)
-- Background: White (`#ffffff`)
-- Interactive: Blue 450 (`#5b76fe`)
-- Success: `#00b473`
-- Border: `#c7cad5`
-### Example Component Prompts
-- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."
-
-## 10. Voice & Tone
-
-Miro's voice is **collaboration-warm and workshop-confident.** "AI 이노베이션 워크스페이스" (homepage 2026-05) — brand evolution from "online whiteboard" to "AI innovation workspace". Marketing copy emphasizes team workshops + collaborative moments. Yellow `#fde050` CTA signals "playful, sticky-note inspired."
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Sign up free", "Save your spot", "Start free" |
-| Marketing | Workshop-language. Customer co-creation moments |
-| Documentation | Visual-heavy, screenshot-driven |
-| Error | Specific. "Board permissions changed. Refresh to see updates." |
-
-**Voice samples**
-- Marketing CTA: *"SAVE YOUR SPOT"* <!-- verified: miro.com/ko homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary whiteboard". Aggressive Mural-comparison framing.
-
-## 11. Brand Narrative
-
-Miro was founded **2011 as RealtimeBoard** in **Perm, Russia** (~1,150 km east of Moscow) by **Andrey Khusid** and **Oleg Shardin** ([Miro — Wikipedia](https://en.wikipedia.org/wiki/Miro_(collaboration_platform)), [bne IntelliNews — Miro $17.5B](https://www.intellinews.com/founded-in-russia-11-years-ago-the-miro-visual-collaboration-software-startup-is-now-valued-at-17-5bn-231861/)). Khusid + Shardin had previously **founded the design agency Vitamin Group in 2005** offering web/product/app design services; **2012 they left Vitamin to focus on RealtimeBoard full-time**. Funding ladder: **$25M Series A (2018)** led by **Accel** with Altair Capital + Scale Venture Partners → **$50M Series B (April 2020)**, after which user base grew **5×** (5M → 30M) and paying customers **5.5×** (20K → 130K) → **$400M Series C (January 2022)** co-led by **ICONIQ Growth + Accel + Atlassian + Dragoneer + GIC + Scale Venture Partners** at **$17.5B post-money valuation**, total funding ~**$476M** ([Miro Newsroom — $400M Series C](https://miro.com/newsroom/miro-series-c/), [BusinessWire — Series B $50M April 2020](https://www.businesswire.com/news/home/20200427005109/en/Miro-Secures-%2450-Million-in-Series-B-Funding-for-Virtual-Whiteboarding-for-Remote-Teams)). **Rebranded RealtimeBoard → Miro in 2019** reflecting a global identity. Strong adoption in design teams, agile workshops, and consulting. AI features added 2024-2025 to position Miro as the **"AI innovation workspace"** (live `miro.com/ko` page-title confirms 2026-05).
-
-## 12. Principles
-
-1. **Yellow signals action.** `#fde050` CTA inherited from sticky-note culture. *UI implication:* primary actions yellow on white.
-2. **Roobert PRO is the type voice.** Medium weight throughout. *UI implication:* don't substitute system fonts.
-3. **Workshop > toolbox.** *UI implication:* product positioning treats Miro as a meeting/workshop space, not a static design tool.
-4. **Generous radius for warmth.** *UI implication:* 8px+ on cards, 16px+ on hero modules.
-5. **AI as workshop participant.** *UI implication:* AI features framed as joining the workshop, not replacing humans.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Miro user segments (UX designers, agile coaches, consulting partners), not individual people.*
-
-**Yuki Tanaka, 32, Tokyo.** UX designer at agency. Runs client workshops in Miro 3× per week.
-
-**Marcus Chen, 41, San Francisco.** Agile coach at Series C SaaS. Sprint planning + retros in Miro.
-
-**Sofia Russo, 36, Milan.** Independent design consultant. Miro for client research + brainstorming.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no boards)** | "Create your first board" CTA + template gallery |
-| **Empty (no team)** | "Invite teammates" with email picker |
-| **Loading (board opening)** | Skeleton with sticky-note placeholders |
-| **Loading (cursor sync)** | Cursor avatars appear with name labels |
-| **Error (sync)** | Banner + retry; never block editing |
-| **Error (permission)** | "Read-only — request edit access" inline link |
-| **Success (saved)** | Implicit; auto-save with subtle indicator |
-| **Success (export)** | Download triggered + toast confirmation |
-| **Skeleton (board grid)** | Yellow-tinted placeholders |
-| **Disabled (free plan limit)** | Upgrade link |
-| **Loading (long export)** | Persistent progress chip |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover |
-| `motion-standard` | 250ms | Modal, panel |
-| `motion-cursor` | continuous | Live cursor sync |
-
-Standard cubic-bezier; minimal bounce. Cursor sync motion is signature. `prefers-reduced-motion: reduce` removes hover transitions; cursor sync becomes step-discrete.
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 38 — Apple-tier)
-**Tier 1 sources:** miro.com/ko home + /pricing (live DOM via playwright — **three-color 8px Primary**: Yellow banner `#fde050` 40px / 16px·**900** ALL CAPS (banner-only) + Charcoal `#1c1c1e` 42-44px / 16px·**600** (canonical default) + Miro Blue `#3859ff` 48px / 18px·600 (featured-tier accent); Outline transparent / Charcoal text).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders/funding):** Wikipedia (Miro), bne IntelliNews ($17.5B), Crunchbase, Miro Newsroom (Series C $400M Jan 2022), BusinessWire (Series B $50M Apr 2020), Contrary Research, EWDN.
-**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer captured Yellow banner only; canonical default Primary is **Charcoal `#1c1c1e`** with Miro Blue `#3859ff` featured-tier accent — three-color discipline was undocumented.

package/.opencode/oh-my-design/web/references/miro/README.md

@@ -1,23 +0,0 @@
-# Miro Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/miro/DESIGN.md) extracted from the public [Miro](https://miro.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/miro/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Miro 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
-![Miro Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/miro/preview-dark-screenshot.png)
-
-### Light Mode
-![Miro Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/miro/preview-screenshot.png)

package/.opencode/oh-my-design/web/references/miro/preview-dark.html

@@ -1,174 +0,0 @@
-<!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 Miro</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=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
-<style>
-  :root { --white:#1c1c1e; --black:#f0f0f2; --blue:#5b76fe; --blue-pressed:#2a41b6; --success:#00b473; --coral-l:#ffc6c6; --coral-d:#600000; --rose-l:#ffd8f4; --teal-l:#c3faf5; --teal-d:#187574; --orange-l:#ffe6cd; --pink:#fde0f0; --slate:#a0a4b0; --placeholder:#606470; --border:#3a3c44; --ring:rgb(50,52,60); --font:'Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Noto Sans','Inter',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.50; -webkit-font-smoothing:antialiased; }
-
-  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }
-  .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }
-  .nav-links { display:flex; gap:20px; list-style:none; }
-  .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }
-  .nav-links a:hover { color:var(--blue); }
-  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.175px; }
-
-  .hero { padding:80px 24px 64px; text-align:center; }
-  .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }
-  .hero h1 span { color:var(--blue); }
-  .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }
-  .hero-buttons { display:flex; gap:12px; justify-content:center; }
-  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }
-  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 24px; border-radius:8px; border:1px solid var(--border); font-size:17.5px; font-weight:500; text-decoration:none; cursor:pointer; }
-
-  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
-  .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
-  .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }
-  .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }
-
-  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
-  .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }
-  .color-swatch-block { height:56px; }
-  .color-swatch-info { padding:8px; }
-  .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }
-  .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }
-  .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }
-
-  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }
-  .type-sample:last-child { border-bottom:none; }
-  .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }
-
-  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
-  .button-item { text-align:center; }
-  .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }
-
-  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
-  .card { border-radius:12px; padding:20px; }
-  .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }
-  .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }
-
-  .form-group { margin-bottom:12px; max-width:380px; }
-  .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 #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
-  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
-  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
-  .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }
-  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
-  .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }
-
-  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
-  .spacing-item { text-align:center; }
-  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
-  .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }
-
-  .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
-  .radius-item { text-align:center; }
-  .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }
-  .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }
-
-  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
-  .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }
-  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
-  .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }
-
-  .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }
-  .footer a { color:var(--blue); text-decoration:underline; }
-
-  @media (max-width:768px) { .hero h1 { font-size:36px; letter-spacing:-1.08px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
-</style>
-</head>
-<body>
-
-<nav class="nav"><span class="nav-brand">awesome-design-md</span><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 free</a></nav>
-<div style="position:fixed;top:16px;right:16px;z-index:200;background:#5b76fe;color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-radius:8px;">Dark Mode</div>
-
-<section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</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">Primary</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1e"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c1c1e</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#5b76fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 450</div><div class="color-swatch-hex">#5b76fe</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#00b473"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#00b473</div></div></div>
-</div>
-<div class="color-group-label">Pastel Accents</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral Light</div><div class="color-swatch-hex">#ffc6c6</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd8f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Rose Light</div><div class="color-swatch-hex">#ffd8f4</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#c3faf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Light</div><div class="color-swatch-hex">#c3faf5</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ffe6cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange Light</div><div class="color-swatch-hex">#ffe6cd</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#fde0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fde0f0</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#fbd4d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Red Light</div><div class="color-swatch-hex">#fbd4d4</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:#555a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#555a6a</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#a5a8b5"></div><div class="color-swatch-info"><div class="color-swatch-name">Placeholder</div><div class="color-swatch-hex">#a5a8b5</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#c7cad5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c7cad5</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:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;">Display Hero</div><div class="type-meta">Roobert PRO Medium — 56px / 1.15 / -1.68px</div></div>
-<div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;">Section Heading</div><div class="type-meta">Roobert PRO — 48px / 1.15 / -1.44px</div></div>
-<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;">Card Title</div><div class="type-meta">Roobert PRO — 24px / 1.15 / -0.72px</div></div>
-<div class="type-sample"><div style="font-family:var(--font-body); font-size:18px; line-height:1.45; color:var(--slate);">Body — Get from brainstorm to breakthrough with Miro. The visual collaboration platform.</div><div class="type-meta">Noto Sans — 18px / 1.45</div></div>
-<div class="type-sample"><div style="font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;">Button Label</div><div class="type-meta">Roobert PRO — 17.5px / 700 / +0.175px</div></div>
-<div class="type-sample"><div style="font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);">MICRO LABEL</div><div class="type-meta">Roobert PRO — 10.5px / uppercase</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-blue" href="#">Sign up free</a><div class="button-label">Primary Blue</div></div>
-<div class="button-item"><a class="btn-outline" href="#">Contact sales</a><div class="button-label">Outlined</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" style="background:var(--coral-l);"><h3>Brainstorming</h3><p>Ideate together in real-time with sticky notes and voting.</p></div>
-<div class="card" style="background:var(--teal-l);"><h3>Diagramming</h3><p>Create flowcharts, mind maps, and org charts visually.</p></div>
-<div class="card" style="background:var(--orange-l);"><h3>Workshops</h3><p>Run engaging workshops with built-in templates.</p></div>
-<div class="card" style="background:var(--rose-l);"><h3>Strategy</h3><p>Align teams with visual strategic planning tools.</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@company.com"><div class="form-state-label">Default</div></div>
-<div class="form-group"><label class="form-label">Team name</label><input class="form-input form-input--focus" type="text" value="Design Team"><div class="form-state-label">Focus (blue ring)</div></div>
-<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
-<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your board..."></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: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:20px"></div><div class="radius-label">20px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50px"></div><div class="radius-label">50px</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" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
-
-<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>