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

# Garden Eight · Design System

> Quiet canvas, expressive typography, sculptural form.

**Theme:** dark · **Industry:** design · **Source:** https://garden-eight.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._

Garden Eight’s homepage pairs an understated studio introduction with a dramatic, oversized typographic question. A warm, pale visual field and softly lit sculptural imagery make the opening feel like an editorial art direction piece rather than a conventional agency landing page.

## North star

Keep the canvas quiet and let a single oversized, art-directed typographic statement dominate the page.

## Overview

The first viewport is defined by a warm, pale canvas and a large, near-black display message. The measured palette records only #1e1f1f, but the screenshot clearly shows the actual hero field as soft ivory-beige with dark text; treat the measured dark value as a data mismatch, not a reason to render a dark page. The hero’s image is a softly lit, organic sculptural composition, low in contrast and nearly tonal with the background. A distinctive high-contrast, decorative display face carries the question across staggered lines, while compact sans-serif navigation and studio copy remain quiet at the top edge. The composition is intentionally spacious, with the headline occupying the central field and imagery extending broadly behind it. Navigation is distributed across the top, balanced by the studio name and short introduction at left. Keep the result flat and gallery-like: no prominent cards, borders, gradients, or raised controls.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Black | `#1e1f1f` | `--color-soft-black` | brand | Measured text and navigation color; the screenshot shows it against a pale hero canvas, though the measured canvas assignment conflicts with the visible page. |

### Semantic aliases

`--color-canvas` → `#1e1f1f` (Soft Black) · `--color-text` → `#1e1f1f` (Soft Black)

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| lausanne | `--font-body` | webfont | 200, 400 | Navigation and small supporting studio copy | Inter |
| gunsan | `--font-display` | webfont | 600 | Oversized display headline | Bodoni Moda |

- **lausanne:** Light body copy and regular uppercase navigation; keep small text restrained and clean.
- **gunsan:** Heavy, highly expressive display lettering with dramatic contrast; preserve the distinctive sculptural shapes.

### Type scale — Custom (ratio ≈ 17.917, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 215px | 600 | 0.77 | 0 | — | gunsan | Oversized multi-line hero question |
| body | 12px | 200 | 1.25 | 0 | — | lausanne | Compact studio introduction and supporting copy |
| nav | 14px | 400 | 1.25 | 0 | uppercase | lausanne | Uppercase primary navigation and language switch |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 5, 10, 27, 38, 45, 86, 180 px.
- Section rhythm 180px · element gap 5px · card padding — · max content width 1080px.

A spacious, full-bleed hero uses a broad central field for the headline, with sculptural imagery spreading behind and around it. The measured page max width is 1080px, while the screenshot reads as edge-to-edge composition. Keep the studio name and short introduction at upper left, with navigation aligned across the upper right. The page is sparse, with generous separation between the header and the central statement; avoid dense grids or boxed content.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `1.4s cubic-bezier(0.32, 0.94, 0.6, 1)` on interactive elements.

The page reads as a flat editorial surface rather than a layered interface. No measured shadows or gradients are reported, and the screenshot shows no prominent borders or card containers. Separate content through placement, tonal contrast, and negative space instead of elevation effects.

## Imagery

Use a pale, softly lit, organic sculptural image with a near-monochrome treatment that blends into the ivory-beige field. Frame it broadly across the hero, allowing forms to enter from the edges and sit behind the type. Keep contrast subdued so the near-black headline remains the sharpest visual element.

## Components

### Top navigation

A compact uppercase row with studio identity at left and links such as Cases, About, Archives, Contact, AI, and a language option at right.

### Studio introduction

A short, light sans-serif statement sits under the studio name at the top left, visually secondary to the hero.

### Hero headline

A dramatic multi-line question set in oversized decorative display lettering, offset across the center of the composition.

### Sculptural hero media

Soft ivory-toned organic forms fill the background and edges, blending with the pale field behind the headline.

### Scroll cue

A small dark circular down indicator sits near the lower-right edge of the first viewport.

### Measured component styles

- **Link**: transparent background · text #1e1f1f · radius 0px · padding 0px 37.8px · 400 13.9968px lausanne
- **Navigation item** (“GARDEN EIGHT”): transparent background · text #1e1f1f · radius 0px · padding 0px · 400 13.9968px lausanne · uppercase

## Do

- Use a pale, warm editorial canvas despite the conflicting measured canvas value.
- Make the display headline the dominant element.
- Use sculptural imagery as a soft, low-contrast backdrop.
- Keep navigation uppercase, compact, and unobtrusive.
- Preserve broad negative space around the hero message.
- Use flat presentation instead of card-like elevation.

## Don't

- Do not interpret #1e1f1f as the visible page background.
- Do not introduce saturated accent colors without measured evidence.
- Do not shrink the hero statement into ordinary heading scale.
- Do not add prominent borders, shadows, or gradients.
- Do not crowd the header or hero with extra interface elements.
- Do not let the image overpower the headline.

## Agent prompt

Build a new Garden Eight-style studio page as a spacious editorial composition. Use Soft Black (#1e1f1f) for visible text and navigation; do not use it as the canvas, since that measured assignment conflicts with the screenshot’s pale ivory-beige hero. Place a compact uppercase navigation row along the top, with a brief studio introduction at left. Give the main area a huge, decorative, high-contrast display statement, arranged across staggered lines. Add broad, softly lit sculptural imagery behind the type, keeping it tonal and low contrast. Maintain generous negative space and a flat, gallery-like presentation: avoid cards, conspicuous borders, and shadows. Keep supporting text small and light, with the headline clearly carrying the visual hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero with top-aligned navigation, compact studio intro at left, and a large staggered headline over pale sculptural imagery. | top-level navigation, language switch, scroll cue | oversized display type, tonal hero image, open composition, uppercase links |

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