visual-style-presets

name

visual-style-presets

description

Pick and apply a complete visual style direction — surface ladder, type scale, accent discipline, and one signature structural motif — for a website, landing page, dashboard, or app shell. Use when asked for a specific look such as dark glass, dark technical, frosted workspace, warm paper, beige minimal, editorial grid, archival book, wireframe diagnostic, cobalt contrast, or "make it feel premium/expensive/engineered", or when a design needs a coherent direction rather than ad-hoc styling.

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.

8. archival-book-serif

Serif-led reading surface inside a darker catalog shell.

:root {
  --shell: #17161c;
  --paper: #efe7d7;
  --paper-shade: #e2d8c4;
  --ink: #24211c;
  --ink-muted: #6d655a;
  --accent: #7c2d12;   /* oxblood; bronze/antique gold also valid */
  --leading-body: 1.75;
}

Signature motif: the two-zone book surface — a centered folio/spread with a center crease treatment, paper gradients, edge shadows, and slight tonal variation between pages, laid inside a dark interface frame. Mono sidebar index with grouped chapter entries. Scholarly details earn their place here: drop caps, marginalia, folio markers, citations.

9. wireframe-diagnostic

Deliberately unfinished, blueprint-like. Structure exposed on purpose.

:root {
  --bg: #fbfbfa;
  --line: #d4d4d8;
  --line-active: #18181b;
  --ink: #18181b;
  --ink-muted: #71717a;
  --accent: #dc2626;
  --font-ui: ui-monospace, "SF Mono", Menlo, monospace;
}

Signature motif: visible measurement — dimension labels, crossed placeholder boxes, dashed bounding lines, annotation callouts. Mono everywhere. Use when communicating structure (specs, docs, architecture), never for a polished marketing surface.

---

Universal rules

These outrank the palette. A preset applied without these still looks generic.

Surface ladder. Never collapse background / card / popover / raised into one color. Each level up gets lighter in dark mode and more separated in light mode. Flat equals cheap. In dark mode give every neutral a faint tint toward the accent hue (a 217° blue-charcoal under a blue accent) rather than pure gray.

Contrast floor. Muted text stops at the value given per preset. Dimmer "looks more premium" in a design tool and fails in daylight and in WCAG. Body text ≥ 4.5:1, large text ≥ 3:1.

Accent discipline. One accent. Three roles maximum (active state, focal figure, primary CTA). A second accent needs an explicit semantic reason (success/danger).

Depth is directional. Light from above: brighter top edge, darker lower edge, shadow below. Consistent across every component or the whole surface reads wrong. Avoid pure-black shadows — tint them toward the surface hue.

Motion is calm. 160–240ms for controls, 400–760ms for masked reveals and section entrances. Parallax capped under 5%. Never bouncy in a premium system. Always honor reduced motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Texture is felt, not seen. Grain, diagonal patterning, and noise sit at very low opacity. If you notice it as texture, halve it. Reduce or drop it on small controls.

One material system. Do not mix glass, skeuomorphic, neumorphic, and framed treatments in one component or one screen.

Related skills

• beautiful-shadows — exact layered elevation shadows (use instead of ad-hoc box-shadow)
• container-lines — the rails/corner-square motif, implemented in CSS
• framed-grid-layout — L-bracket frames via layered gradients
• glass-dark-ui — deeper implementation of the dark-glass-workspace preset
• mesh-gradient-dark-blue-clean — animated mesh background for the dark presets
• skeuomorphic-ui — tactile/pressed surfaces (a different material system)
• css-border-gradient — the 1px gradient-border wrapper technique

Quick checks

• Can you name which preset this is from a screenshot? If not, the motif is missing.
• Is the surface ladder visible — at least three distinguishable levels?
• Is the accent in three places or twenty?
• Does muted text pass 4.5:1?
• Is there exactly one material system on screen?