@aexol/spectral 0.9.270 → 0.9.271

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

@@ -1,126 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * 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

@@ -1,132 +0,0 @@
-# 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)."