Retro

Retro brings back the warm, tactile charm of the early personal-computing web: square corners, chunky outlined frames, hard offset shadows, pixel-display type, and a sun-faded vintage palette. It feels playful, handmade, and full of personality — a deliberate rebellion against the smooth, shadowless minimalism everywhere else. Reach for it when you want an interface that grins back at the user: indie games, hobby projects, developer tools with attitude, and playful product pages.

Design principles

• Square everything. Zero border radius is non-negotiable — pixels don't have rounded corners.
• Hard shadows, no blur. Elevation comes from solid offset blocks that look stacked like stickers.
• Chunky, visible structure. Thick borders and framed "windows" make the interface feel physical.
• Warm, faded palette. Colors look slightly aged — like a well-loved cartridge or a sun-bleached poster.
• Pixel and mono type. Display type is blocky and proud; body type is tall monospace.
• Tactile feedback. Buttons physically depress; cursors blink; focus inverts colors.

Color

The world is warm and paper-like: a faded cream background #F4E9D8 with a lighter #FBF3E2 surface for framed panels. The primary accent is a burnt orange #E8552D, supported by a deep navy #2B4C7E, with mustard #F2B233 and forest green #2E7D5B filling out the vintage swatch set. Everything is outlined and grounded by a dark espresso #3A2E2A used for borders and block shadows. Foreground text is #2A211C and muted text #7A6A5A.

Light (day) token reference:

• Background #F4E9D8, Surface #FBF3E2, raised panel #FBF3E2 with a hard block shadow.
• Primary #E8552D, Primary hover #D14524, Primary pressed #B83A1D.
• Secondary navy #2B4C7E, Accent mustard #F2B233, Accent green #2E7D5B.
• Foreground #2A211C, Muted #7A6A5A, Border and shadow #3A2E2A, Focus inversion uses #3A2E2A and #F4E9D8.

For a "night mode" variant, switch to a dim CRT feel: background #1B1714, surface #241E1A, foreground #EDE0CC, borders and shadows in #0F0C0A, with the same warm accents glowing slightly brighter. An optional faint scanline overlay sells the vintage monitor effect.

Night (CRT) token reference:

• Background #1B1714, Surface #241E1A, Border and shadow #0F0C0A.
• Primary #FF6A3D, Secondary #5C82C4, Mustard #FFC857, Green #4CAF82.
• Foreground #EDE0CC, Muted #A8957E.

Fill recipes: dithered accent panels use a 2px checkerboard of the swatch color over #FBF3E2; title bars fill solid with a swatch color and use cream #F4E9D8 text. Keep no more than two saturated accents competing in a single framed window.