Navigation items use varied fonts to simulate a collage or ransom note effect. · The main title 'TOMO' uses a bold, high-contrast Didone serif. · Instructional text uses a monospaced or geometric sans-serif font.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Irregular and collage-driven, spacing is determined by the manual placement of draggable elements rather than a strict grid.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid black used sparingly on specific draggable labels.
No visible box-shadows; elements rely on hard edges or image transparency.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A free-form, unstructured layout where images and text blocks overlap and can be rearranged by the user.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Draggable elements follow the cursor with a standard 220ms transition.
Cursor changes to a 'move' icon over draggable elements. · Elements can be clicked and dragged to new positions on the canvas.
08
Components
buttonStylized text labels on white paper-like backgrounds with varied fonts.
cardOverlapping photographic cutouts and text blocks.
chipSmall draggable text fragments.
inputNo traditional inputs; interaction is via drag-and-drop.
heroGiant 'TOMO' typography dominating the top half of the page.
09
Voice & Don'ts
TonePlayful, informal, and slightly irreverent.
HeadlinesBold, oversized, and typographically expressive.
CTAsFramed as an invitation to play ('BUILD A CUSTOM COMPOSITION').
Don't use a strict, uniform grid — screenshot shows a chaotic, overlapping collage layout.
Don't apply a single font family to all text — screenshot shows navigation items in at least four different typefaces.
Don't use cool or dark background colors — screenshot shows a warm, light beige canvas.
Don't rely on subtle shadows for depth — screenshot shows hard-edged photographic cutouts.
Don't use rounded corners on any elements — screenshot shows sharp, rectangular edges.
Don't use a muted or monochromatic accent palette — screenshot shows a single, bright coral red used for emphasis.
Captured from the live site · real computed styles
11
System prompt
This website serves as an interactive, experimental home for 'TOMO', a Japanese restaurant in Seattle. It features a maximalist, collage-driven aesthetic where users can drag and drop various photographic and text elements to build their own composition. The palette is simple: a warm, sandy beige background with bold black text and a single coral-red accent color. Typography is a key expressive element, using a mix of Didone serifs, transitional serifs, and geometric sans-serifs to create a 'ransom note' or scrapbook effect. Critical constraints include: avoid any structured grid or uniform spacing, never use a single font family for navigation, and do not apply rounded corners or soft shadows to any elements. The tone is playful and irreverent, inviting the user to interact rather than just observe.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
