@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

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

package/dist/__w3kits/assets/design-systems/mission-control/DESIGN.md

@@ -0,0 +1,474 @@
+# Mission Control Design System
+
+> Category: Developer Tools
+> Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.
+
+## 1. Visual Theme & Atmosphere
+
+A **deep space command center** — dark, information-dense, unambiguous. Every pixel earns its place. The aesthetic draws from NASA mission control rooms, SpaceX launch consoles, and ISRO's mission operations complex. Amber data on navy is the core contrast pair; everything else is subdued.
+
+| Element | Hex | Role |
+|---------|-----|------|
+| Background | `#0B1120` | Deep space navy, primary canvas |
+| Surface | `#111827` | Elevated panels, cards |
+| Surface Hover | `#1A2535` | Interactive surface hover |
+| Border | `#1E3A5F` | Panel dividers, subtle structure |
+| Primary Data | `#FFB800` | Telemetry values, key metrics |
+| Accent | `#00D4FF` | Active/healthy indicators |
+| Alert | `#FF4757` | Critical warnings, errors |
+| Text Primary | `#E8F0FE` | High-contrast readable text |
+| Text Secondary | `#8BA3C7` | Labels, secondary information |
+| Text Tertiary | `#4A6080` | Timestamps, metadata |
+
+*Every readout must be readable at 3 meters in low light by someone who hasn't slept in 18 hours.*
+
+### Use Cases
+
+Mission Control is purpose-built for:
+- **Operations dashboards** — real-time system health, infrastructure monitoring, on-call status boards
+- **Build and deploy status screens** — CI/CD pipelines, release coordination, incident response
+- **Real-time monitoring UIs** — telemetry aggregation, sensor networks, financial data feeds
+- **Any information-dense, low-light, high-stakes display**
+
+### Prior Art
+
+NASA Mission Control (Houston), ISRO ISTRAC, SpaceX Falcon/Dragon consoles, ESA ESOC — all share amber-on-navy telemetry, monospace data fields, and hierarchical alert systems. The shared constraints (low light, fatigue, split-second decisions) drive convergent design.
+
+## 2. Color
+
+### Surface Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#0B1120` | Page canvas, primary depth |
+| Surface | `#111827` | Panels, cards, elevated areas |
+| Surface Hover | `#1A2535` | Interactive surface state |
+| Surface Active | `#1E3A5F` | Selected, active panel |
+| Border | `#1E3A5F` | Panel dividers, grid lines |
+| Border Subtle | `#162035` | Inner dividers, minor separation |
+
+### Data Palette (telemetry values)
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#FFB800` | Primary telemetry values, key metrics |
+| Secondary | `#00D4FF` | Healthy/active indicators, links |
+| Alert Critical | `#FF4757` | Errors, critical alerts, abort states |
+| Alert Warning | `#FF9F43` | Warnings, degraded performance |
+| Success | `#26DE81` | Nominal status, completed actions |
+
+All data colors on `#111827` pass WCAG AA (minimum 4.5:1).
+
+### Text Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#E8F0FE` | Readable at distance, primary content |
+| Secondary | `#8BA3C7` | Labels, descriptors |
+| Tertiary | `#4A6080` | Timestamps, metadata, grid labels |
+
+### Dark Mode
+
+Dark mode is the native mode. No light mode variant by design — mission control environments are always low-light (ISRO ISTRAC, NASA FDO, SpaceX launch consoles all run dark). daytime operations centers with high ambient light are outside scope for v1; a light mode adaptation would require rethinking the full semantic color layer.
+
+```css
+:root {
+  --bg-default: #0B1120;
+  --bg-surface: #111827;
+  --bg-surface-hover: #1A2535;
+  --bg-surface-active: #1E3A5F;
+  --border-default: #1E3A5F;
+  --border-subtle: #162035;
+  --data-primary: #FFB800;
+  --data-secondary: #00D4FF;
+  --data-alert-critical: #FF4757;
+  --data-alert-warning: #FF9F43;
+  --data-success: #26DE81;
+  --fg-primary: #E8F0FE;
+  --fg-secondary: #8BA3C7;
+  --fg-tertiary: #4A6080;
+}
+```
+
+## 3. Typography
+
+### Font Stack
+
+```css
+/* Monospace for all data readouts — consistency at speed */
+--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+/* Sans-serif for labels, navigation, prose */
+--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+```
+
+### Type Scale
+
+| Role | Size | Weight | Line Height | Font |
+|------|------|--------|-------------|------|
+| Display | 48px | 700 | 1.0 | JetBrains Mono |
+| H1 | 18px | 600 | 1.2 | Inter |
+| H2 | 13px | 600 | 1.2 | Inter, uppercase, tracked |
+| Body | 14px | 400 | 1.5 | Inter |
+| Caption | 12px | 400 | 1.4 | Inter |
+| Micro | 10px | 600 | 1.0 | Inter, uppercase |
+
+**Font labels for catalog extraction:**
+
+```
+Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+```
+
+## 4. Spacing
+
+4px baseline grid for dense telemetry layouts. 8px for outer padding, 16px+ for section gaps.
+
+```css
+--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
+--space-5: 20px;  --space-6: 24px;  --space-8: 32px;   --space-12: 48px;
+--space-16: 64px; --space-20: 80px;
+```
+
+## 5. Layout & Composition
+
+### Grid System
+
+12-column grid, 4px gutters. Dense information layout — no wasted whitespace, but clear visual grouping.
+
+```css
+/* Standard panel: spans 3, 4, or 6 columns */
+.panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  padding: var(--space-4);
+}
+
+/* Full-width telemetry strip */
+.telemetry-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--space-2);
+}
+```
+
+### Panel Structure
+
+```css
+/* .panel base styles are defined in the Grid System section above. */
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg-secondary);
+}
+```
+
+## 6. Components
+
+### Status Badge
+
+```css
+/* Nominal — green, all clear */
+.badge-nominal {
+  background: rgba(38, 222, 129, 0.15);
+  color: #26DE81;
+  border: 1px solid rgba(38, 222, 129, 0.3);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+
+/* Warning — amber, attention needed */
+.badge-warning {
+  background: rgba(255, 159, 67, 0.15);
+  color: #FF9F43;
+  border: 1px solid rgba(255, 159, 67, 0.3);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+
+/* Critical — red, immediate action */
+.badge-critical {
+  background: rgba(255, 71, 87, 0.15);
+  color: #FF4757;
+  border: 1px solid rgba(255, 71, 87, 0.3);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+```
+
+### Data Tile
+
+```css
+/* Single metric display */
+.data-tile {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  padding: var(--space-3);
+}
+
+.data-tile-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg-secondary);
+  margin-bottom: var(--space-1);
+}
+
+.data-tile-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--data-primary);
+  line-height: 1.0;
+}
+
+.data-tile-unit {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-tertiary);
+  margin-left: 4px;
+}
+```
+
+### Countdown Timer
+
+```css
+/* T-minus / T-plus display */
+.countdown {
+  font-family: var(--font-mono);
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--data-primary);
+  line-height: 1.0;
+  letter-spacing: -0.02em;
+}
+
+.countdown-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-tertiary);
+}
+
+/* Positive delta (T+) — time after event */
+.countdown.positive { color: var(--data-success); }
+
+/* At T-0 */
+.countdown.zero { color: var(--data-secondary); animation: pulse-glow 2s ease-in-out infinite; }
+
+@keyframes pulse-glow {
+  0%, 100% { text-shadow: 0 0 8px currentColor; }
+  50% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
+}
+```
+
+### Signal Strength Indicator
+
+```css
+/* Vertical bar signal meter */
+.signal-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 20px;
+}
+
+.signal-bar {
+  width: 4px;
+  background: var(--border-default);
+  border-radius: 1px;
+}
+
+.signal-bar.active.weak    { background: var(--data-alert-warning); }
+.signal-bar.active.moderate { background: var(--data-primary); }
+.signal-bar.active.strong  { background: var(--data-secondary); }
+
+.signal-bar:nth-child(1) { height: 5px; }
+.signal-bar:nth-child(2) { height: 8px; }
+.signal-bar:nth-child(3) { height: 12px; }
+.signal-bar:nth-child(4) { height: 16px; }
+```
+
+### Alert Banner
+
+```css
+/* Full-width critical alert */
+.alert-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background: rgba(255, 71, 87, 0.1);
+  border: 1px solid rgba(255, 71, 87, 0.4);
+  border-left: 4px solid #FF4757;
+  border-radius: 4px;
+  padding: var(--space-3) var(--space-4);
+}
+
+.alert-banner-icon {
+  color: #FF4757;
+  flex-shrink: 0;
+}
+
+.alert-banner-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #FF4757;
+}
+
+.alert-banner-time {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--fg-tertiary);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+```
+
+### Coordinate Display
+
+```css
+/* Latitude / Longitude / Altitude readout */
+.coordinate {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--data-secondary);
+}
+
+.coordinate-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg-tertiary);
+  margin-bottom: 2px;
+}
+```
+
+### Progress Bar
+
+```css
+/* Mission phase / upload / loading progress */
+.progress-bar {
+  height: 4px;
+  background: var(--border-default);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: var(--data-secondary);
+  border-radius: 2px;
+  transition: width 300ms ease-out;
+}
+
+.progress-bar-fill.warning { background: var(--data-alert-warning); }
+.progress-bar-fill.critical { background: var(--data-alert-critical); }
+```
+
+### Telemetry Chart Line
+
+```css
+/* Sparkline chart for data over time */
+.telemetry-chart {
+  height: 40px;
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.telemetry-chart-bar {
+  flex: 1;
+  background: var(--data-primary);
+  border-radius: 1px 1px 0 0;
+  min-width: 2px;
+}
+
+.telemetry-chart-bar.alert { background: var(--data-alert-critical); }
+.telemetry-chart-bar.warning { background: var(--data-alert-warning); }
+```
+
+## 7. Motion & Interaction
+
+| Interaction | Duration | Easing | Effect |
+|-------------|----------|--------|--------|
+| Alert pulse | 2s | ease-in-out | Glow intensity oscillation (loop) |
+| Panel appear | 200ms | ease-out | Opacity 0→1 |
+| Value change | 150ms | ease-out | Background flash on new data |
+| Progress fill | 300ms | ease-out | Width transition |
+| Hover state | 100ms | ease-in | Border color brightens |
+
+```css
+--transition-fast: 100ms ease-in;
+--transition-base: 150ms ease-out;
+--transition-slow: 300ms ease-out;
+```
+
+### prefers-reduced-motion
+
+Static environments are common in mission control. Replace all animations with instant state changes.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+## 8. Voice & Brand
+
+### Iconography
+
+Minimal, functional iconography — Lucide icons (stroke weight 1.5px, 16px default). No decorative icons. Every icon must communicate operational state.
+
+### Tone
+
+- **Precise**: Data-first, no marketing language
+- **Sparse**: The UI speaks through values and color, not prose
+- **Hierarchical**: Visual urgency maps directly to operational urgency
+
+### Visual Signals
+
+Color is the primary signal carrier. Every color choice must communicate operational state — never decorative.
+
+## 9. Anti-patterns
+
+- Do not use decorative colors in data displays — every hue must convey operational meaning
+- Do not use rounded corners > 4px — mission control is functional, not friendly
+- Do not use proportional fonts for telemetry values — use monospace exclusively for data
+- Do not animate non-alert elements — motion is reserved for signals that matter
+- Do not use light mode — low-light environments are the only context
+- Do not use low-contrast text on dark backgrounds — tertiary `#4A6080` is only for non-critical metadata (timestamps, grid labels)