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

# OFF+BRAND. · Design System

> Quiet canvas, expressive creative work

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

OFF+BRAND. pairs a restrained warm-gray canvas and oversized typography with colorful, motion-led creative work. The homepage moves from a sculptural 3D hero through client logos, project tiles, service visuals, awards, and a spacious contact footer.

## North star

Keep the interface quiet and spacious so oversized typography and vivid creative work carry the visual impact.

## Overview

The visual system holds a steady warm-gray canvas (#e5e4e0) across the page, letting dense project imagery provide most of the color and contrast. Near-black (#1d1d1d) uppercase display text is the main navigation through the long page: oversized phrases overlap the dimensional hero object, while smaller uppercase copy handles studio information and labels. A single measured sans-serif family keeps the typographic voice consistent. Sections favor asymmetry and open space: client marks sit in a ruled grid, featured work forms a two-column tile field, and awards are arranged as spare horizontal rows. White appears as a rare surface or within the hero’s gradient rather than as a broad alternate canvas. Yellow, pink, and blue are measured accents, but the screenshot suggests they belong chiefly to gradients and creative imagery, not persistent interface controls. Borders are fine and functional; elevation stays flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Greige | `#e5e4e0` | `--color-studio-greige` | brand | Dominant page canvas and recurring section background; also measured on some muted text. |
| Soft Graphite | `#bfbebe` | `--color-soft-graphite` | neutral | Fine borders and rules, especially around logo cells and structured content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Occasional section surface and the light end of the measured hero gradient. |
| Pewter Haze | `#cdccc9` | `--color-pewter-haze` | neutral | Subtle link and border-adjacent detail; supporting neutral rather than a major section color. |
| Studio Ink | `#1d1d1d` | `--color-studio-ink` | neutral | Primary headings, body copy, project labels, and footer text. |
| Signal Marigold | `#facb0e` | `--color-signal-marigold` | accent | Bright gradient accent; treat as expressive artwork color, not a default interface fill. |
| Creative Pink | `#f06ba8` | `--color-creative-pink` | accent | Gradient and visual accent, most visible in dimensional hero and creative imagery. |
| Digital Sky | `#78bae6` | `--color-digital-sky` | accent | Cool gradient accent and artwork color; not a persistent control color. |

### Semantic aliases

`--color-canvas` → `#e5e4e0` (Studio Greige) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#1d1d1d` (Studio Ink) · `--color-text-muted` → `#e5e4e0` (Studio Greige) · `--color-border` → `#bfbebe` (Soft Graphite) · `--color-accent` → `#facb0e` (Signal Marigold) · `--color-accent-2` → `#f06ba8` (Creative Pink) · `--color-accent-3` → `#78bae6` (Digital Sky)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1d` | `#e5e4e0` | 13.25:1 | AAA |
| `#1d1d1d` | `#ffffff` | 16.86:1 | AAA |
| `#e5e4e0` | `#ffffff` | 1.27:1 | fail |
| `#facb0e` | `#e5e4e0` | 1.21:1 | fail |
| `#facb0e` | `#ffffff` | 1.54:1 | fail |

### Gradients

- `linear-gradient(rgba(111, 111, 111, 0.2), rgba(111, 111, 111, 0.2))`
- `linear-gradient(255deg, rgb(250, 203, 14), rgb(240, 107, 168) 30%, rgb(120, 186, 230) 65%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Ataero Retina OB Edition | `--font-body` | webfont | 400 | Display headings, section titles, body copy, labels, and navigation across the page. | Manrope |

- **Ataero Retina OB Edition:** Measured at regular weight; uppercase is dominant, with tight display leading and modestly tracked small text.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 103px | 400 | 1 | 0 | uppercase | Ataero Retina OB Edition | Oversized uppercase hero and marquee-style brand statements. |
| h1 | 76px | 400 | 1 | 0 | uppercase | Ataero Retina OB Edition | Primary hero statement and dominant page-level heading. |
| h2 | 70px | 400 | 0.8 | 0 | — | Ataero Retina OB Edition | Large section headlines and prominent editorial statements. |
| h3 | 45.5px | 400 | 1 | 0 | uppercase | Ataero Retina OB Edition | Uppercase feature and project section headings. |
| h4 | 34.5px | 400 | 1.4 | 0.006em | uppercase | Ataero Retina OB Edition | Supporting uppercase subheads and service labels. |
| body | 15px | 400 | 1.4 | 0.013em | uppercase | Ataero Retina OB Edition | Compact uppercase studio descriptions and supporting copy. |
| caption | 11.5px | 400 | 1 | 0.017em | uppercase | Ataero Retina OB Edition | Small project labels, metadata, and award details. |
| eyebrow | 15px | 400 | 1 | 0.05em | uppercase | Ataero Retina OB Edition | Tracked uppercase section identifiers and short introductory labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 8, 15, 19, 24, 30, 32, 46, 76 px.
- Section rhythm 76px · element gap 8px · card padding — · max content width 1402px.

A broad single-page composition uses a measured maximum content width of 1402px, with generous open canvas and a comfortable density. Sections are separated by substantial vertical breathing room rather than contrasting background bands. Content alternates between two-column editorial arrangements, a five-column client-logo region, and a two-column project grid; the services area uses a wider multi-column visual field. Headings align to the left, while individual hero words shift position for deliberate asymmetry. Fine rules define grids and award rows.

## Shape & elevation

- Radius: link `10px` · xs `10px` · pill `9999px`
- Shadow `hairline` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 1px`

The interface is predominantly flat: there are no prominent measured shadows or raised UI surfaces. Thin gray rules structure logo cells and award rows, while project imagery supplies its own depth, contrast, and layering. Rounded project corners are visible in screenshots, but measured component radius evidence is limited.

## Imagery

The hero centers a soft, iridescent 3D form against the quiet canvas, with large text crossing its silhouette. Portfolio cards use varied client artwork, photography, product imagery, and graphic treatments, kept within consistent tiled frames. A later services area relies on video snippets and visual fragments. Imagery can be vivid or dark, but the surrounding interface remains neutral so each project retains its own palette.

## Components

### Editorial hero

Warm-gray canvas, sculptural gradient 3D object, oversized black uppercase words placed at offset positions, and a small scroll cue.

### Client logo grid

Client marks arranged in ruled cells with fine gray dividers, compact labels, and a flexible multi-column layout.

### Featured project tiles

Two-column image-led portfolio tiles with small uppercase client or project labels and plus-style affordances.

### Service visual field

Wide, sparse arrangement of video and image fragments alongside short uppercase service names.

### Awards list

Minimal horizontal rows pairing award platform names with small right-aligned recognition details and hairline separators.

### Contact footer

Large multiline invitation at left, compact sitemap and social links alongside, and a prominent brand wordmark near the base.

### Measured component styles

- **Link** (“ABOUT US ->”): transparent background · text #e5e4e0 · radius 0px · padding 0px 0px 4.6px 0px · 700 15.2381px Ataero Retina OB Edition

## Do

- Use Studio Greige (#e5e4e0) as the continuous page canvas.
- Let large uppercase typography establish hierarchy before adding decoration.
- Use Studio Ink (#1d1d1d) for core text and headings.
- Keep sections open and allow asymmetric headline placement.
- Use fine gray rules to organize logos and award information.
- Reserve yellow, pink, and blue for creative imagery or restrained accents.

## Don't

- Do not introduce large contrasting section bands without evidence.
- Do not turn measured gradient accents into repeated button fills.
- Do not crowd the canvas with dense cards or unnecessary controls.
- Do not add heavy shadows or elevated dashboard-style panels.
- Do not standardize every section into a centered layout.
- Do not let project imagery obscure labels or editorial hierarchy.

## Agent prompt

Build a new page in the OFF+BRAND. visual style: use Studio Greige (#e5e4e0) as a calm, continuous canvas and Studio Ink (#1d1d1d) for crisp uppercase typography. Use a single geometric sans-serif voice, with oversized display statements and small tracked labels. Keep the composition editorial and asymmetric, with generous open space and clear left-aligned content. Structure dense information with thin Soft Graphite (#bfbebe) rules rather than cards or shadows. Let photography, video, and occasional dimensional artwork supply visual richness; use Signal Marigold (#facb0e), Creative Pink (#f06ba8), and Digital Sky (#78bae6) as artwork accents, not routine UI fills. Build flexible grids for logos or projects, and finish with a bold, spacious contact area. Preserve a flat, tactile studio feel.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport hero with a central 3D form and oversized words distributed asymmetrically. | scroll cue, layered headline | warm-gray canvas, 3D gradient object, large uppercase type |
| 2 | feature-split | Two-column editorial section with a large statement and compact supporting studio copy. | about link, editorial reading flow | uppercase statement, small supporting text, open spacing |
| 3 | logo-cloud | Client marks arranged in a ruled, multi-column grid beneath a compact heading. | brand recognition | logo cells, fine dividers, small section label |
| 4 | other | Editorial lead-in beside a two-column project tile grid. | all-work link, project discovery | image-led tiles, uppercase labels, plus affordances |
| 5 | video | Wide visual field combining service statement, dispersed video fragments, and short labels. | visual browsing | video snippets, sparse service labels, open canvas |
| 6 | stats | Section heading paired with a stacked list of horizontal award rows. | recognition scanning | hairline separators, numbered rows, small metadata |
| 7 | cta | Sparse full-width statement section with a repeated typographic message. | brand reinforcement | oversized uppercase text, open canvas |
| 8 | footer | Large contact invitation balanced with compact sitemap, social links, office details, and wordmark. | get-in-touch link, site navigation | multiline headline, small link columns, brand wordmark |

## Source CSS custom properties (selected)

```css
--primary-color: #ff642f;
--large-radius: 6.25em;
--med-radius: 1.375em;
--small-radius: 0.625em;
```

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