Poolsuite Riviera

---
name: poolsuite-riviera
description: Apply the Poolsuite Riviera visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Poolsuite Riviera, mentions poolsuite aesthetic, poolside fm style, riviera leisure software, or describes faux-OS window chrome, sunset gradient skies, serif and pixel type mix — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Poolsuite Riviera Design System

80s Riviera leisure-software pastiche: faux-OS windows with title bars and close buttons floating over sunset gradients, elegant garamond italics beside chunky pixel type, cream grounds, grain, and a tone that treats vacation as a serious product category.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Poolsuite Riviera.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (poolsuite aesthetic, poolside fm style, riviera leisure software, leisureware, 80s riviera web, vacation software), or describes its traits: faux-OS window chrome; sunset gradient skies; serif and pixel type mix; cream retro-computer ground; grain and dither texture; leisure-brand deadpan copy.

## Design tokens

### Color palette

- Sun-bleached cream, like an aged Macintosh case: `#f6ecda` (--color-bg)
- Window and panel fills: `#fdf7ea` (--color-surface)
- Deep espresso-brown text and chrome lines: `#2f2118` (--color-text)
- Secondary text and pixel-label captions: `#6b5847` (--color-text-muted)
- Campari red-orange for links, buttons, and hot details: `#b93a1a` (--color-accent)
- Sunset gradient top stop, apricot: `#ffb457` (--color-sunset-1)
- Sunset gradient middle stop, guava pink: `#ff7d92` (--color-sunset-2)
- Sunset gradient bottom stop, dusk violet: `#a06ee0` (--color-sunset-3)
- 1px OS chrome lines and window edges: `#2f2118` (--color-border)

### Typography

- Display / headings: EB Garamond (fallback: Garamond, Georgia, serif) (ideal: Editorial New, premium — use EB Garamond as the free substitute)
- Body: Work Sans (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Silkscreen (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.15, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96 — Desktop-metaphor density: windows and panels cluster and slightly overlap like a well-used Mac desktop, with the sunset sky breathing behind them.
- Border radius: none 0px, sm 4px, window 8px — Slightly rounded window corners like early Mac OS; controls stay square or 4px.
- Border treatment: 1px solid #2f2118 — Uniform 1px espresso chrome on every window, button, and field — the OS metaphor depends on the consistent line weight.

### Shadows

- window: `2px 2px 0 rgba(47, 33, 24, 0.35)` — Default hard offset on faux-OS windows
- window-active: `4px 4px 0 rgba(47, 33, 24, 0.4)` — Focused/front window
- haze: `0 12px 40px rgba(160, 110, 224, 0.25)` — Violet dusk haze under panels floating on the gradient sky

### Layout

- Max content width: 1280px
- Hero as desktop: sunset gradient sky with 2-4 overlapping faux-OS windows (player, mailing list, gallery)
- Below the fold, cream sections with 1px-ruled panels continue the hardware feel
- Pixel-type labels (Silkscreen) for UI chrome; garamond for headlines and romance
- A menu-bar style strip (small pixel type, separators) can serve as nav or footer

### Effects

- Sunset gradient backdrop (apricot to guava to dusk violet)
- Film grain / dither overlay at low opacity across imagery
- Pixel icons and cursor-adjacent details in the espresso ink
- Marquee ticker of track names or destinations in pixel type
- Palm or riviera imagery treated with heavy grain inside windows

### Motion

- Easing: cubic-bezier(0.2, 0, 0, 1); durations 100ms / 200ms / 400ms
- Windows open with a quick scale-up like classic Mac zoom rects
- Buttons depress 1px with the shadow collapsing, hardware-style
- The gradient sky shifts hue very slowly over minutes, like an actual sunset
- Marquees pause on hover and under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f6ecda;
  --color-surface: #fdf7ea;
  --color-text: #2f2118;
  --color-text-muted: #6b5847;
  --color-accent: #b93a1a;
  --color-sunset-1: #ffb457;
  --color-sunset-2: #ff7d92;
  --color-sunset-3: #a06ee0;
  --color-border: #2f2118;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-window: 8px;
  --shadow-window: 2px 2px 0 rgba(47, 33, 24, 0.35);
  --shadow-window-active: 4px 4px 0 rgba(47, 33, 24, 0.4);
  --shadow-haze: 0 12px 40px rgba(160, 110, 224, 0.25);
  --border-default: 1px solid #2f2118;
  --font-display: "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: Silkscreen, "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Work+Sans:wght@400;500&family=Silkscreen:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Menu-bar strip in pixel type on cream — wordmark left, links as menu items with 1px separators, clock-style detail right
- **Hero:** Sunset-gradient sky with a garamond-italic headline and overlapping faux-OS windows; primary window holds the product (player, list, shop)
- **Card:** Faux-OS window: title bar with pixel-type label and close dot, 1px chrome, hard offset shadow, cream content area
- **Button (primary):** Campari-red fill, cream text, 1px espresso border, 4px radius, hardware press effect
- **Button (secondary):** Cream fill, 1px espresso border, espresso text; hover tints toward apricot
- **Form fields:** Cream inset field with 1px border and pixel-type placeholder; focus thickens the border and adds a subtle inner shadow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The leisure window: a draggable-feeling faux-OS panel — 1px dark chrome, title bar with dots and a close button, pixel-type labels — floating over an orange-to-pink-to-violet sunset gradient, its content set in elegant garamond italic. Spend boldness here; keep everything else quiet.

## Do

- Commit to the OS metaphor: every panel gets a title bar, chrome line, and consistent 1px border
- Pair the garamond italic and pixel type constantly — the collision is the brand
- Keep the sunset gradient behind glass: content always sits in windows, not raw on the gradient
- Write deadpan luxurious copy — 'executive leisure', 'quality summer software'

## Don't

- Don't drift into vaporwave — no glitch, no Greek busts, no neon cyan/magenta
- Don't use modern soft shadows or frosted glass on the windows; depth is hard offset only
- Don't set long body copy in pixel type — Silkscreen is for labels and chrome
- Don't crowd the sky: two to four windows, artfully overlapped, is the composition

## Accessibility notes

- Espresso text on cream passes comfortably, but pixel-type labels (Silkscreen) are hard to read below 12px — keep them for short labels and provide real text equivalents
- Text must never sit directly on the sunset gradient mid-stops; keep copy inside cream windows
- The slow hue-shifting sky and marquees must respect prefers-reduced-motion

## Reference sites

- Poolsuite FM: https://poolsuite.net
- Vacation Inc: https://vacation.inc
- CARI (Consumer Aesthetics Research Institute): https://cari.institute

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip poolsuite-riviera.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/poolsuite-riviera.json

Settings → Capabilities → Skills → Upload skill → poolsuite-riviera.zip