@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,148 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/minimax/tokens.css
+ *
+ * Structured token bindings for the "MiniMax" brand — the Shanghai-based
+ * AI lab behind Hailuo (海螺) video and Conch text. The visual language
+ * is a white-dominant product gallery: pure white canvas, vivid product
+ * cards, pill navigation, multi-font hierarchy, and a purple-tinted brand
+ * glow on featured surfaces. The font stacks include CJK fallbacks
+ * (PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC) so the
+ * bilingual en/zh audience sees the same vertical rhythm in either script.
+ *
+ * Brand identity in three sentences:
+ *   1. White canvas (#ffffff) is structural; color enters via product
+ *      cards, illustrations, and a single brand-blue accent — never via
+ *      tinted page backgrounds.
+ *   2. Multi-font system: Outfit for display headings (geometric, weight
+ *      500), DM Sans as the UI workhorse for body / nav / buttons. CJK
+ *      fallbacks keep Chinese headings on the same rhythm as English.
+ *   3. Brand blue (#1456f0) is the accent — sparing, reserved for links,
+ *      focus rings, and small chips. Primary CTAs use near-black
+ *      (#181e25 → --fg-2) per the MiniMax button system; brand pink
+ *      (#ea5ec1) is logo / decorative only and never tokenized.
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff;  --surface: #fafafa (whisper card lift on white).
+ *   - --surface-warm: #f0f0f0 (secondary button bg per DESIGN.md §4).
+ *   - --fg: #222222 (near-black);  --fg-2: #18181b (button text, deep heads).
+ *   - --muted: #45515e (DESIGN.md "dark gray" secondary text).
+ *   - --meta:  #8e8e93 (tertiary, muted labels per DESIGN.md §2).
+ *   - --border: #e5e7eb;  --border-soft: #f2f3f5 (section divider).
+ *   - --accent: #1456f0 (brand blue 6); hover #2563eb / active #1d4ed8.
+ *   - --font-display: Outfit + CJK fallbacks; --font-body: DM Sans + CJK.
+ *   - --text-4xl: 80px (display hero, Outfit weight 500 per DESIGN.md §3).
+ *   - --leading-body: 1.5 (universal MiniMax rhythm); --leading-tight: 1.1.
+ *   - --radius-sm: 8px (CTA), --radius-md: 13px (card),
+ *     --radius-lg: 20px (product showcase), --radius-pill: 9999px (nav).
+ *   - --elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08) — DESIGN.md §6 Level 1.
+ *     The brand-glow shadow rgba(44, 30, 116, 0.16) stays inline on
+ *     featured product cards (one-off, not promoted to a token).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;             /* pure white — primary canvas */
+  --surface:      #fafafa;             /* near-white — card lift on bg */
+  --surface-warm: #f0f0f0;             /* secondary button bg (DESIGN.md §4) */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #222222;                     /* near-black — primary text */
+  --fg-2: #18181b;                     /* button text + dark headings */
+  --muted: #45515e;                    /* dark gray — secondary text */
+  --meta:  #8e8e93;                    /* mid gray — tertiary, muted labels */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      #e5e7eb;              /* component edge */
+  --border-soft: #f2f3f5;              /* subtle section divider */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #1456f0;            /* MiniMax brand blue 6 */
+  --accent-on:     #ffffff;
+  --accent-hover:  #2563eb;            /* primary 600 — hover */
+  --accent-active: #1d4ed8;            /* primary 700 — pressed */
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  /* DM Sans = UI workhorse; Outfit = geometric display. CJK fallbacks
+     (PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC) give
+     Chinese-language headings + body the same vertical rhythm so 海螺 /
+     Conch / MiniMax all align without per-script overrides. */
+  --font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  --font-body:    "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §3 hierarchy.
+   * MiniMax compresses from 80px display straight to 32px section, then
+   * 16–20px body — a deliberate jump that keeps the visual ladder short. */
+  --text-xs:   12px;                   /* small label, tag */
+  --text-sm:   14px;                   /* nav / link */
+  --text-base: 16px;                   /* body */
+  --text-lg:   20px;                   /* body large, emphasized */
+  --text-xl:   24px;                   /* sub-heading (Poppins context) */
+  --text-2xl:  32px;                   /* section heading alt */
+  --text-3xl:  48px;                   /* H1 step between section and display */
+  --text-4xl:  80px;                   /* display hero — Outfit weight 500 */
+
+  /* Leading + tracking.
+   * Universal 1.50 line-height across body and most headings is the
+   * MiniMax signature (DESIGN.md §3); display compresses to 1.10 for the
+   * 80px hero. Slight negative tracking on display sizes only. */
+  --leading-body:     1.5;
+  --leading-tight:    1.1;
+  --tracking-display: -0.01em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  /* 8px base grid per DESIGN.md §5; the schema spine uses 4px steps
+     capped at --space-12 (48px). Larger gallery gaps (64–80px) live in
+     the section-rhythm tier below. */
+  --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 gallery spacing: 64–80px between sections on desktop,
+     compressing to 32–40px on phone. */
+  --section-y-desktop: 80px;
+  --section-y-tablet:  64px;
+  --section-y-phone:   40px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* DESIGN.md §5 scale: 8px on CTA buttons / small cards, 13px on
+     medium cards/panels, 20px on product cards, 9999px on pill nav. */
+  --radius-sm:   8px;
+  --radius-md:   13px;
+  --radius-lg:   20px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* DESIGN.md §6: light, airy shadows capped at 0.08 opacity. Standard
+     cards use the neutral black drop below; featured product cards add
+     the purple-tinted brand glow rgba(44, 30, 116, 0.16) inline as a
+     one-off (single-use, not promoted to a token). */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   16px;
+}

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

@@ -0,0 +1,329 @@
+# Design System Inspired by Mintlify
+
+> Category: Productivity & SaaS
+> Documentation platform. Clean, green-accented, reading-optimized.
+
+## 1. Visual Theme & Atmosphere
+
+Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#ffffff`) background, near-black (`#0d0d0d`) text, and a signature green brand accent (`#18E299`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers "we care about your developer experience" in every pixel.
+
+The Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page.
+
+What distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed.
+
+**Key Characteristics:**
+- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable
+- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice
+- Brand green (`#18E299`) used sparingly — CTAs, hover states, focus rings, and accent touches
+- Atmospheric gradient hero with cloud-like green-white wash
+- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills
+- Subtle 5% opacity borders (`rgba(0,0,0,0.05)`) creating barely-there separation
+- 8px base spacing system with generous section padding (48px–96px)
+- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#0d0d0d`): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.
+- **Pure White** (`#ffffff`): Page background, card surfaces, input backgrounds.
+- **Brand Green** (`#18E299`): The signature accent — CTAs, links on hover, focus rings, brand identity.
+
+### Secondary Accents
+- **Brand Green Light** (`#d4fae8`): Tinted green surface for badges, hover states, subtle backgrounds.
+- **Brand Green Deep** (`#0fa76e`): Darker green for text on light-green badges, hover states on brand elements.
+- **Warm Amber** (`#c37d0d`): Warning states, caution badges — `--twoslash-warn-bg`.
+- **Soft Blue** (`#3772cf`): Tag backgrounds, informational annotations — `--twoslash-tag-bg`.
+- **Error Red** (`#d45656`): Error states, destructive actions — `--twoslash-error-bg`.
+
+### Neutral Scale
+- **Gray 900** (`#0d0d0d`): Primary heading text, nav links.
+- **Gray 700** (`#333333`): Secondary text, descriptions, body copy.
+- **Gray 500** (`#666666`): Tertiary text, muted labels.
+- **Gray 400** (`#888888`): Placeholder text, disabled states, code annotations.
+- **Gray 200** (`#e5e5e5`): Borders, dividers, card outlines.
+- **Gray 100** (`#f5f5f5`): Subtle surface backgrounds, hover states.
+- **Gray 50** (`#fafafa`): Near-white surface tint.
+
+### Interactive
+- **Link Default** (`#0d0d0d`): Links match text color, relying on underline/context.
+- **Link Hover** (`#18E299`): Brand green on hover — `var(--color-brand)`.
+- **Focus Ring** (`#18E299`): Brand green focus outline for inputs and interactive elements.
+
+### Surface & Overlay
+- **Card Background** (`#ffffff`): White cards on white background, separated by borders.
+- **Border Subtle** (`rgba(0,0,0,0.05)`): 5% black opacity borders — the primary separation mechanism.
+- **Border Medium** (`rgba(0,0,0,0.08)`): Slightly stronger borders for interactive elements.
+- **Input Border Focus** (`var(--color-brand)`): Green ring on focused inputs.
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.03) 0px 2px 4px`): Barely-there ambient shadow for subtle lift.
+- **Button Shadow** (`rgba(0,0,0,0.06) 0px 1px 2px`): Micro-shadow for button depth.
+- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter`, with fallback: `Inter Fallback, system-ui, -apple-system, sans-serif`
+- **Monospace**: `Geist Mono`, with fallback: `Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |
+| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |
+| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |
+| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |
+| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
+| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |
+| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions |
+| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | `text-transform: uppercase`, section labels |
+| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text |
+| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | `text-transform: uppercase`, technical labels |
+| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | `text-transform: uppercase`, status badges |
+| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | `text-transform: uppercase`, tiny labels |
+
+### Principles
+- **Tight tracking at display sizes**: Inter at 40–64px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient — documentation headings, not billboard copy.
+- **Relaxed reading at body sizes**: 16–18px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort.
+- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical/code contexts. The boundary is strict — no mixing.
+- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px–0.65px) as a clear visual delimiter between content types.
+- **Three weights**: 400 (body/reading), 500 (UI/navigation/emphasis), 600 (headings/titles). No bold (700) in the system.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Brand (Full-round)**
+- Background: `#0d0d0d` (near-black)
+- Text: `#ffffff`
+- Padding: 8px 24px
+- Radius: 9999px (full pill)
+- Font: Inter 15px weight 500
+- Shadow: `rgba(0,0,0,0.06) 0px 1px 2px`
+- Hover: opacity 0.9
+- Use: Primary CTA ("Get Started", "Start Building")
+
+**Secondary / Ghost (Full-round)**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Padding: 4.5px 12px
+- Radius: 9999px (full pill)
+- Border: `1px solid rgba(0,0,0,0.08)`
+- Font: Inter 15px weight 500
+- Hover: opacity 0.9
+- Use: Secondary actions ("Request Demo", "View Docs")
+
+**Transparent / Nav Button**
+- Background: transparent
+- Text: `#0d0d0d`
+- Padding: 5px 6px
+- Radius: 8px
+- Border: none or `1px solid rgba(0,0,0,0.05)`
+- Use: Navigation items, icon buttons
+
+**Brand Accent Button**
+- Background: `#18E299`
+- Text: `#0d0d0d`
+- Padding: 8px 24px
+- Radius: 9999px
+- Use: Special promotional CTAs
+
+### Cards & Containers
+
+**Standard Card**
+- Background: `#ffffff`
+- Border: `1px solid rgba(0,0,0,0.05)`
+- Radius: 16px
+- Padding: 24px
+- Shadow: `rgba(0,0,0,0.03) 0px 2px 4px`
+- Hover: subtle border darkening to `rgba(0,0,0,0.08)`
+
+**Featured Card**
+- Background: `#ffffff`
+- Border: `1px solid rgba(0,0,0,0.05)`
+- Radius: 24px
+- Padding: 32px
+- Inner content areas may have their own 16px radius containers
+
+**Logo/Trust Card**
+- Background: `#fafafa` or `#ffffff`
+- Border: `1px solid rgba(0,0,0,0.05)`
+- Radius: 16px
+- Centered logo/icon with consistent sizing
+
+### Inputs & Forms
+
+**Email Input**
+- Background: transparent or `#ffffff`
+- Text: `#0d0d0d`
+- Padding: 0px 12px (height controlled by line-height)
+- Border: `1px solid rgba(0,0,0,0.08)`
+- Radius: 9999px (full pill, matching buttons)
+- Focus: `1px solid var(--color-brand)` + `outline: 1px solid var(--color-brand)`
+- Placeholder: `#888888`
+
+### Navigation
+- Clean horizontal nav on white, sticky with backdrop blur
+- Brand logotype left-aligned
+- Links: Inter 14–15px weight 500, `#0d0d0d` text
+- Hover: color shifts to brand green `var(--color-brand)`
+- CTA: dark pill button right-aligned ("Get Started")
+- Mobile: hamburger menu collapse at 768px
+
+### Image Treatment
+- Product screenshots with subtle 1px borders
+- Rounded containers: 16px–24px radius
+- Atmospheric gradient backgrounds behind hero images
+- Cloud/sky imagery with soft green tinting
+
+### Distinctive Components
+
+**Atmospheric Hero**
+- Full-width gradient wash: soft green-to-white cloud-like gradient
+- Centered headline with tight tracking
+- Subtitle in muted gray
+- Dual CTA buttons (dark primary + ghost secondary)
+- The gradient creates a sense of elevation and intelligence
+
+**Trust Bar / Logo Grid**
+- "Loved by your favorite companies" section
+- Company logos in muted grayscale
+- Grid or horizontal layout with consistent sizing
+- Subtle border separation between logos
+
+**Feature Cards with Icons**
+- Icon or illustration at top
+- Title at 20px weight 600
+- Description at 14–16px in gray
+- Consistent padding and border treatment
+- Grid layout: 2–3 columns on desktop
+
+**CTA Footer Section**
+- Dark or gradient background
+- Large headline: "Make documentation your winning advantage"
+- Email input with pill styling
+- Brand green accent on CTAs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px
+- Section padding: 48px–96px vertical
+- Card padding: 24px–32px
+- Component gaps: 8px–16px
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with generous top padding (96px+)
+- Feature sections: 2–3 column CSS Grid for cards
+- Full-width sections with contained content
+- Consistent horizontal padding: 24px (mobile) to 32px (desktop)
+
+### Whitespace Philosophy
+- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort.
+- **Sections as chapters**: Each feature section is a self-contained unit with 48px–96px vertical padding, creating clear "chapter breaks."
+- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1–2 key messages per section with supporting imagery.
+
+### Border Radius Scale
+- Small (4px): Inline code, small tags, tooltips
+- Medium (8px): Nav buttons, transparent buttons, small containers
+- Standard (16px): Cards, content containers, image wrappers
+- Large (24px): Featured cards, hero containers, section panels
+- Full Pill (9999px): Buttons, inputs, badges, pills — the signature shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Subtle Border (Level 1) | `1px solid rgba(0,0,0,0.05)` | Standard card borders, dividers |
+| Medium Border (Level 1b) | `1px solid rgba(0,0,0,0.08)` | Interactive elements, input borders |
+| Ambient Shadow (Level 2) | `rgba(0,0,0,0.03) 0px 2px 4px` | Cards with subtle lift |
+| Button Shadow (Level 2b) | `rgba(0,0,0,0.06) 0px 1px 2px` | Button micro-depth |
+| Focus Ring (Accessibility) | `1px solid #18E299` outline | Focused inputs, active interactive elements |
+
+**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (`0.03 opacity, 2px blur, 4px spread`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability.
+
+### Decorative Depth
+- Hero gradient: atmospheric green-white cloud gradient behind hero content
+- No background color alternation — white on white throughout
+- Depth comes from border opacity variation (5% → 8%) and whitespace
+
+## 7. Dark Mode
+
+### Color Inversions
+- **Background**: `#0d0d0d` (near-black)
+- **Text Primary**: `#ededed` (near-white)
+- **Text Secondary**: `#a0a0a0` (muted gray)
+- **Brand Green**: `#18E299` (unchanged — the green works on both backgrounds)
+- **Border**: `rgba(255,255,255,0.08)` (white at 8% opacity)
+- **Card Background**: `#141414` (slightly lighter than page)
+- **Shadow**: `rgba(0,0,0,0.4) 0px 2px 4px` (stronger shadow for contrast)
+
+### Key Adjustments
+- Buttons invert: white background dark text becomes dark background light text
+- Badge backgrounds shift to deeper tones with lighter text
+- Focus ring remains brand green
+- Hero gradient shifts to dark-tinted green atmospheric wash
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked layout, hamburger nav |
+| Tablet | 768–1024px | Two-column grids begin, expanded padding |
+| Desktop | >1024px | Full layout, 3-column grids, maximum content width |
+
+### Touch Targets
+- Buttons with full-pill shape have comfortable 8px+ vertical padding
+- Navigation links spaced with adequate 16px+ gaps
+- Mobile menu provides full-width tap targets
+
+### Collapsing Strategy
+- Hero: 64px → 40px headline, maintains tight tracking proportionally
+- Navigation: horizontal links + CTA → hamburger menu at 768px
+- Feature cards: 3-column → 2-column → single column stacked
+- Section spacing: 96px → 48px on mobile
+- Footer: multi-column → stacked single column
+- Trust bar: grid → horizontal scroll or stacked
+
+### Image Behavior
+- Product screenshots maintain aspect ratio with responsive containers
+- Hero gradient simplifies on mobile
+- Full-width sections maintain edge-to-edge treatment
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Near Black (`#0d0d0d`)
+- Background: Pure White (`#ffffff`)
+- Heading text: Near Black (`#0d0d0d`)
+- Body text: Gray 700 (`#333333`)
+- Border: `rgba(0,0,0,0.05)` (5% opacity)
+- Brand accent: Green (`#18E299`)
+- Link hover: Brand Green (`#18E299`)
+- Focus ring: Brand Green (`#18E299`)
+
+### Example Component Prompts
+- "Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius)."
+- "Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666."
+- "Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase."
+- "Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05)."
+- "Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px."
+
+### Iteration Guide
+1. Always use full-pill radius (9999px) for buttons and inputs — this is Mintlify's signature shape
+2. Keep borders at 5% opacity (`rgba(0,0,0,0.05)`) — stronger borders break the airy feeling
+3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px
+4. Three weights only: 400 (read), 500 (interact), 600 (announce)
+5. Brand green (`#18E299`) is used sparingly — CTAs and hover states only, never for decorative fills
+6. Geist Mono uppercase for technical labels, Inter for everything else
+7. Section padding is generous: 64px–96px on desktop, 48px on mobile
+8. No gray background sections — white throughout, separation through borders and whitespace