Building a NieR:Automata-Inspired Design System
How I created an e-ink aesthetic with glowing accents and scanline effects for my portfolio.
Building a NieR:Automata-Inspired Design System
When I set out to redesign my portfolio, I wanted something that felt both nostalgic and futuristic—like the UI in NieR:Automata.
The E-Ink Foundation
The base is a warm, paper-like background (#f4f1ea) that feels tactile and readable. This isn’t sterile white; it’s the color of aged paper.
Scanline Effects
Subtle scanline overlays add texture without being distracting. The trick is keeping the opacity low enough that it feels like atmosphere, not interference.
The Glow
Golden accents (#c9a959) provide warmth and draw attention to interactive elements. The glow effect creates hierarchy and guides the eye.
Angular Corners
The signature NieR corner brackets create a sense of futuristic UI without feeling dated. CSS pseudo-elements make this efficient and scalable.