# Design Context

> 3 curated reference(s). Steal the moves, not the pixels.

## Build from the references

Apply: pick ONE family as the primary direction; honor the relevant steal-notes;
commit to its character rather than automatically making it quieter.

1. Establish the actual audience, task, content, and constraints. Preserve working behavior and factual copy. A gallery, a checkout, and a reading surface need different compositions even in the same family.
2. Inspect the chosen references visually when accessible. Notes are recorded evidence; a URL alone is not proof you have seen a page. If images are unavailable, say so and work from the notes without inventing visual observations.
3. Choose one anchor reference in that family for the overall composition and type hierarchy. Add supporting references only for named moves the anchor does not cover. Alternatives are separate directions, never ingredients to average together.
4. Before coding, write a compact decision sheet: reference + exact note, target element, concrete implementation decision, and how you will verify it. Resolve conflicting notes explicitly. Apply moves that serve this content; do not force every note into one page.
5. Derive typography roles, spacing, and a complete palette from the anchor and compatible supporting evidence. Keep font pairings and palette relationships intact. Frequency across unrelated references is not a design system. Label new values as implementation decisions, not captured facts.
6. Compose the first viewport and one representative content section with real content. Make one defining move unmistakable: the move supported by the chosen notes. Carry that decision through the full surface, including responsive layouts and interaction states.
7. Render and inspect at phone, intermediate, and desktop widths. Compare the result to the decision sheet and references: hierarchy, type proportions, content density, palette roles, and the defining move. Check contrast, keyboard use, reduced motion, and actual task completion.
8. Identify the largest visible mismatch, fix it, and inspect again. Do not call the design finished from a build passing or an imagined screenshot. Report what was visually verified and what remains unverified.

This workflow is generation guidance. The attributed notes below remain the curator's evidence; implementation choices must not be written back as human-authored steal-notes.

## Reference directions — keep these separate

Committed family: playful. Other families below are alternatives only.

**Playful / Toy-like (playful)**

- Reference #19: Poolsuite FM
  Typefaces together: Chicago / Garamond
  Palette together: #fdf3e3 #1f1f1f #ff8a3d #67c7c2 #f6d34e
  Curated moves: texture/material, motion/interaction
- Reference #20: Figma Config
  Typefaces together: Whyte Inktrap / Whyte
  Palette together: #f4f4f4 #111111 #ff7262 #0acf83 #a259ff
  Curated moves: color, motion/interaction
- Reference #21: Phantom
  Typefaces together: PP Mori / PP Fraktion Mono
  Palette together: #ab9ff2 #1c1c1c #ffdc62 #2ec08b #ff7243
  Curated moves: color, component pattern

Evidence gaps in this selection: typography, grid/layout. Fetch additional notes in this family if needed; otherwise identify these as your own decisions.

## Playful / Toy-like

Saturated color, chunky rounded forms, springy motion, jokes in the copy. Interfaces that feel like objects you want to poke.

### Poolsuite FM (Playful / Toy-like)
- URL: https://poolsuite.net
- Fonts: Chicago, Garamond
- Palette: #fdf3e3 #1f1f1f #ff8a3d #67c7c2 #f6d34e
- Image: /api/images/cap-msc0s96p-g2yixe.png
- STEAL (texture/material): Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture.
- STEAL (motion/interaction): Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand.

### Figma Config (Playful / Toy-like)
- URL: https://config.figma.com
- Fonts: Whyte Inktrap, Whyte
- Palette: #f4f4f4 #111111 #ff7262 #0acf83 #a259ff
- Image: /api/images/cap-msc0se5v-h613ms.png
- STEAL (color): Brand colors used at full saturation but never adjacent — always separated by white or black. Loud yet never muddy.
- STEAL (motion/interaction): Speaker cards squash-and-stretch on hover with spring physics (mass 1, tension 280) — cartoon rules applied to UI.

### Phantom (Playful / Toy-like)
- URL: https://phantom.com
- Fonts: PP Mori, PP Fraktion Mono
- Palette: #ab9ff2 #1c1c1c #ffdc62 #2ec08b #ff7243
- Image: /api/images/cap-msc0sscy-994j73.png
- STEAL (color): Lavender as a primary brand color in crypto — category-defiant palette choice that owns the shelf.
- STEAL (component pattern): Ghost mascot reacts to scroll position and form errors — mascot as system feedback, not decoration.