@aexol/spectral 0.9.270 → 0.9.271

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

@@ -1,256 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/mintlify/tokens.css
- *
- * Structured token bindings for "Design System Inspired by Mintlify".
- * Documentation-as-product clarity: white-on-white canvas, near-black
- * text, signature mint-green accent used sparingly, ultra-subtle 5%-
- * opacity borders carrying the entire separation system, and a full-
- * pill (9999px) radius reserved for buttons / inputs / badges as the
- * brand's signature shape.
- *
- * This file pre-compiles the values described in `DESIGN.md` into the
- * shared schema. Agents generating an artifact for Mintlify should
- * paste the `:root` block verbatim into the first `<style>` of the
- * artifact, then reference everything via `var(--*)`.
- *
- * Brand-specific schema decisions (each one bends a schema convention
- * to match Mintlify's voice rather than the cross-brand default):
- *
- *   1. `--accent` is Mintlify's mint-green `#18E299`, NOT used as the
- *      primary CTA fill. DESIGN.md §4 documents the primary button as
- *      near-black on white (`#0d0d0d`) with the accent reserved for
- *      links, hover states, focus rings, and the occasional
- *      "promotional" green pill. Treating black as `--fg` and green
- *      as `--accent` keeps the accent slot honest with the lint's
- *      "≤2 visible accent uses per screen" rule, since the heavy CTA
- *      block already lives in `--fg`.
- *
- *   2. `--accent-hover` is bound to `#0fa76e` (Brand Green Deep),
- *      NOT a `color-mix(black 8%)` shade. DESIGN.md §2 documents
- *      `#0fa76e` as the explicit hover/dark-on-light variant of the
- *      brand green ("Darker green for text on light-green badges,
- *      hover states on brand elements"). Using the brand-documented
- *      colour preserves voice instead of inventing a math-derived
- *      sibling that does not match Mintlify's own product surfaces.
- *
- *   3. `--accent-on` is `#0d0d0d` (Near Black), NOT white. The
- *      brand-accent button (DESIGN.md §4 "Brand Accent Button") sets
- *      `Text: #0d0d0d` over `Background: #18E299` because mint green
- *      is high-luminance — white labels on `#18E299` fall below
- *      WCAG contrast. This is the only brand in the system that
- *      paints dark text on the accent fill.
- *
- *   4. `--border` is `rgba(0, 0, 0, 0.05)` — the documented "5%
- *      black opacity" hairline DESIGN.md §1 names as the primary
- *      separation mechanism. Mintlify forbids gray section
- *      backgrounds and instead uses these whisper-thin borders to
- *      slice white-on-white sections apart. Binding `--border` to
- *      the alpha (not a solid hex) lets `--elev-ring` reproduce the
- *      barely-there hairline by default.
- *
- *   5. The radius scale climbs HARD: 8 → 16 → 24 → pill. DESIGN.md
- *      §5 names four tiers — 8px (nav buttons / small containers),
- *      16px (standard cards), 24px (featured cards), 9999px (the
- *      signature pill on every button, input, and badge). The full
- *      pill is the shape that visually identifies a Mintlify
- *      component at a glance, so we reserve `--radius-pill` for
- *      buttons / inputs / badges and let medium / large carry the
- *      card progression.
- *
- *   6. `--elev-raised` is the documented Mintlify card whisper —
- *      `0 2px 4px rgba(0, 0, 0, 0.03)` — NOT the schema's slightly
- *      heavier `transparent 92%` blur. DESIGN.md §6 makes the
- *      restraint explicit ("When shadows appear, they're
- *      atmospheric whispers… 0.03 opacity, 2px blur, 4px spread").
- *      The brand's depth system is border-driven, not shadow-driven;
- *      this token barely registers visually and is intentional.
- *
- *   7. `--focus-ring` is a sharp 2px ring at `var(--accent)`, NOT
- *      the schema's 3px alpha glow. DESIGN.md §4 specifies focused
- *      inputs use `1px solid var(--color-brand)` plus a matching
- *      outline; the 2px box-shadow form keeps keyboard focus
- *      legible against the white canvas without diffusing into a
- *      halo that would dilute the engineered, paper-like feel.
- *
- *   8. The type scale tops out at 64px (`--text-4xl`) with
- *      `--tracking-display: -0.02em` (≈ -1.28px at 64px, the exact
- *      DESIGN.md §3 hero spec). Mintlify's display reads compressed
- *      and deliberate, like a documentation header — not a
- *      billboard. `--leading-tight` sits at 1.15 to match the
- *      documented hero line-height; smaller headings relax toward
- *      1.30 inline per component.
- *
- *   9. Section rhythm is documentation-grade generous: 96px desktop,
- *      64px tablet, 48px phone (`--section-y-*`). DESIGN.md §5
- *      describes "documentation-grade breathing room" with 48–96px
- *      vertical padding between "chapter-break" sections. We sit at
- *      the top of the documented range on desktop because Mintlify
- *      sells reading comfort and the marketing page must demonstrate
- *      it.
- *
- * Source contracts:
- *   - Standard token names: design-systems/_schema/tokens.schema.ts
- *   - A2 fallback parity:   design-systems/_schema/defaults.css
- *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
- *
- * Keep this file additive: never invent token names not also
- * documented in DESIGN.md or the schema. The Inter / Geist Mono
- * faces do not need a CDN reference here — the font stacks list
- * fallback face names + system fallbacks so artifacts render
- * acceptably even when Inter is not loaded, and any host that wants
- * the real Inter face links it externally.
- * ─────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface ─────────────────────────────────────────────────────
-   * Pure white canvas, white cards, NO color section variation.
-   * DESIGN.md §1: "Clean white canvas — no gray backgrounds, no
-   * color sections, depth through borders and whitespace alone."
-   * `--surface-warm` resolves to a near-white `#fafafa` because
-   * DESIGN.md §4 names "Logo/Trust Card" containers with `#fafafa`
-   * as a surface tint distinct from the pure-white card surface;
-   * components targeting `var(--surface-warm)` therefore reach the
-   * documented Gray 50 instead of collapsing onto plain white. */
-  --bg: #ffffff;                        /* Pure White — page background */
-  --surface: #ffffff;                   /* White cards on white background */
-  --surface-warm: #fafafa;              /* Gray 50 — trust-card / muted surface tint */
-
-  /* ─── Foreground (4 levels) ───────────────────────────────────────
-   * `#0d0d0d` instead of `#000000` — the micro-softness DESIGN.md §2
-   * calls out as "improves reading comfort". Four independent text
-   * tiers because Mintlify genuinely uses four (heading, body
-   * description, caption, placeholder/disabled), so binding `--fg-2`
-   * and `--meta` independently lets cross-brand components targeting
-   * the richer tiers resolve to Mintlify's actual gray ramp. */
-  --fg: #0d0d0d;                        /* Gray 900 — primary text, headings */
-  --fg-2: #333333;                      /* Gray 700 — body description */
-  --muted: #666666;                     /* Gray 500 — captions, tertiary text */
-  --meta: #888888;                      /* Gray 400 — placeholder, disabled, code annotations */
-
-  /* ─── Border (2 levels) ──────────────────────────────────────────
-   * 5% opacity hairline is THE signature — DESIGN.md §1 names it as
-   * the primary separation mechanism. `--border-soft` aliases to
-   * `--border` because Mintlify's documented system has only one
-   * "subtle" tier; the slightly stronger `rgba(0,0,0,0.08)` from
-   * DESIGN.md §2 is reserved for INTERACTIVE element edges and is
-   * inlined per-component (button outline, input border) rather than
-   * promoted to a separator-level token. */
-  --border: rgba(0, 0, 0, 0.05);        /* signature 5% hairline — section / card edge */
-  --border-soft: var(--border);         /* alias — Mintlify has one subtle tier */
-
-  /* ─── Accent ─────────────────────────────────────────────────────
-   * Mint green — used SPARINGLY (DESIGN.md §1: "≤2 visible uses per
-   * screen" enforced by the lint). CTAs, link hover, focus rings,
-   * and the occasional brand-accent pill. Primary CTAs are NOT this
-   * green — they are `--fg`. */
-  --accent: #18E299;                    /* Brand Green — the signature mint */
-  --accent-on: #0d0d0d;                 /* dark text on mint — bright accent fails WCAG against white */
-  --accent-hover: #0fa76e;              /* Brand Green Deep — DESIGN.md §2 documented hover */
-  --accent-active: color-mix(in oklab, var(--accent-hover), black 12%);
-
-  /* ─── Semantic ───────────────────────────────────────────────────
-   * Warn / Danger sourced from DESIGN.md §2's twoslash colour set
-   * (the technical-doc context where these states most often appear
-   * for Mintlify). `--success` keeps the cross-brand schema default
-   * because using the brand mint (`--accent`) would overload it for
-   * status work and break the "≤2 accent uses per screen" lint. */
-  --success: #16a34a;
-  --warn: #c37d0d;                      /* Warm Amber — DESIGN.md `--twoslash-warn-bg` */
-  --danger: #d45656;                    /* Error Red  — DESIGN.md `--twoslash-error-bg` */
-
-  /* ─── Typography ─────────────────────────────────────────────────
-   * Inter for everything human-readable; Geist Mono ONLY for code,
-   * tabular metrics, kbd, and uppercase technical labels (DESIGN.md
-   * §3: "The boundary is strict — no mixing"). The `Inter Fallback`
-   * / `Geist Mono Fallback` face names mirror the upstream Mintlify
-   * stylesheet so platforms that ship metric-compatible fallback
-   * fonts under those names can substitute without layout shift. */
-  --font-display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
-  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
-  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
-
-  /* Type scale — DESIGN.md §3. Display tops out at 64px; mono code
-   * starts at 12px. The 18px tier (--text-lg) is the documented
-   * "Body Large" for hero descriptions and section introductions. */
-  --text-xs: 12px;                      /* Mono Code, micro labels */
-  --text-sm: 14px;                      /* Caption, link, small body */
-  --text-base: 16px;                    /* Body, button label */
-  --text-lg: 18px;                      /* Body Large — hero descriptions */
-  --text-xl: 20px;                      /* Card Title */
-  --text-2xl: 24px;                     /* Sub-heading */
-  --text-3xl: 40px;                     /* Section Heading */
-  --text-4xl: 64px;                     /* Display Hero */
-
-  /* `--leading-body` 1.5 — the documented 16px / 24px reading rhythm.
-   * `--leading-tight` 1.15 matches the 64px display line-height.
-   * `--tracking-display` -0.02em ≈ -1.28px at 64px (exact DESIGN.md
-   * §3 hero spec) and scales proportionally with size. */
-  --leading-body: 1.5;
-  --leading-tight: 1.15;
-  --tracking-display: -0.02em;
-
-  /* ─── Spacing ────────────────────────────────────────────────────
-   * 8px base grid (DESIGN.md §5). The 2/4/5/6/7/10 sub-tier
-   * micro-padding values (button `4.5px 12px`, etc.) are inlined
-   * per-component because they are too fine to belong in the
-   * shared schema. */
-  --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 rhythm — DESIGN.md §5: 48–96px chapter-break padding.
-   * Desktop sits at the top of the documented range because the
-   * marketing page itself must demonstrate documentation-grade
-   * breathing room. */
-  --section-y-desktop: 96px;
-  --section-y-tablet: 64px;
-  --section-y-phone: 48px;
-
-  /* ─── Radius ─────────────────────────────────────────────────────
-   * DESIGN.md §5 four-tier radius scale. The pill (9999px) is the
-   * SIGNATURE shape — every button, every input, every badge.
-   * Cards step from 16 (standard) to 24 (featured). 8 is reserved
-   * for nav-button-style functional rectangles. */
-  --radius-sm: 8px;                     /* nav buttons, transparent buttons */
-  --radius-md: 16px;                    /* standard cards */
-  --radius-lg: 24px;                    /* featured cards, hero containers */
-  --radius-pill: 9999px;                /* SIGNATURE — buttons, inputs, badges */
-
-  /* ─── Elevation ──────────────────────────────────────────────────
-   * Shadow as atmospheric whisper. DESIGN.md §6: "Mintlify barely
-   * uses shadows. The depth system is almost entirely border-
-   * driven." `--elev-raised` is the documented card whisper at
-   * 0.03 alpha — barely registering visually, intentional. */
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 2px 4px rgba(0, 0, 0, 0.03);
-
-  /* ─── Focus ring ─────────────────────────────────────────────────
-   * Sharp 2px box-shadow at the brand mint. DESIGN.md §4 specifies
-   * focused inputs use `1px solid var(--color-brand)` plus a
-   * matching outline; the 2px shadow form keeps keyboard focus
-   * unmistakable on the white canvas without the soft halo that
-   * would dilute the engineered feel. */
-  --focus-ring: 0 0 0 2px var(--accent);
-
-  /* ─── Motion ─────────────────────────────────────────────────────
-   * Standard durations + standard ease — Mintlify's voice is in
-   * type, colour restraint, and whitespace, not in animation. */
-  --motion-fast: 150ms;
-  --motion-base: 200ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-
-  /* ─── Layout ─────────────────────────────────────────────────────
-   * 1200px max content width per DESIGN.md §5. Horizontal gutters
-   * climb from 24px on phone/tablet to 32px on desktop — the
-   * documented "24px (mobile) to 32px (desktop)" container padding. */
-  --container-max: 1200px;
-  --container-gutter-desktop: 32px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 24px;
-}

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

@@ -1,111 +0,0 @@
-# Design System Inspired by Miro
-
-> Category: Design & Creative
-> Visual collaboration. Bright yellow accent, infinite canvas aesthetic.
-
-## 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
-- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding
-- White circle: 50% radius, white bg with shadow
-- Blue primary (implied from interactive color)
-
-### Cards: 12px–24px radius, pastel backgrounds
-### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding
-
-## 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)."