@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

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

@@ -0,0 +1,256 @@
+# Design System Inspired by Warp
+
+> Category: Developer Tools
+> Modern terminal. Dark IDE-like interface, block-based command UI.
+
+## 1. Visual Theme & Atmosphere
+
+Warp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either — it's Warm Parchment (`#faf9f6`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.
+
+The typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool — Matter has a softness and humanity that signals "this terminal is for everyone, not just greybeards." Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.
+
+The overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.
+
+**Key Characteristics:**
+- Warm dark background — not cold black, but earthy near-black with warm gray undertones
+- Warm Parchment (`#faf9f6`) text instead of pure white — subtle cream warmth
+- Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface
+- Nature photography interleaved with product screenshots — lifestyle meets developer tool
+- Almost monochromatic warm gray palette — no bold accent colors
+- Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling
+- Pill-shaped dark buttons (`#353534`, 50px radius) — restrained, muted CTAs
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Warm Parchment** (`#faf9f6`): Primary text color — a barely-cream off-white that softens every surface
+- **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces — warm, not cold
+- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background
+
+### Secondary & Accent
+- **Stone Gray** (`#868584`): Secondary text, muted descriptions — warm mid-gray
+- **Ash Gray** (`#afaeac`): Body text, button text — the workhorse reading color
+- **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone — underlined links in content
+
+### Surface & Background
+- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation
+- **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment
+- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth
+
+### Neutrals & Text
+- **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text
+- **Ash Gray** (`#afaeac`): Body paragraphs, descriptions
+- **Stone Gray** (`#868584`): Secondary labels, subdued information
+- **Muted Purple** (`#666469`): Underlined links, tertiary content
+- **Dark Charcoal** (`#454545` / `#353534`): Borders, button backgrounds
+
+### Semantic & Accent
+- Warp operates as an almost monochromatic system — no bold accent colors
+- Interactive states are communicated through opacity changes and underline decorations rather than color shifts
+- Any accent color would break the warm, restrained palette
+
+### Gradient System
+- No explicit gradients on the marketing site
+- Depth is created through layered semi-transparent surfaces and photography rather than color gradients
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & Body**: `Matter Regular` — geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif
+- **Medium**: `Matter Medium` — weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`
+- **Square**: `Matter SQ Regular` — squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`
+- **UI Supplement**: `Inter` — used for specific UI elements. Fallbacks: `Inter Placeholder`
+- **Monospace Display**: `Geist Mono` — for code/terminal display headings
+- **Monospace Body**: `Matter Mono Regular` — custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |
+| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |
+| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |
+| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |
+| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |
+| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |
+| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |
+| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |
+| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |
+| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |
+| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |
+| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |
+| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |
+| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |
+| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |
+| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |
+| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |
+| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |
+| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |
+
+### Principles
+- **Regular weight dominance**: Nearly all text uses weight 400 (Regular) — even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture
+- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px–2.4px), creating a magazine-editorial categorization system
+- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces
+- **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated
+- **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons
+- **Ghost**: No visible background, text-only with underline decoration on hover
+- **Hover**: Subtle opacity or brightness shift — no dramatic color changes
+
+### Cards & Containers
+- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius
+- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)
+- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius
+- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Dark background inputs with warm gray text
+- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
+
+### Navigation
+- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
+- **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active/hover
+- **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing
+- **Mobile**: Collapses to simplified navigation
+- **Sticky**: Nav stays fixed on scroll
+
+### Image Treatment
+- **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool
+- **Terminal screenshots**: Product UI shown in realistic terminal window frames
+- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative
+- **Full-bleed**: Images often span full container width with 8px radius
+- **Video**: Video elements present with 10px border-radius
+
+### Testimonial Section
+- Social proof area ("Don't take our word for it") with quotes
+- Muted styling consistent with overall restraint
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
+- **Section padding**: 80px–120px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1500px container (breakpoint at 1500px), centered
+- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials
+- **Cinematic layout**: Wide containers that let photography breathe
+
+### Whitespace Philosophy
+- **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty
+- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information
+- **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment
+
+### Border Radius Scale
+- **4px**: Small interactive elements — buttons, tags
+- **5px–6px**: Standard components — links, small containers
+- **8px**: Images, video containers, standard cards
+- **10px**: Video elements, medium containers
+- **12px**: Feature cards, large images
+- **14px**: Large containers, prominent cards
+- **40px**: Large rounded sections
+- **50px**: Pill buttons — primary CTAs
+- **200px**: Progress bars — full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |
+| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |
+| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |
+| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |
+
+### Shadow Philosophy
+Warp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:
+- **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment
+- **Photography layering** — images create natural depth without artificial shadows
+- **Surface opacity shifts** — `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences
+- The effect is calm and grounded — nothing floats, everything rests
+
+### Decorative Depth
+- **Photography as depth**: Nature images create atmospheric depth that shadows cannot
+- **No glass or blur effects**: The design avoids trendy glassmorphism entirely
+- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm off-white (`#faf9f6`) for text instead of pure white — the cream undertone is essential
+- Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs
+- Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only
+- Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization
+- Interleave nature photography with product screenshots — this is core to the brand identity
+- Maintain the almost monochromatic warm gray palette — no bold accent colors
+- Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows
+- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment
+
+### Don't
+- Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)
+- Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays
+- Apply bold weight (700+) to any text — Warp never goes above Medium (500)
+- Use heavy drop shadows — depth comes from borders, photography, and opacity shifts
+- Create cold or blue-tinted dark backgrounds — the warmth is essential
+- Add decorative gradients or glow effects — the photography provides all visual interest
+- Use tight, compressed layouts — the editorial spacing is generous and contemplative
+- Mix in additional typefaces beyond the Matter family + Inter supplement
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |
+| Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |
+| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |
+
+### Touch Targets
+- Pill buttons: 50px radius with 10px padding — comfortable touch targets
+- Nav links: 16px text with surrounding padding for accessibility
+- Mobile CTAs: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → simplified mobile navigation
+- **Hero text**: 80px display → 56px → 48px across breakpoints
+- **Feature sections**: Side-by-side photography + text → stacked vertically
+- **Photography**: Scales within containers, maintains cinematic aspect ratios
+- **Section spacing**: Reduces proportionally — generous desktop → compact mobile
+
+### Image Behavior
+- Nature photography scales responsively, maintaining wide cinematic ratios
+- Terminal screenshots maintain aspect ratios within responsive containers
+- Video elements scale with 10px radius maintained
+- No art direction changes — same compositions across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Warm Parchment (`#faf9f6`)
+- Secondary Text: Ash Gray (`#afaeac`)
+- Tertiary Text: Stone Gray (`#868584`)
+- Button Background: Earth Gray (`#353534`)
+- Border: Mist Border (`rgba(226, 226, 226, 0.35)`)
+- Background: Deep warm near-black (page background)
+
+### Example Component Prompts
+- "Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)"
+- "Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px"
+- "Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style"
+- "Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation"
+- "Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential
+2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs
+3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis
+4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here
+5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy

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

@@ -0,0 +1,207 @@
+# Design System Inspired by Webex
+
+> Category: Productivity & SaaS
+> Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.
+
+## 1. Visual Theme & Atmosphere
+
+Webex is cleaner, friendlier, and more product-led than Cisco corporate while still living inside the same trust-oriented universe. The brand language combines bright white canvases with dark in-product surfaces, then anchors interaction around a precise family of blue action colors drawn from Momentum. The result is a collaboration platform aesthetic: capable, legible, modern, and designed for continuous use rather than one-shot marketing drama.
+
+Typography is driven by the Momentum system, whose primary font stack is `Momentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif`. This gives Webex a more software-native rhythm than Cisco's broader corporate presence. Headings should be clear and confident, but not monumental. Body copy should feel practical and human. In contrast to Cisco's singular-signal visual system, Webex allows a broader supporting collaboration palette — cobalt, cyan, mint, lime, gold, orange, pink, purple — but these should appear as **secondary accents** for teams, avatars, presence, or workspace state, not as uncontrolled decoration.
+
+What defines Webex is **blue-guided clarity plus collaborative color**. Action is blue. Surfaces are simple. Supporting colors represent people, teams, or activity.
+
+**Key Characteristics:**
+- Momentum typography stack with clean product rhythm
+- Blue action system centered on `#1170cf`, `#0353a8`, and `#063a75`
+- White marketing/product canvases paired with optional charcoal dark-mode surfaces
+- Soft pill geometry for actions and controls
+- Collaboration-spectrum accent colors used sparingly for people/workspaces
+- Product-first clarity over ornamental flourish
+- Motion should feel polished and unobtrusive
+
+## 2. Color Palette & Roles
+
+### Primary Action
+- **Webex Action Blue** (`#1170cf`): Primary buttons, active controls, main links, selected states
+- **Action Blue Hover** (`#0353a8`): Hover and stronger emphasis
+- **Action Blue Pressed** (`#063a75`): Pressed / active interaction state
+- **Accent Light Blue** (`#64b4fa`): Focus ring, bright dark-surface link state, supportive highlight
+
+### Text & Surface
+- **Primary Text (Light Theme)** (`#000000f2`): Main light-surface text
+- **Secondary Text (Light Theme)** (`#000000b3`): Support copy and metadata
+- **Primary Text (Dark Theme)** (`#fffffff2`): Main dark-surface text
+- **Secondary Text (Dark Theme)** (`#ffffffb3`): Support copy on dark
+- **White Canvas** (`#ffffff`): Primary light background
+- **Black Canvas** (`#000000`): Full dark background
+- **Dark Surface 1** (`#1a1a1a`): Dark cards, modals, product chrome
+- **Dark Surface 2** (`#262626`): Elevated dark layers
+
+### Collaboration / Team Spectrum
+- **Team Cobalt** (`#5ebff7`)
+- **Team Cyan** (`#22c7d6`)
+- **Team Mint** (`#30c9b0`)
+- **Team Lime** (`#93c437`)
+- **Team Gold** (`#d6b220`)
+- **Team Orange** (`#fd884e`)
+- **Team Pink** (`#fc97aa`)
+- **Team Purple** (`#f294f1`)
+
+Use these as secondary collaboration accents: avatars, presence markers, workspace labels, chips, or lightweight category signals.
+
+### Semantic
+- **Success** (`#3cc29a`)
+- **Warning** (`#f2990a`)
+- **Danger** (`#fc8b98`)
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Momentum`, fallbacks: `Inter, Arial, Helvetica Neue, Helvetica, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero Display | Momentum | 64px | 500 | 1.10 | -1px | Marketing hero headline |
+| Section Display | Momentum | 40px | 500 | 1.20 | -0.5px | Section lead |
+| Heading | Momentum | 24px | 500 | 1.33 | normal | Card title, feature title |
+| Body | Momentum | 16px | 400 | 1.50 | normal | Default product/marketing body |
+| Body Small | Momentum | 14px | 400 | 1.43 | normal | Metadata, nav, helper text |
+| Label | Momentum | 12px | 500 | 1.33 | normal | Chips, tags, presence labels |
+| Button | Momentum | 16px | 500 | 1.25 | normal | CTA label |
+
+### Principles
+- Keep typography highly legible and product-oriented.
+- Use medium weight for structural emphasis, not ultra-bold display theatrics.
+- The system should feel modern and easy to scan, especially in dashboard and collaboration contexts.
+- Avoid decorative font mixing unless the artifact explicitly requires a marketing flourish.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Blue Pill**
+- Background: Webex Action Blue (`#1170cf`)
+- Text: White (`#ffffff`)
+- Radius: pill
+- Hover: `#0353a8`
+- Active: `#063a75`
+
+**Secondary Outline / Ghost on Light**
+- Background: transparent or white
+- Text: `#1170cf`
+- Border: subtle dark or blue-tinted alpha border
+- Radius: pill
+- Purpose: secondary CTA on white or light product surfaces
+
+**Secondary Outline / Ghost on Dark**
+- Background: transparent or `#1a1a1a`
+- Text: `#64b4fa` or white for the strongest emphasis
+- Border: 1px white-alpha or Accent Light Blue (`#64b4fa`) depending on emphasis
+- Radius: pill
+- Hover: soft blue-tinted dark fill with the text color preserved
+- Focus ring: 2px Accent Light Blue halo
+- Purpose: dark-surface secondary CTA without dropping below contrast targets
+
+### Cards & Containers
+- Light cards: white fill with subtle outline
+- Dark cards: `#1a1a1a` fill with bright text and light outline
+- Radius: 16px
+- Keep interiors airy; do not over-densify by default
+
+### Inputs & Controls
+- Light surfaces: subtle outline, blue focus
+- Dark surfaces: bright text, soft white-alpha outline, blue focus signal
+- Toggles, tabs, and nav should feel precise and product-native, not ornamental
+
+### Collaboration Tokens
+- Use team-spectrum colors for presence chips, avatar backgrounds, workspace badges, or lightweight categorization
+- Do not assign them to all primary buttons or all large surfaces
+
+### Brand-Specific Recipes
+
+**Meeting Card**
+- Anatomy: title, time block, participant count, host avatar, device or room status, primary join action
+- States: upcoming, live, ended, recording, muted-device warning
+- Brand behavior: primary action stays blue; meeting state uses subtle chips rather than full-surface color fills
+
+**Presence Chip**
+- Anatomy: avatar or initials, user name, compact status dot/chip, optional location/device label
+- Sizes: 24px compact, 32px default, 40px prominent
+- States: available, presenting, in meeting, away, do-not-disturb
+- Color rule: use collaboration colors as supporting identity accents, not as replacements for semantic status
+
+**Workspace Sidebar**
+- Anatomy: workspace switcher, search, primary nav groups, badge counts, pinned spaces, footer utilities
+- Behavior: keep hierarchy obvious and allow badge counts or unread state to read at a glance
+- States: selected item, unread, hovered, collapsed narrow mode
+
+**Roster Row**
+- Anatomy: avatar, display name, role label, mute/video state, hand-raise or reaction slot, overflow actions
+- States: speaking, muted, hand raised, spotlighted, disconnected
+- Density: support both meeting roster density and more spacious messaging/contact density
+
+## 5. Layout Principles
+
+### Spacing & Grid
+- Base rhythm: 8px
+- Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 88px
+- Use clean marketing bands and product-story sections
+- Prefer simple grids with clear scanning order
+- Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above
+
+### Composition
+- White space is important; the UI should not feel cramped
+- Marketing layouts should balance clarity with product focus
+- Collaboration/product pages may mix white sections with dark embedded product surfaces
+- Blue should lead the eye; collaboration colors should support, not compete
+- On tablet, reduce multi-panel collaboration layouts to two primary regions and preserve a clear action rail
+- On mobile, stack sidebars beneath the main header, collapse meeting side-panels into drawers, and keep call controls centered in a single thumb-reachable row
+- Navigation should shift to a compact app bar plus drawer on smaller screens rather than shrinking labels until they wrap
+
+### Accessibility & Responsiveness
+- Minimum touch target: 44px by 44px for buttons, tabs, roster actions, and call controls
+- Maintain visible keyboard focus with an Accent Light Blue halo on both light and dark surfaces
+- Any hover-revealed affordance must also appear on focus and touch
+- Respect reduced-motion users by replacing staggered entrance motion with instant layout plus subtle opacity changes only
+
+## 6. Motion & Interaction
+
+- Motion should feel polished, calm, and practical
+- Use fade, slide, and soft stagger in the 160ms–280ms range
+- Hover and focus can use gentle blue glow or highlight
+- Avoid loud spring physics or excessive flourish
+- Under `prefers-reduced-motion`, remove stagger choreography and large panel slides; keep state feedback under 120ms with opacity or outline changes only
+
+## 7. Voice & Brand
+
+- Webex voice is practical, clear, and human
+- Headlines should emphasize usefulness, outcomes, and collaborative capability
+- The brand should feel like a trusted workspace platform for meetings, messaging, devices, and shared work
+- It should be warmer than Cisco corporate, but still disciplined
+
+## 8. Anti-patterns
+
+- Do not turn Webex into a rainbow-heavy consumer social product
+- Do not use collaboration colors as primary CTA colors
+- Do not overuse gradients as core brand language
+- Do not make the system overly corporate-dark when the artifact is meant to feel collaborative and accessible
+- Do not use decorative typography that harms scannability
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary action: `#1170cf`
+- Hover: `#0353a8`
+- Pressed: `#063a75`
+- Focus / bright dark-surface accent: `#64b4fa`
+- Success: `#3cc29a`
+- Warning: `#f2990a`
+- Danger: `#fc8b98`
+
+### Example Component Prompts
+- "Create a Webex-style product landing page with white canvases, Momentum typography, and blue pill CTAs using #1170cf."
+- "Design a collaboration dashboard with clean white cards, one embedded dark product panel, and secondary team-color chips for presence."
+- "Build a settings or admin surface that uses calm spacing, blue action states, and restrained multi-user color accents."

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

@@ -0,0 +1,95 @@
+# Design System Inspired by Webflow
+
+> Category: Design & Creative
+> Visual web builder. Blue-accented, polished marketing site aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
+
+**Key Characteristics:**
+- White canvas with near-black (`#080808`) text
+- Webflow Blue (`#146ef5`) as primary brand + interactive color
+- WF Visual Sans Variable — custom variable font with weight 500–600
+- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
+- Conservative 4px–8px border-radius — sharp, not rounded
+- Multi-layer shadow stacks (5-layer cascading shadows)
+- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
+- translate(6px) hover animation on buttons
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#080808`): Primary text
+- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
+- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
+- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
+- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
+
+### Secondary Accents
+- **Purple** (`#7a3dff`): `--_color---secondary--purple`
+- **Pink** (`#ed52cb`): `--_color---secondary--pink`
+- **Green** (`#00d722`): `--_color---secondary--green`
+- **Orange** (`#ff6b00`): `--_color---secondary--orange`
+- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
+- **Red** (`#ee1d36`): `--_color---secondary--red`
+
+### Neutral
+- **Gray 800** (`#222222`): Dark secondary text
+- **Gray 700** (`#363636`): Mid text
+- **Gray 300** (`#ababab`): Muted text, placeholder
+- **Mid Gray** (`#5a5a5a`): Link text
+- **Border Gray** (`#d8d8d8`): Borders, dividers
+- **Border Hover** (`#898989`): Hover border
+
+### Shadows
+- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
+
+## 3. Typography Rules
+
+### Font: `WF Visual Sans Variable`, fallback: `Arial`
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 80px | 600 | 1.04 | -0.8px | |
+| Section Heading | 56px | 600 | 1.04 | normal | |
+| Sub-heading | 32px | 500 | 1.30 | normal | |
+| Feature Title | 24px | 500–600 | 1.30 | normal | |
+| Body | 20px | 400–500 | 1.40–1.50 | normal | |
+| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
+| Button | 16px | 500 | 1.60 | -0.16px | |
+| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
+| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
+| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
+| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
+| Code: Inconsolata (companion monospace font)
+
+## 4. Component Stylings
+
+### Buttons
+- Transparent: text `#080808`, translate(6px) on hover
+- White circle: 50% radius, white bg
+- Blue badge: `#146ef5` bg, 4px radius, weight 550
+
+### Cards: `1px solid #d8d8d8`, 4px–8px radius
+### Badges: Blue-tinted bg at 10% opacity, 4px radius
+
+## 5. Layout
+- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
+- Radius: 2px, 4px, 8px, 50% — conservative, sharp
+- Breakpoints: 479px, 768px, 992px
+
+## 6. Depth: 5-layer cascading shadow system
+
+## 7. Do's and Don'ts
+- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
+- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
+
+## 8. Responsive: 479px, 768px, 992px
+
+## 9. Agent Prompt Guide
+- Text: Near Black (`#080808`)
+- CTA: Webflow Blue (`#146ef5`)
+- Background: White (`#ffffff`)
+- Border: `#d8d8d8`
+- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`