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

# Domaine · Design System

> Quietly confident, image-led commerce

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

Domaine pairs a restrained black-and-white interface with cinematic brand photography and confident, oversized typography. The long homepage alternates open editorial sections, compact service and partner listings, image grids, and a contrasting black partner band and footer.

## North star

Keep the interface quiet and sharply legible so oversized editorial type and richly colored brand photography carry the visual impact.

## Overview

The page’s foundation is stark white, punctuated by black hero, partner, and footer bands. Black carries headings, navigation, and most copy; muted gray and pale gray handle secondary text, borders, and subtle link or card surfaces. Green tones appear sparingly in Shopify-related links or partner callouts, not as the dominant brand palette. Suisse Intl is used throughout, with regular-weight, tightly tracked display headlines and small, understated utility labels. The opening hero is a full-bleed moving-image-like photograph with white copy anchored low on the left; the page then shifts into a clean, editorial rhythm of left-aligned text and image-led project grids. Sections are spacious and mostly white, while dense service links and location lists provide moments of compression. Photography supplies the strongest color, with warm product and lifestyle imagery giving each project its own palette. Hairline borders and flat surfaces keep the interface crisp rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text and navigation; also the full-width hero, partner, and footer backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and reverse text on black bands; keeps most editorial sections bright and open. |
| Rule Gray | `#dbdbdb` | `--color-rule-gray` | neutral | Fine borders and separators, plus occasional small badges and restrained component outlines. |
| Mist Gray | `#ededed` | `--color-mist-gray` | surface | Pale buttons, service links, and occasional cards against the white page. |
| Graphite Edge | `#484a4c` | `--color-graphite-edge` | neutral | Subtle dark outlines and borders on selected cards, buttons, and footer elements. |
| Soft Slate | `#686c6d` | `--color-soft-slate` | semantic | Muted body copy and secondary informational text on light surfaces. |
| Midnight Gray | `#7f7f7f` | `--color-midnight-gray` | surface | Occasional darker navigation, card, and button surfaces; secondary to the black bands. |
| Commerce Green | `#048060` | `--color-commerce-green` | accent | Sparse green link accent, most visible in Shopify and commerce-related callouts. |
| Shopify Lime | `#95bf46` | `--color-shopify-lime` | accent | Small partner or Shopify-related highlight; not a general-purpose page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Ink) · `--color-surface-2` → `#ededed` (Mist Gray) · `--color-surface-3` → `#7f7f7f` (Midnight Gray) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#686c6d` (Soft Slate) · `--color-border` → `#dbdbdb` (Rule Gray) · `--color-accent` → `#048060` (Commerce Green) · `--color-accent-2` → `#95bf46` (Shopify Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ededed` | 17.94:1 | AAA |
| `#000000` | `#7f7f7f` | 5.24:1 | AA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ededed` | 1.17:1 | fail |
| `#ffffff` | `#7f7f7f` | 4:1 | AA-large |
| `#686c6d` | `#ffffff` | 5.31:1 | AA |
| `#686c6d` | `#000000` | 3.95:1 | AA-large |
| `#686c6d` | `#ededed` | 4.54:1 | AA |
| `#686c6d` | `#7f7f7f` | 1.33:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400 | Site-wide display headings, body copy, navigation, links, buttons, labels, and forms. | Inter |

- **Suisse Intl:** Regular weight throughout; large headlines use tight negative tracking, while small navigation and utility labels stay compact and unembellished.

### Type scale — Augmented Fourth (ratio ≈ 1.417, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.9 | -0.04em | — | Suisse Intl | Large hero or editorial statements with close-set, high-impact lines. |
| h1 | 48px | 400 | 1 | -0.04em | — | Suisse Intl | Primary page and section headlines, usually left-aligned. |
| h2 | 40px | 400 | 1.1 | -0.04em | — | Suisse Intl | Prominent section introductions and supporting editorial headings. |
| h3 | 24px | 400 | 1.1 | -0.01em | uppercase | Suisse Intl | Compact uppercase labels such as SERVICES and section markers. |
| h4 | 18px | 400 | 1.2 | -0.02em | — | Suisse Intl | Card, feature, and supporting subsection headings. |
| body | 14px | 400 | normal | 0 | — | Suisse Intl | Descriptions, explanatory copy, testimonials, and article text. |
| caption | 12px | 400 | normal | 0 | — | Suisse Intl | Project metadata, dates, and compact image or card notes. |
| button | 12px | 400 | normal | 0 | — | Suisse Intl | Short CTA and action labels. |
| nav | 12px | 400 | normal | 0 | — | Suisse Intl | Compact global navigation and utility controls. |
| link | 80px | 400 | 0.9 | -0.04em | — | Suisse Intl | Large display-style text links, including prominent service links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 10, 15, 20, 29, 60 px.
- Section rhythm 60px · element gap 3px · card padding 8px · max content width 1382px.

A long, mostly single-column page uses a measured 1382px maximum content width, with selected three- and four-column image or service grids. Text is predominantly left-aligned, with uneven image placement and asymmetrical compositions adding editorial character. Broad white sections create a spacious baseline; the full-width black hero, partner band, and footer break the rhythm. Project, partner, and insight areas tighten the density, while service lists, location rows, and image galleries use generous separation rather than enclosing every item in cards.

## Shape & elevation

- Radius: button `3px` · input `3px` · card `3px` · media `3px` · badge `3px` · nav `3px` · link `3px` · xs `3px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Pale-gray surfaces, thin gray rules, and occasional dark card outlines define controls and content boundaries. Small, subtly rounded corners appear on buttons and cards, while project images remain visually direct and unframed. Contrast comes from black section bands and layered photography rather than elevated panels.

## Imagery

Photography is the primary expressive medium: the hero uses a full-bleed, warm-toned product or lifestyle film still, while project and industry imagery ranges across fashion, beauty, interiors, food, and commerce. Images are rectangular, often arranged in editorial grids or staggered compositions, and retain their own color grading rather than receiving a uniform overlay. Interface icons and logos remain small supporting details.

## Components

### Floating navigation

Compact top navigation combines a white menu panel with a dark search strip; small utility controls sit at the upper right.

### Hero statement

Full-bleed photographic opening with a small dark brand label and large white, left-aligned headline near the bottom.

### Project cards

Rectangular brand imagery arranged in a three-column project row, with compact names and migration or project details.

### Service list

Large, simple text links for Strategy, Creative, Technology, and Marketing, balanced against staggered product imagery.

### Partner directory

Black section pairs a large white statement and CTA with a vertical stack of white partner rows and colorful logos.

### Insight feed

Editorial article cards mix photography, compact metadata, oversized headlines, and a neighboring list of recent insights.

### Newsletter footer

Black footer combines a large closing statement and CTA, compact site links, and a small email signup form.

### Measured component styles

- **Primary button** (“Shopify Making commerce better for every”): background #ededed · text #000000 · radius 3px · padding 0px · 400 16px Suisse Intl
- **Secondary button** (“Domaine Acquires Pattern”): background #000000 · text #ffffff · radius 3px · padding 5px · 400 12px Suisse Intl
- **Link** (“Website Audits”): background #ededed · text #000000 · radius 3px · padding 2px 5px · 400 16px Suisse Intl
- **Input** (“United States Canada Europe Germany Neth”): transparent background · text #ffffff · radius 3px · padding 0px · 400 12px Suisse Intl
- **Card** (“Commerce Insights 10.08.2026 Brand Q&A: ”): transparent background · text #ffffff · border 1px solid #484a4c · radius 0px · padding 15px 0px · 400 16px Suisse Intl
- **Badge** (“26”): background #dbdbdb · text #000000 · radius 3px · padding 2.4px 4.8px · 400 12px Suisse Intl
- **Navigation item** (“US Work Services Insights Partners Conta”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Suisse Intl

## Do

- Use black and white as the interface foundation.
- Reserve green accents for commerce or partner callouts.
- Let project photography contribute its own color palette.
- Keep major headlines large, regular-weight, and tightly tracked.
- Use left-aligned editorial copy and varied image layouts.
- Separate flat content with whitespace and fine rules.

## Don't

- Do not apply gradients or decorative shadows.
- Do not make green the dominant interface color.
- Do not box every section into rounded cards.
- Do not center all headings or make the page symmetrical.
- Do not use heavy typography or ornamental display faces.
- Do not suppress the imagery with a uniform color treatment.

## Agent prompt

Build a new page in Domaine’s editorial commerce-agency style. Use Gallery White (#ffffff) as the primary canvas and Studio Ink (#000000) for typography, navigation, and selective full-width dark sections. Set Suisse Intl, or a close Inter substitute, in regular weights; keep utility text small and display headlines large with tight tracking. Use Rule Gray (#dbdbdb) for fine separators and Mist Gray (#ededed) for restrained controls. Commerce Green (#048060) and Shopify Lime (#95bf46) should appear only as sparse partner accents. Structure the page as spacious left-aligned editorial sections mixed with asymmetric image grids. Favor authentic, richly colored product and lifestyle photography over decorative graphics. Keep surfaces flat, corners modest, and shadows absent; create hierarchy with image scale, whitespace, and alternating dark bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark media band with floating navigation and lower-left headline. | Global navigation, Brand identifier | Cinematic background, White display headline, Compact utility controls |
| 2 | feature-split | Left-aligned introduction and copy with a small partner visual to the right. | Agency introduction, Partner proof | Large black headline, Open white canvas, Green partner callout |
| 3 | product-grid | Three-column project gallery with image-led cards and compact metadata. | Browse client work, Project detail links | Large rectangular photography, Small captions, Open gutters |
| 4 | feature-grid | Four-column service area with large text links and staggered supporting images. | Service discovery, Category links | Uppercase section label, Large text links, Asymmetric image placement |
| 5 | testimonials | Two-column testimonial section with client logos and ample white space. | Client trust, Quote attribution | Large section headline, Horizontal logo row, Fine quote rule |
| 6 | feature-split | Single-column feature statement with supporting copy and a green partner callout. | Expertise proof, Partner resource link | Black headline, Compact metrics, Green callout panel |
| 7 | integrations | Black full-width band with a large statement at left and partner rows at right. | Explore integrations, View all partners | Reverse white typography, Stacked partner cards, Bright partner logos |
| 8 | feature-grid | Three-column channel overview with introductory headline and image cards. | Compare channels, Get in touch | Three image-led cards, Short labels, Compact descriptions |
| 9 | gallery | Split introduction with a large text block and a compact all-projects link. | Browse all work, Project discovery | Small uppercase label, Large editorial statement, Subtle link surface |
| 10 | gallery | Loose, asymmetric image mosaic spanning multiple columns. | Visual portfolio browsing | Mixed image sizes, Uneven grid, Minimal framing |
| 11 | team | Left-aligned introduction and CTA beside a right-side list of global cities. | Team location discovery, Join the team | Open white layout, Fine row separators, Small location metadata |
| 12 | content-feed | Two-column editorial lead story with a large image and recent-insight sidebar. | Read featured article, Discover recent insights | Large lead photography, Metadata labels, Gray sidebar cards |
| 13 | content-feed | Three-column article grid with image thumbnails and short headlines. | Browse articles, Continue reading | Image-led cards, Small metadata, Editorial headlines |
| 14 | footer | Black two-column footer with large closing message, links, and newsletter form. | Contact the agency, Newsletter signup, Footer navigation | White closing CTA, Compact link lists, Dark form field |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--anim-duration-sm: .3s;
--anim-duration-md: .8s;
--anim-duration-lg: 1.2s;
--space-3xs: max(2px, calc((2 / 1440) * 100vw));
--space-2xs: max(5px, calc((5 / 1440) * 100vw));
--space-xs: max(10px, calc((10 / 1440) * 100vw));
--space-sm: max(15px, calc((15 / 1440) * 100vw));
--space-md: max(20px, calc((20 / 1440) * 100vw));
--space-lg: max(25px, calc((30 / 1440) * 100vw));
--space-xl: max(30px, calc((40 / 1440) * 100vw));
--space-2xl: max(40px, calc((60 / 1440) * 100vw));
--space-3xl: max(60px, calc((80 / 1440) * 100vw));
--space-4xl: max(80px, calc((120 / 1440) * 100vw));
--radius-none: 0px;
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 12px;
--radius-rounded: 100vw;
--grid-gap: max(20px, calc((20 / 1440) * 100vw));
--font-family-code: "Suisse Intl Mono", monospace;
--font-family-primary: "Suisse Intl", Helvetica, Arial, system-ui, sans-serif;
--color-ink: #1C1C1C;
--color-subdued: #3A3A3A;
--color-reverse: #ffffff;
--color-darkest: #000000;
--color-darker: #484A4C;
--color-dark: #686C6D;
--color-neutral: #A5A7A8;
--color-light: #DBDBDB;
--color-lighter: #EDEDED;
--color-lightest: #ffffff;
--color-blue: #2749ff;
--color-blue-light: color-mix(in srgb, #ffffff 10%, #2749ff);
--color-blue-lighter: color-mix(in srgb, #ffffff 25%, #2749ff);
--color-blue-contrast-subdued: color-mix(in srgb, #ffffff 70%, #2749ff);
--color-orange: #ff5831;
--color-orange-light: #ffe7b6;
--color-success: rgb(0, 255, 123);
--color-error: red;
```

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