Opening the vault…
Opening the vault…
Style sheet · 7 references
Saturated color, chunky rounded forms, springy motion, jokes in the copy. Interfaces that feel like objects you want to poke.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Playful / Toy-like — style sheet
> Saturated color, chunky rounded forms, springy motion, jokes in the copy. Interfaces that feel like objects you want to poke.
Derived from 7 curated reference(s) in the `playful` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.
## Type
- Assistant — 1/7
- Chicago — 1/7
- Garamond — 1/7
- PP Fraktion Mono — 1/7
- PP Mori — 1/7
- Whyte — 1/7
- Whyte Inktrap — 1/7
## Color
- `#f9f9f9` light neutral — 3/7
- `#111113` dark neutral — 2/7
- `#1f1f1f` dark neutral — 2/7
- `#f6d34e` chromatic — 2/7
- `#fdf3e3` light neutral — 2/7
- `#6966d9` chromatic — 1/7
- `#6a64e2` chromatic — 1/7
- `#a259ff` chromatic — 1/7
- `#fd3b89` chromatic — 1/7
- `#0099ff` chromatic — 1/7
Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#111113` / `#f9f9f9` — 17.9:1
- `#1f1f1f` / `#f9f9f9` — 15.7:1
- `#111113` / `#fdf3e3` — 17.2:1
- `#1f1f1f` / `#fdf3e3` — 15:1
## Moves
### component pattern
- Ghost mascot reacts to scroll position and form errors — mascot as system feedback, not decoration. — 21-phantom
- [model draft] The first screen is one drop target: three overlapping pink blob shapes centered under the logo, an add-image icon, and "Drop OR Paste" with "Paste" underlined as a link. Steal a single oversized drop zone with paste offered as the second input, for a tool whose only first step is supplying a file. — 89-squoosh-start-screen
- [model draft] The empty canvas is annotated with handwritten hints and hand-drawn arrows pointing at real controls: "Export, preferences, languages, ..." at the menu, "Pick a tool & Start drawing!" at the toolbar, "Shortcuts & help" at the help button. Steal onboarding drawn in the product's own medium and aimed at the actual controls. — 88-excalidraw-empty-canvas
- [model draft] The top-center toolbar holds twelve tools, ten with a single-letter shortcut set small at the icon's lower right (V, R, D, O, A, L, P, T, N, E), and a grey line below explains panning with keycaps for "Scroll wheel" and "Space". Steal the shortcut letter printed on each toolbar button, which teaches the keyboard while the mouse is in use. — 88-excalidraw-empty-canvas
- [model draft] The pattern is built from two values only: ground (natural linen) and float (slightly raised off-white). No outline, no fill colour. The optical vibration comes entirely from the change in surface angle and thread direction, not from hue. — 67-textile-fragment-binakol
### texture/material
- Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture. — 19-poolsuite-fm
- [model draft] The ground is a pale grey-and-white checkerboard, the image editor's transparency convention, so the page reads as an empty image canvas; a "Ready to work offline" toast with "DISMISS" sits at the bottom edge. Steal the medium's own background convention as the app ground, and announce offline readiness in a dismissible toast. — 89-squoosh-start-screen
- [model draft] Alternating diagonal bands of plain weave and supplementary-weft floats create a stepped optical pattern. Each band is two to three threads wide; the weft-float sections sit exactly one thread above the ground, producing a crisp moiré shift when viewed at arm’s length. The repeat unit is a 4×4 block that tiles without visible seam. — 67-textile-fragment-binakol
### color
- Brand colors used at full saturation but never adjacent — always separated by white or black. Loud yet never muddy. — 20-figma-config
- Lavender as a primary brand color in crypto — category-defiant palette choice that owns the shelf. — 21-phantom
- [model draft] Four values only: solid purple, solid blue, black line, and white paper. The purple and blue are used as flat notan masses, never modulated. The white circle is the sole warm accent and the only place where hue and value both change at once. — 68-piper-at-the-gates-of-dawn
### motion/interaction
- Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand. — 19-poolsuite-fm
- Speaker cards squash-and-stretch on hover with spring physics (mass 1, tension 280) — cartoon rules applied to UI. — 20-figma-config
### grid/layout
- [model draft] Below a wave-edged blue band, "Or try one of these:" leads to four circular sample-image thumbnails. Steal sample inputs placed directly under the upload target, so the tool can be tried by someone with no file at hand. — 89-squoosh-start-screen
- [model draft] Composition is built by subordination to a single radiating axis that begins at the figure's raised knee and spirals outward. Every element — limbs, fabric folds, text circle — is attached to that axis; moving any one forces the others to shift to maintain the vortex. — 68-piper-at-the-gates-of-dawn
### copywriting
- [model draft] The center block puts the logo over a three-line warning ("Your drawings are saved in your browser's storage. Browser storage can be cleared unexpectedly. Save your work to a file regularly to avoid losing it.") and then a short menu: Open (Ctrl+O), Help (?), Live collaboration..., Sign up. Steal an empty state that says where the data is stored before the first stroke, followed by the few actions with their shortcuts. — 88-excalidraw-empty-canvas
### typography
- [model draft] The circular title treatment is placed at the optical centre (one-third down from top) and sized so its diameter exactly matches the width of the largest swirling limb. Lettering is treated as notan of line: the white-on-orange circle reads as a single tone mass that interrupts the purple/blue swirl without breaking its rhythm. — 68-piper-at-the-gates-of-dawn
## References
- 19-poolsuite-fm — Poolsuite FM (exemplar)
- 89-squoosh-start-screen — Squoosh — start screen
- 88-excalidraw-empty-canvas — Excalidraw — empty canvas
- 68-piper-at-the-gates-of-dawn — Piper at the Gates of Dawn
- 67-textile-fragment-binakol — Textile fragment (Binakol)
- 20-figma-config — Figma Config
- 21-phantom — PhantomGhost mascot reacts to scroll position and form errors — mascot as system feedback, not decoration.
The first screen is one drop target: three overlapping pink blob shapes centered under the logo, an add-image icon, and "Drop OR Paste" with "Paste" underlined as a link. Steal a single oversized drop zone with paste offered as the second input, for a tool whose only first step is supplying a file.
Squoosh — start screen · model draft
The empty canvas is annotated with handwritten hints and hand-drawn arrows pointing at real controls: "Export, preferences, languages, ..." at the menu, "Pick a tool & Start drawing!" at the toolbar, "Shortcuts & help" at the help button. Steal onboarding drawn in the product's own medium and aimed at the actual controls.
Excalidraw — empty canvas · model draft
The top-center toolbar holds twelve tools, ten with a single-letter shortcut set small at the icon's lower right (V, R, D, O, A, L, P, T, N, E), and a grey line below explains panning with keycaps for "Scroll wheel" and "Space". Steal the shortcut letter printed on each toolbar button, which teaches the keyboard while the mouse is in use.
Excalidraw — empty canvas · model draft
The pattern is built from two values only: ground (natural linen) and float (slightly raised off-white). No outline, no fill colour. The optical vibration comes entirely from the change in surface angle and thread direction, not from hue.
Textile fragment (Binakol) · model draft
Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture.
The ground is a pale grey-and-white checkerboard, the image editor's transparency convention, so the page reads as an empty image canvas; a "Ready to work offline" toast with "DISMISS" sits at the bottom edge. Steal the medium's own background convention as the app ground, and announce offline readiness in a dismissible toast.
Squoosh — start screen · model draft
Alternating diagonal bands of plain weave and supplementary-weft floats create a stepped optical pattern. Each band is two to three threads wide; the weft-float sections sit exactly one thread above the ground, producing a crisp moiré shift when viewed at arm’s length. The repeat unit is a 4×4 block that tiles without visible seam.
Textile fragment (Binakol) · model draft
Brand colors used at full saturation but never adjacent — always separated by white or black. Loud yet never muddy.
Lavender as a primary brand color in crypto — category-defiant palette choice that owns the shelf.
Four values only: solid purple, solid blue, black line, and white paper. The purple and blue are used as flat notan masses, never modulated. The white circle is the sole warm accent and the only place where hue and value both change at once.
Piper at the Gates of Dawn · model draft
Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand.
Speaker cards squash-and-stretch on hover with spring physics (mass 1, tension 280) — cartoon rules applied to UI.
Below a wave-edged blue band, "Or try one of these:" leads to four circular sample-image thumbnails. Steal sample inputs placed directly under the upload target, so the tool can be tried by someone with no file at hand.
Squoosh — start screen · model draft
Composition is built by subordination to a single radiating axis that begins at the figure's raised knee and spirals outward. Every element — limbs, fabric folds, text circle — is attached to that axis; moving any one forces the others to shift to maintain the vortex.
Piper at the Gates of Dawn · model draft
The center block puts the logo over a three-line warning ("Your drawings are saved in your browser's storage. Browser storage can be cleared unexpectedly. Save your work to a file regularly to avoid losing it.") and then a short menu: Open (Ctrl+O), Help (?), Live collaboration..., Sign up. Steal an empty state that says where the data is stored before the first stroke, followed by the few actions with their shortcuts.
Excalidraw — empty canvas · model draft
The circular title treatment is placed at the optical centre (one-third down from top) and sized so its diameter exactly matches the width of the largest swirling limb. Lettering is treated as notan of line: the white-on-orange circle reads as a single tone mass that interrupts the purple/blue swirl without breaking its rhythm.
Piper at the Gates of Dawn · model draft