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

# ACCOMPANY · Design System

> Quiet typography, bold work, generous space.

**Theme:** light · **Industry:** design · **Source:** https://accompany.group/ · **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._

ACCOMPANY pairs a restrained black-and-white editorial framework with expressive project visuals. Oversized serif headlines and generous whitespace give the studio’s work room to stand out.

## North star

Keep the interface black on white and editorially restrained, letting oversized typography and project media carry the personality.

## Overview

The page is built on a near-pure white canvas (#ffffff) with black typography (#000000), keeping the studio identity quiet and allowing its portfolio media to supply the colour. The vivid purple hero slide and colourful project tiles are artwork within the carousel and portfolio, not evidence of a broader interface palette. Display copy uses a delicate, high-contrast serif at a very large scale; compact navigation and supporting copy use a clean, medium-weight sans serif. The opening statement is left-aligned and spans several lines, followed by a centered, wide media panel with simple arrow controls. A single-column introductory statement transitions into a three-column project row. Broad stretches of white space separate content groups, while the footer returns to a simple two-column arrangement. The overall strategy is editorial rather than decorative: typography establishes hierarchy, media provides variety, and the interface stays flat, spare, and monochrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and continuous background behind the hero, intro, project row, contact prompt, and footer. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary color for the wordmark, navigation, headings, body copy, links, and carousel controls. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SyndicatGroteskMedium | `--font-body` | webfont | 400 | Navigation, body copy, and links | Inter |
| Items-Light | `--font-display` | webfont | 400 | Oversized display headline | Bodoni Moda |

- **SyndicatGroteskMedium:** Medium, clean sans-serif used for compact navigation and supporting text; keep casing as authored.
- **Items-Light:** Light editorial serif with tight negative tracking and close line leading; use for the large opening statement.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.9 | -0.02em | — | Items-Light | Oversized serif opening statement. |
| h1 | 44px | 400 | 1 | -0.03em | — | SyndicatGroteskMedium | Section-level studio introduction or prominent heading. |
| body | 18px | 400 | 1.2 | 0 | — | SyndicatGroteskMedium | Supporting studio and project descriptions. |
| nav | 18px | 400 | 1 | 0 | — | SyndicatGroteskMedium | Header navigation links. |
| link | 18px | 400 | 1.2 | 0 | — | SyndicatGroteskMedium | Contact and inline text links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 10, 14, 22, 35, 36, 40, 43, 72, 101, 115, 165, 173 px.
- Section rhythm 40px · element gap 35px · card padding — · max content width 1055px.

A spacious, mostly left-aligned editorial layout with a measured page maximum width of 1055px. The header places the wordmark at the left and navigation at the right. The hero statement sits above a wide centered carousel; below it, a single-column studio introduction leads into three project columns. Sections retain generous vertical separation, with low overall density and broad white margins. The lower contact statement is followed by a two-column footer.

## Shape & elevation

- Radius: button `2px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0.2) 0px 0px 5px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat: white canvas, black text, and no recurring card shadows or visible section bands. Keep separations structural through whitespace rather than borders. The measured button radius is 2px, but the visible interface uses restrained, nearly unadorned controls; avoid adding layered panels or decorative elevation.

## Imagery

Project media is presented as video or image-led portfolio work rather than as decorative interface art. The hero carousel uses a wide, centered frame with minimal directional controls; its bright purple slide belongs to the showcased project visual. Below, three compact project cards display varied creative work, including graphic-led award and branding imagery. Keep media crisp and let each project retain its own palette.

## Components

### Header navigation

Place the ACCOMPANY wordmark at the left and WORK, ABOUT, SERVICES, and CONTACT links at the right, in black sans-serif text on white.

### Display statement

Set the opening message in a large, light serif with tight tracking, left aligned and broken across multiple lines.

### Hero carousel

Show a centered, wide project-media frame with simple previous/next arrow controls and a small slide counter.

### Studio introduction

Use a strong, left-aligned sans-serif paragraph in a single-column content block beneath the hero media.

### Project cards

Arrange three image-led project stories in columns, with compact titles and short supporting descriptions.

### Contact prompt

Use a prominent, left-aligned invitation and a direct get-in-touch link on the white canvas.

### Footer

Organize studio address, social links, acknowledgement copy, and back-to-top navigation into a simple two-column layout.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 10px 0px · 400 13.3333px Arial
- **Link** (“EMAIL”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px SyndicatGroteskMedium
- **Navigation item** (“WORK”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px SyndicatGroteskMedium

## Do

- Use Gallery White (#ffffff) as the continuous page canvas.
- Use Studio Ink (#000000) for core text, navigation, and links.
- Give the display headline a light, editorial serif character.
- Keep header navigation compact and aligned to the upper right.
- Let project imagery introduce colour without recolouring the interface.
- Use whitespace to distinguish sections and preserve a spacious rhythm.

## Don't

- Do not treat the purple carousel artwork as a global accent colour.
- Do not add coloured section backgrounds absent from the measured page.
- Do not add heavy borders, shadows, or elevated card treatments.
- Do not center every heading; preserve the page’s left-aligned editorial composition.
- Do not crowd the hero headline or compress the whitespace between sections.
- Do not replace project-specific imagery with generic decorative illustrations.

## Agent prompt

Build a new page in the ACCOMPANY visual style: use Gallery White (#ffffff) as the uninterrupted canvas and Studio Ink (#000000) for navigation, headings, body copy, and links. Set a quiet header with the wordmark on the left and compact navigation on the right. Lead with a prominent, left-aligned, light editorial serif statement; use a medium sans serif for supporting copy and controls. Place wide, centered project media beneath the headline, with simple arrow controls, then introduce a single-column studio statement and a three-column project showcase. Preserve generous whitespace and a flat visual treatment. Let each project’s own artwork provide colour; do not turn its purple or other image colours into interface accents. Finish with a direct contact invitation and a practical two-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large left-aligned serif statement above a centered wide media carousel. | Previous/next carousel controls, Slide count | Oversized editorial headline, Wide project media, Minimal arrow controls |
| 2 | other | Single-column, left-aligned studio statement on white. | Introductory brand narrative | Bold sans-serif text, Open white canvas |
| 3 | feature-grid | Three-column row of image-led project stories. | Project links | Creative portfolio imagery, Compact titles and descriptions |
| 4 | cta | Left-aligned contact statement with a direct text link. | Get-in-touch link | Large editorial copy, Minimal link treatment |
| 5 | footer | Two-column footer containing studio details, social links, acknowledgement, and back-to-top. | Social navigation, Back-to-top link | Black text on white, Simple text links |

## Source CSS custom properties (selected)

```css
--wpds-border-radius-xs: 1px;
--wpds-border-radius-sm: 2px;
--wpds-border-radius-md: 4px;
--wpds-border-radius-lg: 8px;
--wpds-border-radius-xl: 12px;
--wpds-border-width-xs: 1px;
--wpds-border-width-sm: 2px;
--wpds-border-width-md: 4px;
--wpds-border-width-lg: 8px;
--wpds-border-width-focus: 2px;
--wpds-color-background-surface-neutral: #fcfcfc;
--wpds-color-background-surface-neutral-strong: #fff;
--wpds-color-background-surface-neutral-weak: #f4f4f4;
--wpds-color-background-surface-brand: #ecf0fa;
--wpds-color-background-surface-success: #c6f7cd;
--wpds-color-background-surface-success-weak: #ebffed;
--wpds-color-background-surface-info: #deebfa;
--wpds-color-background-surface-info-weak: #f3f9ff;
--wpds-color-background-surface-warning: #fde6be;
--wpds-color-background-surface-warning-weak: #fff7e1;
--wpds-color-background-surface-caution: #fee995;
--wpds-color-background-surface-caution-weak: #fff9ca;
--wpds-color-background-surface-error: #f6e6e3;
--wpds-color-background-surface-error-weak: #fff6f5;
--wpds-color-background-interactive-neutral-strong: #2d2d2d;
--wpds-color-background-interactive-neutral-strong-active: #1e1e1e;
--wpds-color-background-interactive-neutral-strong-disabled: #e6e6e6;
--wpds-color-background-interactive-neutral-weak: #0000;
--wpds-color-background-interactive-neutral-weak-active: #ededed;
--wpds-color-background-interactive-neutral-weak-disabled: #0000;
--wpds-color-background-interactive-brand-strong: #3858e9;
--wpds-color-background-interactive-brand-strong-active: #2e49d9;
--wpds-color-background-interactive-brand-strong-disabled: #e6e6e6;
--wpds-color-background-interactive-brand-weak: #0000;
--wpds-color-background-interactive-brand-weak-active: #e6eaf4;
--wpds-color-background-interactive-brand-weak-disabled: #0000;
--wpds-color-background-interactive-error: #0000;
--wpds-color-background-interactive-error-active: #fff6f5;
--wpds-color-background-interactive-error-disabled: #0000;
--wpds-color-background-interactive-error-strong: #cc1818;
```

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