# Poolsuite

파스텔 핑크(#f6d5d5)에 90년대 OS 윈도우와 도트 폰트가 어우러진 레트로 퓨처리즘의 정수 — 디지털 노스탤지어와 여름 바이브가 만난다.

- taxonomy: retro-futurism · pastel-pink, retro-os, dot-font, media-player, 90s-nostalgia, summer-vibe, window-frame, dock-nav · complexity=high
- page types: app, landing, portfolio
- best for: 레트로·노스탤지어 감성 브랜드, 뮤직·라이프스타일 앱, 크리에이티브 포트폴리오, 문화·이벤트 사이트
- avoid for: 기업 B2B 대시보드, 의료·법률 전문 서비스, 미니멀 SaaS 도구, 무거운 데이터 시각화
- provenance: website (Poolsuite ☼) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Poolsuite — Design Specification

## Overview
Poolsuite is the quintessential retro-futurism web experience. A pastel pink (#f6d5d5) canvas hosts floating OS-style window panels reminiscent of classic Mac/Windows UIs. The design merges 90s computing nostalgia with summer leisure aesthetics through dot-matrix fonts, zero-radius elements, and a dock-style navigation bar.

## Color Architecture
- **Canvas**: Pastel pink oklch(0.901 0.037 17.9)
- **Card/Window**: Warm cream oklch(0.957 0.018 70.2)
- **Accent**: Mint oklch(0.878 0.053 200.7)
- **Foreground**: Black — sharp contrast on pastel backgrounds
- **Borders**: Solid 2px black — OS-style window chrome

## Typography
**Neue Machina** (proprietary monospace). Fallback: **Space Mono**. Uppercase transforms on headings and labels. Small body size (13px) in monospace creates the retro terminal feel.

## Signature Elements
- Zero border-radius on everything
- OS window frames with title bar and close/min/max buttons
- Offset drop shadows (4px/4px)
- Bottom dock navigation with icon tiles
- Subtle grain/noise texture overlay

## Agent Prompt Guide
> Pastel pink canvas, cream windows, mint accents. OS-style window frames, monospace fonts, uppercase headings, zero radius, offset shadows. Dock navigation at bottom. Nostalgic, playful, sun-soaked.

## Known Gaps
- Neue Machina font is proprietary (Space Mono fallback)
- Embedded media player controls are simplified
- Dark mode is fully synthesized


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Poolsuite — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: Neue Machina, monospace;
  --font-serif: Georgia, serif;
  --font-mono: Neue Machina, SF Mono, Menlo, monospace;
  --font-display: Neue Machina, monospace;
  --spacing: 8px;
  --shadow: 4px 4px 8px 0px color-mix(in oklab, oklch(0 0 0) 15%, transparent);
  --ks-display-weight: 700;
  --background: oklch(0.901 0.037 17.9);
  --foreground: oklch(0.000 0.000 0);
  --card: oklch(0.957 0.018 70.2);
  --card-foreground: oklch(0.000 0.000 0);
  --popover: oklch(0.957 0.018 70.2);
  --popover-foreground: oklch(0.000 0.000 0);
  --primary: oklch(0.000 0.000 0);
  --primary-foreground: oklch(0.957 0.018 70.2);
  --secondary: oklch(0.878 0.053 200.7);
  --secondary-foreground: oklch(0.000 0.000 0);
  --muted: oklch(0.812 0.011 63.3);
  --muted-foreground: oklch(0.400 0.010 20);
  --accent: oklch(0.878 0.053 200.7);
  --accent-foreground: oklch(0.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.000 0.000 0);
  --input: oklch(0.812 0.011 63.3);
  --ring: oklch(0.000 0.000 0);
}

.dark {
  --background: oklch(0.200 0.020 20);
  --foreground: oklch(0.901 0.037 17.9);
  --card: oklch(0.250 0.015 60);
  --card-foreground: oklch(0.901 0.037 17.9);
  --popover: oklch(0.250 0.015 60);
  --popover-foreground: oklch(0.901 0.037 17.9);
  --primary: oklch(0.901 0.037 17.9);
  --primary-foreground: oklch(0.200 0.020 20);
  --secondary: oklch(0.350 0.030 200);
  --secondary-foreground: oklch(0.901 0.037 17.9);
  --muted: oklch(0.300 0.010 60);
  --muted-foreground: oklch(0.600 0.015 20);
  --accent: oklch(0.350 0.030 200);
  --accent-foreground: oklch(0.901 0.037 17.9);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.400 0.015 20);
  --input: oklch(0.300 0.010 60);
  --ring: oklch(0.901 0.037 17.9);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 4rem 2rem; min-height: 80vh; position: relative;">
  <div style="max-width: 640px; margin: 2rem auto; background: var(--card); border: 2px solid var(--border); box-shadow: 4px 4px 0 var(--border);">
    <div style="background: var(--border); color: var(--card); padding: 4px 8px; font-family: monospace; font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
      <span>✕ ☐ ✦</span>
      <span style="font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">POOLSUITE</span>
      <span></span>
    </div>
    <div style="padding: 2rem; text-align: center;">
      <div style="width: 100%; aspect-ratio: 16/9; background: var(--muted); margin-bottom: 1rem;"></div>
      <p style="font-family: monospace; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; margin: 0 0 0.5rem;">Poolsuite: ON AIR</p>
      <p style="font-family: monospace; font-size: 0.75rem; color: var(--muted-foreground); margin: 0 0 1rem;">Vantage — Send Love (Fibre Remix)</p>
      <div style="display: flex; gap: 0.5rem; justify-content: center;">
        <button style="background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--border); padding: 0.5rem 1rem; font-family: monospace; font-weight: 700; cursor: pointer;">▶ PLAY</button>
        <button style="background: var(--card); color: var(--foreground); border: 2px solid var(--border); padding: 0.5rem 1rem; font-family: monospace; font-weight: 700; cursor: pointer;">■ STOP</button>
      </div>
    </div>
  </div>
  <nav style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); background: var(--card); border: 2px solid var(--border); border-bottom: none; padding: 0.5rem 1rem; display: flex; gap: 1.5rem;">
    <span style="font-family: monospace; font-size: 0.6875rem; text-transform: uppercase; cursor: pointer;">🍸 Player</span>
    <span style="font-family: monospace; font-size: 0.6875rem; text-transform: uppercase; cursor: pointer;">📰 News</span>
    <span style="font-family: monospace; font-size: 0.6875rem; text-transform: uppercase; cursor: pointer;">💿 Mixes</span>
    <span style="font-family: monospace; font-size: 0.6875rem; text-transform: uppercase; cursor: pointer;">⚙ Settings</span>
  </nav>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/poolsuite.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.