| name | aesthetic-anchor |
| description | Lock a specific visual aesthetic before building UI — choose one of 8 design anchors (Swiss, Industrial, Brutalist, Aurora Maximalism, Chaotic Maximalism, Retro-Futuristic, Organic, Lo-Fi) and apply its palette, typography, and texture tokens consistently throughout the build. Use when the user says "make it look like X", names a visual style, wants a specific aesthetic mood, or asks to avoid generic AI output. Do NOT use when the project already has an established design system — apply that system instead.
|
| origin | adapted:frontend-design |
| license | MIT © 2026 Ilm-Alan |
| version | 1.0.0 |
| compatibility | Any frontend stack. CSS custom properties output by default. |
When to Use
- Use when: user picks a style ("brutalist", "minimal", "dark tech", "earthy")
- Use when: user says "I want it to feel like [brand/era/mood]"
- Use when: starting a new UI with no existing design system
- Use when: user says "not generic", "not boring", "not AI-looking"
- Do NOT use when: project has a design system — use
ui-redesign instead
- Do NOT use when: multiple anchors are active simultaneously — pick one and stick to it
The 8 Anchors
Pick exactly one. Apply it fully before writing any component code.
Swiss
Grid structure, typographic precision, confident whitespace.
Background : #FFFFFF (pure white)
Text : #000000
Accent : Swiss Red (#EF3340) or International Orange (#FF4F00)
Font : Akzidenz-Grotesk / Helvetica Neue / Söhne — weights 400 + 700
Grid : visible column grid, strong baseline rhythm
Shadow : none
Radius : 0px
Rules: alignment is the decoration. Never center body text. Grid lines may be visible.
Industrial
Monospace, single signal color, uncompromising flatness.
Background : #000000 (pitch black)
Text : #E5E5E5
Accent : one semantic color only (e.g. #00FF41 for active state)
Font : IBM Plex Mono / JetBrains Mono — weights 400 + 700
Shadow : none
Radius : 0px
Decoration : none — no gradients, no textures
Rules: every element either does something or does not exist.
Brutalist
Raw, confrontational, system fonts, hard shadows.
Background : #FFFFFF or #000000
Text : opposite of background
Accent : pure primary (#FF0000, #0000FF, #FFFF00)
Font : Times New Roman / Helvetica / Courier New (native system fonts)
Shadow : hard offset box-shadow: 4px 4px 0 #000 (no blur)
Radius : 0px
Border : 2px solid #000
Rules: intentional ugliness is a valid choice. Hover = color invert.
Aurora Maximalism
Dark + saturated + glowing. Maximum richness.
Background : dark saturated gradient (#0a0a1a → #1a0a2e)
Text : #FFFFFF
Accent : neon (choose one: #FF006E / #00F5FF / #ADFF2F)
Font : Inter (display) + PP Neue Machina (headlines)
Texture : mesh gradient overlay, subtle noise
Glow : box-shadow: 0 0 20px <accent-color>40
Radius : 12–16px
Rules: one dominant neon. Everything else is dark neutral.
Chaotic Maximalism
Conflicting colors, mixed typefaces, maximum energy.
Background : patterned or clashing pastels
Text : varies by section — no single text color
Accent : multiple (pastels + neons in same view is intentional)
Font : mix 2–3 typefaces — display, serif, and monospace together
Layout : intentional overflow, rotated elements, oversized type
Rules: chaos must be deliberate. Every odd choice has a reason.
Retro-Futuristic
80s/90s sci-fi. CRT. Neon on black.
Background : #000000
Text : #00FF00 / #00FFFF / #FF00FF
Accent : same palette, pick dominant
Font : VT323 / Orbitron / Space Mono / Monoton
Effects : CRT scanlines (repeating-linear-gradient overlay), chromatic aberration on hover
Border : 1px solid <accent>
Glow : text-shadow: 0 0 8px <accent>
Rules: every interactive element should feel like it belongs in a 1987 terminal.
Organic
Earth, grain, warmth. Nature-inspired restraint.
Background : #F5F0E8 (warm off-white) / sage / linen
Text : #2C2416 (dark warm brown)
Accent : terracotta (#C4683C) / ochre (#D4A843) / sage (#6B8F71)
Font : humanist serif (Lora, Playfair, Source Serif) + warm sans (Nunito, Raleway)
Texture : subtle grain overlay (noise SVG or CSS filter)
Radius : 8–24px (generous rounding)
Shadow : warm-tinted, low spread
Rules: nothing should feel digital. Grain is mandatory.
Lo-Fi
Paper aesthetic. Imperfection is the point.
Background : #F5E6C8 (paper yellow)
Text : #2B1D0E (ink brown)
Font : mixed system fonts — intentional inconsistency
Decoration : halftone dots, Risograph misregistration (offset shadows in 2 colors)
Layout : slight rotations (transform: rotate(-1deg) to rotate(1.5deg))
Border : hand-drawn style (SVG borders or border-image)
Rules: everything should look like it was printed on a photocopier.
How It Works
- Confirm the anchor — ask if not stated. Show the 8 options as a menu.
- Apply tokens globally — set CSS custom properties at
:root before writing any component
- Build components using anchor tokens only — no ad-hoc color or font values outside the system
- Flag deviations — if a component requires breaking the anchor, note it explicitly
Output Format
:root {
--color-bg: ...;
--color-text: ...;
--color-accent: ...;
--font-display: ...;
--font-body: ...;
--radius: ...;
--shadow: ...;
}
Then: component code using these tokens only.
Gotchas
- Never apply two anchors at once — hybrid aesthetics collapse into generic
- Organic and Lo-Fi require a texture layer — don't skip it, the grain is load-bearing
- Retro-Futuristic scanlines must be a CSS overlay, not an image (performance)
- Aurora Maximalism with more than one neon color becomes generic — pick one
- Brutalist hard shadows must have 0 blur radius —
4px 4px 0 #000 not 4px 4px 4px #000
Anti-Fake-Pass Rules
Before claiming the aesthetic is applied, you MUST show:
Reference: gates/anti-fake-pass-gate.md
