Retrowave Design System

Overview

Product Identity
Name	Retrowave (formerly Poolside.FM)
Tagline	Ultra-summer internet radio
Creator	Marty Bell / Ultraleisure Ltd
URL
Platform	Vue 3 + Tailwind CSS (single-page app)
OS Branding	Retrowave OS Version 3.0 — Copyright 1986-2026
Concept	Classic Mac OS 7/8 desktop simulator with draggable, resizable windows
Type	Single site — no separate app/portal distinction

Retrowave recreates the look and feel of a mid-1990s Macintosh desktop environment, complete with nostalgia-art icons, bitmap fonts, draggable windows, a dock, and a menu bar. The warm pastel brushwork evokes poolside summer afternoons. Every interface detail — beveled buttons, 1px black borders, retro date formatting — serves the nostalgic fiction.

Colors

Core Theme Variables

Warm Cream --primary / --secondary #F9F0E9 — Windows, header bar, panels

Dusty Pink --backgroundOverwrite / --button #F6D5D5 — Desktop wallpaper, primary buttons

Pale Yellow --tertiary #FCF4C5 — Accent panels (e.g. Event Calendar)

Soft Teal --secondary-button #AFE2E5 — Play/secondary action buttons

Button Shadow & Focus States

Dark Mauve --button-shadow rgba(123,107,107,1) — Primary button inset shadow

Light Pink --button-focus rgba(221,192,192,1) — Primary button focus/hover

Dark Teal --secondary-button-shadow rgba(88,113,115,1) — Teal button inset shadow

Light Teal --secondary-button-focus rgba(158,203,206,1) — Teal button focus/hover

Secondary & Utility

Warm Gray --secondary-shadow rgba(199,192,186,0.9)

Off-White --secondary-lighter rgba(252,248,244,1)

Medium Gray --secondary-darker rgba(199,192,186,1)

Event Yellow !bg-[#FAF4C6] #FAF4C6 — Event Calendar window override

Hard Brushwork

Black #000000 — Borders, text, icons, palm-tree bg

White #FFFFFF — Content areas, inset highlight

Gray #9B9B9B — Disabled states, scrollbar

Hot Pink #FB278D — Notification badge, live indicators

Typography

Retrowave uses a collection of custom bitmap/nostalgia fonts that emulate the Classic Macintosh typographic environment. None are standard web fonts; all are loaded as custom @font-face assets. The stand-in below uses system monospace to approximate the nostalgia aesthetic.

Pixolde — Menu bar, navigation, labels

Become a mkindred / Log in • Player • Settings

Size: 11-13px | Weight: Regular (400) | Tracking: -0.5px to -1px | Also used as WalletConnect font-family

ChiKareGo2 (Chicago homage) — Track titles, timer, UI labels

Bossa Nova — Summer Breeze | 03:42

Size: 12-14px | Weight: Bold | Tracking: -1px | Homage to Apple Chicago bitmap font

Everyday — Artist name, secondary text

Marcos Valle • Tom Misch • Khruangbin

Size: 11-13px | Weight: Regular | Tracking: -0.3px | Softer, more readable secondary font

Ishmeria — Window title bars (uppercase)

Retrowave • NEWSROOM • MIXTAPES

Size: 12-13px | Weight: Bold | Tracking: 2px | Always uppercase | Right-aligned in title bar

Nostalgiaated Times New Roman — Body text, long-form content

The ultra-summer digital experience. Tune in, drop out. Retrowave is the official soundtrack to your summer.

Size: 12-14px | Weight: Regular | Standard tracking | Used in About, Newsroom articles

Text Shadow (Embossed Menu Bar Effect)

Embossed menu text — text-shadow: 0 1px 0 #fff

Applied to menu bar items. Creates a subtle raised/letterpress appearance on the cream background.

Sizing Scale

Context	Size	Font	Notes
Menu bar items	11-12px	Pixolde	text-shadow embossed
Dock labels	9-10px	ChiKareGo2	Below dock icons
Window titles	12-13px	Ishmeria	Uppercase, right-aligned
Track title	13-14px	ChiKareGo2	Bold, tight tracking
Artist name	11-12px	Everyday	Secondary text style
Body text	12-14px	Px TNR	Newsroom, About content
Channel names	10-11px	ChiKareGo2	In channel list
Timer display	12px	ChiKareGo2	Mono-spaced numerals

Spacing & Layout

Token	Value	Usage
Window padding	6px (p-1.5)	Internal padding of every window component
Title bar padding	6px	Padding around title bar controls and text
Content scroll area	0px inner padding	Scroll containers flush with window edge
Dock icon gap	0px (items handle own padding)	Dock items have 8px paystreamtal padding each
Menu bar height	32px (h-8)	Fixed height, absolute top positioning
Control buttons	18 x 18px	Close, toggle, expand buttons in title bar
Dock icons	32 x 32px	Nostalgia art icons in the dock
Palm tree icon	32 x 32px (aspect-square)	Menu bar left corner, black background

Window Dimensions (Default Sizes)

Window	Min Width	Min Height
FM Player	607px	640px
Newsroom Item	900px	700px
Create Account / Vacation	663px	416-428px
Profile / Settings	495-663px	358-404px
Newsroom	524px	466px
Mixtapes	401px	462px
Guestbook / Instagram	349px	500-520px
Event Calendar	328px	553px
Submit Track	305px	86px
About / Mkindreds	299-302px	530-570px

Shadow System

Component
0px 50px 80px -50px
rgba(0,0,0,0.3)

CD / Mixtape
2px 2px 0 0
rgba(0,0,0,0.2)

Legacy Retro
5px 5px 0 0
rgba(0,0,0,0.15)

Button 3D
Classic Mac inset
beveled edges

Input Field
inset 0 1px 2px
rgba(0,0,0,0.1)

Media Button
Subtle 1px inset
top highlight

Shadow Breakdown

Name	CSS Value	Usage
shadow-is-component	0px 50px 80px -50px rgba(0,0,0,0.3)	All draggable windows — deep, subtle, large blur
CD/mixtape cover	2px 2px 0 0 rgba(0,0,0,0.2)	Album art, mixtape thumbnails
Legacy retro offset	5px 5px 0 0 rgba(0,0,0,0.15)	Decorative retro drop-shadow on certain elements
Primary button	inset -1px -1px 0 0 [shadow], inset 1px 1px 0 0 #fff, 1px 1px 0 0 #000	3D beveled Classic Mac button look
Active/pressed button	inset 1px 1px 0 0 [shadow], inset -1px -1px 0 0 #fff	Inverted shadow = pressed state
Input inset	inset 0 1px 2px rgba(0,0,0,0.1)	Text fields — subtle recessed appearance

Border Radii

0px

Internals

2px

Small / Controls

4px

Buttons / Lists

6px

Windows (rounded-md)

12px

Cards / Panels

9999px

Pill

Cursor

Retrowave replaces the default cursor with a custom nostalgia-art pointer SVG. Hotspot at (4, 0).

Hover over this area to see the custom nostalgia cursor.
cursor: url("data:image/svg+xml,...") 4 0, auto;

The cursor is a classic Mac-style arrow rendered as an inline SVG data URI. Black fill, white stroke, 1px outline. Applied globally to the body element.

Window Component

Every "app" in Retrowave is a draggable, resizable window using the vue-drag-resize library. All windows share identical structural CSS with per-window min-width/min-height constraints.

▣

☐

Retrowave

Now Playing: Bossa Nova Summer

Marcos Valle — Estrelar

02:14 / 06:31

Window Anatomy

Element	CSS
Outer container	border: 1px solid #000; border-radius: 6px; background: var(--secondary); padding: 6px; box-shadow: 0px 50px 80px -50px rgba(0,0,0,0.3);
Title bar	display: flex; padding: 6px; margin: -6px -6px 0 -6px; (drag-header class)
Close button	18x18px, rounded-[2px], nostalgia-art X icon (7x7 base64 PNG), active:invert active:bg-white
Toggle button	18x18px, TV icon (11x11 base64 PNG), hidden when not wide, active state inverts
Expand button	18x18px, expand arrow icon (8x8 base64 PNG)
Window title	Ishmeria font, uppercase, letter-spacing: 2px, right-aligned (position: absolute; right: 12px)
Content area	Scrollable via OverlayScrollbars, border: 1px solid #000 border-b-2, rounded-[4px], bg-white

Menu Bar

🌴

Tue 31 Mar 1997 19:02

Menu Bar Specifications

Property	Value
Height	32px (h-8)
Position	absolute top, full width (z-index: 10)
Background	var(--primary) — #F9F0E9 cream
Border	1px solid black, bottom edge
Left item: Palm icon	32x32px, background: black, border-radius: 4px 0 0 4px. Contains 12x12 nostalgia-art palm tree (base64 PNG)
Left item: Mkindred button	Full height, max-width: 150px (mobile), text-ellipsis overflow, focus:outline-none
Right items	Fake retro date ("Tue 31 Mar 1997") + clock ("19:02") with clock icon (16x16 base64 PNG). Clickable aside element.
Font	Pixolde, inherited size
Text treatment	text-shadow: 0 1px 0 #fff (embossed letterpress effect)

Dock Bar

♫

Player

✉

Newsroom

♬

Mixtapes

★

Mkindreds

☀

Events

☐

Instagram

✈

Vacation

✍

Guestbook

⚙

Settings

Dock Specifications

Property	Value
Position	Absolute bottom of viewport
Background	var(--primary) — cream
Border	1px solid #000, border-radius: 3-4px
Icon size	32 x 32px nostalgia-art (base64 encoded PNGs)
Label font	ChiKareGo2 (Chicago homage), 9-10px
Layout	Paystreamtal flex, center aligned, each item is a button with title tooltip
Interaction	Click opens/focuses corresponding window. Active app may show indicator.

Dock Apps (9 items)

#	Label	Opens Window
1	Player	FM Player (main radio interface)
2	Newsroom	Newsroom (news feed list)
3	Mixtapes	Mixtapes (curated playlists)
4	Mkindreds	Mkindred Perks / Create Account
5	Events	Event Calendar
6	Instagram	Instagram feed embed
7	Vacation	Vacation, Inc info
8	Guestbook	Guestbook (user messages)
9	Settings	Settings (theme, wallpaper)

Button System

All buttons use the Classic Mac OS 3D beveled shadow technique: a white inset highlight on the top-left, a dark inset shadow on the bottom-right, and a 1px black outline. Active/pressed state inverts the shadows.

Primary Button (Dusty Pink)

bg: var(--button) #F6D5D5 | shadow: var(--button-shadow) | focus: var(--button-focus)

Secondary / Play Button (Soft Teal)

bg: var(--secondary-button) #AFE2E5 | shadow: var(--secondary-button-shadow) | focus: var(--secondary-button-focus)

Media Controls

bg: var(--primary) | Subtle 1px shadow top + 1px white inset | Used for transport controls

Default / Gray

bg: var(--primary) | shadow: #9B9B9B gray inset | Generic dialog buttons

Disabled State

opacity: 0.5 | cursor: not-allowed | group-disabled:opacity-50 on child icons

Button CSS Pattern

/* Classic Mac 3D beveled button */
background: var(--button);
border: 1px solid #000;
border-radius: 4px;
box-shadow:
  inset -1px -1px 0 0 var(--button-shadow),   /* dark bottom-right */
  inset 1px 1px 0 0 #fff,                    /* light top-left */
  1px 1px 0 0 #000;                          /* outer offset */

/* Active (pressed) state: invert the shadows */
box-shadow:
  inset 1px 1px 0 0 var(--button-shadow),    /* dark top-left */
  inset -1px -1px 0 0 #fff;                  /* light bottom-right */
transform: translate(1px, 1px);

Input Fields

Name

Message

Input Specifications

Property	Value
Background	White with textured dot-pattern (CSS repeating-linear-gradient, 2px interval, rgba(0,0,0,0.03))
Border	1px solid #000
Border radius	2px
Box shadow	inset 0 1px 2px rgba(0,0,0,0.1) — subtle recessed appearance
Focus state	2px outline in var(--button-focus), stronger inset shadow
Font	Inherited nostalgia font, 11px
Padding	6px 8px

Input Background Pattern CSS

background:
  repeating-linear-gradient(90deg,
    transparent, transparent 1px,
    rgba(0,0,0,0.03) 1px, rgba(0,0,0,0.03) 2px),
  repeating-linear-gradient(0deg,
    transparent, transparent 1px,
    rgba(0,0,0,0.03) 1px, rgba(0,0,0,0.03) 2px),
  #fff;

Apps / Windows

Retrowave features 14 distinct window types, each a Vue component with shared window chrome styling but unique internal content.

FM Player
607 x 640 — Main radio

Submit Track
305 x 86 — Track submission

Create Account
663 x 428 — Signup/login

Vacation
663 x 416 — Vacation, Inc

About
299 x 530 — About page

Mkindred Perks
302 x 570 — !bg-[#F9F0E9]

Event Calendar
328 x 553 — !bg-[#FAF4C6]

Profile
663 x 404 — Account settings

Settings
495 x 358 — Theme/wallpaper

Guestbook
349 x 520 — User messages

Newsroom
524 x 466 — News feed list

Newsroom Item
900 x 700 — Article detail

Instagram
349 x 500 — IG feed

Mixtapes
401 x 462 — Curated playlists

Shared Window Classes (Tailwind)

/* Every window component */
draggable resizable vdr allow-drag
flex flex-col pointer-events-auto
border bg-secondary border-black rounded-md
h-full p-1.5 shadow-is-component
min-w-[var(--minWidth)] min-h-[var(--minHeight)]

Animations

Ping (Notification Pulse)

Used for live/notification indicators. Hot pink (#FB278D).

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

Flashing Dots (Loading Indicator)

Sequential dot fade. Used during loading states.

@keyframes flashing-dots {
  0%, 20% { opacity: 1; }
  50%     { opacity: 0.3; }
  80%, 100% { opacity: 1; }
}
/* Stagger: 0s, 0.2s, 0.4s delay per dot */

dimBackground (Modal Overlay)

fade →

Background dims when modal/overlay opens.

@keyframes dimBackground {
  from { background: transparent; }
  to   { background: rgba(0,0,0,0.5); }
}

Transition Defaults

Context	Property	Duration	Easing
Fade enter/leave	opacity	0.2s	ease
Slider handle	transform	0.2s	ease
Tooltip position	top, left, bottom, right	0.3s	ease
Select dropdown	opacity	0.15s	cubic-bezier(1,.5,.8,1)

CSS Variables (Copy-Paste Block)

Complete theme variables as defined on the <html> element's inline style attribute.

/* ===================================================
   Retrowave Theme Variables
   Applied to :root / html element
   =================================================== */

/* --- Core Brushwork --- */
--primary: #F9F0E9;              /* warm cream — windows, panels */
--secondary: #F9F0E9;            /* cream — window background */
--tertiary: #FCF4C5;             /* pale yellow — accent panels */
--backgroundOverwrite: #F6D5D5;   /* dusty pink — desktop wallpaper */

/* --- Button Colors --- */
--button: #F6D5D5;               /* dusty pink — primary buttons */
--secondary-button: #AFE2E5;     /* soft teal — play/secondary buttons */

/* --- Shadow & Focus --- */
--secondary-shadow: rgba(199,192,186,0.9);
--secondary-lighter: rgba(252,248,244,1);
--secondary-darker: rgba(199,192,186,1);
--button-shadow: rgba(123,107,107,1);       /* dark mauve */
--button-focus: rgba(221,192,192,1);        /* light pink */
--secondary-button-shadow: rgba(88,113,115,1);  /* dark teal */
--secondary-button-focus: rgba(158,203,206,1); /* light teal */

/* --- Tailwind Custom Shadow --- */
/* shadow-is-component: 0px 50px 80px -50px rgba(0,0,0,0.3) */

/* --- Hard Colors (not CSS vars, used directly) --- */
/* Black: #000000  |  White: #FFFFFF  |  Gray: #9B9B9B  |  Hot Pink: #FB278D */

/* --- WalletConnect / AppKit Overrides --- */
--w3m-font-family: Pixolde;
--w3m-accent: #0988F0;
--w3m-color-mix: #000;
--w3m-color-mix-strength: 0%;
--w3m-font-size-master: 12px;
--w3m-border-radius-master: 0px;

Tailwind Custom Configuration

/* Tailwind classes mapped to CSS variables */
bg-secondary     = var(--secondary)       /* #F9F0E9 */
bg-primary       = var(--primary)         /* #F9F0E9 */
border-black     = #000000
rounded-md       = 6px                    /* windows */
rounded-[4px]    = 4px                    /* buttons, content areas */
rounded-[2px]    = 2px                    /* control buttons */
shadow-is-component = 0px 50px 80px -50px rgba(0,0,0,0.3)
p-1.5            = 6px                    /* window internal padding */
h-8              = 32px                   /* menu bar height */

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.