visual-style-presetslisted

# 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. ```css :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 wit