---
title: "TOMO design system"
variant: extended
source: https://tomoseattle.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/tomoseattle-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# TOMO · Design System

> A warm canvas for oversized type and offbeat collage.

**Theme:** light · **Industry:** food-beverage · **Source:** https://tomoseattle.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

TOMO pairs a restrained cream canvas and monumental serif lettering with a deliberately unruly collage of food, neighborhood imagery, and found objects. Its navigation and composition feel more like an editorial artboard than a conventional restaurant template.

## North star

Keep the interface palette quiet and the typography monumental, while letting an irregular editorial collage provide the page’s energy.

## Overview

The page is anchored by a warm cream canvas (#eee2d4), giving the oversized near-black TOMO wordmark and delicate serif announcement strong contrast without a stark white backdrop. Recife, measured as a light serif, carries the display lettering and navigation; restrained Arial is reserved for small utility text and button-like controls. A row of individually offset, white-backed navigation labels introduces a handmade, cut-and-paste quality. Below, a loose full-width collage layers food, local streets, signage, and objects over the same canvas; its vivid colors belong to image assets, not a broader interface palette. The composition favors large scale changes and generous open ground around elements rather than card containers. Treat the measured cream, white, charcoal, and black as the interface system, and let collage imagery supply the expressive color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Charcoal | `#262626` | `--color-soft-charcoal` | neutral | Primary heading and display text, including the oversized TOMO wordmark. |
| Warm Parchment | `#eee2d4` | `--color-warm-parchment` | brand | Dominant page canvas and continuous background behind the collage. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Navigation label backings and measured light surface areas. |
| True Black | `#000000` | `--color-true-black` | semantic | Measured button border and small utility-control text; not the main display-text color. |

### Semantic aliases

`--color-canvas` → `#eee2d4` (Warm Parchment) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#262626` (Soft Charcoal) · `--color-border` → `#000000` (True Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#eee2d4` | 11.87:1 | AAA |
| `#262626` | `#ffffff` | 15.13:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Recife | `--font-body` | webfont | 300 | Display wordmark, announcement, and large serif navigation labels. | Cormorant Garamond |
| Arial | `--font-arial` | system | 400 | Small utility captions and button text. | Arial |

- **Recife:** Light serif weight; use expressive scale contrast and natural casing, without adding tracking.
- **Arial:** Regular weight, compact utility usage, and unembellished casing.

### Type scale — Major Third (ratio ≈ 1.25, base 32.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 32.5px | 300 | 1 | 0 | — | Recife | Large light-serif editorial text and prominent page lettering. |
| caption | 13.5px | 400 | normal | 0 | — | Arial | Small utility or supporting text. |
| button | 13.5px | 400 | normal | 0 | — | Arial | Compact text for utility controls. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 3, 6, 13, 65, 70, 75, 76, 80, 85, 111, 115, 131, 161 px.
- Section rhythm 389px · element gap — · card padding — · max content width —.

A single long, full-width section sits on one uninterrupted cream canvas. The viewport opens with a narrow scrolling-style announcement, a huge centered wordmark, and a horizontal navigation row of separate paper-like labels. Below, the collage spans the available width and is assembled from overlapping, differently scaled cutouts. Preserve generous open canvas around the top elements, but allow the lower composition to become visually dense. Measurements provide no reliable max-width or grid value, so avoid imposing a rigid column system.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is essentially flat: no measured shadows, gradients, or card system. Keep the canvas open and use overlap, image cutouts, and paper-white navigation backings for depth. The measured black border belongs to a small utility control, not general section dividers.

## Imagery

Use an eclectic cutout collage rather than polished, isolated product photography: restaurant food, neighborhood streets, storefront signs, and unexpected objects share the same visual field. Mix photographic source material and graphic lettering; overlap and vary scale, keeping edges intentionally irregular. Bright reds, greens, and other vivid hues come from collage assets, not the measured interface palette.

## Components

### Announcement line

A slim, single-line serif notice runs across the top edge of the warm canvas.

### Oversized wordmark

TOMO is set in monumental, near-black serif lettering and dominates the opening viewport.

### Paper-label navigation

Six large serif links sit in separate white-backed labels with subtly varied angles and alignment.

### Editorial collage

Food, streets, signage, and found objects overlap below the navigation as an irregular full-width composition.

### Utility control

A small Arial control may use a browser-like black border; keep it distinct from the editorial navigation.

### Measured component styles

- **Primary button** (“Close button”): background #efefef · text #000000 · border 2px outset #000000 · radius 0px · padding 1px 6px · 400 13.3333px Arial
- **Link**: transparent background · text #ffffff · radius 0px · padding 0px 0px 2.6px 0px · 400 25.92px Recife

## Do

- Use #eee2d4 as the dominant canvas.
- Set display text in a light, expressive serif.
- Make the wordmark dramatically larger than navigation.
- Give navigation labels individual paper-white backings.
- Build collage layers from varied image scales and cutout edges.
- Keep vivid colors confined mainly to image assets.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not turn the collage into a uniform card grid.
- Do not replace the warm canvas with stark white.
- Do not make every navigation label identical in placement.
- Do not treat illustration colors as interface palette tokens.
- Do not crowd the wordmark and navigation with extra UI.

## Agent prompt

Build a new page in TOMO’s visual style using Warm Parchment (#eee2d4) as the continuous canvas. Use Soft Charcoal (#262626) for the dominant serif display typography, with a light editorial character; keep Arial-like utility text small and restrained. Arrange navigation as separate Paper White (#ffffff) paper labels rather than buttons in a standard bar. Compose the main visual from layered, irregular cutouts—food, neighborhood scenes, signage, and unexpected objects—with their vivid colors contained in the imagery. Preserve open breathing room around the large title and let the collage become denser below. Keep surfaces flat, avoid shadows and gradients, and use True Black (#000000) only for small utility details or borders. Do not invent a rigid grid where the reference feels hand-assembled.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width warm canvas with announcement, oversized wordmark, paper-label navigation, and a layered collage below. | Top-level section links, Announcement notice, Visual-first introduction | Oversized serif wordmark, Separate white-backed labels, Irregular image cutouts, Continuous cream canvas |

## Source CSS custom properties (selected)

```css
--following-animation-duration: 450ms;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tomoseattle-com