@vibes.diy/prompts 2.2.10 → 2.2.12

package/themes/default.md

@@ -0,0 +1,96 @@
+---
+name: Default
+colors:
+  # Light mode (the canonical "default" — calm warm canvas, dark ink, golden action color)
+  bg: "oklch(0.97 0.01 80)"
+  card-bg: "oklch(1.00 0 0)"
+  text: "oklch(0.20 0.02 60)"
+  accent: "oklch(0.62 0.18 65)"
+  accent-text: "oklch(1.00 0 0)"
+  muted: "oklch(0.50 0.02 60)"
+  border: "oklch(0.88 0.01 70)"
+colorsDark:
+  # Dark mode (auto-applied via @media (prefers-color-scheme: dark))
+  bg: "oklch(0.18 0.04 60)"
+  card-bg: "oklch(0.22 0.04 60)"
+  text: "oklch(0.95 0.01 80)"
+  accent: "oklch(0.72 0.18 70)"
+  accent-text: "oklch(0.12 0.04 60)"
+  muted: "oklch(0.55 0.03 60)"
+  border: "oklch(0.35 0.04 60)"
+typography:
+  body-md:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: "400"
+rounded:
+  DEFAULT: 14px
+  sm: 8px
+---
+
+## Brand & Style
+
+Default design system. A calm, balanced theme with Inter typography that **respects the visitor's system color scheme** — light by default, dark when `prefers-color-scheme: dark`. Use this design system's color tokens, spacing, and typographic choices consistently across all generated components.
+
+## Colors
+
+The default theme defines two color sets, light (top-level `colors`) and dark (`colorsDark`). Apply them via a `@media (prefers-color-scheme: dark)` 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.
+
+### Light tokens
+
+- **bg** (oklch(0.97 0.01 80)): Page background — warm off-white.
+- **card-bg** (oklch(1.00 0 0)): Card / surface — pure white.
+- **text** (oklch(0.20 0.02 60)): Primary text — near-black with warm undertone.
+- **accent** (oklch(0.62 0.18 65)): Primary actions and accents — saturated golden.
+- **accent-text** (oklch(1.00 0 0)): Text on accent fills — pure white.
+- **muted** (oklch(0.50 0.02 60)): Secondary / muted content.
+- **border** (oklch(0.88 0.01 70)): Borders and dividers — soft warm gray.
+
+### Dark tokens
+
+- **bg** (oklch(0.18 0.04 60)): Page background — warm dark canvas.
+- **card-bg** (oklch(0.22 0.04 60)): Card / surface — slightly lifted.
+- **text** (oklch(0.95 0.01 80)): Primary text — warm off-white.
+- **accent** (oklch(0.72 0.18 70)): Primary actions and accents — softer golden for dark.
+- **accent-text** (oklch(0.12 0.04 60)): Text on accent fills — near-black.
+- **muted** (oklch(0.55 0.03 60)): Secondary / muted content.
+- **border** (oklch(0.35 0.04 60)): Borders and dividers.
+
+## Typography
+
+Load fonts from Google Fonts: 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 in **both modes**. The accent color is the same role in both modes (golden); only its lightness shifts.
+
+The recommended pattern for inline-styled components:
+
+```js
+// CSS variables that flip with prefers-color-scheme — set once on :root.
+const themeStyle = `
+  :root {
+    --bg: oklch(0.97 0.01 80);
+    --card-bg: oklch(1.00 0 0);
+    --text: oklch(0.20 0.02 60);
+    --accent: oklch(0.62 0.18 65);
+    --accent-text: oklch(1.00 0 0);
+    --muted: oklch(0.50 0.02 60);
+    --border: oklch(0.88 0.01 70);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: oklch(0.18 0.04 60);
+      --card-bg: oklch(0.22 0.04 60);
+      --text: oklch(0.95 0.01 80);
+      --accent: oklch(0.72 0.18 70);
+      --accent-text: oklch(0.12 0.04 60);
+      --muted: oklch(0.55 0.03 60);
+      --border: oklch(0.35 0.04 60);
+    }
+  }
+`;
+```
+
+Then reference `var(--bg)`, `var(--text)`, etc. in inline styles or className-driven CSS.

package/themes/desktop.md

@@ -0,0 +1,49 @@
+---
+name: Desktop Retro
+colors:
+  editor-bg: "oklch(0.11 0.01 250)"
+  chrome: "oklch(0.18 0.000 0)"
+  gutter: "oklch(0.39 0.01 250)"
+  code-text: "oklch(0.75 0.02 240)"
+  code-comment: "oklch(0.59 0.000 0)"
+  syn-keyword: "oklch(0.62 0.14 55)"
+  syn-string: "oklch(0.57 0.08 140)"
+  syn-prop: "oklch(0.56 0.08 300)"
+  syn-def: "oklch(0.84 0.12 75)"
+  syn-num: "oklch(0.62 0.08 235)"
+  win-silver: "oklch(0.79 0.000 0)"
+  win-title-dk: "oklch(0.21 0.12 265)"
+  win-title-lt: "oklch(0.55 0.14 245)"
+  win-highlight: "oklch(1.00 0.000 0)"
+  win-text: "oklch(0.00 0.000 0)"
+  heart: "oklch(0.58 0.17 18)"
+typography:
+  body-md:
+    fontFamily: JetBrains Mono
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Desktop Retro design system. A clean, structured theme with JetBrains Mono 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
+
+- **editor-bg** (oklch(0.11 0.01 250)): Use for backgrounds.
+- **chrome** (oklch(0.18 0.000 0)): Use for supporting UI elements.
+- **gutter** (oklch(0.39 0.01 250)): Use for supporting UI elements.
+- **code-text** (oklch(0.75 0.02 240)): Use for text content.
+- **code-comment** (oklch(0.59 0.000 0)): Use for supporting UI elements.
+- **syn-keyword** (oklch(0.62 0.14 55)): Use for supporting UI elements.
+- **syn-string** (oklch(0.57 0.08 140)): Use for supporting UI elements.
+- **syn-prop** (oklch(0.56 0.08 300)): Use for supporting UI elements.
+
+## Typography
+
+Load fonts from Google Fonts: JetBrains Mono. Use display=optional.
+Primary body font: 'JetBrains Mono', monospace.
+
+## 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/dial.md

@@ -0,0 +1,46 @@
+---
+name: Dial Apparatus
+colors:
+  comp-bg: "oklch(0.24 0.01 260)"
+  comp-text: "oklch(0.64 0.02 250)"
+  comp-border: "oklch(0.19 0.01 260 / 0.5)"
+  comp-accent: "oklch(0.62 0.24 28)"
+  comp-accent-text: "oklch(0.10 0 0)"
+  comp-muted: "oklch(0.64 0.02 250 / 0.5)"
+  color-background: "oklch(0.00 0 0)"
+  dial-chassis: "oklch(0.24 0.01 260)"
+  dial-chassis-dark: "oklch(0.19 0.01 260)"
+  dial-surface-matte: "oklch(0.28 0.01 260)"
+  dial-screen-bg: "oklch(0.10 0 0)"
+  dial-screen-glass: "oklch(0.14 0.005 260)"
+  dial-led-active: "oklch(0.62 0.24 28)"
+typography:
+  body-md:
+    fontFamily: var(--font-ui)
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Dial Apparatus design system. A dark, atmospheric theme with Share Tech 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** — 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
+
+- **comp-bg** (oklch(0.24 0.01 260)): Use for backgrounds.
+- **comp-text** (oklch(0.64 0.02 250)): Use for text content.
+- **comp-border** (oklch(0.19 0.01 260 / 0.5)): Use for borders and dividers.
+- **comp-accent** (oklch(0.62 0.24 28)): Use for primary actions and accents.
+- **comp-accent-text** (oklch(0.10 0 0)): Use for text content.
+- **comp-muted** (oklch(0.64 0.02 250 / 0.5)): Use for secondary/muted content.
+- **color-background** (oklch(0.00 0 0)): Use for backgrounds.
+- **dial-chassis** (oklch(0.24 0.01 260)): Use for supporting UI elements.
+
+## Typography
+
+Load fonts from Google Fonts: Share Tech Mono, Inter. Use display=optional.
+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.

package/themes/dossier.md

@@ -0,0 +1,35 @@
+---
+name: Dossier Card
+colors:
+  bg: "oklch(0.16 0.000 0)"
+  card: "oklch(0.00 0.000 0)"
+  fg: "oklch(1.00 0.000 0)"
+  border: "oklch(0.28 0.03 257)"
+  border-fg: "oklch(1.00 0.000 0)"
+typography:
+  body-md:
+    fontFamily: Roboto Mono
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+Dossier Card design system. A dark, atmospheric theme with Archivo Black and Roboto Mono 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.16 0.000 0)): Use for backgrounds.
+- **card** (oklch(0.00 0.000 0)): Use for supporting UI elements.
+- **fg** (oklch(1.00 0.000 0)): Use for text content.
+- **border** (oklch(0.28 0.03 257)): Use for borders and dividers.
+- **border-fg** (oklch(1.00 0.000 0)): Use for text content.
+
+## Typography
+
+Load fonts from Google Fonts: Archivo Black, Roboto Mono. Use display=optional.
+Primary body font: 'Roboto Mono', monospace.
+
+## 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/edge.md

@@ -0,0 +1,39 @@
+---
+name: EDGE INTERFACE
+colors:
+  pink: "#ff0077"
+  yellow: "#fcee0a"
+  cyan: "#00f0ff"
+  void: "#0a0205"
+  vignette: "#2a0a2e"
+  panel-bg: "rgba(15, 5, 20, 0.85)"
+  panel-border: "rgba(255, 0, 119, 0.6)"
+typography:
+  body-md:
+    fontFamily: var(--font-body)
+    fontSize: 1rem
+    fontWeight: "400"
+---
+
+## Brand & Style
+
+EDGE INTERFACE design system. A clean, structured theme with Orbitron and Rajdhani and Share Tech Mono 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
+
+- **pink** (#ff0077): Use for text content.
+- **yellow** (#fcee0a): Use for supporting UI elements.
+- **cyan** (#00f0ff): Use for supporting UI elements.
+- **void** (#0a0205): Use for supporting UI elements.
+- **vignette** (#2a0a2e): Use for supporting UI elements.
+- **panel-bg** (rgba(15, 5, 20, 0.85)): Use for backgrounds.
+- **panel-border** (rgba(255, 0, 119, 0.6)): Use for borders and dividers.
+
+## Typography
+
+Load fonts from Google Fonts: Orbitron, Rajdhani, Share Tech Mono. Use display=optional.
+Primary body font: var(--font-body).
+
+## 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/exemplars/aether/App.jsx

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from "react";
+
+// Theme: Aether Brass — auto-generated exemplar with prefers-color-scheme.
+// Canonical palette: bg #dcbfa6, accent #cfa562.
+// Inverse computed by flipping oklch/hex lightness; tune by hand if needed.
+
+const THEME_CSS = `
+  :root {
+    --bg: #dcbfa6;
+    --accent: #cfa562;
+    --text: rgba(20, 20, 20, 0.92);
+    --muted: rgba(20, 20, 20, 0.5);
+    --border: rgba(20, 20, 20, 0.14);
+    --raised: rgba(255, 255, 255, 0.55);
+    --card-bg: rgba(255, 255, 255, 0.85);
+    --accent-text: #fafafa;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #593c23;
+      --accent: #9d7330;
+      --text: rgba(255, 255, 255, 0.92);
+      --muted: rgba(255, 255, 255, 0.55);
+      --border: rgba(255, 255, 255, 0.18);
+      --raised: rgba(255, 255, 255, 0.06);
+      --card-bg: rgba(255, 255, 255, 0.04);
+      --accent-text: #0a0a0a;
+    }
+  }
+  body { margin: 0; }
+`;
+
+export default function App() {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "https://fonts.googleapis.com/css2?family=Special+Elite:wght@400;500;700&display=optional";
+    document.head.appendChild(link);
+    return () => link.remove();
+  }, []);
+
+  const [draft, setDraft] = useState("");
+
+  const c = {
+    page: {
+      minHeight: "100vh",
+      background: "var(--bg)",
+      color: "var(--text)",
+      fontFamily: "'Special Elite', monospace",
+      padding: "3rem 2rem 4rem",
+    },
+    container: { maxWidth: "56rem", margin: "0 auto" },
+    header: { display: "flex", flexDirection: "column", gap: "0.85rem", marginBottom: "2rem" },
+    eyebrow: {
+      fontFamily: "'Special Elite', monospace",
+      fontSize: "0.72rem",
+      letterSpacing: "0.25em",
+      textTransform: "uppercase",
+      color: "var(--muted)",
+    },
+    title: {
+      fontSize: "clamp(3rem, 13vw, 10rem)",
+      fontWeight: 800,
+      letterSpacing: "-0.04em",
+      lineHeight: 0.9,
+      color: "var(--accent)",
+      margin: 0,
+    },
+    subtitle: {
+      fontSize: "1.05rem",
+      color: "var(--muted)",
+      maxWidth: "32rem",
+      lineHeight: 1.5,
+      margin: 0,
+    },
+    modeNote: {
+      marginTop: "0.5rem",
+      fontFamily: "'Special Elite', monospace",
+      fontSize: "0.7rem",
+      letterSpacing: "0.2em",
+      textTransform: "uppercase",
+      color: "var(--muted)",
+    },
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(18rem, 1fr))",
+      gap: "1.25rem",
+      marginTop: "2.5rem",
+    },
+    card: {
+      background: "var(--card-bg)",
+      border: "1px solid var(--border)",
+      borderRadius: 14,
+      padding: "1.5rem",
+    },
+    cardTitle: {
+      fontFamily: "'Special Elite', monospace",
+      fontSize: "0.7rem",
+      letterSpacing: "0.18em",
+      textTransform: "uppercase",
+      color: "var(--muted)",
+      margin: "0 0 1rem",
+    },
+    list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.55rem" },
+    listItem: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "0.75rem",
+      padding: "0.7rem 0.85rem",
+      borderRadius: 10,
+      background: "var(--raised)",
+      border: "1px solid var(--border)",
+      fontSize: "0.95rem",
+    },
+    badge: {
+      fontFamily: "'Special Elite', monospace",
+      fontSize: "0.7rem",
+      padding: "0.18rem 0.6rem",
+      borderRadius: 999,
+      background: "var(--accent)",
+      color: "var(--accent-text)",
+      fontWeight: 600,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+    },
+    formRow: { display: "flex", gap: "0.5rem", marginTop: "0.5rem" },
+    input: {
+      flex: 1,
+      background: "var(--raised)",
+      color: "var(--text)",
+      border: "1px solid var(--border)",
+      borderRadius: 10,
+      padding: "0.7rem 0.9rem",
+      fontFamily: "inherit",
+      fontSize: "0.95rem",
+      outline: "none",
+    },
+    button: {
+      background: "var(--accent)",
+      color: "var(--accent-text)",
+      border: "none",
+      borderRadius: 10,
+      padding: "0.7rem 1.1rem",
+      fontFamily: "inherit",
+      fontSize: "0.95rem",
+      fontWeight: 600,
+      cursor: "pointer",
+    },
+    ghost: {
+      background: "transparent",
+      color: "var(--text)",
+      border: "1px solid var(--border)",
+      borderRadius: 10,
+      padding: "0.7rem 1.1rem",
+      fontFamily: "inherit",
+      fontSize: "0.95rem",
+      cursor: "pointer",
+    },
+    buttonRow: { display: "flex", gap: "0.6rem", marginTop: "1.25rem", flexWrap: "wrap" },
+  };
+
+  const items = [
+    { id: 1, title: "Daily standup notes", tag: "active" },
+    { id: 2, title: "Q3 launch checklist", tag: "draft" },
+    { id: 3, title: "Reading list", tag: "synced" },
+  ];
+
+  return (
+    <>
+      <style>{THEME_CSS}</style>
+      <main id="app" style={c.page}>
+        <div style={c.container}>
+          <header style={c.header}>
+            <span style={c.eyebrow}>vibes.diy theme</span>
+            <h1 style={c.title}>Aether Brass</h1>
+            <p style={c.subtitle}>
+              An exemplar app on the Aether Brass theme — list, form, buttons rendered with the catalog tokens.
+            </p>
+            <div style={c.modeNote}>auto · light + dark via prefers-color-scheme</div>
+          </header>
+
+          <div style={c.grid}>
+            <section style={c.card}>
+              <h2 style={c.cardTitle}>Recent</h2>
+              <ul style={c.list}>
+                {items.map((it) => (
+                  <li key={it.id} style={c.listItem}>
+                    <span>{it.title}</span>
+                    <span style={c.badge}>{it.tag}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <section style={c.card}>
+              <h2 style={c.cardTitle}>New entry</h2>
+              <p style={{ ...c.subtitle, fontSize: "0.9rem", marginTop: "0.25rem" }}>Capture a quick thought.</p>
+              <div style={c.formRow}>
+                <input
+                  style={c.input}
+                  placeholder="What's on your mind?"
+                  value={draft}
+                  onChange={(e) => setDraft(e.target.value)}
+                />
+                <button style={c.button} type="button">
+                  Save
+                </button>
+              </div>
+              <div style={c.buttonRow}>
+                <button style={c.button} type="button">
+                  Primary
+                </button>
+                <button style={c.ghost} type="button">
+                  Secondary
+                </button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}