CURATED · OPEN · FREE

Tofucollective

A restrained, typographically driven editorial platform for Sinophone contemporary art.

EditorialCleanTypographyGalleryRestraint

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://tofucollective.com

📦 Browse pack contents →

Identity DNA

cultural bridgecontemporary artSinophonecollectivetypographic

A minimalist gallery catalog with editorial restraint

Color

#000000Ink

#282828Ink soft

#FFFFFFBG

rgba(0,0,0,1)Line

High-contrast monochrome with strict binary palette.

Typography

humanist-sans · system-ui-sans

display90px · 400
body16px · 400
caption12px · 400

Use tight leading for display headlines · Maintain high contrast for all text elements · Align text to a strict left margin

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Strict 8px grid with generous whitespace

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Hard, 1px solid black lines separating navigation elements

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0.24, 0.4, 1)easing

Smooth transform transitions for UI elements

Subtle transform shifts on interactive elements · Immediate feedback via pointer cursor

Components

button Text-only navigation links separated by vertical borders
card No visual cards; content is presented as raw typographic blocks and images
hero Full-height split screen with a massive typographic title on the left and a photographic image on the right

Voice & Don'ts

Tone Academic, refined, and slightly poetic
Headlines Massive, lowercase, or mixed-case display type with tight leading
CTAs Minimalist, text-based navigation without visual buttons

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
Avoid: Vibrant or neon color palettes
Avoid: Rounded corners on UI elements
Avoid: Heavy drop shadows or 3D effects
Avoid: Serif fonts for primary navigation
Avoid: Dense, multi-column text layouts
Avoid: Aggressive or sales-oriented language

Inside the pack — real screenshots

Tofucollective — 桌面首屏（hero） — 桌面首屏（hero）

Tofucollective — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko