---
version: alpha
name: Clicky
description: "A friend's cluttered Mac desktop turned homepage — Aqua-glass pills and stray .mov windows on dotted grey."
colors:
  on-surface: "#000000"
  surface: "#F5F5F5"
  outline: "#626262"
  primary: "#0F7FFF"
  window-white: "#FFFFFF"
  chrome-silver: "#E9E8EA"
  media-dark: "#1A1A1A"
  indigo-ring: "#221898"
  sky-stroke: "#65A8EF"
  badge-blue: "#1B49ED"
  tag-red: "#ED1B26"
  sticker-yellow: "#FEEA3D"
  sticker-orange: "#FF6600"
typography:
  filename-caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  menu-fine-print:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-nav:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  button-label:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  subhead-accent-link:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading-small:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  heading:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  section-display:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  hero-display:
    fontFamily: Inter
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
rounded:
  pill-buttons: 999px
  windows-cards: 8px
  hero-video-frame: 24px
  inner-media-panels: 16px
  name-tags-badges: 4px
  micro-chips-details: 3px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
---
# Clicky — Style Reference
> A friend's cluttered Mac desktop turned homepage — Aqua-glass pills and stray .mov windows on dotted grey.

**Theme:** light

Clicky (heyclicky.com) markets an AI buddy that lives on a Mac by *becoming* a Mac: the entire page is a faithful desktop fiction. The canvas is the flat system grey `#F5F5F5` stamped with a faint dot grid, a real menu bar runs across the top with traffic-light windows scattered beneath it like a messy Finder session, and every "screenshot" is a draggable QuickTime window with a lowercase filename caption (`it-draws-too-omg.mov`). The palette is almost entirely OS chrome — greys, white window bodies, pure-black Inter — so the one saturated move lands hard: a glossy Aqua-gradient pill (`#FAFCFF` melting into `#6FB3F6`) for "download for mac", a direct quotation of 2000s-era Mac buttons, highlight and inset shadows included. Type is lowercase everywhere at a conversational weight 500 — an 88px "heyclicky" wordmark that reads like a filename, not a logo — while kaomoji `(¬_¬)` and HELLO-my-name-is stickers do the personality work. Unusually for a modern landing page, real soft drop shadows are structural: windows float exactly the way macOS floats them. The system's genius is that its "decoration" is all diegetic — nothing is ornament, everything is desktop.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Desktop Grey | `#F5F5F5` | `--color-desktop` | The canvas *and* the menu bar — the whole stage is one flat system grey, patterned only by the faint dot grid. |
| Window White | `#FFFFFF` | `--color-window` | Window bodies, name-tag faces, card fills — content always sits inside white "glass" the way a Mac window does. |
| Chrome Silver | `#E9E8EA` | `--color-chrome` | The silver-pill resting grey and quiet chrome details; the bottom stop of the secondary button's gloss. |
| Ink Black | `#000000` | `--color-ink` | All primary text, the wordmark, and the logo's 3px round strokes. Clicky uses true `#000`, not a soft black — screen-honest, like system UI. |
| Media Dark | `#1A1A1A` | `--color-media-dark` | Dark media surfaces only — terminal window fills and video letterboxing inside the .mov windows. Never a section background. |
| Slate | `#626262` | `--color-slate` | The 1px border on silver pills and the muted grey register (nav links, filename captions read in this range). |
| Clicky Blue | `#0F7FFF` | `--color-blue` | The single functional accent as flat color — the "get heyclicky" menu-bar link at 20px weight 500. Text only; fills go through the Aqua gradient instead. |
| Aqua Glass | `linear-gradient(180deg, #FAFCFF, #6FB3F6)` | `--color-aqua` | The primary CTA fill *(pixel-sampled — the computed scan reports `bg: null` because it is a gradient, not a flat hex)*: near-white gloss at the top melting to saturated sky at the bottom lip. |
| Indigo Ring | `#221898` | `--color-indigo-ring` | The 1px hairline that rings the Aqua CTA — a deep indigo that keeps the glass button crisp against `#F5F5F5`. |
| Sky Stroke | `#65A8EF` | `--color-sky-stroke` | The lighter companion blue stroke on the glass CTA's edge — the "wet" rim of the Aqua treatment. |
| Badge Blue | `#1B49ED` | `--color-badge-blue` | *Collage only.* The band of the blue HELLO-my-name-is sticker. Never a UI fill. |
| Tag Red | `#ED1B26` | `--color-tag-red` | *Collage only.* The red name-tag band. Decorative sticker ink, fenced off from functional UI. |
| Sticker Yellow | `#FEEA3D` | `--color-sticker-yellow` | *Collage only.* Sticker/collage yellow scattered in the desktop clutter. |
| Sticker Orange | `#FF6600` | `--color-sticker-orange` | *Collage only.* Collage accent inside the desktop clutter — never touches buttons, links, or text. |

The collage colors (`#1B49ED`, `#ED1B26`, `#FEEA3D`, `#FF6600`) belong to stickers, tags, and gifs strewn across the desktop. They are the mess, not the system — functional UI speaks only grey, black, and blue.

## Tokens — Typography
### Inter — the whole voice: 88px display down to 12px filename captions, lowercase throughout, weight 500 as the default emphasis · `--font-inter`
- **Substitute:** SF Pro, Helvetica Neue, system-ui
- **Weights:** 300, 400, 500, 700, 800
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 28px, 56px, 88px
- **Line height:** ~1.0–1.1 at display sizes (single-line lockups), ~1.5 at body
- **Letter spacing:** near-neutral; the 88px wordmark sets tight but never styled — it should read like a filename, not a logotype
- **Role:** Everything textual. The signature is weight 500 at *every* scale — the 88px hero, the 56px section heads, and the 18px button labels all sit at medium, so the page talks at one calm volume. 700/800 exist in the loaded range but are reserved for the rare heavy mark (the menu-bar wordmark reads a step bolder than everything else).

### Geist Mono — the desktop's typewritten details · `--font-mono`
- **Substitute:** SF Mono, JetBrains Mono, IBM Plex Mono
- **Weights:** 400
- **Sizes:** 12px, 14px
- **Line height:** ~1.4
- **Letter spacing:** natural mono
- **Role:** The machine-text layer of the fiction — the small typewritten details (kaomoji glyph art like `^ω^` and `(¬_¬)` sit in this even, monospaced rhythm). Used sparingly; it is seasoning, never body copy.

### Instrument Serif — a loaded reserve, 400 italic only · `--font-serif`
- **Substitute:** Georgia italic, Times New Roman italic
- **Weights:** 400 (italic)
- **Sizes:** —
- **Line height:** —
- **Letter spacing:** —
- **Role:** Present in the page's loaded font set (400 italic) but not visible in the hero viewport — an occasional italic accent held in reserve deeper in the page. Do not lean on it; the system's voice is Inter.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Filename caption | 12px | 1.4 | — | `--text-caption` |
| Menu / fine print | 14px | 1.4 | — | `--text-sm` |
| Body / nav | 16px | 1.5 | — | `--text-body` |
| Button label | 18px | 1.2 | — | `--text-button` |
| Subhead / accent link | 20px | 1.4 | — | `--text-lead` |
| Heading small | 24px | 1.2 | — | `--text-heading-sm` |
| Heading | 28px | 1.2 | — | `--text-heading` |
| Section display | 56px | 1.1 | — | `--text-title` |
| Hero display | 88px | 1.0 | — | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable — the desktop is cluttered on purpose, but each artifact keeps generous air

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |
| 2xl | 64px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Pill buttons | 999px (100px on some pills — both fully round at button height) |
| Windows / cards | 8px |
| Hero video frame | 24px |
| Inner media / panels | 16px |
| Name tags / badges | 4px |
| Micro chips / details | 2–3px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Window float | `rgba(0,0,0,0.12) 0px 10px 24px 0px` | `--shadow-window` |
| Soft card | `rgba(0,0,0,0.08) 0px 4px 12px 0px` | `--shadow-soft` |
| Aqua glass | `rgba(0,0,0,0.12) 0px 8px 20px 0px, rgba(255,255,255,0.35) 0px -11px 5px -9px inset, rgba(0,0,0,0.18) 0px -8px 7px -6px inset` | `--shadow-glass` |
| Glass overlay | `rgba(0,0,0,0.12) 0px 10px 24px 0px, rgba(255,255,255,0.8) 0px 1px 1px 0px inset, rgba(255,255,255,0.25) 0px 0px 0px 1px inset` | `--shadow-glass-overlay` |

### Layout
- **Page max-width:** effectively 100vw — the desktop IS the layout; the hero lockup centers in a ~700px column
- **Section gap:** the hero viewport is one continuous desktop scene; artifacts scatter to the edges
- **Card padding:** windows are edge-to-edge media with a slim ~24px titlebar; pills pad `0 20px 1px 16px`
- **Element gap:** ~12px between the paired CTA pills; ~8px between a window and its filename caption

## Components
### macOS Menu Bar
**Role:** The site's navigation, disguised as the system menu bar — the first beat of the desktop fiction.
Full-width strip in the same `#F5F5F5` as the desktop (no separation — it *is* the OS chrome). Left: "heyclicky" wordmark in black at ~16px, a weight heavier than anything else on the page, followed by nav items ("features", "pricing") in muted grey. Dead center: the wink logo mark. Right: a faux system tray — wifi, audio, bluetooth, battery glyphs, a "6:11 PM" clock — ending in the only colored nav item: an Apple glyph + "get heyclicky" in `#0F7FFF` at weight 500. The tray icons are non-functional set dressing; the blue link is the real conversion path.

### Aqua Glass CTA (primary)
**Role:** The one saturated action on the page — "download for mac", with an Apple glyph.
Fully-round pill (999px), 18px Inter weight 500 **black** label on a vertical Aqua gradient: `#FAFCFF` gloss at the top melting through `#ABCCFF` to `#6FB3F6` at the bottom lip *(pixel-sampled — do not flatten this to a solid blue; the gradient is the point)*. Ringed by a 1px `#221898` indigo hairline with the lighter `#65A8EF` sky stroke at the wet rim, and carrying the full glass shadow stack: `0 8px 20px rgba(0,0,0,0.12)` drop plus white top-inset highlight and dark bottom-inset. Padding `0 20px 1px 16px`. This is a loving 2000s-Aqua quotation, and it is the only place the palette turns saturated.

### Silver Glass Pill (secondary)
**Role:** The lower-commitment sibling — "windows waitlist", with a Windows glyph.
Same 999px pill geometry and 18px weight-500 black label, but the fill runs `#FFFFFF` down to the `#E9E8EA` chrome silver — a whisper of the same gloss with a 1px `#626262` border. Sits ~12px right of the Aqua CTA. The pair reads as two OS-native buttons: one "default" (blue glass), one plain — hierarchy by material, not by size.

### Translucent Play Pill
**Role:** The video-overlay control — "play video" floating over the hero .mov.
A frosted-glass pill: translucent blur over the video (no flat fill — sampled pixels are the video showing through), white 18px weight-500 label with a play glyph, finished with the glass-overlay shadow (`0 1px 1px` white inset highlight + a 1px inner white ring at 25%). It reads as a QuickTime control, not a web button.

### Desktop Window (.mov card)
**Role:** The system's content card — every screenshot and demo is framed as a floating Mac window.
8px-radius white window, slim titlebar in a soft silver gradient (`#F0F0F0` → `#E4E3E4`, pixel-sampled), traffic-light cluster top-left, a small grey "x" top-right, media filling the body edge-to-edge (dark clips sit on `#1A1A1A`). Floats on `rgba(0,0,0,0.12) 0 10px 24px` — real shadows, used exactly as macOS uses them. Windows scatter at slight offsets around the hero like a genuinely messy desktop.

### Traffic-Light Cluster
**Role:** Window chrome — the red/yellow/green dots that certify each card as "a real Mac window."
Three ~10px circles at the titlebar's left: red `#FF736A`, yellow `#FEBC2E`, green `#19C332` *(pixel-sampled)*. Purely diegetic — they never become status indicators or semantic colors elsewhere in the UI.

### Filename Caption
**Role:** The label under every window — content titled like files, not features.
12px muted grey (reads ≈`#A6A6A6` on the desktop; the `#626262` slate is the token anchor), centered under its window, all-lowercase with the extension kept: `usecase.mov`, `nohandstricklol.mov`, `daddyshome.mov`. The naming *is* the copywriting — jokes filed as filenames.

### Hero Lockup
**Role:** The single centered message amid the clutter.
An 88px Inter weight-500 pure-black "heyclicky" — lowercase, unstyled, a filename blown up to display size — over a 20px black subhead ("an ai buddy that lives on your mac"), then the CTA pill pair, then one line of 14px muted fine print ("100% free. sonoma 14.2 or higher"). Everything centered; the surrounding windows and stickers orbit it without ever touching the column.

### Hero Video Frame
**Role:** The main demo — the one window big enough to be a stage.
A large 24px-radius media frame (`hello.mov`) floating on the window shadow, full-bleed video inside, the translucent play pill centered on top, filename caption below. Being the largest rounded object on the page, it gets the softest, deepest float.

### HELLO Name-Tag Sticker
**Role:** Personality artifact — the product introducing itself like a conference attendee.
The classic "HELLO my name is" tag: a saturated band (`#ED1B26` red, or the `#1B49ED` blue variant) over a white 4px-radius body carrying a handwritten "heyclicky" scrawl, pasted at a slight rotation. Pure collage — it borrows real-world sticker vernacular so the AI reads as a *buddy*, not a platform.

### Dot-Grid Desktop Canvas
**Role:** The stage — turns flat grey into a surface with coordinates.
`#F5F5F5` stamped with a faint dot grid (~34px pitch, dots sampling ≈`#D9D9D9`) — just enough texture to say "things are placed here", like an icon-alignment grid. Desktop props (blue folders, a trash can, a retro phone, gifs, kaomoji in Geist Mono) sit on it as pure set dressing.

### Wink Logo Mark
**Role:** The face of the product — an abstract winking smiley drawn like a line gesture.
Black 3px round-capped strokes forming a zigzag eye, a caret eye, and a flat mouth (the SVG carries paired open/shut paths — it blinks). No fill, no container, no color. It sits dead-center in the menu bar where macOS would put nothing — the one cheeky violation of the OS it imitates.

## Do's and Don'ts
### Do
- Keep the entire stage `#F5F5F5` — canvas *and* menu bar are one grey; only window bodies go white.
- Render the primary CTA as Aqua glass: `#FAFCFF`→`#6FB3F6` vertical gradient, 1px `#221898` ring, white top-inset highlight, dark bottom-inset, black 18px weight-500 label. Never a flat blue fill.
- Use real soft shadows (`0 10px 24px rgba(0,0,0,0.12)`) on windows and media — this system floats things the way macOS does; flatness would break the fiction.
- Write everything lowercase — the wordmark, headings, buttons, captions. Capital letters break character.
- Hold Inter at weight 500 from 18px to 88px; hierarchy comes from size, and the one heavier weight belongs to the menu-bar wordmark alone.
- Frame every screenshot or demo as a titlebarred window with traffic lights and a lowercase `.mov` filename caption beneath.
- Keep `#0F7FFF` for flat-color accents only (the "get heyclicky" link); saturated *fills* always go through the Aqua gradient.

### Don't
- Don't use the collage colors (`#1B49ED`, `#ED1B26`, `#FEEA3D`, `#FF6600`) for buttons, links, text, or backgrounds — they live on stickers and clutter only.
- Don't soften the black: text and strokes are true `#000000`, screen-honest like system UI — no warm near-blacks.
- Don't flatten the glass. A solid-fill pill with no gradient and no inset highlights is the fastest way to lose the brand.
- Don't tidy the desktop into a grid of cards. The scatter — offsets, rotations, overlaps — is deliberate; only the hero column is aligned.
- Don't add a second functional accent. Grey, black, and one blue (flat `#0F7FFF` or gradient Aqua) is the entire working palette.
- Don't let the traffic-light dots leak into semantics (success/warning/error) — they are window chrome, nothing more.
- Don't set headings bold. 500 at 88px is the voice; 700/800 would make the buddy shout.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Desktop | `#F5F5F5` | The whole stage — page canvas and menu bar, textured by the faint dot grid. |
| 1 | Window | `#FFFFFF` | Floating window bodies, name-tag faces, card fills — all content containers. |
| 1b | Titlebar | `#F0F0F0` → `#E4E3E4` | Window chrome strip *(pixel-sampled gradient)* — a step of silver separating chrome from content. |
| 2 | Chrome Silver | `#E9E8EA` | Silver-pill fills and quiet chrome greys. |
| Dark | Media Dark | `#1A1A1A` | Terminal fills and video letterboxing *inside* windows — never a page surface. |

## Elevation
Clicky is the rare modern landing system that uses real drop shadows — because macOS does. Every window, sticker, and pill floats on the diffuse `rgba(0,0,0,0.12) 0 10px 24px` stack (`0 4px 12px @ 0.08` for smaller artifacts), exactly mimicking OS window depth. Buttons add a second dimension: *material* elevation via inset light — the Aqua CTA's white top-inset highlight and dark bottom-inset make it convex; the play pill's 1px inner white ring makes it glass. There are no borders doing elevation work (borders here are ornament: the CTA's indigo ring, the silver pill's slate hairline). The hierarchy is literal physics: the desktop is matte, windows hover ~10px above it, and glass buttons bulge off whatever they sit on.

## Imagery
All imagery is diegetic screen-culture: screen recordings of the product inside QuickTime-style windows, a full-bleed hero film (`hello.mov` — two guys in a snack aisle, shot on video, saturated and human), and a strewn layer of desktop artifacts — blue system folders, a trash can, a Y2K flip phone, glitter gifs, SpongeBob memes, HELLO name tags, and Geist Mono kaomoji `^ω^ (¬_¬) { ^-^ }`. Nothing is art-directed studio photography; everything looks *found*, saved-to-desktop, screenshot-tier on purpose. The logo is the only drawn mark: black round-capped line strokes, no fill. Rule of thumb: if an image wouldn't plausibly live on a 2007 Mac desktop, it doesn't belong here.

## Layout
The page is a desktop, not a document. A menu bar pins the top edge; below it, one full-viewport scene: the hero lockup (display wordmark → subhead → CTA pair → fine print) dead-center in a ~700px column, with 8–10 windows, stickers, and icons scattered to the margins at slight offsets and rotations — dense at the edges, empty around the center, so the eye lands on "heyclicky" first and wanders the clutter second. The oversized hero video anchors the lower half. There are no section bands, no alternating backgrounds, no divider rules — the single `#F5F5F5` surface runs continuously, and grouping is done by proximity and the dot grid. Compositional law: aligned center, chaotic perimeter.

## The Desktop Fiction
The signature move is total commitment to the bit. Most product sites *show* screenshots of an OS; Clicky *is* the OS — menu bar, window chrome, traffic lights, filename captions, even a fake clock and battery meter. This does three jobs at once: it demonstrates the product's habitat (an assistant that lives on the desktop), it lets nostalgia do the emotional labor (the Aqua-gradient CTA is a direct 2000s Mac quotation, inset highlights and all), and it makes every content block self-explaining — a demo isn't a "feature card", it's `heyclicky-draw.mov`, exactly as it would appear on your machine. The typography plays along: one family, lowercase, weight 500 at every size, so the 88px hero reads as a filename that got big rather than a logo that got designed. Break the fiction anywhere — a capital letter, a flat blue button, a tidy card grid — and the whole charm collapses.

## Agent Prompt Guide
## Quick Color Reference
- background: `#F5F5F5` (canvas and menu bar; faint ≈`#D9D9D9` dot grid)
- text: `#000000` (muted labels/nav in the `#626262` slate register; white on dark media)
- surface: `#FFFFFF` windows (titlebar `#F0F0F0`→`#E4E3E4`; silver `#E9E8EA`; dark media `#1A1A1A`)
- border: `#626262` on silver pills; `#221898` + `#65A8EF` rings on the Aqua CTA
- accent: `#0F7FFF` (flat text accent — "get heyclicky")
- primary action: Aqua glass gradient `#FAFCFF` → `#6FB3F6`, black label (never a flat fill)

## Example Component Prompts
1. **Aqua glass CTA**: A fully-round pill button (border-radius 999px), padding 0 20px 1px 16px, label "download for mac" in 18px Inter weight 500 pure black with an Apple glyph left. Fill: vertical linear-gradient from `#FAFCFF` through `#ABCCFF` to `#6FB3F6`. Border: 1px `#221898` with a lighter `#65A8EF` rim stroke. Shadow: `rgba(0,0,0,0.12) 0 8px 20px`, plus `rgba(255,255,255,0.35) 0 -11px 5px -9px inset` and `rgba(0,0,0,0.18) 0 -8px 7px -6px inset` so the button reads convex, like a 2000s Mac Aqua control.
2. **Desktop window card**: An 8px-radius white `#FFFFFF` window on shadow `rgba(0,0,0,0.12) 0 10px 24px`. Titlebar: ~24px strip with a `#F0F0F0`→`#E4E3E4` vertical gradient, three 10px dots left (`#FF736A`, `#FEBC2E`, `#19C332`), small grey "x" right. Body: edge-to-edge video/screenshot (dark clips on `#1A1A1A`). Below the window, 8px down: a centered 12px muted-grey lowercase caption like `usecase.mov`.
3. **Hero lockup**: Centered on `#F5F5F5` with a faint ≈34px dot grid: "heyclicky" at 88px Inter weight 500 `#000000` lowercase, then a 20px black subhead "an ai buddy that lives on your mac", then two pills 12px apart — the Aqua glass primary and a silver secondary (`#FFFFFF`→`#E9E8EA` fill, 1px `#626262` border, black 18px label, Windows glyph) — then 14px muted fine print "100% free. sonoma 14.2 or higher".
4. **macOS menu bar**: A full-width `#F5F5F5` bar, ~40px tall. Left: "heyclicky" in black ~16px (heaviest weight on the page) + "features" and "pricing" in muted grey 16px. Center: a small black line-drawn winking-face mark (3px round-capped strokes, no fill). Right: grey wifi/audio/bluetooth/battery glyphs, a "6:11 PM" clock at 14px, then an Apple glyph + "get heyclicky" in `#0F7FFF` 20px-register weight 500.
5. **Translucent play pill**: A 999px pill floating centered over a 24px-radius video frame: backdrop-blurred translucent fill (no flat color — the video shows through), white 18px weight-500 label "play video" with a play glyph, shadow `rgba(0,0,0,0.12) 0 10px 24px` plus `rgba(255,255,255,0.8) 0 1px 1px inset` and a 1px inner ring `rgba(255,255,255,0.25) 0 0 0 1px inset`.

## Similar Brands
- **Apple's Aqua era (Mac OS X, 2000s)** — the direct ancestor: glossy gradient pills, inset highlights, brushed-grey chrome, traffic-light windows.
- **Poolsuite** — the same total commitment to a retro-OS desktop fiction as the entire site interface.
- **The Browser Company (Arc)** — Mac-native software marketed with memes, stickers, and lowercase charm instead of enterprise polish.
- **Amie** — playful Mac-app branding where the product's on-screen personality *is* the campaign.
- **Panic** — the veteran Mac indie register: OS-faithful chrome, humane copy, and jokes that only feel right on a Mac.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — functional */
  --color-desktop: #F5F5F5;
  --color-window: #FFFFFF;
  --color-chrome: #E9E8EA;
  --color-ink: #000000;
  --color-media-dark: #1A1A1A;
  --color-slate: #626262;
  --color-blue: #0F7FFF;
  --color-aqua-top: #FAFCFF;
  --color-aqua-bottom: #6FB3F6;
  --color-aqua: linear-gradient(180deg, var(--color-aqua-top), var(--color-aqua-bottom));
  --color-indigo-ring: #221898;
  --color-sky-stroke: #65A8EF;

  /* Colors — collage (decorative only) */
  --color-badge-blue: #1B49ED;
  --color-tag-red: #ED1B26;
  --color-sticker-yellow: #FEEA3D;
  --color-sticker-orange: #FF6600;

  /* Typography — Families */
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-button: 18px;
  --text-lead: 20px;
  --text-heading-sm: 24px;
  --text-heading: 28px;
  --text-title: 56px;
  --text-display: 88px;
  --leading-display: 1.0;
  --leading-title: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-caption: 1.4;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;

  /* Border Radius */
  --radius-micro: 2px;
  --radius-tag: 4px;
  --radius-window: 8px;
  --radius-media: 16px;
  --radius-hero: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-window: rgba(0, 0, 0, 0.12) 0px 10px 24px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
  --shadow-glass: rgba(0, 0, 0, 0.12) 0px 8px 20px 0px, rgba(255, 255, 255, 0.35) 0px -11px 5px -9px inset, rgba(0, 0, 0, 0.18) 0px -8px 7px -6px inset;
  --shadow-glass-overlay: rgba(0, 0, 0, 0.12) 0px 10px 24px 0px, rgba(255, 255, 255, 0.8) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — functional */
  --color-desktop: #F5F5F5;
  --color-window: #FFFFFF;
  --color-chrome: #E9E8EA;
  --color-ink: #000000;
  --color-media-dark: #1A1A1A;
  --color-slate: #626262;
  --color-blue: #0F7FFF;
  --color-aqua-top: #FAFCFF;
  --color-aqua-bottom: #6FB3F6;
  --color-indigo-ring: #221898;
  --color-sky-stroke: #65A8EF;

  /* Colors — collage (decorative only) */
  --color-badge-blue: #1B49ED;
  --color-tag-red: #ED1B26;
  --color-sticker-yellow: #FEEA3D;
  --color-sticker-orange: #FF6600;

  /* Typography — Families */
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-button: 18px;
  --text-lead: 20px;
  --text-heading-sm: 24px;
  --text-heading: 28px;
  --text-title: 56px;
  --text-display: 88px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;

  /* Border Radius */
  --radius-micro: 2px;
  --radius-tag: 4px;
  --radius-window: 8px;
  --radius-media: 16px;
  --radius-hero: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-window: rgba(0, 0, 0, 0.12) 0px 10px 24px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
  --shadow-glass: rgba(0, 0, 0, 0.12) 0px 8px 20px 0px, rgba(255, 255, 255, 0.35) 0px -11px 5px -9px inset, rgba(0, 0, 0, 0.18) 0px -8px 7px -6px inset;
  --shadow-glass-overlay: rgba(0, 0, 0, 0.12) 0px 10px 24px 0px, rgba(255, 255, 255, 0.8) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset;
}
```