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

# Look · Design System

> Independent ideas, arranged like an editorial

**Theme:** light · **Industry:** agency · **Source:** https://look.inc/ · **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._

Look presents its creative practice through a restrained, editorial portfolio built on white space, expressive type, and client work. An irregular project grid moves from vivid campaign imagery to sparse text-only entries before closing with a concise studio statement.

## North star

Treat the page like a spacious editorial portfolio: neutral typography and hairlines frame, but never compete with, each project’s own imagery.

## Overview

The page is anchored by a pure white canvas (#ffffff), giving a long portfolio room to breathe without coloured section bands. Near-black (#262626) carries the typography and most fine rules, while medium grey (#878787) appears sparingly as a softer hairline. The warm orange and varied hues visible in the first project row belong to campaign imagery, not the site’s core palette. Typography contrasts a clean, bold GT America sans for the opening statement and compact project labels with Old Standard serif for editorial copy and project descriptions. A two-part introduction gives way to an asymmetric, image-led portfolio: projects vary in width and grouping, with short captions directly beneath. Later projects become deliberately sparse, using names and descriptions separated by thin rules and substantial blank space. The overall effect is a printed editorial index rather than a conventional agency landing page, with flat surfaces and imagery providing the visual variation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | The uninterrupted page canvas and background behind the introduction, portfolio, studio statement, and footer. |
| Editorial Ink | `#262626` | `--color-editorial-ink` | neutral | Primary text for the introduction and project captions; also forms most of the fine section rules. |
| Soft Rule | `#878787` | `--color-soft-rule` | neutral | Occasional lighter hairline detail; keep subtle and secondary to the darker text and rules. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#262626` (Editorial Ink) · `--color-border` → `#878787` (Soft Rule)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Old Standard | `--font-display` | webfont | 400 | Editorial-style body copy, project descriptions, and supporting statements. | Old Standard TT |
| GT America | `--font-body` | webfont | 700, 400 | Opening headline and bold project-name labels, with a clean sans-serif contrast. | Inter |

- **Old Standard:** Regular weight; sentence case with a literary serif texture. Keep copy calm and readable.
- **GT America:** Measured weights are regular and bold; use bold for project names and retain sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.472, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 39px | 400 | 1 | 0 | — | GT America | Opening greeting; clean, prominent sans-serif headline. |
| h2 | 32.5px | 400 | 1.1 | 0 | — | Old Standard | Editorial subheads and section statements in serif. |
| body | 18px | 400 | 1.3 | 0 | — | GT America | Introductory copy and project descriptions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 13, 16, 18, 26 px.
- Section rhythm — · element gap — · card padding — · max content width 1388px.

The measured page max width is 1388px, with a comfortable density and a responsive-looking grid that mixes two-column introductory content with variable-width project rows. The opening statement sits on the left and the longer agency introduction on the right. Portfolio groups vary their number and proportions of columns rather than repeating a rigid card template. Captions sit immediately below images, and thin horizontal rules mark row endings. Later text-only project groups retain the same broad grid alignment but leave large expanses of empty white canvas.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: there are no measured shadows, gradients, or rounded component treatments. Images sit directly on the white canvas, with thin horizontal rules providing quiet separation between project groups. Do not add card-like elevation or overlays to standard captions.

## Imagery

Portfolio imagery is campaign photography and brand artwork, not a uniform illustration system. The first visible group mixes a wide seating campaign with narrower Hermès and Uniqlo visuals; subsequent rows vary in crop, subject, and colour. Keep images edge-aligned within their grid slots and allow their own hues and compositions to supply contrast. Captions remain outside the images, on the white canvas.

## Components

### Opening statement

A large sans-serif greeting occupies the left side of a two-part introduction, with a loose cluster of repeated wordmark text nearby.

### Agency introduction

Serif-led editorial copy sits opposite the opening statement, ending with a short invitation to view the work.

### Project tile

A campaign image is followed by a bold sans-serif client name and a short serif project description.

### Variable project row

Portfolio groups combine differently sized image slots and varying column counts; do not force every row into equal cards.

### Text-only project entry

Client names and concise descriptions can sit in broad grid columns without imagery, with a thin rule closing the group.

### About block

A two-column studio section pairs a concise label with a longer serif statement and separated principles.

### Section hairline

A restrained horizontal rule separates portfolio groups and the about section against the white canvas.

## Do

- Use white as the continuous page canvas.
- Keep project imagery varied in width and visual character.
- Place captions directly beneath their corresponding images.
- Use serif and sans-serif as distinct editorial voices.
- Separate groups with thin, understated rules.
- Preserve generous empty space, especially in text-only rows.

## Don't

- Do not introduce a coloured brand section background.
- Do not treat campaign-image colours as site palette colours.
- Do not standardize every project into an identical card.
- Do not add shadows, gradients, or rounded card styling.
- Do not overlay long captions on project images.
- Do not fill the intentionally sparse later portfolio rows.

## Agent prompt

Build a new page in Look’s editorial portfolio style. Use Gallery White (#ffffff) as a continuous canvas and Editorial Ink (#262626) for clear typography and most fine rules; reserve Soft Rule (#878787) for occasional lighter hairlines. Pair a clean sans-serif for bold client labels and a prominent opening statement with an Old Standard-like serif for explanatory copy. Compose a two-part introduction, then an irregular portfolio grid with varied image proportions and captions immediately below each image. Let each project’s photography provide its own colour; do not turn those hues into interface accents. Use thin separators and preserve substantial whitespace, especially around text-only entries. Keep surfaces flat and avoid shadows, gradients, rounded cards, or decorative UI that competes with the work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column introduction: greeting and repeated wordmark on the left, editorial agency copy on the right. | brand introduction, work invitation | sans-serif greeting, serif copy, white canvas |
| 2 | gallery | Three-project image row with a broad first tile and two narrower adjacent tiles. | project browsing, captioned imagery | variable image widths, client labels, hairline divider |
| 3 | gallery | Three-project row pairing a narrow first image with a wide centre image and narrow final image. | project browsing, image-led storytelling | asymmetric grid, caption pairs |
| 4 | gallery | Three-project row led by a wide image, followed by two narrower campaign images. | project browsing, visual discovery | wide lead image, mixed image crops |
| 5 | gallery | Four-column project group with images and captions aligned in a compact sequence. | project browsing, multiple project scan | four varied image slots, captioned tiles, section rule |
| 6 | other | Two text-only project entries aligned across a mostly open row. | project list scan, text-led browsing | open whitespace, two-column captions, hairline divider |
| 7 | other | Three text-only project entries distributed across broad columns. | project list scan, client discovery | three-column text row, hairline divider |
| 8 | other | Three-column text-only portfolio group with a closing rule. | project list scan, text-led browsing | spacious columns, fine divider |
| 9 | other | Three text entries on a broad row with significant surrounding whitespace. | project list scan, client discovery | aligned text columns, fine divider |
| 10 | other | Three-column text-only project row, separated from adjacent groups by a thin rule. | project list scan, text-led browsing | three-column alignment, hairline separator |
| 11 | other | Three project descriptions aligned near the end of the portfolio. | project list scan, portfolio completion | three-column text row, section divider |
| 12 | content-feed | Two-column about section with a short left label and principles on the right. | studio introduction, principle statements | serif editorial copy, open two-column layout, hairline rule |
| 13 | other | Sparse full-width white interval following the studio statement. | visual pause | white canvas, minimal content |
| 14 | other | Large blank white region before the page’s final footer area. | visual pause | extended whitespace |
| 15 | footer | Minimal footer at the bottom of the white canvas. | site attribution | small text, white background |

## Source CSS custom properties (selected)

```css
--page-transition-out-duration: 120ms;
--page-transition-in-duration: 160ms;
--page-transition-out-ease: ease-in-out;
--page-transition-in-ease: ease-in;
```

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