@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/cohere/tokens.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/cohere/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by Cohere".
+ * Enterprise command deck: confident, clean, 22px signature roundness.
+ *
+ * Key brand decisions encoded here:
+ *   - Pure white canvas with cool gray containment borders
+ *   - 22px border-radius is THE Cohere visual signature — use on all cards
+ *   - Interaction Blue (#1863dc) only on hover/focus — never ambient
+ *   - CohereText serif for display (72px, negative tracking)
+ *   - Unica77 for all body and UI — Swiss geometric neutrality
+ *   - Ghost/transparent buttons as the default interaction style
+ *   - Deep purple sections for full-width visual breaks (via layout)
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ─────────────────────────────────────────────────────
+   * Bright white with Snow (#fafafa) for section differentiation.
+   * Enterprise clarity — no tinted surfaces in the main light mode. */
+  --bg: #ffffff;
+  --surface: #fafafa;        /* Snow — elevated surfaces, section backgrounds */
+  --surface-warm: var(--surface); /* no warm tier — palette is strictly cool-toned */
+
+  /* ─── Foreground ──────────────────────────────────────────────────
+   * Predominantly black/white. No warm grays. */
+  --fg: #000000;             /* Cohere Black — headline text, maximum emphasis */
+  --fg-2: #212121;           /* Near Black — standard body link, soft heading */
+  --muted: #93939f;          /* Muted Slate — de-emphasized text, cool violet tint */
+  --meta: var(--muted);      /* alias — same cool muted for metadata */
+
+  /* ─── Border ──────────────────────────────────────────────────────
+   * Cool-toned borders — the subtle blue-violet tint in Border Cool
+   * reinforces the enterprise/tech personality. */
+  --border: #d9d9dd;         /* Border Cool — standard section and list borders */
+  --border-soft: #f2f2f2;    /* Lightest Gray — card edge on white (barely visible) */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Interaction Blue — appears ONLY on hover/focus, never ambient.
+   * Default state of most interactive elements is transparent/ghost. */
+  --accent: #1863dc;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 16%);
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * Standard semantic palette — reserved for state, not decoration. */
+  --success: #16a34a;
+  --warn: #eab308;
+  --danger: #ef4444;
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * CohereText (custom display serif) + Unica77 (Swiss geometric sans).
+   * "Confident authority meets engineering clarity" personality.
+   * Negative tracking at display scale (-1.2px to -1.44px at 60–72px). */
+  --font-display: "CohereText", "Space Grotesk", Inter, ui-sans-serif, sans-serif;
+  --font-body: "Unica77 Cohere Web", Inter, Arial, ui-sans-serif, sans-serif;
+  --font-mono: "CohereMono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* Type scale — DESIGN.md §3. 72px display, 60px secondary, 48px section. */
+  --text-xs: 12px;           /* Small / footer links */
+  --text-sm: 14px;           /* Caption / Uppercase Label */
+  --text-base: 16px;         /* Body / Button */
+  --text-lg: 18px;           /* Body Large — intro paragraphs */
+  --text-xl: 24px;           /* Feature Title */
+  --text-2xl: 32px;          /* Sub-heading */
+  --text-3xl: 60px;          /* Display Secondary */
+  --text-4xl: 72px;          /* Display / Hero — maximum serif authority */
+
+  --leading-body: 1.5;
+  --leading-tight: 1.0;      /* CohereText at display scale */
+  --tracking-display: -0.02em; /* ≈ -1.44px at 72px — dense impactful text blocks */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 8px base unit. Card internal padding 24–32px.
+   * Section rhythm 56–60px between sections. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  --section-y-desktop: 60px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * The 22px radius IS the Cohere card — organic, cloud-like softness.
+   * DO NOT use other radii on primary cards. The signature matters.
+   *
+   * --radius-sm: small utility elements (dialog boxes, nav pills)
+   * --radius-md: THE PRIMARY COHERE CARD — always 22px
+   * --radius-lg: large featured containers — same 22px treatment */
+  --radius-sm: 8px;          /* Dialog, nav items, secondary elements */
+  --radius-md: 22px;         /* PRIMARY SIGNATURE — every main card and container */
+  --radius-lg: 22px;         /* Same 22px for large featured containers */
+  --radius-pill: 9999px;     /* Buttons, status tags */
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * Cohere is nearly shadow-free. Depth via background color contrast
+   * (white on purple band) and cool gray borders, not shadows. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border-soft); /* 1px ring on white */
+  --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06); /* Minimal hover shadow */
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Solid 2px Interaction Blue outline — enterprise-grade clarity. */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Standard durations — enterprise interfaces feel solid, not bouncy. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Wide container (1440px for enterprise large-screen) with generous
+   * gutters. The 26-breakpoint system is handled component-side. */
+  --container-max: 1440px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/dist/designer/data/systems/coinbase/DESIGN.md

@@ -0,0 +1,132 @@
+# Design System Inspired by Coinbase
+
+> Category: Fintech & Crypto
+> Crypto exchange. Clean blue identity, trust-focused, institutional feel.
+
+## 1. Visual Theme & Atmosphere
+
+Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
+
+The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
+
+**Key Characteristics:**
+- Coinbase Blue (`#0052ff`) as singular brand accent
+- Four-font proprietary family: Display, Sans, Text, Icons
+- 56px radius pill buttons with blue hover transition
+- Near-black (`#0a0b0d`) dark sections + white light sections
+- 1.00 line-height on display headings — ultra-tight
+- Cool gray secondary surface (`#eef0f3`) with blue tint
+- `text-transform: lowercase` on some button labels — unusual
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
+- **Pure White** (`#ffffff`): Primary light surface
+- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
+- **Cool Gray Surface** (`#eef0f3`): Secondary button background
+
+### Interactive
+- **Hover Blue** (`#578bfa`): Button hover background
+- **Link Blue** (`#0667d0`): Secondary link color
+- **Muted Blue** (`#5b616e`): Border color at 20% opacity
+
+### Surface
+- **Dark Card** (`#282b31`): Dark button/card backgrounds
+- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `CoinbaseDisplay` — hero headlines
+- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
+- **Body**: `CoinbaseText` — reading text
+- **Icons**: `CoinbaseIcons` — icon font
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
+| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Pill (56px radius)**
+- Background: `#eef0f3` or `#282b31`
+- Radius: 56px
+- Border: `1px solid` matching background
+- Hover: `#578bfa` (light blue)
+- Focus: `2px solid black` outline
+
+**Full Pill (100000px radius)**
+- Used for maximum pill shape
+
+**Blue Bordered**
+- Border: `1px solid #0052ff`
+- Background: transparent
+
+### Cards & Containers
+- Radius: 8px–40px range
+- Borders: `1px solid rgba(91,97,110,0.2)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base: 8px
+- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
+
+### Border Radius Scale
+- Small (4px–8px): Article links, small cards
+- Standard (12px–16px): Cards, menus
+- Large (24px–32px): Feature containers
+- XL (40px): Large buttons/containers
+- Pill (56px): Primary CTAs
+- Full (100000px): Maximum pill
+
+## 6. Depth & Elevation
+
+Minimal shadow system — depth from color contrast between dark/light sections.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Coinbase Blue (#0052ff) for primary interactive elements
+- Apply 56px radius for all CTA buttons
+- Use CoinbaseDisplay for hero headings only
+- Alternate dark (#0a0b0d) and white sections
+
+### Don't
+- Don't use the blue decoratively — it's functional only
+- Don't use sharp corners on CTAs — 56px minimum
+
+## 8. Responsive Behavior
+
+Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Coinbase Blue (`#0052ff`)
+- Background: White (`#ffffff`)
+- Dark surface: `#0a0b0d`
+- Secondary surface: `#eef0f3`
+- Hover: `#578bfa`
+- Text: `#0a0b0d`
+
+### Example Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."