Visual Style Presets

Visual Style Presets

One skill, nine presets. Each preset is a complete direction: a surface ladder, an accent rule, a type pairing, and one signature structural motif that carries the identity. Pick a preset, apply its tokens, then commit to its motif.

How to use this

1. Pick the preset that matches the request. If the user named a vibe ("premium dark", "paper-like", "engineered"), map it to the closest preset below.
2. Copy that preset's token block verbatim as the foundation. Retune hues to brand.
3. Implement the signature motif — this is what makes the preset legible. Skipping it leaves generic output regardless of the palette.
4. Apply the universal rules at the bottom. They matter more than the palette.

Do not blend two presets in one interface. Mixed glassmorphism + skeuomorphism + frames is the single most common failure. One material system per screen.

The presets

1. dark-glass-workspace

Premium dark console: frosted shells, multi-column workspace, floating data cards.

:root {
  --bg: #08090b;           /* near-black base */
  --surface: rgba(24, 26, 31, 0.72);   /* frosted shell fill */
  --surface-raised: rgba(38, 41, 48, 0.78);
  --edge: rgba(255, 255, 255, 0.10);   /* 1px top-edge highlight */
  --edge-strong: rgba(255, 255, 255, 0.22);
  --ink: #f4f5f7;
  --ink-muted: #a1a7b3;   /* contrast floor — do not go dimmer */
  --accent: #60a5fa;
  --blur: 18px;
}

Signature motif: a 1px gradient-border wrapper with a darker translucent fill inside it. The edge stays crisp precisely because the interior is darker than the border — invert that and the shell reads as flat. Pair with backdrop-filter: blur(var(--blur)).

Layout: left nav / central stage / right operational sidebar, centered max-width shell with thin vertical rails. Keep the center calm; cards support it.

Always provide a non-blur fallback — backdrop-filter fails in more places than people assume:

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 22, 27, 0.94); }
}

2. dark-technical-framed

Engineered monochrome. Identity comes from frame logic, not soft floating cards.

:root {
  --bg: #0a0a0a;
  --panel: #121214;
  --panel-raised: #1a1a1e;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --ink: #fafafa;
  --ink-muted: #8b8b93;
  --accent: #e4e4e7;   /* monochrome by default; brand accent used sparsely */
}

Signature motif: vertical rails that overshoot the shell — extend guide lines slightly past the container's top/bottom edge, plus tiny corner squares marking the boundary. That overshoot is what reads as "engineered" rather than "bordered".

Layout: asymmetrical panel grid (large hero region + smaller utility/visualization panel), separated by thin dividers. Active list rows get a left-edge bar, brighter text, subtle translucent fill; inactive rows stay outlined and low-contrast. Uppercase mono labels with tracking for section codes and metadata.

3. cobalt-contrast-dark

High-contrast dark with a saturated blue lead. Louder than dark-glass-workspace.

:root {
  --bg: #05070d;
  --surface: #0d1220;
  --edge: rgba(96, 165, 250, 0.24);
  --ink: #f8fafc;
  --ink-muted: #94a3b8;
  --accent: #2563eb;
  --accent-hot: #dbeafe;   /* near-white core for beams/highlights */
}

Signature motif: if using a beam or laser accent, separate core thickness from glow width — a thin near-white core (~2–5px) with a wide soft halo (~30–40px). Thickening the core to get more glow is the classic mistake; it reads as a smear. Keep the core near-white, not saturated; let the halo carry the hue.

4. matte-accent-dark

Dark neutral base with one confident accent hue. Hue is a parameter.

:root {
  --bg: #0b0b0c;
  --surface: #16161a;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #fafafa;
  --ink-muted: #8f8f98;
  /* pick one: emerald #10b981 · lime #a3e635 · fuchsia #d946ef · violet #8b5cf6 */
  --accent: #10b981;
}

Signature motif: accent appears in exactly three roles and nowhere else — active state, one focal number/metric, primary CTA. Everything else is neutral. The restraint is the style; accent everywhere collapses it into generic dark mode.

5. warm-paper-light

Warm off-white surfaces framed by a darker outer shell. Tactile, not stark.

:root {
  --page: #1c1a17;        /* dark outer field */
  --paper: #f7f3ec;       /* warm interior — never #fff */
  --paper-sunk: #ece6db;
  --line: rgba(28, 26, 23, 0.14);
  --ink: #21201d;
  --ink-muted: #6b665d;
  --accent: #c2410c;
  --radius-shell: 24px;
}

Signature motif: two-zone composition — a large rounded light container holding the whole experience, placed on a darker page background. The frame is the idea. Add low-contrast diagonal texture on large paper regions and small L-bracket corner details. Sans-serif for UI, mono for timestamps/captions/metadata.

6. beige-minimal-light

Quiet warm minimalism. Fewer elements, more space, no framing device.

:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --line: rgba(30, 27, 22, 0.10);
  --ink: #1c1917;
  --ink-muted: #78716c;
  --accent: #1c1917;   /* accent is usually just ink — near-monochrome */
}

Signature motif: generous whitespace as the primary structural tool, one type-scale jump larger than feels comfortable for headings, and hairline dividers instead of cards. If it needs a card, it probably needs less content.

7. editorial-grid

Magazine composition + precision detailing. Asymmetry is mandatory.

:root {
  --bg: #0e0e10;          /* works dark or light — swap ink/bg */
  --ink: #f5f5f4;
  --ink-muted: #a3a3a3;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #eab308;
  --col: 12;
  --margin: clamp(24px, 5vw, 64px);
}

Signature motif: cinematic horizontal media bands that cut across the grid and overlap adjacent columns in a controlled way. Centered hero blocks are forbidden — oversized headline on one side, compact supporting copy offset from it.

Details that carry it: hover scale ≤ 1.02, cubic-bezier(.22,.61,.36,1) easing, 45–70ms stagger, mono counters and chapter markers, fine grid traces. Never make hover the only affordance.