@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-systems/minimax/DESIGN.md

@@ -0,0 +1,260 @@
+# Design System Inspired by MiniMax
+
+> Category: AI & LLM
+> AI model provider. Bold dark interface with neon accents.
+
+## 1. Visual Theme & Atmosphere
+
+MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.
+
+The typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.
+
+What makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a "gallery of AI capabilities" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.
+
+**Key Characteristics:**
+- White-dominant layout with colorful product card accents
+- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)
+- Pill buttons (9999px radius) for primary navigation and CTAs
+- Generous rounded cards (20px–24px radius) for product showcases
+- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)
+- Brand pink (`#ea5ec1`) as secondary accent
+- Near-black text (`#222222`, `#18181b`) on white backgrounds
+- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth
+- Dark footer section (`#181e25`) with product/company links
+
+## 2. Color Palette & Roles
+
+### Brand Primary
+- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color
+- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents
+- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent
+
+### Blue Scale (Primary)
+- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds
+- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights
+- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions
+- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states
+- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states
+- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis
+
+### Text Colors
+- **Near Black** (`#222222`): `--col-text00`, primary text
+- **Dark** (`#18181b`): Button text, headings
+- **Charcoal** (`#181e25`): Dark surface text, footer background
+- **Dark Gray** (`#45515e`): `--col-text04`, secondary text
+- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels
+- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text
+
+### Surface & Background
+- **Pure White** (`#ffffff`): `--col-bg13`, primary background
+- **Light Gray** (`#f0f0f0`): Secondary button backgrounds
+- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay
+- **Border Light** (`#f2f3f5`): Subtle section dividers
+- **Border Gray** (`#e5e7eb`): Component borders
+
+### Semantic
+- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds
+
+### Shadows
+- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow
+- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow
+- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow
+- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow
+- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+- **Mid-tier**: `Poppins`
+- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |
+| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |
+| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |
+| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |
+| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |
+| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |
+| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |
+| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |
+| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |
+| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |
+| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |
+| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |
+| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |
+| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |
+
+### Principles
+- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.
+- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).
+- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.
+- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Pill Primary Dark**
+- Background: `#181e25`
+- Text: `#ffffff`
+- Padding: 11px 20px
+- Radius: 8px
+- Use: Primary CTA ("Get Started", "Learn More")
+
+**Pill Nav**
+- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)
+- Text: `#18181b`
+- Radius: 9999px (full pill)
+- Use: Navigation tabs, filter toggles
+
+**Pill White**
+- Background: `#ffffff`
+- Text: `rgba(24, 30, 37, 0.8)`
+- Radius: 9999px
+- Opacity: 0.5 (default state)
+- Use: Secondary nav, inactive tabs
+
+**Secondary Light**
+- Background: `#f0f0f0`
+- Text: `#333333`
+- Padding: 11px 20px
+- Radius: 8px
+- Use: Secondary actions
+
+### Product Cards
+- Background: Vibrant gradients (pink/purple/orange/blue)
+- Radius: 20px–24px (generous rounding)
+- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)
+- Content: Product name, model version, descriptive text
+- Each card has its own color palette matching the product identity
+
+### AI Product Cards (Matrix)
+- Background: white with subtle shadow
+- Radius: 13px–16px
+- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`
+- Icon/illustration centered above product name
+- Product name in DM Sans 14–16px weight 500
+
+### Links
+- **Primary**: `#18181b` or `#181e25`, underline on dark text
+- **Secondary**: `#8e8e93`, muted for less emphasis
+- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections
+
+### Navigation
+- Clean horizontal nav on white background
+- MiniMax logo left-aligned (red accent in logo)
+- DM Sans 14px weight 500 for nav items
+- Pill-shaped active indicators (9999px radius)
+- "Login" text link, minimal right-side actions
+- Sticky header behavior
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
+
+### Grid & Container
+- Max content width centered on page
+- Product card grids: horizontal scroll or 3–4 column layout
+- Full-width white sections with contained content
+- Dark footer at full-width
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked cards |
+| Tablet | 768–1024px | 2-column grids |
+| Desktop | >1024px | Full layout, horizontal card scrolls |
+
+### Whitespace Philosophy
+- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.
+- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct "chapters" of content.
+- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.
+
+### Border Radius Scale
+- Minimal (4px): Small tags, micro badges
+- Standard (8px): Buttons, small cards
+- Comfortable (11px–13px): Medium cards, panels
+- Generous (16px–20px): Large product cards
+- Large (22px–24px): Hero product cards, major containers
+- Pill (30px–32px): Badge pills, rounded panels
+- Full (9999px): Buttons, nav tabs
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | White background, text blocks |
+| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |
+| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |
+| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |
+| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |
+
+**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use white as the dominant background — let product cards provide the color
+- Apply pill radius (9999px) for navigation tabs and toggle buttons
+- Use generous border radius (20px–24px) for product showcase cards
+- Employ the purple-tinted shadow for featured/hero product cards
+- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only
+- Use Outfit for display headings, DM Sans for everything functional
+- Maintain the universal 1.50 line-height across body text
+- Let colorful product illustrations/gradients serve as the primary visual interest
+
+### Don't
+- Don't add colored backgrounds to main content sections — white is structural
+- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core
+- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only
+- Don't mix more than one display font per section (Outfit OR Poppins, not both)
+- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text
+- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint
+- Don't use Roboto for headings — it's the data/technical context font only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked product cards, hamburger nav |
+| Tablet | 768–1024px | 2-column product grids, condensed spacing |
+| Desktop | >1024px | Full horizontal card layouts, expanded spacing |
+
+### Collapsing Strategy
+- Hero: 80px → responsive scaling to ~40px on mobile
+- Product card grid: horizontal scroll → 2-column → single column stacked
+- Navigation: horizontal → hamburger menu
+- Footer: multi-column → stacked sections
+- Spacing: 64–80px gaps → 32–40px on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: `#ffffff` (primary), `#181e25` (dark/footer)
+- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)
+- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)
+- Brand Pink: `#ea5ec1` (accent only)
+- Borders: `#e5e7eb`, `#f2f3f5`
+
+### Example Component Prompts
+- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)."
+- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area."
+- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned."
+- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500."
+- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout."
+
+### Iteration Guide
+1. Start with white — color comes from product cards and illustrations only
+2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons
+3. Purple-tinted shadows for featured cards, neutral shadows for everything else
+4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only
+5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable
+6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements

package/dist/__w3kits/assets/design-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