@aexol/spectral 0.7.0 → 0.7.1

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

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

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