---
name: Tomoseattle
description: "This site is a strong example of an experimental, interactive web experience that prioritizes playfulness and user agency over conventional information hierarchy."
version: alpha

colors:
  background: "#EEE2D4"
  primary: "#000000"
  tertiary: "#FF6347"
  line: "rgba(0,0,0,0.85)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 32.4px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: transitional-serif
    fontSize: 25.92px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An eclectic, interactive website for a Japanese restaurant, featuring a drag-and-drop collage interface.

*An interactive scrapbook or a digital mood board for a modern restaurant.*

## Colors

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

- **Background (`#EEE2D4`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF6347`)** — uses `accent` token
- **Borders (`rgba(0,0,0,0.85)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Irregular and collage-driven, spacing is determined by the manual placement of draggable elements rather than a strict grid.

## Elevation & Depth

- No visible box-shadows; elements rely on hard edges or image transparency.
- Borders: 1px solid black used sparingly on specific draggable labels.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Stylized text labels on white paper-like backgrounds with varied fonts.
- **card:** Overlapping photographic cutouts and text blocks.
- **chip:** Small draggable text fragments.
- **input:** No traditional inputs; interaction is via drag-and-drop.
- **hero:** Giant 'TOMO' typography dominating the top half of the page.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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