yanacuti1121 When to Use
- Use when: dashboard, admin panel, dev tool, terminal-like interface
- Use when: user explicitly names brutalism or industrial aesthetic
- Use when: data density matters more than warmth
- Do NOT use: consumer mobile apps, e-commerce, anything with a "friendly" brand
Step 0 — Pick ONE mode, commit to it
Mode A: Swiss Industrial Print (light)
Background: off-white (#F5F5F0)
Text: carbon black (#1A1A1A)
Accent: hazard red (#CC2200) — one element only
Mode B: Tactical Telemetry (dark)
Background: near-black CRT (#0D0D0D)
Text: phosphor white (#E8E8E0)
Accent: hazard red (#CC2200) OR terminal green (#00FF41) — one, not both
Never mix modes within a single interface.
Typography Rules
Headers (macro): Ultra-condensed heavy sans-serif. Inter Black, Neue Haas Grotesk, or Barlow Condensed.
- Letter-spacing: −0.04em to −0.06em
- Scale: large and aggressive — use fluid
clamp()sizing - Uppercase or small-caps for category labels
Data/metadata (micro): Fixed-width monospace only. JetBrains Mono, IBM Plex Mono.
- ALL CAPS with +0.08em tracking
- No serif fonts except as deliberate, heavily-degraded display elements
Layout Rules
✓ Absolute corners — border-radius: 0 always. No exceptions.
✓ Visible 1–2px borders compartmentalizing every zone
✓ Grid-based layout — CSS Grid with explicit named areas
✓ Oscillate between dense data clusters and vast negative space
✓ Horizontal rules and vertical dividers carry structural weight
✗ No gradients
✗ No decorative shadows
✗ No rounded anything
✗ No color fills — white/off-white/near-black only (accent once)
Analog Degradation (optional, Mode B only)
Add hardware simulation for CRT authenticity:
/* Scanline overlay */
.scanlines::after {
content: '';
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px
);
pointer-events: none;
inset: 0; position: fixed;
}
/* Phosphor glow on key values */
.telemetry-value { text-shadow: 0 0 8px rgba(0,255,65,0.4); }
Forbidden Patterns
✗ border-radius on any element
✗ More than one accent color visible at once
✗ Gradient backgrounds or fills
✗ Soft box shadows
✗ System UI fonts (Inter, Roboto, SF Pro) for primary display
✗ Mixed modes (light sections inside dark layout)
✗ Decorative icons without data function
Anti-Fake-Pass
❌ Adding border-radius "just a little" (2px counts as a violation)
❌ Using two accent colors simultaneously
❌ Switching modes mid-scroll
✅ Verify: one mode, zero border-radius, one accent color
✅ Read every border-radius value: must all be 0