# Tomoseattle · Design system migration spec

> Source: https://tomoseattle.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of an experimental, interactive web experience that prioritizes playfulness and user agency over conventional information hierarchy.

## 1. Identity DNA

Tomo Seattle operates as an interactive scrapbook, its digital pages inviting direct manipulation. The site’s identity is built on a playful, maximalist collage aesthetic, where the act of composition is as important as the content itself.

**One-liner:** An eclectic, interactive website for a Japanese restaurant, featuring a drag-and-drop collage interface.
**Keywords:** eclectic · playful · maximalist · interactive · collage
**Analogy:** An interactive scrapbook or a digital mood board for a modern restaurant.

## 2. Color

The color system is deliberately restrained, providing a neutral stage for more expressive elements. A warm, sandy beige canvas is punctuated by **bold black typography** and a single, vibrant coral accent for emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EEE2D4` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#FF6347` | single accent |
| `--line` | `rgba(0,0,0,0.85)` | divider |

**Color principle:** Warm, neutral canvas punctuated by bold black typography and a single vibrant coral accent.

The principle is a high-contrast, collage-like feel where color serves as a grounding force, not the primary focus.

## 3. Typography

Typography functions as a key expressive material, employing a mixed-family 'ransom note' effect. Navigation items use varied typefaces—including Didone serifs and geometric sans-serifs—to simulate the eclectic, hand-assembled quality of a physical scrapbook.

- **Display:** didone-serif
- **Body:** transitional-serif
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32.4px | 1.0 | 400 | -1px | Primary site title 'TOMO' |
| body | 25.92px | 1.3 | 400 | 0 | Navigation links and instructional text |

**Type rules:**
- 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.

## 4. Spacing

Spacing operates on an irregular, collage-driven rhythm, determined by the manual placement of elements rather than a consistent grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular and collage-driven, spacing is determined by the manual placement of draggable elements rather than a strict grid.

## 5. Surfaces

Surfaces are defined by hard edges and image transparency, rejecting soft shadows for a more direct, cutout appearance. Depth is implied through the overlapping of elements, not through decorative effects.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - No visible box-shadows; elements rely on hard edges or image transparency.
- **Borders:** 1px solid black used sparingly on specific draggable labels.

## 6. Layout

The layout is a free-form, unstructured canvas. Images and text blocks overlap in a deliberately chaotic arrangement, designed to be rearranged by the user through drag-and-drop interaction.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A free-form, unstructured layout where images and text blocks overlap and can be rearranged by the user.

## 7. Motion & Interaction

Motion is minimal and functional, serving only to confirm interaction. The primary pattern is a smooth, 220ms transition that provides clear feedback when a user repositions a draggable element.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Draggable elements follow the cursor with a standard 220ms transition.

- **Hover:** Cursor changes to a 'move' icon over draggable elements.
- **Click:** Elements can be clicked and dragged to new positions on the canvas.
- **Transition:** Smooth transitions on element repositioning (all 220ms).
- **Keyboard:** Not applicable for the primary collage interaction.

## 8. Voice & Don'ts

The editorial voice is playful and informal, framing interaction as an invitation to create. Headlines are bold and oversized, while calls to action are presented as playful directives like 'BUILD A CUSTOM COMPOSITION'.

- **Tone:** Playful, informal, and slightly irreverent.
- **Headline style:** Bold, oversized, and typographically expressive.
- **CTA style:** Framed as an invitation to play ('BUILD A CUSTOM COMPOSITION').
- **Avoid:** Corporate / Minimalist / Highly structured / Serious

### Don'ts
- ❌ 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.

The system deliberately avoids corporate structure, minimalism, and seriousness, opting instead for an irreverent and interactive user experience.

## System Prompt (paste into AI tool)

```
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.
```
