# Tofucollective · Design system migration spec

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

> Worth including as a masterclass in typographic-led editorial design and the effective use of negative space.

## 1. Identity DNA

Tofucollective operates as a minimalist gallery catalog rendered in code, where editorial restraint is the governing principle. Like a well-curated exhibition guide, every element is placed with architectural precision, serving the Sinophone contemporary art it presents. The design system is a cultural bridge built from typography and negative space.

**One-liner:** A restrained, typographically driven editorial platform for Sinophone contemporary art.
**Keywords:** cultural bridge · contemporary art · Sinophone · collective · typographic
**Analogy:** A minimalist gallery catalog with editorial restraint

## 2. Color

The palette is a strict binary of pure black and white, with a soft charcoal reserved for body text. This high-contrast monochrome framework ensures content remains the sole focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#282828` | secondary text |
| `--muted` | `#282828` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome with strict binary palette.

The principle is absolute restraint: color exists only to serve legibility and hierarchy, never to decorate.

## 3. Typography

Typography is the primary driver, employing a clean humanist sans-serif for display headlines and standard system-ui for body copy. The voice is academic and refined, with tight leading and strict left alignment creating a dense, intentional rhythm.

- **Display:** humanist-sans
- **Body:** system-ui-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 90px | 0.95 | 400 | -1px | Hero titles |
| body | 16px | 1.25 | 400 | normal | Navigation and body text |
| caption | 12px | 1.3 | 400 | normal | Copyright notices |

**Type rules:**
- Use tight leading for display headlines
- Maintain high contrast for all text elements
- Align text to a strict left margin

## 4. Spacing

A strict 8px grid establishes a foundational rhythm, with generous whitespace acting as a structural element, not merely empty space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 8px grid with generous whitespace

## 5. Surfaces

Surfaces are flat and depthless, defined only by hard, 1px solid black lines that carve up the space with surgical clarity. Borders are functional dividers, not decorative frames.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Hard, 1px solid black lines separating navigation elements

## 6. Layout

The skeleton is an asymmetric two-column grid, often splitting the viewport into a heavy typographic left side and a full-height photographic right. This layout creates a dynamic yet balanced composition, privileging content over symmetry.

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

**Skeleton:** Asymmetric two-column grid with a heavy typographic left column and a full-height image on the right

## 7. Motion & Interaction

Motion is smooth, low-distraction, and functional, applied solely to UI elements via consistent cubic-bezier transitions. It marks interaction without interrupting the calm, deliberate pace of the editorial experience.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.24, 0.4, 1)`
- **Patterns:**
  - Smooth transform transitions for UI elements

- **Hover:** Subtle transform shifts on interactive elements
- **Click:** Immediate feedback via pointer cursor
- **Transition:** Consistent cubic-bezier transitions for transforms and opacity
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is academic, refined, and slightly poetic, mirrored in massive, lowercase or mixed-case display type. Navigation is text-only, separated by vertical borders, rejecting the very idea of a visual button.

- **Tone:** Academic, refined, and slightly poetic
- **Headline style:** Massive, lowercase, or mixed-case display type with tight leading
- **CTA style:** Minimalist, text-based navigation without visual buttons
- **Avoid:** Vibrant or neon color palettes / Rounded corners on UI elements / Heavy drop shadows or 3D effects / Serif fonts for primary navigation / Dense, multi-column text layouts / Aggressive or sales-oriented language

### Don'ts
- ❌ don't use rounded corners — screenshot shows perfectly square edges on navigation lines
- ❌ don't use drop shadows — screenshot shows flat surfaces without depth
- ❌ don't use colorful accent buttons — screenshot shows text-only navigation separated by lines
- ❌ don't use decorative serif fonts — screenshot shows clean sans-serif typography
- ❌ don't center-align hero text — screenshot shows strict left-alignment
- ❌ don't use background colors other than white — screenshot shows a pure white canvas

The system deliberately excludes vibrant color, rounded corners, drop shadows, and serif fonts for navigation, defining itself as much by what it refuses as by what it employs.

## System Prompt (paste into AI tool)

```
This is a minimalist, editorial-focused website for a Sinophone contemporary art collective. The design is built on a strict monochrome palette using only black (#000000) and white (#FFFFFF), with occasional dark grey (#282828) for softer ink tones. Typography is the primary driver, utilizing a clean humanist-sans for display and standard system-ui for body text. Layouts are asymmetrical and grid-based, often featuring massive headlines with tight leading. Key critical donts include avoiding any rounded corners, never using drop shadows, and maintaining high-contrast, left-aligned text. The overall aesthetic is one of 'academic restraint,' functioning like a high-end art catalog or exhibition guide.
```