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

# OFFFICE · Design System

> Monochrome design research with monumental type.

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

OFFFICE presents its multidisciplinary design practice through a stark black canvas, oversized white typography, and a solitary chair render. The homepage pairs minimal navigation with editorial project labeling and a concise studio statement.

## North star

Keep the interface almost entirely black and white, and let oversized type and one carefully layered object carry the composition.

## Overview

The visual strategy is built on a near-black canvas (#111111) and crisp off-white type (#fefefe), with no measured accent colour or decorative interface chrome. The palette stays intentionally narrow: the chair’s charcoal modelling and tonal shading belong to the product image, not an expanded brand palette. Huge uppercase display lettering dominates the opening composition, extending across multiple lines and sitting behind a centered chair render. Small navigation labels and compact descriptive copy provide a restrained counterpoint. Typography combines an expressive sans display face with a contrasting serif for the project title and studio statement, creating an editorial rather than commercial feel. The page keeps a single-column, full-width impression, with generous dark negative space between the opening feature and later content. Project naming and the studio description are presented as simple text rather than cards or boxed modules. Motion is measured and smooth; the overall effect relies on scale, contrast, and careful layering.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#111111` | `--color-studio-black` | brand | Page canvas throughout; the continuous dark field frames typography, navigation, and the product render. |
| Paper White | `#fefefe` | `--color-paper-white` | neutral | Primary text and navigation, including the monumental hero lettering and small uppercase links. |

### Semantic aliases

`--color-canvas` → `#111111` (Studio Black) · `--color-text` → `#fefefe` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fefefe` | `#111111` | 18.72:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ak | `--font-body` | webfont | 400, 700 | Display lettering, project body and captions, navigation, and uppercase links. | Archivo |
| gs | `--font-display` | webfont | 400 | Serif-led project title and studio statement headings. | Cormorant Garamond |

- **ak:** Use regular and bold weights; the display is enormous, uppercase, and tightly composed, while utility text remains compact.
- **gs:** Use regular weight for an editorial contrast against the site’s dominant sans-serif typography.

### Type scale — Custom (ratio ≈ 2.289, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 216px | 400 | 0.8 | 0 | uppercase | ak | Oversized uppercase words form the layered opening hero statement. |
| h1 | 72px | 400 | 0.9 | 0 | — | gs | Serif project title and editorial statement heading. |
| h2 | 57.5px | 400 | 0.9 | 0 | uppercase | ak | Large uppercase section or project headings. |
| body | 18px | 700 | 1.56 | 0 | — | ak | Bold project and studio copy. |
| caption | 12px | 400 | 1.1 | 0 | uppercase | ak | Small uppercase project labels and supporting metadata. |
| nav | 12px | 700 | 1.33 | 0 | — | ak | Compact studio identity and top-level navigation. |
| link | 12px | 700 | 1.1 | 0 | uppercase | ak | Small bold uppercase policy and utility links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 32, 180 px.
- Section rhythm 32px · element gap — · card padding — · max content width 1376px.

A predominantly single-column composition sits on a continuous dark canvas, with the hero reading as full-bleed rather than a contained card. The measured page max width is 1376px; section rhythm is 32px, with measured spacing steps of 8, 16, 32, and 180px. Hero typography and the centered chair create the primary alignment, while small navigation and explanatory copy sit near the edges. Later sections return to left-aligned editorial text. Density is sparse, with large areas of uninterrupted negative space.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)` on interactive elements.

The interface reads as flat: measured data reports no shadows, gradients, borders, or card treatments. Separation comes from the contrast between white type and the black canvas, while the chair gains depth from its own rendered lighting. Use deliberate overlap for the hero object rather than interface elevation effects.

## Imagery

The defining visual is a centrally framed, grayscale 3D chair render layered over the oversized hero lettering. Its soft charcoal shading separates it from the near-black background without introducing a new brand colour. Keep object imagery isolated, large, and unobstructed; the measured page does not use a grid of photographs or illustrative iconography.

## Components

### Corner navigation

Compact white studio identity and GET IN TOUCH link sit at opposite upper edges without filled backgrounds or borders.

### Oversized hero statement

Multi-line uppercase white display type spans the dark opening and sits behind the central chair render.

### Hero descriptor

Small uppercase studio description is positioned beside the large headline, with a compact language selector nearby.

### Project label

Centered Archive caption and serif Double Chair title introduce the featured work, with the year set as small metadata.

### Studio statement

A large uppercase heading presents the studio’s Italian, Spanish, and Swiss multidisciplinary focus as editorial text.

### Policy link

POLICY PAGE appears as a bold, uppercase white text link without a button container.

### Measured component styles

- **Link** (“POLICY PAGE”): transparent background · text #fefefe · radius 0px · padding 0px · 700 12px ak · uppercase
- **Navigation item** (“offfice studio GET IN TOUCH”): transparent background · text #fefefe · radius 0px · padding 0px · 400 12px ak

## Do

- Use #111111 as the uninterrupted page canvas.
- Reserve #fefefe for high-contrast typography and navigation.
- Make the hero statement exceptionally large and uppercase.
- Layer a single product render across the hero lettering.
- Keep navigation and metadata small and restrained.
- Preserve generous negative space between content blocks.

## Don't

- Do not introduce unmeasured accent colours.
- Do not put content in rounded cards or bordered panels.
- Do not add gradients, shadows, or decorative UI chrome.
- Do not crowd the hero with extra controls or badges.
- Do not turn the project presentation into a product grid.
- Do not treat grayscale shading in the render as brand palette.

## Agent prompt

Build a new OFFFICE-style design studio page using a disciplined monochrome palette: Studio Black (#111111) for the continuous canvas and Paper White (#fefefe) for text and navigation. Create an editorial opening with enormous uppercase sans-serif display lettering, a single carefully lit grayscale 3D object overlapping the type, and compact utility copy aligned near the edges. Use Archivo as a free substitute for the dominant sans-serif and Cormorant Garamond for serif editorial titles. Keep sections largely single-column and left-aligned outside the hero, with restrained navigation, small uppercase metadata, and generous dark negative space. Use text links instead of filled buttons. Avoid cards, borders, shadows, gradients, extra colours, and decorative interface treatments; visual impact should come from scale, contrast, and object layering.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero; oversized multi-line type anchors the frame, with chair render centered in front. | Top-edge navigation, Contact link, Language selector | Uppercase display type, White-on-black contrast, Layered 3D object |
| 2 | product-showcase | Single-column project presentation on the same black canvas, with a centered project title beneath the hero object. | Featured project identification, Policy links | Serif project title, Small archive caption, Minimal text links |
| 3 | other | Left-aligned editorial statement in a single column against the continuous dark canvas. | Studio positioning | Large uppercase statement, Monochrome text |

## Source CSS custom properties (selected)

```css
--color-black: #111111;
--color-white: #fefefe;
--space-s: .5rem;
--space-m: 1rem;
--space-l: 2rem;
```

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