@vibes.diy/prompts 12.2.3 → 12.2.5

package/restyle.js

@@ -0,0 +1,254 @@
+import { PAD_DRIVEN_TOKENS } from "./themes/ornament-pad.js";
+import { VIBE_FONTS } from "./themes/fonts.js";
+import { type } from "arktype";
+export const RESTYLE_CUE_WORDS = [
+    "restyle",
+    "styling",
+    "style",
+    "look",
+    "feel",
+    "vibe",
+    "theme",
+    "palette",
+    "colour",
+    "colours",
+    "color",
+    "colors",
+    "font",
+    "typeface",
+    "serious",
+    "playful",
+    "formal",
+    "informal",
+    "professional",
+    "friendly",
+    "calm",
+    "loud",
+    "quiet",
+    "bold",
+    "subtle",
+    "elegant",
+    "refined",
+    "punchy",
+    "moody",
+    "warmer",
+    "cooler",
+    "softer",
+    "harsher",
+    "darker",
+    "lighter",
+    "brighter",
+    "duller",
+    "tighter",
+    "looser",
+    "denser",
+    "airier",
+    "rounder",
+    "squarer",
+    "contrast",
+    "saturated",
+    "desaturated",
+    "muted",
+    "vivid",
+    "pastel",
+    "monochrome",
+    "rounded",
+];
+const PAD_AXES_PARAGRAPH = [
+    "Ornament pad — the app's structure, as ONE position on a 2x2 pad. Both axes run -1..+1 and (0,0) is the platform's stock value set.",
+    "  x: LOOSE (-1) <-> TIGHT (+1) — the spatial budget. Tight compresses: less padding, slightly smaller text, smaller corner radii, smaller shadows (border weight moves the other way, because a compressed layout needs the rule to do more separating).",
+    "  y: FORMAL (-1) <-> INFORMAL (+1) — the voice. Informal is loud and made-by-hand: hard offset shadows, heavier type, open tracking, squarer corners, and past a threshold uppercase labels. Formal is quiet and refined: diffuse shadows, tight editorial tracking, rounder corners, sentence case.",
+].join("\n");
+const CHARACTER_PARAGRAPH = [
+    "Palette character — five scalars, each 0..1:",
+    "  chroma: 0 = fully grey/achromatic, 1 = as saturated as the gamut allows. 'muted'/'desaturated'/'monochrome' lower it; 'vivid'/'punchy'/'saturated' raise it.",
+    "  contrast: how far apart surfaces and ink sit. 'bolder'/'harsher'/'higher contrast' raise it; 'softer'/'gentler' lower it.",
+    "  neutralTint: how much of the hue bleeds into the greys. Raise for warmth/tint, lower for clean neutral greys.",
+    "  surfaceLift: how far cards/panels separate from the page behind them. Raise for a layered, panelled look; lower for flat.",
+    "  fillLevel: how solid the filled elements are. Raise for heavy poster fills, lower for outline-and-ink restraint.",
+    "  scheme: how the secondary/tertiary hues are derived from the primary — one of analogous | split-complementary | triadic | complementary.",
+].join("\n");
+function fontCatalogText() {
+    return VIBE_FONTS.map((f) => `  - ${f.slug}: ${f.label}${f.mono === true ? " (monospaced)" : ""}`).join("\n");
+}
+export function makeRestyleRouterMessage(userMessage) {
+    return [
+        "You are routing one chat message in an app-building tool.",
+        "",
+        "The tool can adjust an app's APPEARANCE — colors, saturation, contrast, light/dark feel, spacing density, corner rounding, shadow style, text case and tracking, and the font — WITHOUT regenerating any code, because all of those are platform-level style tokens.",
+        "Anything else — new or changed features, new UI elements, layout restructuring, copy/wording changes, data or behavior changes, bug fixes — requires regenerating the app's code.",
+        "",
+        "Answer two independent questions about the message below.",
+        "",
+        "1. Is EVERY part of this message an appearance-only request that the style tokens above can serve?",
+        "2. Does ANY part of this message ask for a functional, structural, content or behavioral change — anything that would need code to be written or edited?",
+        "",
+        "Be conservative. If the message mixes a look request with a feature request ('add a dark mode toggle', 'make the header sticky and blue'), question 2 is YES. If you are unsure what the user means, question 2 is YES. Adding a control, a button, a mode, a page or a section is a code change even when the user describes it in visual words.",
+        "",
+        "Message:",
+        userMessage,
+    ].join("\n");
+}
+export const restyleRouterSchema = {
+    name: "restyle_route",
+    required: ["appearanceOnly", "functionalChange"],
+    properties: {
+        appearanceOnly: {
+            type: "boolean",
+            description: "True only when EVERY part of the message is an appearance request the platform's style tokens (colors, saturation, contrast, density, rounding, shadow, text case, font) can serve on their own.",
+        },
+        functionalChange: {
+            type: "boolean",
+            description: "True when ANY part of the message asks for a feature, control, element, page, layout restructuring, copy change, data change or behavior change — i.e. anything that needs code written or edited. True when unsure.",
+        },
+    },
+};
+export const restyleRouterParsed = type({
+    appearanceOnly: "boolean",
+    functionalChange: "boolean",
+});
+export function routeFromRestyleAnswer(parsed) {
+    return parsed.appearanceOnly === true && parsed.functionalChange === false ? "restyle" : "codegen";
+}
+export function hueWord(h) {
+    const n = ((h % 360) + 360) % 360;
+    if (n < 15 || n >= 345)
+        return "red";
+    if (n < 45)
+        return "orange";
+    if (n < 75)
+        return "yellow";
+    if (n < 105)
+        return "lime";
+    if (n < 165)
+        return "green";
+    if (n < 195)
+        return "teal";
+    if (n < 255)
+        return "blue";
+    if (n < 285)
+        return "violet";
+    if (n < 315)
+        return "magenta";
+    return "pink";
+}
+function currentText(current) {
+    const [base, second, third] = current.hues;
+    const control = (c, nr) => {
+        if (c === undefined || typeof c === "number" || c.mode === "derived") {
+            return `  hue ${nr}: derived from hue 1 by the scheme (not pinned)`;
+        }
+        return `  hue ${nr}: PINNED at ${Math.round(c.h)} deg (${hueWord(c.h)})`;
+    };
+    return [
+        "Current style:",
+        `  hue 1 (primary): ${Math.round(base)} deg (${hueWord(base)})`,
+        control(second, 2),
+        control(third, 3),
+        `  character: chroma ${current.character.chroma}, contrast ${current.character.contrast}, neutralTint ${current.character.neutralTint}, surfaceLift ${current.character.surfaceLift}, fillLevel ${current.character.fillLevel}, scheme ${current.character.scheme}`,
+        `  font: ${current.font}`,
+        `  ornament pad: x ${current.pad.x} (loose..tight), y ${current.pad.y} (formal..informal)`,
+        current.pins.length === 0
+            ? "  pinned ornament tokens: none"
+            : `  PINNED ornament tokens: ${current.pins.join(", ")} — the owner set these by hand`,
+    ].join("\n");
+}
+export function makeRestyleMapperMessage({ current, instruction, }) {
+    return [
+        "You are adjusting the appearance of one app by moving platform style controls. You are NOT writing code and NOT describing code.",
+        "",
+        PAD_AXES_PARAGRAPH,
+        "",
+        CHARACTER_PARAGRAPH,
+        "",
+        "Font — a slug from this catalog, never a family name or a URL:",
+        fontCatalogText(),
+        "",
+        currentText(current),
+        "",
+        "Instruction from the owner:",
+        instruction,
+        "",
+        "Rules:",
+        "- Move only what the instruction actually asks for. A mood word ('more serious', 'playful', 'tighter') moves the pad and the character scalars; it does NOT change the hues or the font.",
+        "- Anything marked PINNED above is the owner's explicit choice. Leave it exactly as it is UNLESS the instruction targets that thing specifically — 'change the accent to orange' targets the hues, 'make it more serious' does not.",
+        "- List in `targeted` only the groups the instruction genuinely names: `hue` when it asks for particular colors, `font` when it asks about typefaces or lettering, `ornament-pins` when it asks for specific structural values (an exact corner radius, an exact border width). Leave `targeted` empty for a pure mood nudge.",
+        "- Nudges are nudges. A single instruction usually moves a scalar by 0.1-0.3 and the pad by 0.2-0.5, not from one extreme to the other.",
+        "- Write `description` as ONE short sentence in the owner's own register describing what you changed, e.g. 'Went tighter and more formal, kept your pinned accent.' No control names, no numbers, no code talk.",
+    ].join("\n");
+}
+export const restyleMapperSchema = {
+    name: "restyle_map",
+    required: ["hues", "character", "font", "pad", "targeted", "description"],
+    properties: {
+        hues: {
+            type: "array",
+            description: "1 to 3 hue controls. The first is the primary hue angle. Repeat the current values unless the instruction targets colors specifically.",
+            items: {
+                type: "object",
+                properties: {
+                    h: { type: "number", description: "Hue angle in degrees, 0-360." },
+                    pinned: {
+                        type: "boolean",
+                        description: "True to freeze this control at `h`; false to let it follow the scheme from hue 1. The first entry is always a concrete angle and ignores this flag.",
+                    },
+                },
+            },
+        },
+        character: {
+            type: "object",
+            description: "The five palette scalars (each 0..1) plus the hue scheme.",
+            properties: {
+                chroma: { type: "number" },
+                contrast: { type: "number" },
+                neutralTint: { type: "number" },
+                surfaceLift: { type: "number" },
+                fillLevel: { type: "number" },
+                scheme: { type: "string", description: "analogous | split-complementary | triadic | complementary" },
+            },
+        },
+        font: { type: "string", description: "A font slug from the catalog above. Repeat the current one unless asked to change it." },
+        pad: {
+            type: "object",
+            description: "Ornament pad position. Both axes -1..+1.",
+            properties: {
+                x: { type: "number", description: "-1 loose .. +1 tight" },
+                y: { type: "number", description: "-1 formal .. +1 informal" },
+            },
+        },
+        targeted: {
+            type: "array",
+            description: "Which pinned groups the instruction named specifically. Allowed values: hue, font, ornament-pins. Empty for a pure mood nudge.",
+            items: { type: "string" },
+        },
+        description: {
+            type: "string",
+            description: "One short sentence, in plain language, saying what changed. No control names and no numbers.",
+        },
+    },
+};
+export const restyleMapperParsed = type({
+    hues: type({ h: "number", "pinned?": "boolean" }).array(),
+    character: {
+        chroma: "number",
+        contrast: "number",
+        neutralTint: "number",
+        surfaceLift: "number",
+        fillLevel: "number",
+        scheme: "string",
+    },
+    font: "string",
+    pad: { x: "number", y: "number" },
+    "targeted?": type("string").array(),
+    description: "string",
+});
+export const RESTYLE_TARGETS = ["hue", "font", "ornament-pins"];
+export function validRestyleTargets(raw) {
+    const catalog = RESTYLE_TARGETS;
+    return (raw ?? []).filter((t) => catalog.includes(t));
+}
+export function isPadDrivenToken(token) {
+    const catalog = PAD_DRIVEN_TOKENS;
+    return catalog.includes(token);
+}
+//# sourceMappingURL=restyle.js.map

package/restyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restyle.js","sourceRoot":"","sources":["../jsr/restyle.ts"],"names":[],"mappings":"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"}

package/settings.d.ts

@@ -7,6 +7,8 @@ export interface UserSettings {
     skills?: string[];
     theme?: string;
     colorTheme?: string;
+    layoutArchetype?: string;
+    flourishes?: string[];
     title?: string;
     enrichedPrompt?: string;
     demoData?: boolean;

package/style-prompts.d.ts

@@ -2,7 +2,7 @@ export interface StylePrompt {
     name: string;
     prompt: string;
 }
-export declare const BRUTALIST_ROOT_CSS = ":root {\n  --background: #f5f0e0;\n  --surface: #ffffff;\n  --primary: #DA291C;\n  --secondary: #fedd00;\n  --accent: #3b82f6;\n  --text-primary: #1a1a2e;\n  --text-secondary: #6b6b80;\n  --border: #1a1a2e;\n  --success: #22c55e;\n  --text-disabled: color-mix(in srgb, var(--text-primary) 38%, var(--background));\n  --warning: #f59e0b;\n  --error: #ef4444;\n  --neutral: #6b7280;\n  --font-family: 'Space Grotesk', sans-serif;\n  --font-family-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;\n  --radius: 4px;\n  --radius-sm: 4px;\n  --radius-lg: 4px;\n  --vibes-spacing: 1rem;\n  --font-size-base: 1rem;\n  --border-width: 1px;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: oklch(0.18 0.02 280);\n    --surface: oklch(0.22 0.02 280);\n    --primary: #DA291C;\n    --secondary: #fedd00;\n    --accent: #3b82f6;\n    --text-primary: oklch(0.96 0.01 80);\n    --text-secondary: oklch(0.60 0.03 280);\n    --border: oklch(0.96 0.01 80);\n    --success: #22c55e;\n    --text-disabled: color-mix(in srgb, var(--text-primary) 38%, var(--background));\n    --warning: #f59e0b;\n    --error: #ef4444;\n    --neutral: #6b7280;\n  }\n}";
+export declare const BRUTALIST_ROOT_CSS = ":root {\n  --background: #f5f0e0;\n  --surface: #ffffff;\n  --primary: #DA291C;\n  --secondary: #fedd00;\n  --accent: #3b82f6;\n  --text-primary: #1a1a2e;\n  --text-secondary: #6b6b80;\n  --border: #1a1a2e;\n  --success: #22c55e;\n  --text-disabled: color-mix(in srgb, var(--text-primary) 38%, var(--background));\n  --warning: #f59e0b;\n  --error: #ef4444;\n  --neutral: #6b7280;\n  --font-family: 'Space Grotesk', sans-serif;\n  --font-family-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;\n  --radius: 4px;\n  --radius-sm: 4px;\n  --radius-lg: 4px;\n  --vibes-spacing: 1rem;\n  --vibes-shadow: 4px 4px 0 var(--border);\n  --vibes-shadow-sm: 3px 3px 0 var(--border);\n  --vibes-shadow-lg: 6px 6px 0 var(--border);\n  --letter-spacing: -0.02em;\n  --letter-spacing-wide: 0.15em;\n  --font-weight: 700;\n  --text-transform: uppercase;\n  --font-size-base: 1rem;\n  --border-width: 1px;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: oklch(0.18 0.02 280);\n    --surface: oklch(0.22 0.02 280);\n    --primary: #DA291C;\n    --secondary: #fedd00;\n    --accent: #3b82f6;\n    --text-primary: oklch(0.96 0.01 80);\n    --text-secondary: oklch(0.66 0.03 280);\n    --border: oklch(0.96 0.01 80);\n    --success: #22c55e;\n    --text-disabled: color-mix(in srgb, var(--text-primary) 38%, var(--background));\n    --warning: #f59e0b;\n    --error: #ef4444;\n    --neutral: #6b7280;\n  }\n}";
 export declare const stylePrompts: StylePrompt[];
 export declare const DEFAULT_STYLE_NAME: "brutalist web";
 export declare const defaultStylePrompt: string;

package/style-prompts.js

@@ -18,6 +18,13 @@ export const BRUTALIST_ROOT_CSS = `:root {
   --radius-sm: 4px;
   --radius-lg: 4px;
   --vibes-spacing: 1rem;
+  --vibes-shadow: 4px 4px 0 var(--border);
+  --vibes-shadow-sm: 3px 3px 0 var(--border);
+  --vibes-shadow-lg: 6px 6px 0 var(--border);
+  --letter-spacing: -0.02em;
+  --letter-spacing-wide: 0.15em;
+  --font-weight: 700;
+  --text-transform: uppercase;
   --font-size-base: 1rem;
   --border-width: 1px;
 }
@@ -29,7 +36,7 @@ export const BRUTALIST_ROOT_CSS = `:root {
     --secondary: #fedd00;
     --accent: #3b82f6;
     --text-primary: oklch(0.96 0.01 80);
-    --text-secondary: oklch(0.60 0.03 280);
+    --text-secondary: oklch(0.66 0.03 280);
     --border: oklch(0.96 0.01 80);
     --success: #22c55e;
     --text-disabled: color-mix(in srgb, var(--text-primary) 38%, var(--background));
@@ -44,18 +51,18 @@ export const stylePrompts = [
         prompt: [
             `THEME: Neobrutalist — Neobrutalist Design System. A bold, retro-arcade-inspired neobrutalist theme. Hard edges, chunky black borders, thick offset drop shadows, vivid primary color blocks, and uppercase display typography. The mood is playful and unapologetically loud without leaning on direct IP references — it is "level dashboard" energy: raw, graphic, readable, kinetic.`,
             `COLOR ROLES (canonical tokens — the \`:root\` block at the end is the source of truth): --background warm off-white canvas; --surface pure white cards/nav/inputs; --text-primary near-black ink; --border same as the ink — every stroke is bold; --text-secondary muted labels; --primary vivid red for primary actions/danger; --secondary bright yellow for highlight/hover; --accent blue for informational elements; --success green for success/active states; --warning amber; --error red; --neutral gray. Text ON a colored block reads the on-* tokens with contrast-safe fallbacks: var(--on-primary, #ffffff) on primary/error, var(--on-info, #ffffff) on accent, var(--on-secondary, var(--text-primary)) on secondary, var(--on-success, var(--text-primary)) on success. Never use var(--surface) or var(--background) as a foreground on colored blocks — they flip dark in dark mode while primary/accent stay vivid.`,
-            `TOKENS: --radius: 4px (tiny, never pill-shaped). Hard offset shadows are built from the border token: 4px 4px 0 var(--border) by default, 3px 3px 0 var(--border) for smaller chips — as literal shadow values in the classNames object (e.g. shadow-[4px_4px_0_var(--border)]), not new :root variables.`,
-            `TYPOGRAPHY: Primary: "Space Grotesk", sans-serif (400, 500, 600, 700). Mono: "JetBrains Mono", monospace (400, 500, 700) — for stats, numbers, tabular data. Loaded from Google Fonts with display=swap (preceded by <link rel="preconnect"> to fonts.googleapis.com and fonts.gstatic.com so the swap lands fast), no other external deps. Headings are UPPERCASE with tight tracking (-0.02em) and heavy weight (700). Section labels: 0.65rem, uppercase, letter-spacing 0.15em, muted color. Nav/button labels: 0.7–0.8rem, uppercase, letter-spacing 0.05–0.08em.`,
-            `SURFACE & BORDER LANGUAGE: Every primary surface (nav, cards, hero, modal, inputs, buttons) has a solid 3px var(--border) outline and border-radius of 4px. No gradients on strokes, no thin hairlines. Every elevated surface carries a hard offset shadow — 4px 4px 0px var(--border) by default, 3px 3px for smaller chips, 6px 6px on hover for lift, 8px 8px on modals. Shadows are NEVER blurred. Hover pattern: transform: translate(-2px, -2px) combined with a larger hard shadow — gives a "card pops forward" feel. Active/pressed state flips to translate(2px, 2px) with box-shadow: none — the object visibly slams back down. Transitions: 0.15s for micro-interactions, 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) for toggle knobs (slight overshoot).`,
+            `TOKENS: --radius: 4px (tiny, never pill-shaped). Hard offset shadows come from the platform's shadow trio, which this theme sets to offsets over the border token — --vibes-shadow-sm (3px 3px 0 var(--border)) for small chips, --vibes-shadow (4px 4px 0 var(--border)) at rest, --vibes-shadow-lg (6px 6px 0 var(--border)) for lift. Reach them with the plain Tailwind utilities shadow-sm / shadow / shadow-lg — the runtime remaps those onto the trio — or with shadow-[var(--vibes-shadow)] when an element needs one named explicitly. Never bake a literal offset like shadow-[4px_4px_0_var(--border)]: a theme swap cannot reach it, so the app would keep this theme's shadows forever. And never define your own --shadow / --shadow-sm / --shadow-lg on :root — those are Tailwind's own engine names (the token is --vibes-shadow, same rule as --vibes-spacing).`,
+            `TYPOGRAPHY: Primary: "Space Grotesk", sans-serif (400, 500, 600, 700). Mono: "JetBrains Mono", monospace (400, 500, 700) — for stats, numbers, tabular data. Loaded from Google Fonts with display=swap (preceded by <link rel="preconnect"> to fonts.googleapis.com and fonts.gstatic.com so the swap lands fast), no other external deps. Headings are UPPERCASE with tight tracking and heavy weight — write them as tracking-tight + font-bold, which the runtime remaps onto --letter-spacing (-0.02em here) and --font-weight (700 here); don't freeze the numbers with tracking-[-0.02em] or font-[700]. Section labels: 0.65rem, uppercase, tracking-wide (remapped to --letter-spacing-wide, 0.15em here), muted color. Nav/button labels: 0.7–0.8rem, uppercase, tracking-wide. Where the SHOUTING itself is the theme's choice rather than the content's — display headings, section and nav labels — write [text-transform:var(--text-transform)] instead of the bare uppercase utility, so a quieter theme can calm them down; keep uppercase only where the copy must be capitals whatever the theme.`,
+            `SURFACE & BORDER LANGUAGE: Every primary surface (nav, cards, hero, modal, inputs, buttons) has a solid 3px var(--border) outline and border-radius of 4px. No gradients on strokes, no thin hairlines. Every elevated surface carries a hard offset shadow — shadow at rest, shadow-sm for smaller chips, hover:shadow-lg for lift, shadow-lg on modals — all reading the theme's shadow trio, never literal offsets. Shadows are NEVER blurred. Hover pattern: transform: translate(-2px, -2px) combined with the larger hard shadow — gives a "card pops forward" feel. Active/pressed state flips to translate(2px, 2px) with box-shadow: none — the object visibly slams back down. Transitions: 0.15s for micro-interactions, 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) for toggle knobs (slight overshoot).`,
             `LAYOUT: A single centered column, max-width: 920px, padding 3rem 2rem, position: relative; z-index: 10; so it sits above ambient background decorations.`,
             `AMBIENT BACKGROUND: Fixed inset grid: two linear-gradients at 60px × 60px with color-mix(in srgb, var(--text-primary) 4%, transparent) — subtle graph-paper feel. 8 floating geometric blocks (.float-block-1..8) placed across the viewport edges, sizes 25–80px, in var(--primary)/var(--secondary)/var(--success)/var(--accent), some square some circular (border-radius: 50%), opacity 0.15–0.3 so they don't overpower content. 2 floating plus/cross shapes built from ::before/::after pseudo-elements (40×40, arms 10px thick) — var(--border) color, low opacity. 2 floating diamonds — 30×30 var(--secondary) squares with 3px borders, rotated 45deg. Keyframes (all on loops 5–12s, ease-in-out or linear): drift-spin-1, drift-spin-2, drift-bounce, drift-diagonal, drift-zigzag, drift-pulse, drift-diamond. The shapes should drift, not race.`,
-            `SECTION COMPOSITION: 1. NAV: Card-style bar with 3px border, shadow, 4px radius. Left: logo = three 12×12 squares (primary/secondary/success) + uppercase brand text. Right: .nav-link pill-looking-but-square chips. 2. HERO: Big bordered card with .hero-accent-bar along the top: a 6px horizontal rainbow split into four equal segments — var(--primary) 0–25%, var(--secondary) 25–50%, var(--success) 50–75%, var(--accent) 75–100%. Big clamped uppercase title with .hero-text-shadow duplicate offset 5px/5px in var(--primary), opacity 0.5. 3. STAT ROW: 4-column grid of .stat-cards (collapses to 2 then 1 on small screens). Each card has colored header bar: child 1 = var(--primary) (on-primary text), 2 = var(--secondary) (ink text), 3 = var(--accent) (on-info text), 4 = var(--success) (ink text). Body shows big mono number + small uppercase unit label. 4. TABLE: Full-bleed inside bordered card. th: 0.6rem uppercase, 2px bottom border. td: 0.82rem, thin separators. Columns 3 & 4 use JetBrains Mono. Row hover fills with var(--secondary) instantly. Badge styles: badge-active (var(--success)), badge-pending (var(--secondary)), badge-locked (var(--neutral)). 5. FORM + CONTROLS GRID: 2-column grid of cards. Left: text input + select + progress bar + primary/secondary buttons. Inputs lift on focus with translate(-2px,-2px) + shadow. Progress bar has repeating striped gradient at -45° in var(--success). Right: checkboxes (22×22, 3px border, var(--success) when checked) + toggles (48×26, 3px border, 4px radius, var(--secondary) when on, knob translates with overshoot) + tag row in four colors. 6. ACTIONS CARD: Flex row with .btn-primary (var(--primary) bg, var(--on-primary, #ffffff) text, 4×4 shadow), .btn-secondary (var(--secondary) bg, 3×3 shadow), .btn-ghost (var(--surface), no shadow, gains 3×3 on hover). 7. MODAL: Overlay color-mix(in srgb, var(--text-primary) 60%, transparent). Modal card: 3px border, 8×8 hard shadow, entry animation modal-pop. .modal-bar: var(--accent) title strip with var(--on-info, #ffffff) text.`,
+            `SECTION COMPOSITION: 1. NAV: Card-style bar with 3px border, shadow, 4px radius. Left: logo = three 12×12 squares (primary/secondary/success) + uppercase brand text. Right: .nav-link pill-looking-but-square chips. 2. HERO: Big bordered card with .hero-accent-bar along the top: a 6px horizontal rainbow split into four equal segments — var(--primary) 0–25%, var(--secondary) 25–50%, var(--success) 50–75%, var(--accent) 75–100%. Big clamped uppercase title with .hero-text-shadow duplicate offset 5px/5px in var(--primary), opacity 0.5. 3. STAT ROW: 4-column grid of .stat-cards (collapses to 2 then 1 on small screens). Each card has colored header bar: child 1 = var(--primary) (on-primary text), 2 = var(--secondary) (ink text), 3 = var(--accent) (on-info text), 4 = var(--success) (ink text). Body shows big mono number + small uppercase unit label. 4. TABLE: Full-bleed inside bordered card. th: 0.6rem uppercase, 2px bottom border. td: 0.82rem, thin separators. Columns 3 & 4 use JetBrains Mono. Row hover fills with var(--secondary) instantly. Badge styles: badge-active (var(--success)), badge-pending (var(--secondary)), badge-locked (var(--neutral)). 5. FORM + CONTROLS GRID: 2-column grid of cards. Left: text input + select + progress bar + primary/secondary buttons. Inputs lift on focus with translate(-2px,-2px) + shadow. Progress bar has repeating striped gradient at -45° in var(--success). Right: checkboxes (22×22, 3px border, var(--success) when checked) + toggles (48×26, 3px border, 4px radius, var(--secondary) when on, knob translates with overshoot) + tag row in four colors. 6. ACTIONS CARD: Flex row with .btn-primary (var(--primary) bg, var(--on-primary, #ffffff) text, shadow), .btn-secondary (var(--secondary) bg, shadow-sm), .btn-ghost (var(--surface), no shadow, gains hover:shadow-sm). 7. MODAL: Overlay color-mix(in srgb, var(--text-primary) 60%, transparent). Modal card: 3px border, shadow-lg (the theme's deepest hard offset), entry animation modal-pop. .modal-bar: var(--accent) title strip with var(--on-info, #ffffff) text.`,
             `INTERACTION: Nothing eases slowly. All hovers/presses resolve in ≤0.2s. Hover lifts up-and-left; press slams down-and-right. Nothing uses soft blur. Every shadow is a discrete offset block. Rounded corners are tiny (4px) everywhere. Color use: --primary is primary/danger; --secondary is highlight; --success is success/status; --accent is informational; --warning and --error cover alerts. Don't tint surfaces — keep all cards var(--surface) white.`,
             `ACCESSIBILITY: Body text ≥0.82rem, section labels ≥0.6rem. Strong contrast (text on primary → var(--on-primary, #ffffff); on secondary → var(--on-secondary, var(--text-primary)); on success → var(--on-success, var(--text-primary)); on accent → var(--on-info, #ffffff)). The on-* names are palette extras — the fallbacks keep colored blocks readable in both light and dark mode. aria-hidden the decorative .hero-text-shadow.`,
             `RESPONSIVENESS: ≤700px: stat row collapses to 2 columns, form grid to 1 column. ≤500px: nav stacks vertically, stat row to single column.`,
             `FONTS: Use Google Fonts for Space Grotesk (400,500,600,700) and JetBrains Mono (400,500,700). Use display=swap (so text renders immediately in a fallback and upgrades to the real font when it lands, instead of staying invisible) and add <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> right before the stylesheet so the connection is warm.`,
             `LOADING STATES: Only a genuinely-network async operation (callAI, fetch) shows a loading state. A database save is local-first — it resolves against the local replica instantly, so it gets NO spinner (apply the change optimistically and let useLiveQuery reconcile; roll back only if the write is rejected on sync). A database read is not a network op either — the first render already has the data, so render an inviting empty-state when there's nothing yet, never a loading spinner. For the network calls that do warrant it, use a useState boolean \`isLoading\`. While the call is in flight: disable the button with \`disabled={isLoading}\`, replace its label with a spinning SVG (a 16x16 circle with 3px stroke, top quarter transparent, CSS animation rotate 0.8s linear infinite), and optionally add a short text like "Loading..." nearby. Pattern: \`setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }\`. The spinner should match the theme: 3px stroke in var(--border) color, no blur, sharp edges. Never leave a network-triggering button clickable with no feedback during the call.`,
-            `THEME TOKENS — provided by the platform at runtime. The platform injects these canonical color + structural tokens into the served page, so do NOT restate a :root block — just build the UI on the CSS variables via Tailwind bracket notation (bg-[var(--background)], text-[var(--text-primary)], border-[var(--border)], bg-[var(--primary)]). The block below is the REFERENCE for the token names and values, not something to paste in. They are the swap contract: the user can later swap themes and the app restyles instantly — but only for values routed through these variables. Two hard rules: (1) no literal colors for core surfaces/text/actions/borders — never bg-[#hex]/text-[#hex]/border-[#hex]; a swap can't reach a baked-in literal (a genuinely one-off decorative value may be inlined on the element); (2) don't invent bespoke color tokens — a name a future theme won't define can't be swapped. Plain Tailwind spacing/size utilities (p-4, gap-2, text-lg, rounded-md) are fine — the runtime remaps them onto the structural tokens automatically. Never write a bare --spacing variable — the runtime reserves that name; the spacing token is --vibes-spacing (when editing older code that references var(--spacing), rewrite it to var(--vibes-spacing) or plain spacing utilities). Token names are code-only vocabulary — never render a token name (--background, --primary, …) in the app's visible UI copy, headings, or labels.
+            `THEME TOKENS — provided by the platform at runtime. The platform injects these canonical color + structural tokens into the served page, so do NOT restate a :root block — just build the UI on the CSS variables via Tailwind bracket notation (bg-[var(--background)], text-[var(--text-primary)], border-[var(--border)], bg-[var(--primary)]). The block below is the REFERENCE for the token names and values, not something to paste in. They are the swap contract: the user can later swap themes and the app restyles instantly — but only for values routed through these variables. Two hard rules: (1) no literal colors for core surfaces/text/actions/borders — never bg-[#hex]/text-[#hex]/border-[#hex]; a swap can't reach a baked-in literal (a genuinely one-off decorative value may be inlined on the element); (2) don't invent bespoke color tokens — a name a future theme won't define can't be swapped. Plain Tailwind utilities are fine and are in fact the PREFERRED spelling — the runtime remaps them onto the structural tokens automatically: p-4/gap-2 onto --vibes-spacing, text-lg onto --font-size-base, rounded-md onto --radius, shadow-sm/shadow/shadow-lg onto the --vibes-shadow trio, tracking-tight/tracking-wide onto --letter-spacing and --letter-spacing-wide, font-bold onto --font-weight. An arbitrary-value bracket that freezes a number instead (shadow-[4px_4px_0_var(--border)], tracking-[-0.02em], font-[700], p-[16px]) opts that element OUT of every future theme swap — don't. Two names the runtime reserves: never write a bare --spacing (the spacing token is --vibes-spacing) and never write --shadow/--shadow-sm/--shadow-lg (the shadow tokens are --vibes-shadow, --vibes-shadow-sm, --vibes-shadow-lg); when editing older code that references var(--spacing), rewrite it to var(--vibes-spacing) or a plain spacing utility, and rewrite var(--shadow) the same way to var(--vibes-shadow) or a plain shadow utility. text-transform is the one ornament with no utility remap: read it as [text-transform:var(--text-transform)] where the shouting is the theme's call. Token names are code-only vocabulary — never render a token name (--background, --primary, …) in the app's visible UI copy, headings, or labels.
 
 <style>
 ${BRUTALIST_ROOT_CSS}

package/style-prompts.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-prompts.js","sourceRoot":"","sources":["../jsr/style-prompts.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAkB;IAIzC;QACE,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE;YACN,yXAAyX;YACzX,04BAA04B;YAC14B,2SAA2S;YAC3S,wiBAAwiB;YACxiB,quBAAquB;YACruB,0JAA0J;YAC1J,i0BAAi0B;YACj0B,u/DAAu/D;YACv/D,mcAAmc;YACnc,yaAAya;YACza,2IAA2I;YAC3I,waAAwa;YACxa,ylCAAylC;YAKzlC;;;EAGJ,kBAAkB;SACX;YACH,oDAAoD;SACrD,CAAC,IAAI,CAAC,MAAM,CAAC;KACf;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EACJ,+8BAA+8B;KACl9B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,uBAAuB;KAChC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,0BAA0B;KACnC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EACJ,orCAAorC;KACvrC;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAwB,CAAC;AAG3D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AACnD,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;IAC7B,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC,IAAI,gCAAgC,CAAC,CAAC;IAC7F,CAAC;IACD,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7B,CAAC;AAGD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CACb,uBAAuB,kBAAkB,iDAAiD,SAAS,gDAAgD,CACpJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC;AACtB,CAAC,CAAC,EAAE,CAAC"}
+{"version":3,"file":"style-prompts.js","sourceRoot":"","sources":["../jsr/style-prompts.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ChC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAkB;IAIzC;QACE,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE;YACN,yXAAyX;YACzX,04BAA04B;YAC14B,o1BAAo1B;YACp1B,qjCAAqjC;YACrjC,ixBAAixB;YACjxB,0JAA0J;YAC1J,i0BAAi0B;YACj0B,ihEAAihE;YACjhE,mcAAmc;YACnc,yaAAya;YACza,2IAA2I;YAC3I,waAAwa;YACxa,ylCAAylC;YAKzlC;;;EAGJ,kBAAkB;SACX;YACH,oDAAoD;SACrD,CAAC,IAAI,CAAC,MAAM,CAAC;KACf;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EACJ,+8BAA+8B;KACl9B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,uBAAuB;KAChC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,0BAA0B;KACnC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EACJ,orCAAorC;KACvrC;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAwB,CAAC;AAG3D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AACnD,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;IAC7B,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC,IAAI,gCAAgC,CAAC,CAAC;IAC7F,CAAC;IACD,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7B,CAAC;AAGD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CACb,uBAAuB,kBAAkB,iDAAiD,SAAS,gDAAgD,CACpJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC;AACtB,CAAC,CAAC,EAAE,CAAC"}

package/system-prompt.md

@@ -31,7 +31,7 @@ You are an AI assistant tasked with creating React components. You should create
 - Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
 - Always show loading states during genuinely-network async operations (callAI, fetch): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
 - Database reads are not a network operation — never show a loading state or spinner for them. `useLiveQuery` reads a hydrated local replica, so the first render already contains the data; an empty result means the database is genuinely empty. Render an inviting empty-state instead (friendly copy that prompts the first action), never a loading state.
-- Give instant feedback for Fireproof writes too, not just for callAI/fetch. A `database.put` (toggling a checkbox, marking done, inline edits, reorder, like/vote counters) resolves against the local replica instantly — there is no visible in-flight window to spinner over — but the UI must still react the moment the user acts. Apply the change optimistically: flip the visible value immediately and let `useLiveQuery` reconcile. If a synced write is refused, the local optimistic revision converges to the server's version automatically — server-wins, and your code never catches it, so don't `try/catch` writes or hand-roll retry UI. Keep your UI reactive to the store (`useLiveQuery`/`useDocument`) so the converged state shows the truth. When `access.js` provides a reason (`forbidden("…")`) the platform surfaces it to the person; a reason-less refusal (e.g. a database ACL) converges silently, so don't strip your own UI expecting a popup — gate write surfaces up front with `useVibe(dbName).can`. Transport and offline failures are handled by the built-in queue, so don't hand-roll retry either. Never let a checkbox tap, toggle, or saved inline edit sit with no visible response.
+- Give instant feedback for Fireproof writes too, not just for callAI/fetch. A `database.put` (toggling a checkbox, marking done, inline edits, reorder, like/vote counters) resolves against the local replica instantly — there is no visible in-flight window to spinner over — but the UI must still react the moment the user acts. Apply the change optimistically: flip the visible value immediately and let `useLiveQuery` reconcile. If a synced write is refused, the local optimistic revision converges to the server's version automatically — server-wins, and your code never catches it, so don't `try/catch` writes or hand-roll retry UI. Keep your UI reactive to the store (`useLiveQuery`/`useDocument`) so the converged state shows the truth. When `access.js` provides a reason (`forbidden("…")`) the platform surfaces it to the person; a reason-less refusal converges silently, so don't strip your own UI expecting a popup — gate write surfaces up front with `useVibe(dbName).can`. Transport and offline failures are handled by the built-in queue, so don't hand-roll retry either. Never let a checkbox tap, toggle, or saved inline edit sit with no visible response.
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
 - Access control is decided by the runtime, not your code. Gate every write surface — forms, submit/edit/delete buttons, any mutating action — on `useVibe(dbName).can`. `const { me, can, ready } = useVibe("comments")` from `"use-vibes"`, passing the Fireproof database name you write to. Show the editor when `can.create(draft).ok` (or `can.edit(doc)` / `can.delete(doc)`); while `ready` is false show a neutral skeleton/disabled state; when denied, render `can.create(draft).reason` as the fallback copy (the sign-in or join prompt). `can.*` runs the app's own `access.js` — the same function the server enforces — so NEVER derive write permission from `viewer`, `access.hasRole()`/`access.hasChannel()`, or document fields. `useViewer()` is identity/display only: `const { ViewerTag } = useViewer()` renders **other** people (`<ViewerTag userHandle={...} />` for comment authors, rosters, "added by" labels). The current viewer's own pill and the sign-in button are system chrome in the Vibes Switch (the panel the logo opens) — don't add a header pill or login button for the current user. Owner-only management UI is gated on `can.*` too (the access.js encodes the owner rule). This applies to every app — the runtime decides sharing, not the prompt. Writes can still be rejected server-side even when `can.*` allows, so keep the optimistic-write + rollback handling. See use-vibe docs.
 - Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
@@ -539,7 +539,7 @@ if (oldDoc === null) {
 
 The platform predicate `ctx.isImgGenVersionAppend` accepts exactly one legitimate ImgGen version append by a non-author — prior versions/files and all other fields must be unchanged, so a field you didn't anticipate stays author-protected by default. Deletes stay author-only, and a non-author advancing `currentVersion` is the shared-generation display behavior (an app wanting author-only display control must guard `currentVersion` specifically; a private per-user channel no other viewer can reach is exempt).
 
-**Public vs private is the owner's ACL envelope, not your code.** Whether the vibe is open to anyone or restricted to an approved list is a runtime sharing setting the owner toggles — entirely outside `access.js`. Keep `access.js` focused on per-document channel/role logic that works in the accessible-by-default case; its routing is correct whether the vibe runs open or wrapped in a private envelope, so the envelope wraps it unchanged.
+**Public vs private is the owner's sharing envelope, not your code.** Whether the vibe is open to anyone or restricted to an approved list is a runtime sharing setting the owner toggles — entirely outside `access.js`. Keep `access.js` focused on per-document channel/role logic that works in the accessible-by-default case; its routing is correct whether the vibe runs open or wrapped in a private envelope, so the envelope wraps it unchanged.
 
 Example streamed output for a team board app:
 

package/themes/colors/aether.yaml

@@ -4,14 +4,14 @@ colors:
   accent: "#cfa562"
   border: "rgba(20, 20, 20, 0.14)"
   background: "#dcbfa6"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:
   accent: "#9d7330"
   border: "rgba(255, 255, 255, 0.18)"
   background: "#593c23"
   text-primary: "rgba(255, 255, 255, 0.92)"
-  text-secondary: "rgba(255, 255, 255, 0.55)"
+  text-secondary: "rgba(255, 255, 255, 0.7)"
   surface: "rgba(255, 255, 255, 0.04)"
 extras:
   parchment: "#dcbfa6"

package/themes/colors/archive.yaml

@@ -3,7 +3,7 @@ colors:
   background: "oklch(0.95 0.01 70)"
   accent: "oklch(0.35 0.04 50)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:

package/themes/colors/atelier.yaml

@@ -5,7 +5,7 @@ colors:
   primary: "oklch(0.65 0.18 55)"
   secondary: "oklch(0.60 0.15 40)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   accent: "oklch(0.65 0.18 55)"
 colorsDark:

package/themes/colors/atlas.yaml

@@ -4,7 +4,7 @@ colors:
   surface: "rgba(255, 255, 255, 0.85)"
   primary: "oklch(0.62 0.24 25)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   accent: "oklch(0.62 0.24 25)"
 colorsDark:

package/themes/colors/broadsheet.yaml

@@ -3,7 +3,7 @@ colors:
   background: "#fff"
   accent: "#666"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:

package/themes/colors/brutalist.yaml

@@ -16,7 +16,7 @@ colorsDark:
   secondary: "#fedd00"
   accent: "#3b82f6"
   text-primary: "oklch(0.96 0.01 80)"
-  text-secondary: "oklch(0.60 0.03 280)"
+  text-secondary: "oklch(0.66 0.03 280)"
   border: "oklch(0.96 0.01 80)"
   success: "#22c55e"
 extras:
@@ -26,8 +26,6 @@ extras:
   info: "#3b82f6"
   on-info: "#ffffff"
   primary-light: "rgba(218, 41, 28, 0.1)"
-  shadow: "4px 4px 0 var(--border)"
-  shadow-sm: "3px 3px 0 var(--border)"
 extrasDark:
   on-primary: "#ffffff"
   on-secondary: "#1a1a2e"
@@ -35,8 +33,6 @@ extrasDark:
   info: "#3b82f6"
   on-info: "#ffffff"
   primary-light: "rgba(218, 41, 28, 0.18)"
-  shadow: "4px 4px 0 var(--border)"
-  shadow-sm: "3px 3px 0 var(--border)"
 structural:
   font-family: "'Space Grotesk', sans-serif"
   font-family-mono: "ui-monospace, 'JetBrains Mono', Menlo, monospace"
@@ -44,3 +40,10 @@ structural:
   radius-sm: "4px"
   radius-lg: "4px"
   spacing: "1rem"
+  shadow: "4px 4px 0 var(--border)"
+  shadow-sm: "3px 3px 0 var(--border)"
+  shadow-lg: "6px 6px 0 var(--border)"
+  letter-spacing: "-0.02em"
+  letter-spacing-wide: "0.15em"
+  font-weight: "700"
+  text-transform: "uppercase"

package/themes/colors/capsule.yaml

@@ -4,7 +4,7 @@ colors:
   surface: "rgba(255, 255, 255, 0.85)"
   primary: "oklch(0.00 0 0)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   accent: "oklch(0.00 0 0)"
 colorsDark:

package/themes/colors/carbon.yaml

@@ -5,7 +5,7 @@ colors:
   accent: "oklch(0.79 0.18 75)"
   text-primary: "rgba(255, 255, 255, 0.92)"
   text-secondary: "rgba(255, 255, 255, 0.55)"
-  text-disabled: "oklch(0.71 0.02 261)"
+  text-disabled: "oklch(0.55 0.02 261)"
   border: "rgba(255, 255, 255, 0.18)"
 extras:
   accent-amber: "oklch(0.79 0.18 75)"

package/themes/colors/chrono.yaml

@@ -4,7 +4,7 @@ colors:
   accent: "#6c8ee6"
   text-primary: "rgba(20, 20, 20, 0.92)"
   border: "rgba(20, 20, 20, 0.14)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:
   accent: "#193b93"

package/themes/colors/computer-angel-heaven.yaml

@@ -4,7 +4,7 @@ colors:
   primary: "oklch(0.78 0.12 85)"
   secondary: "oklch(0.80 0.06 240)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   success: "oklch(0.75 0.12 155)"
   error: "oklch(0.65 0.18 25)"

package/themes/colors/console.yaml

@@ -4,7 +4,7 @@ colors:
   surface: "rgba(255, 255, 255, 0.85)"
   primary: "oklch(0.58 0.20 35)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   accent: "oklch(0.58 0.20 35)"
 colorsDark:

package/themes/colors/default.yaml

@@ -11,7 +11,7 @@ colorsDark:
   surface: "oklch(0.22 0.04 60)"
   accent: "oklch(0.72 0.18 70)"
   text-primary: "oklch(0.95 0.01 80)"
-  text-secondary: "oklch(0.55 0.03 60)"
+  text-secondary: "oklch(0.66 0.03 60)"
   border: "oklch(0.35 0.04 60)"
 extras:
   accent-text: "oklch(1.00 0 0)"

package/themes/colors/desktop.yaml

@@ -4,7 +4,7 @@ colors:
   border: "rgba(20, 20, 20, 0.14)"
   background: "#fff"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:
   accent: "oklch(0.89 0.01 250)"

package/themes/colors/edge.yaml

@@ -5,7 +5,7 @@ colors:
   border: "rgba(20, 20, 20, 0.14)"
   background: "#fff"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
 colorsDark:
   accent: "#ff0077"
   border: "rgba(255, 255, 255, 0.18)"

package/themes/colors/hearth.yaml

@@ -7,7 +7,7 @@ colors:
   error: "oklch(0.55 0.20 25)"
   accent: "oklch(0.38 0.17 295)"
   background: "#fff"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
 colorsDark:
   accent: "oklch(0.62 0.17 295)"
   border: "rgba(255, 255, 255, 0.18)"

package/themes/colors/industrial.yaml

@@ -3,7 +3,7 @@ colors:
   background: "oklch(0.88 0.01 90)"
   accent: "oklch(0.90 0.20 110)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   surface: "rgba(255, 255, 255, 0.85)"
 colorsDark:

package/themes/colors/mesh.yaml

@@ -3,7 +3,7 @@ colors:
   surface: "rgba(255, 255, 255, 0.85)"
   accent: "oklch(0.87 0.28 145)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
   background: "#fff"
 colorsDark:

package/themes/colors/neomario.yaml

@@ -4,7 +4,7 @@ colors:
   surface: "rgba(255, 255, 255, 0.85)"
   accent: "oklch(0.55 0.24 28)"
   text-primary: "rgba(20, 20, 20, 0.92)"
-  text-secondary: "rgba(20, 20, 20, 0.5)"
+  text-secondary: "rgba(20, 20, 20, 0.66)"
   border: "rgba(20, 20, 20, 0.14)"
 colorsDark:
   accent: "oklch(0.45 0.24 28)"