# Garden Eight · Design system migration spec

> Source: https://garden-eight.com  ·  Curated by OpenDesign  ·  en

> An exceptional example of typographic-led design that proves a minimal palette can be incredibly expressive.

## 1. Identity DNA

Garden Eight’s system is built like a minimalist gallery, where typography serves as the primary exhibit. The design philosophy centers on extreme restraint, allowing expressive type and expansive whitespace to command all attention without decorative interference.

**One-liner:** A Tokyo-based digital design studio portfolio defined by expressive typography and expansive whitespace.
**Keywords:** design studio · Tokyo · digital · bold · editorial
**Analogy:** A minimalist gallery where typography is the primary exhibit.

## 2. Color

The palette is strictly monochromatic, built on a warm beige foundation and deep charcoal ink for high-contrast readability. This constraint ensures color never competes with the typographic and spatial narrative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#DCD6D1` | main background |
| `--ink` | `#1E1F1F` | body text |
| `--muted` | `#DBD6D0` | placeholder |
| `--line` | `rgba(30,31,31,1.0)` | divider |

**Color principle:** Extreme restraint using a monochromatic palette to let expressive typography and 3D imagery command all attention.

The principle is absolute: a neutral stage must exist for the content to perform.

## 3. Typography

The type system pairs an expressive **didone-serif** for display scale with a **humanist-sans** for legible body copy. This creates a dialogue between monumental headlines and functional text, with massive scale variation as a core structural rule.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 215px | 0.6 | 400 | -2px | Hero headline |
| body | 15px | 1.5 | 400 | 0 | Navigation and subheadings |

**Type rules:**
- Use uppercase tracking for navigation links.
- Apply high contrast between display weight and body weight.
- Allow massive scale variation between headline and body text.

## 4. Spacing

The spatial rhythm is defined by generous padding and expansive whitespace, framing content blocks with deliberate breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding with expansive whitespace to frame content blocks.

## 5. Surfaces

Surfaces are defined by sharp, square edges and thin 1px borders. Depth is communicated not through elevation or drop shadows, but through precise, subtle inset shadows that suggest a recessed plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgb(30, 31, 31) 0px 2px 2px 0px inset
  - rgb(219, 214, 208) 0px 3px 2px 0px inset
- **Borders:** 1px solid rgb(30, 31, 31)

## 6. Layout

The layout skeleton is a minimalist grid that pushes content to the absolute edges of the viewport. This creates a sense of expansiveness and frames the typographic elements within a vast, clean field.

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

**Skeleton:** Minimalist grid that pushes content to the absolute edges.

## 7. Motion & Interaction

Motion is deliberate and premium, characterized by slow, smooth opacity reveals for imagery and eased transform movements for 3D elements. The philosophy is to guide attention calmly, never to startle or decorate.

- **Durations:** micro 222ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.32, 0.94, 0.6, 1)`
- **Patterns:**
  - Slow, smooth opacity transitions for image reveals.
  - Eased transform movements for 3D background elements.

- **Hover:** Subtle cursor changes or opacity shifts on text links.
- **Click:** Standard pointer state with minimal immediate visual feedback.
- **Transition:** Smooth opacity and transform transitions with delayed starts.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, sophisticated, and quiet. Headlines are expressive and philosophical, while calls to action are minimal uppercase text links that rely on contextual understanding rather than button aesthetics.

- **Tone:** Confident, sophisticated, and quiet.
- **Headline style:** Expressive, oversized, and philosophical (e.g., 'WHAT CAN WE MAKE NEXT').
- **CTA style:** Minimal, uppercase text links that rely on context rather than buttons.
- **Avoid:** Cluttered layouts / Bright, saturated colors / Decorative UI elements / Small, cramped typography

### Don'ts
- ❌ Don't use bright colors — screenshot shows a strictly neutral beige and black palette.
- ❌ Don't use heavily rounded corners — screenshot shows sharp, square edges.
- ❌ Don't use small headline typography — screenshot shows display type taking up the full viewport.
- ❌ Don't use busy backgrounds — screenshot shows a clean, expansive beige surface.
- ❌ Don't use bold button styles — screenshot shows simple uppercase text links.
- ❌ Don't use a dark theme — screenshot shows a predominantly light, warm-toned interface.

The system deliberately forgoes bright accents, decorative UI elements, dark themes, and rounded forms to preserve its gallery-like purity.

## System Prompt (paste into AI tool)

```
This is a high-end Tokyo-based digital design studio portfolio characterized by extreme typographic scale and minimalist restraint. The color palette is monochromatic, featuring a warm beige background (#DCD6D1) and deep charcoal ink (#1E1F1F). Typography categories are didone-serif for expressive display text and humanist-sans for legible body copy. Critical design constraints include: avoid adding bright accent colors or decorative UI flourishes, never shrink the hero typography below 20% of the viewport, and maintain vast whitespace between elements to preserve the gallery-like atmosphere.
```