@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-systems/totality-festival/DESIGN.md

@@ -0,0 +1,206 @@
+---
+name: Totality Festival Design System
+colors:
+  surface: "#121318"
+  surface-dim: "#121318"
+  surface-bright: "#38393f"
+  surface-container-lowest: "#0d0e13"
+  surface-container-low: "#1a1b21"
+  surface-container: "#1e1f25"
+  surface-container-high: "#292a2f"
+  surface-container-highest: "#34343a"
+  on-surface: "#e3e1e9"
+  on-surface-variant: "#d0c6ab"
+  inverse-surface: "#e3e1e9"
+  inverse-on-surface: "#2f3036"
+  outline: "#999077"
+  outline-variant: "#4d4732"
+  surface-tint: "#e9c400"
+  primary: "#fff6df"
+  on-primary: "#3a3000"
+  primary-container: "#ffd700"
+  on-primary-container: "#705e00"
+  inverse-primary: "#705d00"
+  secondary: "#bdf4ff"
+  on-secondary: "#00363d"
+  secondary-container: "#00e3fd"
+  on-secondary-container: "#00616d"
+  tertiary: "#fcf3ff"
+  on-tertiary: "#3b2754"
+  tertiary-container: "#e7d1ff"
+  on-tertiary-container: "#6b5586"
+  error: "#ffb4ab"
+  on-error: "#690005"
+  error-container: "#93000a"
+  on-error-container: "#ffdad6"
+  background: "#121318"
+  on-background: "#e3e1e9"
+  surface-variant: "#34343a"
+typography:
+  headline-xl:
+    fontFamily: Space Grotesk
+    fontSize: 72px
+    fontWeight: "700"
+    lineHeight: 80px
+    letterSpacing: -0.04em
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: "600"
+    lineHeight: 56px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: "600"
+    lineHeight: 40px
+  body-lg:
+    fontFamily: Inter
+    fontSize: 18px
+    fontWeight: "400"
+    lineHeight: 28px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: "400"
+    lineHeight: 24px
+  label-md:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: "500"
+    lineHeight: 20px
+    letterSpacing: 0.1em
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 8px
+  container-max: 1280px
+  gutter: 24px
+  margin-mobile: 16px
+  margin-desktop: 64px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  button-primary-hover:
+    backgroundColor: "{colors.primary-fixed}"
+  button-secondary:
+    backgroundColor: transparent
+    textColor: "{colors.secondary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  card-glass-level-2:
+    backgroundColor: rgba(52, 52, 58, 0.2)
+    rounded: "{rounded.xl}"
+    padding: "{spacing.gutter}"
+  input-field:
+    backgroundColor: "{colors.surface-container-lowest}"
+    textColor: "{colors.on-surface}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+  hero-headline:
+    textColor: "{colors.primary}"
+    typography: "{typography.headline-xl}"
+  badge-celestial:
+    backgroundColor: "{colors.tertiary-container}"
+    textColor: "{colors.on-tertiary-container}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.full}"
+    padding: 4px
+---
+
+# Design System Inspired by Totality Festival
+
+> Category: Themed & Unique
+> Surface: web
+> A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.
+
+## 1. Visual Theme & Atmosphere
+
+"Cosmic Premium" — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the "diamond ring" flash — they make the interface feel luminous and alive rather than heavy or muted.
+
+- **Visual style:** dark, glassmorphic, cinematic
+- **Color stance:** obsidian neutral, amber corona accent, cyan atmospheric
+- **Design intent:** Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.
+
+## 2. Color
+
+- **Primary:** `#fff6df` — Amber / white-gold, the solar corona and "diamond ring" flash. Used for critical CTAs and high-importance highlights.
+- **Primary Container:** `#ffd700` — Pure corona gold. Reserved for the single most important highlight on a screen.
+- **Secondary:** `#bdf4ff` — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.
+- **Secondary Container:** `#00e3fd` — Vivid cyan for interactive ambient glow rims.
+- **Tertiary:** `#fcf3ff` — Faint lavender-white for subtle tinted highlights.
+- **Tertiary Container:** `#e7d1ff` — Deep indigo haze, celestial badges.
+- **Surface:** `#121318` — Obsidian / near-black foundation.
+- **Surface Container:** `#1e1f25` — Slightly elevated obsidian for cards.
+- **Surface Container High:** `#292a2f` — Elevated panels, active states.
+- **Text:** `#e3e1e9` — Warm off-white for primary body copy and headlines.
+- **Text Muted:** `#d0c6ab` — Warm parchment tone for metadata and labels.
+- **Outline:** `#999077` — Low-contrast warm gray for hairline borders.
+
+- Favor Primary (#fff6df) and Primary Container (#ffd700) for the "corona flash" moments — max 3 per screen.
+- Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.
+- Surfaces stack as semi-transparent glass: `rgba(255, 255, 255, 0.05-0.1)` with `backdrop-filter: blur(20px)` and a 1px `rgba(255, 255, 255, 0.1)` inner border to simulate light refraction.
+
+## 3. Typography
+
+A dual-font strategy to balance cinematic impact with utility.
+
+- **Display / Headings:** Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (`-0.02em` to `-0.04em`) on large headings to feel "locked" and monumental.
+- **Body / Long-form:** Inter — neutral, highly legible in low-light environments.
+- **Labels:** Space Grotesk with wide tracking (`0.1em`) and uppercase, to read as "coordinates" or "readouts" rather than UI chrome.
+
+Apply a subtle text-shadow or low-opacity primary-colored glow to `headline-xl` elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.
+
+## 4. Layout & Spacing
+
+- **Grid:** 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
+- **Rhythm:** 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct "islands" of content.
+- **Max width:** 1280px for content containers.
+- **Negative space is a feature, not a cost.** Prefer breathing room over density.
+
+## 5. Elevation & Depth
+
+Depth is achieved through **glassmorphism** and light-based layering — not traditional drop shadows.
+
+- **Level 1 (Base):** Deep obsidian surface with an optional radial gradient vignette in `#1a1b21` → `#121318`.
+- **Level 2 (Panels):** Semi-transparent surfaces at `rgba(52, 52, 58, 0.2)` with `backdrop-filter: blur(20px)` and a 1px inner stroke at `rgba(255, 255, 255, 0.1)` to simulate refraction on a glass edge.
+- **Level 3 (Interactive / Active):** An **ambient glow** — a soft, diffused shadow tinted with Secondary (`#00e3fd`) or Primary Container (`#ffd700`), creating the impression of light bleeding from behind the object.
+
+## 6. Shapes
+
+Shape language is **soft-technical**. Geometric overall, but small corner radii soften aggression.
+
+- **Buttons, inputs:** `rounded-lg` (8px).
+- **Cards, featured containers:** `rounded-xl` (12px).
+- **Badges, pills:** `rounded-full`.
+- **Decorative elements:** circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.
+
+## 7. Components
+
+- **Primary button:** Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, `0.1em` tracking.
+- **Secondary button:** Transparent fill, cyan outline and label — suggests the sky's transition during totality.
+- **Glass card (level 2):** `rgba(52,52,58,0.2)` + 20px blur + 1px inner white stroke + generous internal padding.
+- **Input field:** Anchored in the deepest surface (`#0d0e13`) for maximum contrast; cyan border on focus.
+- **Badges:** Pill-shaped with the tertiary container color; reserved for "celestial" metadata (status, live indicators).
+
+## 8. Do's & Don'ts
+
+- **Do** use Primary Container (`#ffd700`) no more than 3 times per screen — it's the flash, not the background.
+- **Do** pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
+- **Do** tint shadows and glows with Primary or Secondary — never use pure gray shadows.
+- **Don't** use solid opaque fills for cards — break the glass illusion.
+- **Don't** combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
+- **Don't** use sharp 0-radius corners except for data tables where structure outweighs warmth.

package/dist/__w3kits/assets/design-systems/trading-terminal/DESIGN.md

@@ -0,0 +1,178 @@
+# Trading Terminal Design System
+
+> Category: Themed & Unique
+> Bloomberg-style financial trading terminal. Dark-only, data-dense, cyan/coral buy/sell signals. Everything readable at a glance from two meters away.
+
+## 1. Visual Theme & Atmosphere
+
+A professional-grade financial data terminal. Dense, information-rich layouts designed for traders who need to monitor multiple markets simultaneously. Dark surfaces reduce eye strain during long sessions. Cyan accent (#00D4AA) signals positive/buy, coral (#FF4757) signals negative/sell. Everything readable at a glance from two meters away.
+
+- **Visual style:** dense, data-first, professional
+- **Color stance:** dark surfaces with high-contrast data colors
+- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
+
+### Prior Art
+
+Bloomberg Terminal, Refinitiv Eikon, FactSet, TradingView Pro. All share: dark-only surfaces, monospace data fonts, tabular layouts with no decorative spacing, and color-coded buy/sell signals.
+
+## 2. Color Palette & Roles
+
+### Surface Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#0D0D0D` | Primary canvas |
+| Surface | `#141414` | Elevated panels, cards |
+| Surface Hover | `#1A1A1A` | Hover state for panels |
+| Border | `#2A2A2A` | Panel separation |
+
+### Data Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#00D4AA` | Positive values, buy signals, success |
+| Gain | `#00D4AA` | Positive price movement |
+| Loss | `#FF4757` | Negative price movement |
+| Warning | `#FFB800` | Caution alerts, margin warnings |
+| Neutral | `#808086` | Unchanged, secondary data |
+| Text Primary | `#FFFFFF` | High-contrast primary text |
+| Text Secondary | `#AAAAAA` | Labels, metadata |
+| Text Tertiary | `#828282` | Timestamps, grid labels |
+
+### Dark Mode
+
+Default and only mode. Trading terminals operate in dim environments for focus.
+
+```css
+:root {
+  --color-bg: #0D0D0D;
+  --color-surface: #141414;
+  --color-surface-hover: #1A1A1A;
+  --color-border: #2A2A2A;
+  --color-primary: #00D4AA;
+  --color-gain: #00D4AA;
+  --color-loss: #FF4757;
+  --color-warning: #FFB800;
+  --color-text: #FFFFFF;
+  --color-text-secondary: #AAAAAA;
+  --color-text-tertiary: #828282;
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
+  --space-6: 24px; --space-8: 32px; --space-12: 48px;
+}
+```
+
+## 3. Typography Rules
+
+| Role | Size | Weight | Line Height | Font |
+|------|------|--------|-------------|------|
+| Display | 28px | 600 | 1.0 | JetBrains Mono |
+| Heading | 16px | 600 | 1.2 | Inter |
+| Body | 14px | 400 | 1.3 | JetBrains Mono |
+| Label | 12px | 500 | 1.0 | Inter, uppercase |
+| Micro | 10px | 400 | 1.0 | JetBrains Mono |
+
+**Font labels for catalog extraction:**
+
+```
+Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Micro: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+```
+
+## 4. Component Stylings
+
+### Order Book Row
+
+```css
+.order-book-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding: var(--space-1) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.order-book-size { color: var(--color-text-secondary); text-align: right; }
+.order-book-bid  { color: var(--color-gain); text-align: right; }
+.order-book-ask  { color: var(--color-loss); text-align: right; }
+```
+
+### Price Card
+
+```css
+.price-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.price-card-label {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--color-text-secondary);
+  letter-spacing: 0.05em;
+}
+.price-card-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.0;
+}
+.price-card-change {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+}
+.price-card-change.positive { color: var(--color-gain); }
+.price-card-change.negative { color: var(--color-loss); }
+```
+
+### Ticker Bar
+
+Horizontal scrolling single-line ticker for market overview.
+
+```css
+.ticker-bar {
+  display: flex;
+  gap: var(--space-6);
+  overflow-x: auto;
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+```
+
+## 5. Layout Principles
+
+Grid-based dense layout. Multiple data columns visible simultaneously. Panels share borders, not gaps. No rounded corners — sharp edges communicate precision. The layout is tabular: rows of data, columns of similar data.
+
+## 6. Depth & Elevation
+
+Trading terminals use flat design with border-based separation — no shadows. Surface shifts (#141414 vs #0D0D0D) convey elevation. Thin borders (#2A2A2A) define panel boundaries without decorative elements.
+
+## 7. Do's and Don'ts
+
+- Do not use color alone to signal buy/sell — always pair with a directional icon or label
+- Do not animate data values decoratively — traders need instant, stable reads
+- Do not use rounded corners — sharp precision aesthetic only
+- Do not use light mode — trading terminals operate in dim environments
+- Do not show more than 5 price points in a column — cognitive overload reduces decision speed
+- Do not use gradients — flat fills only
+
+## 8. Responsive Behavior
+
+Terminal layouts target desktop-first (1280px+). On narrower viewports, columns collapse from rightmost to leftmost, prioritizing price and change data. Below 768px, single-column stack with horizontal scroll for overflow data. No breakpoints alter the dark-only constraint.
+
+## 9. Agent Prompt Guide
+
+When generating a trading terminal interface, prompt the model to:
+- Use JetBrains Mono for all numeric data; Inter for labels and headings
+- Always show gain/loss values in monospace with color coding (#00D4AA green, #FF4757 red)
+- No rounded corners on any element
+- Use 100ms transitions for price updates, 150ms for hover states
+- Never use light mode or bright backgrounds
+- Include a horizontal ticker bar with scrolling price updates
+- All data changes retain old value briefly before swapping to prevent flash blindness