@vibes.diy/prompts 2.2.10 → 2.2.11

package/themes/brutalist.md

@@ -0,0 +1,208 @@
+---
+name: Neobrutalist
+colors:
+  # Light mode (canonical) — warm off-white canvas, near-black ink, vivid signal blocks.
+  background: "#f5f0e0"
+  card-background: "#ffffff"
+  text: "#1a1a2e"
+  border: "#1a1a2e"
+  muted: "#6b6b80"
+  primary: "#DA291C"
+  on-primary: "#ffffff"
+  secondary: "#fedd00"
+  on-secondary: "#1a1a2e"
+  success: "#22c55e"
+  on-success: "#1a1a2e"
+  info: "#3b82f6"
+  on-info: "#ffffff"
+  primary-light: "rgba(218, 41, 28, 0.1)"
+colorsDark:
+  # Dark mode — cool ink canvas, off-white strokes, same vivid signal blocks.
+  # Hard offset shadows flip to use the off-white border so they remain visible.
+  background: "oklch(0.18 0.02 280)"
+  card-background: "oklch(0.22 0.02 280)"
+  text: "oklch(0.96 0.01 80)"
+  border: "oklch(0.96 0.01 80)"
+  muted: "oklch(0.60 0.03 280)"
+  primary: "#DA291C"
+  on-primary: "#ffffff"
+  secondary: "#fedd00"
+  on-secondary: "#1a1a2e"
+  success: "#22c55e"
+  on-success: "#1a1a2e"
+  info: "#3b82f6"
+  on-info: "#ffffff"
+  primary-light: "rgba(218, 41, 28, 0.18)"
+typography:
+  h1:
+    fontFamily: Space Grotesk
+    fontSize: 2rem
+    fontWeight: "700"
+    lineHeight: 2.4rem
+    letterSpacing: -0.02em
+  h2:
+    fontFamily: Space Grotesk
+    fontSize: 1.5rem
+    fontWeight: "700"
+    lineHeight: 2rem
+    letterSpacing: -0.02em
+  body-md:
+    fontFamily: Space Grotesk
+    fontSize: 0.875rem
+    fontWeight: "400"
+    lineHeight: 1.5rem
+    letterSpacing: 0em
+  label-caps:
+    fontFamily: Space Grotesk
+    fontSize: 0.65rem
+    fontWeight: "600"
+    lineHeight: 1rem
+    letterSpacing: 0.15em
+  mono:
+    fontFamily: JetBrains Mono
+    fontSize: 0.875rem
+    fontWeight: "500"
+    lineHeight: 1.5rem
+    letterSpacing: 0em
+rounded:
+  sm: 4px
+  DEFAULT: 4px
+  md: 4px
+  lg: 4px
+spacing:
+  unit: 8px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 48px
+  container-max: 920px
+  gutter: 16px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.label-caps}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+    height: 40px
+  button-primary-hover:
+    backgroundColor: "{colors.primary}"
+  button-secondary:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-secondary}"
+    typography: "{typography.label-caps}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+    height: 40px
+  button-ghost:
+    backgroundColor: "{colors.card-background}"
+    textColor: "{colors.text}"
+    typography: "{typography.label-caps}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+    height: 40px
+  card:
+    backgroundColor: "{colors.card-background}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.lg}"
+  input-field:
+    backgroundColor: "{colors.card-background}"
+    textColor: "{colors.text}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+  badge-active:
+    backgroundColor: "{colors.success}"
+    textColor: "{colors.on-secondary}"
+    typography: "{typography.label-caps}"
+    rounded: "{rounded.sm}"
+    padding: 4px
+  badge-pending:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-secondary}"
+    typography: "{typography.label-caps}"
+    rounded: "{rounded.sm}"
+    padding: 4px
+---
+
+## Brand & Style
+
+Neobrutalist Design System. A bold, retro-arcade-inspired neobrutalist theme. Hard edges, chunky borders, thick offset drop shadows, vivid primary color blocks, and uppercase display typography. The mood is playful and unapologetically loud — "level dashboard" energy: raw, graphic, readable, kinetic. Never pill-shaped, never blurred shadows, never gradients on strokes.
+
+The theme **respects the visitor's system color scheme**: light is canonical (warm off-white canvas, near-black ink), and a dark variant auto-applies on `prefers-color-scheme: dark` (cool dark canvas, off-white ink + borders, same vivid signal colors). Apply via a `@media (prefers-color-scheme: dark)` block — never hard-code one mode only.
+
+## Colors
+
+The palette is rooted in high-contrast ink on warm canvas (light) or off-white strokes on cool dark canvas (dark), with four vivid signal colors that hold across both modes.
+
+- **Primary (#DA291C):** "Vibes Red" — primary actions, danger states, hero accents. Always white text on top.
+- **Secondary (#fedd00):** "Signal Yellow" — highlights, hover fills, warning states. Always dark ink text on top.
+- **Success (#22c55e):** Active/success states, status indicators, toggle-on. Dark ink text.
+- **Info (#3b82f6):** Informational accents, modal title bars. White text on top.
+- **Background (light: #f5f0e0 / dark: oklch(0.18 0.02 280)):** Warm off-white canvas in light, cool dark canvas in dark. Never pure white in either mode.
+- **Card Background (light: #ffffff / dark: oklch(0.22 0.02 280)):** Solid surfaces for cards. Don't tint surfaces toward the signal colors.
+- **Text (light: #1a1a2e / dark: oklch(0.96 0.01 80)):** Near-black ink in light, off-white in dark. Same as border — every stroke is bold.
+- **Muted (light: #6b6b80 / dark: oklch(0.60 0.03 280)):** Secondary labels, metadata, captions.
+
+The four signal colors (red/yellow/green/blue) remain identical across both modes — they're already saturated enough to read on either canvas. The shadow color flips with the border (dark in light mode, off-white in dark mode), so the chunky offset shadow stays visible.
+
+## Typography
+
+Dual-font strategy: display + data.
+
+- **Space Grotesk** is the primary typeface for all text, headings, labels, and buttons. Headings are UPPERCASE with tight tracking (-0.02em) and heavy weight (700). Section labels use 0.65rem, uppercase, letter-spacing 0.15em, muted color. Nav/button labels: 0.7-0.8rem, uppercase, letter-spacing 0.05-0.08em.
+- **JetBrains Mono** is used for stats, numbers, and tabular data only. It provides a technical, monospaced contrast.
+- Load from Google Fonts with `display=optional`. No other external dependencies.
+
+## Layout & Spacing
+
+A single centered column layout. Max-width 920px, padding 3rem 2rem. The content sits above ambient background decorations with position relative and z-index 10.
+
+Spacing is based on an 8px unit. Components use tight internal spacing but generous section gaps.
+
+## Elevation & Depth
+
+Elevation is achieved through **hard offset shadows only**. No blur, no soft shadows, ever.
+
+- **Default:** 4px 4px 0px var(--border) — standard card/surface elevation
+- **Small:** 3px 3px 0px var(--border) — chips, badges, small elements
+- **Hover lift:** 6px 6px 0px var(--border) — combined with transform: translate(-2px, -2px) for "card pops forward" effect
+- **Modal:** 8px 8px 0px var(--border) — highest elevation
+- **Pressed:** box-shadow: none + transform: translate(2px, 2px) — object slams back down
+
+Every shadow is a discrete offset block. Nothing uses soft blur.
+
+## Shapes
+
+Tiny corner radius everywhere: 4px. Never pill-shaped. Every primary surface (nav, cards, hero, modal, inputs, buttons) has a solid 3px border in the border color and border-radius of 4px. No gradients on strokes, no thin hairlines.
+
+## Components
+
+### Action Elements
+
+Buttons are uppercase with letter-spacing. Primary button: red background, white text, 4x4 hard shadow. Secondary: yellow background, 3x3 shadow. Ghost: card background, no shadow, gains 3x3 on hover. All buttons lift on hover (translate -2px, -2px + larger shadow) and slam on press (translate 2px, 2px, no shadow). Transitions resolve in 0.15s.
+
+### Containers & Surfaces
+
+Cards have 3px borders, 4px radius, and hard offset shadows. Keep all card backgrounds pure white. Hero cards feature a 6px horizontal accent bar at the top split into four equal color segments: red 0-25%, yellow 25-50%, green 50-75%, blue 75-100%.
+
+### Inputs & Selection
+
+Inputs lift on focus with translate(-2px, -2px) + shadow. Checkboxes: 22x22, 3px border, green when checked. Toggles: 48x26, 3px border, 4px radius, yellow when on, knob translates with 0.2s cubic-bezier overshoot.
+
+### Tables
+
+Full-bleed inside bordered cards. Headers: 0.6rem uppercase, 2px bottom border. Cells: 0.82rem, thin separators. Numeric columns use JetBrains Mono. Row hover fills with yellow instantly.
+
+## Do's and Don'ts
+
+- DO use hard offset shadows on every elevated surface
+- DO keep all hovers/presses resolving in <=0.2s
+- DO use UPPERCASE for headings and labels
+- DO use the four-color system consistently: red=danger/primary, yellow=highlight/warning, green=success, blue=info
+- DON'T use blurred shadows ever
+- DON'T use pill-shaped elements (border-radius > 4px)
+- DON'T tint card surfaces — keep them white
+- DON'T use gradients on borders
+- DON'T ease slowly — everything snaps

package/themes/capsule.md

@@ -0,0 +1,47 @@
+---
+name: Capsule Split
+colors:
+  comp-bg: "oklch(0.89 0.20 110)"
+  comp-text: "oklch(0.00 0 0)"
+  comp-border: "oklch(0.00 0 0 / 0.10)"
+  comp-accent: "oklch(0.00 0 0)"
+  comp-accent-text: "oklch(1.00 0 0)"
+  comp-muted: "oklch(0.00 0 0 / 0.50)"
+  color-background: "oklch(0.00 0 0)"
+  capsule-frame: "oklch(1.00 0 0)"
+  capsule-visual-bg: "oklch(0.13 0 0)"
+  capsule-visual-text: "oklch(1.00 0 0)"
+  capsule-visual-border: "oklch(1.00 0 0 / 0.20)"
+typography:
+  body-md:
+    fontFamily: var(--font-main)
+    fontSize: 1rem
+    fontWeight: "400"
+rounded:
+  outer: 32px
+  inner: 24px
+  pill: 100px
+---
+
+## Brand & Style
+
+Capsule Split design system. A clean, structured theme with system typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **comp-bg** (oklch(0.89 0.20 110)): Use for backgrounds.
+- **comp-text** (oklch(0.00 0 0)): Use for text content.
+- **comp-border** (oklch(0.00 0 0 / 0.10)): Use for borders and dividers.
+- **comp-accent** (oklch(0.00 0 0)): Use for primary actions and accents.
+- **comp-accent-text** (oklch(1.00 0 0)): Use for text content.
+- **comp-muted** (oklch(0.00 0 0 / 0.50)): Use for secondary/muted content.
+- **color-background** (oklch(0.00 0 0)): Use for backgrounds.
+- **capsule-frame** (oklch(1.00 0 0)): Use for supporting UI elements.
+
+## Typography
+
+Primary body font: var(--font-main).
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.

package/themes/carbon.md

@@ -0,0 +1,42 @@
+---
+name: Carbon Panel
+colors:
+  bg: "oklch(0.18 0.005 285)"
+  card: "oklch(0.25 0.005 285)"
+  border: "oklch(0.31 0.005 285)"
+  fg: "oklch(1.00 0.000 0)"
+  fg-muted: "oklch(0.87 0.01 258)"
+  fg-dim: "oklch(0.71 0.02 261)"
+  accent-amber: "oklch(0.79 0.18 75)"
+  accent-coral: "oklch(0.68 0.20 35)"
+  accent-red: "oklch(0.63 0.24 25)"
+  accent-green: "oklch(0.77 0.22 145)"
+typography:
+  body-md:
+    fontFamily: -apple-system
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Carbon Panel design system. A dark, atmospheric theme with system typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — dark by default, with a light variant that auto-applies on `@media (prefers-color-scheme: light)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **bg** (oklch(0.18 0.005 285)): Use for backgrounds.
+- **card** (oklch(0.25 0.005 285)): Use for supporting UI elements.
+- **border** (oklch(0.31 0.005 285)): Use for borders and dividers.
+- **fg** (oklch(1.00 0.000 0)): Use for text content.
+- **fg-muted** (oklch(0.87 0.01 258)): Use for text content.
+- **fg-dim** (oklch(0.71 0.02 261)): Use for text content.
+- **accent-amber** (oklch(0.79 0.18 75)): Use for primary actions and accents.
+- **accent-coral** (oklch(0.68 0.20 35)): Use for primary actions and accents.
+
+## Typography
+
+Primary body font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.

package/themes/chrome.md

@@ -0,0 +1,132 @@
+---
+name: Chrome Terminal
+colors:
+  # Dark mode (canonical) — black canvas, neon-red display.
+  bg: "#000000"
+  bg-surface: "#171717"
+  bg-panel: "#2a0a18"
+  bg-dark: "#12050e"
+  bg-footer: "#1a050c"
+  neon-red: "#ff003c"
+  neon-yellow: "#fcee0a"
+  neon-cyan: "#00f0ff"
+  border: "#3d1326"
+  border-red: "rgba(255, 0, 60, 0.5)"
+  text: "#ffffff"
+  text-dim: "#d1d1d1"
+  text-muted: "#a3a3a3"
+colorsLight:
+  # Light mode — "chrome at dawn". Same fonts, same red accent role,
+  # darker for legibility on white. Glow text-shadow drops to a faint
+  # red drop, since neon glow doesn't read on a bright background.
+  bg: "oklch(0.97 0.005 0)"
+  bg-surface: "#ffffff"
+  bg-panel: "oklch(0.95 0.02 25)"
+  bg-dark: "oklch(0.93 0.04 25)"
+  bg-footer: "oklch(0.95 0.02 25)"
+  neon-red: "oklch(0.55 0.24 28)"
+  neon-yellow: "oklch(0.78 0.16 90)"
+  neon-cyan: "oklch(0.50 0.15 220)"
+  border: "oklch(0.45 0.10 25)"
+  border-red: "oklch(0.55 0.24 28 / 0.55)"
+  text: "oklch(0.18 0.04 25)"
+  text-dim: "oklch(0.32 0.04 25)"
+  text-muted: "oklch(0.45 0.04 25)"
+typography:
+  body-md:
+    fontFamily: Rajdhani
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Chrome Terminal design system — a black-canvas neon-red terminal that **respects the visitor's system color scheme**: dark by default (canonical), with a "chrome-at-dawn" light variant that auto-applies on `prefers-color-scheme: light`. Both modes share Orbitron (display), Rajdhani (body), and Share Tech Mono (mono telemetry) — only the colors and the glow weight shift.
+
+## Colors
+
+The theme defines two color sets, dark (top-level `colors`) and light (`colorsLight`). Apply them via a `@media (prefers-color-scheme: light)` block (in a `<style>` tag, in CSS variables, or in Tailwind dark-mode classes — whichever the surrounding code uses). Never hard-code one mode only — components must read correctly in both.
+
+### Dark tokens (canonical)
+
+- **bg** (#000000): Page background — pure black.
+- **bg-surface** (#171717): Default raised surface.
+- **bg-panel** (#2a0a18): Panel / card background — faint red undertone.
+- **bg-dark** (#12050e): Lowered surface.
+- **bg-footer** (#1a050c): Footer / status bars.
+- **neon-red** (#ff003c): Primary actions, display type, alerts. Glows.
+- **neon-yellow** (#fcee0a): Highlights, eyebrow labels.
+- **neon-cyan** (#00f0ff): Secondary accents, links, "ok" status.
+- **border** (#3d1326): Default border — dark wine.
+- **border-red** (rgba(255, 0, 60, 0.5)): Glowing edge for buttons, focus rings.
+- **text** (#ffffff): Primary text.
+- **text-dim** (#d1d1d1): Secondary text.
+- **text-muted** (#a3a3a3): Muted captions.
+
+### Light tokens
+
+- **bg** (oklch(0.97 0.005 0)): Off-white page background.
+- **bg-surface** (#ffffff): Pure white raised surface.
+- **bg-panel** (oklch(0.95 0.02 25)): Faint warm panel.
+- **bg-dark** (oklch(0.93 0.04 25)): Warm card surface.
+- **bg-footer** (oklch(0.95 0.02 25)): Footer.
+- **neon-red** (oklch(0.55 0.24 28)): Saturated red — darker for legibility on white.
+- **neon-yellow** (oklch(0.78 0.16 90)): Warm gold for highlights.
+- **neon-cyan** (oklch(0.50 0.15 220)): Deeper cyan, reads on white.
+- **border** (oklch(0.45 0.10 25)): Solid border with subtle red.
+- **border-red** (oklch(0.55 0.24 28 / 0.55)): Translucent red edge.
+- **text** (oklch(0.18 0.04 25)): Near-black with red undertone.
+- **text-dim** (oklch(0.32 0.04 25)): Secondary.
+- **text-muted** (oklch(0.45 0.04 25)): Muted.
+
+## Typography
+
+Load fonts from Google Fonts: Orbitron, Rajdhani, Share Tech Mono. Use `display=optional`.
+Primary body font: `'Rajdhani', sans-serif`. Display: `'Orbitron', sans-serif` (uppercase, letter-spacing 0.04em). Mono telemetry: `'Share Tech Mono', monospace`.
+
+## Glow Effects
+
+In dark mode, the display title carries a layered red text-shadow (`0 0 30px rgba(255,0,60,0.6), 0 0 8px rgba(255,0,60,0.9)`). In light mode, glow on bright backgrounds reads as muddy — drop the layered shadow and use a single faint drop (`0 1px 0 oklch(0.55 0.24 28 / 0.25)`) or none at all.
+
+## Components
+
+Apply the color tokens consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast in **both modes**.
+
+The recommended pattern for inline-styled components — set CSS variables once on `:root`:
+
+```js
+const themeStyle = `
+  :root {
+    --bg: #000000;
+    --bg-surface: #171717;
+    --bg-panel: #2a0a18;
+    --bg-dark: #12050e;
+    --neon-red: #ff003c;
+    --neon-yellow: #fcee0a;
+    --neon-cyan: #00f0ff;
+    --border: #3d1326;
+    --text: #ffffff;
+    --text-dim: #d1d1d1;
+    --text-muted: #a3a3a3;
+    --glow: 0 0 30px rgba(255,0,60,0.6), 0 0 8px rgba(255,0,60,0.9);
+  }
+  @media (prefers-color-scheme: light) {
+    :root {
+      --bg: oklch(0.97 0.005 0);
+      --bg-surface: #ffffff;
+      --bg-panel: oklch(0.95 0.02 25);
+      --bg-dark: oklch(0.93 0.04 25);
+      --neon-red: oklch(0.55 0.24 28);
+      --neon-yellow: oklch(0.78 0.16 90);
+      --neon-cyan: oklch(0.50 0.15 220);
+      --border: oklch(0.45 0.10 25);
+      --text: oklch(0.18 0.04 25);
+      --text-dim: oklch(0.32 0.04 25);
+      --text-muted: oklch(0.45 0.04 25);
+      --glow: 0 1px 0 oklch(0.55 0.24 28 / 0.25);
+    }
+  }
+`;
+```
+
+Then reference `var(--bg)`, `var(--neon-red)`, `var(--glow)`, etc. in inline styles or className-driven CSS.

package/themes/chrono.md

@@ -0,0 +1,33 @@
+---
+name: Chrono
+colors:
+  bg: "#dde1e7"
+  text: "#5a6270"
+  text-dark: "#3a3f4a"
+  accent: "#6c8ee6"
+typography:
+  body-md:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Chrono design system. A clean, structured theme with Space Mono and Inter typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **bg** (#dde1e7): Use for backgrounds.
+- **text** (#5a6270): Use for text content.
+- **text-dark** (#3a3f4a): Use for text content.
+- **accent** (#6c8ee6): Use for primary actions and accents.
+
+## Typography
+
+Load fonts from Google Fonts: Space Mono, Inter. Use display=optional.
+Primary body font: 'Inter', sans-serif.
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.

package/themes/codex.md

@@ -0,0 +1,45 @@
+---
+name: Elder Codex
+colors:
+  bg: "oklch(0.06 0.000 0)"
+  stone-dark: "oklch(0.17 0.000 0)"
+  stone-light: "oklch(0.30 0.000 0)"
+  stone-border: "oklch(0.40 0.000 0)"
+  fg: "oklch(0.90 0.000 0)"
+  fg-muted: "oklch(0.55 0.000 0)"
+  gold-base: "oklch(0.73 0.10 78)"
+  gold-highlight: "oklch(0.97 0.07 100)"
+  crimson: "oklch(0.32 0.10 25)"
+  crimson-dark: "oklch(0.20 0.07 22)"
+  parchment: "oklch(0.78 0.05 70)"
+  parchment-ink: "oklch(0.27 0.04 45)"
+typography:
+  body-md:
+    fontFamily: Cinzel
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Elder Codex design system. A dark, atmospheric theme with Cinzel Decorative and Cinzel typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — dark by default, with a light variant that auto-applies on `@media (prefers-color-scheme: light)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **bg** (oklch(0.06 0.000 0)): Use for backgrounds.
+- **stone-dark** (oklch(0.17 0.000 0)): Use for supporting UI elements.
+- **stone-light** (oklch(0.30 0.000 0)): Use for supporting UI elements.
+- **stone-border** (oklch(0.40 0.000 0)): Use for borders and dividers.
+- **fg** (oklch(0.90 0.000 0)): Use for text content.
+- **fg-muted** (oklch(0.55 0.000 0)): Use for text content.
+- **gold-base** (oklch(0.73 0.10 78)): Use for supporting UI elements.
+- **gold-highlight** (oklch(0.97 0.07 100)): Use for supporting UI elements.
+
+## Typography
+
+Load fonts from Google Fonts: Cinzel Decorative, Cinzel. Use display=optional.
+Primary body font: 'Cinzel', serif.
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.

package/themes/computer-angel-heaven.md

@@ -0,0 +1,57 @@
+---
+name: Computer Angel Heaven
+colors:
+  comp-bg: "oklch(0.96 0.008 80)"
+  comp-text: "oklch(0.30 0.03 250)"
+  comp-text-secondary: "oklch(0.55 0.04 260)"
+  comp-heading: "oklch(0.25 0.03 250)"
+  comp-accent: "oklch(0.78 0.12 85)"
+  comp-accent-hover: "oklch(0.72 0.14 80)"
+  comp-accent-text: "oklch(0.98 0.005 90)"
+  comp-secondary: "oklch(0.80 0.06 240)"
+  comp-secondary-hover: "oklch(0.74 0.08 240)"
+  comp-tertiary: "oklch(0.82 0.06 290)"
+  comp-surface: "oklch(0.97 0.005 240 / 0.55)"
+  comp-surface-hover: "oklch(0.97 0.005 240 / 0.70)"
+  comp-surface-active: "oklch(0.98 0.01 85 / 0.60)"
+  comp-border: "oklch(0.92 0.01 240 / 0.40)"
+  comp-border-accent: "oklch(0.78 0.12 85 / 0.50)"
+  comp-sparkle: "oklch(0.95 0.03 240 / 0.80)"
+  comp-input-bg: "oklch(0.98 0.003 240 / 0.45)"
+  comp-input-border: "oklch(0.90 0.01 240 / 0.35)"
+  comp-danger: "oklch(0.65 0.18 25)"
+  comp-success: "oklch(0.75 0.12 155)"
+typography:
+  body-md:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: "400"
+rounded:
+  comp-DEFAULT: 16px
+  comp-sm: 10px
+  comp-pill: 999px
+---
+
+## Brand & Style
+
+Computer Angel Heaven design system. A clean, structured theme with Inter typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **comp-bg** (oklch(0.96 0.008 80)): Use for backgrounds.
+- **comp-text** (oklch(0.30 0.03 250)): Use for text content.
+- **comp-text-secondary** (oklch(0.55 0.04 260)): Use for text content.
+- **comp-heading** (oklch(0.25 0.03 250)): Use for supporting UI elements.
+- **comp-accent** (oklch(0.78 0.12 85)): Use for primary actions and accents.
+- **comp-accent-hover** (oklch(0.72 0.14 80)): Use for primary actions and accents.
+- **comp-accent-text** (oklch(0.98 0.005 90)): Use for text content.
+- **comp-secondary** (oklch(0.80 0.06 240)): Use for supporting UI elements.
+
+## Typography
+
+Load fonts from Google Fonts: Inter. Use display=optional.
+Primary body font: 'Inter', 'SF Pro Display', system-ui, sans-serif.
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.

package/themes/console.md

@@ -0,0 +1,46 @@
+---
+name: Console Rack
+colors:
+  comp-bg: "oklch(0.93 0.003 265)"
+  comp-text: "oklch(0.28 0 0)"
+  comp-border: "oklch(0.82 0.005 265)"
+  comp-accent: "oklch(0.58 0.20 35)"
+  comp-accent-text: "oklch(1.00 0 0)"
+  comp-muted: "oklch(0.55 0 0)"
+  color-background: "oklch(0.98 0 0)"
+  console-cap-blue: "oklch(0.28 0.05 240)"
+  console-cap-ochre: "oklch(0.66 0.10 75)"
+  console-cap-grey: "oklch(0.60 0 0)"
+  console-cap-orange: "oklch(0.58 0.20 35)"
+  console-cap-white: "oklch(0.95 0 0)"
+  console-screen-bg: "oklch(0.07 0 0)"
+  console-led-green: "oklch(0.85 0.30 140)"
+typography:
+  body-md:
+    fontFamily: var(--font-ui)
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Console Rack design system. A clean, structured theme with system typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
+
+## Colors
+
+- **comp-bg** (oklch(0.93 0.003 265)): Use for backgrounds.
+- **comp-text** (oklch(0.28 0 0)): Use for text content.
+- **comp-border** (oklch(0.82 0.005 265)): Use for borders and dividers.
+- **comp-accent** (oklch(0.58 0.20 35)): Use for primary actions and accents.
+- **comp-accent-text** (oklch(1.00 0 0)): Use for text content.
+- **comp-muted** (oklch(0.55 0 0)): Use for secondary/muted content.
+- **color-background** (oklch(0.98 0 0)): Use for backgrounds.
+- **console-cap-blue** (oklch(0.28 0.05 240)): Use for supporting UI elements.
+
+## Typography
+
+Primary body font: var(--font-ui).
+
+## Components
+
+Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.