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

# Accept & Proceed · Design System

> Quiet editorial clarity meets immersive experimentation

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

An editorial agency homepage pairs restrained navigation and project descriptions with oversized, immersive moving-image work. Warm neutral surfaces and dark typography let the portfolio imagery provide the strongest visual contrast.

## North star

Keep the interface quiet and editorial so that each project’s imagery, not decoration, supplies the page’s visual drama.

## Overview

The visual strategy balances a quiet, warm-neutral interface with highly expressive portfolio media. The canvas is #f9f7f3, with white and pale gray-beige section surfaces establishing subtle changes between the project feed, collaboration catalogue, and footer. Black typography carries nearly all interface contrast; muted gray is reserved for secondary details and fine separators. Messina Sans is used throughout the navigation, body copy, labels, and controls, while a distinctive display face appears in the hero. Type is regular-weight and largely unembellished, allowing scale and placement to create hierarchy. The opening viewport is dominated by a wide, pale video composition with a short centered statement. Below, projects use an intentionally varied, asymmetrical image rhythm rather than uniform cards. A white catalogue section switches to aligned rows and pill-shaped Listen controls; the closing contact area returns to a warm neutral band. Rounded media and small capsule controls soften an otherwise flat, spacious layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, navigation, body copy, links, and text on pale controls. |
| Warm Canvas | `#f9f7f3` | `--color-warm-canvas` | surface | Main page canvas, navigation background, and recurring project-feed background. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean background for the Endless Vital Activity catalogue section. |
| Soft Pebble | `#ecebe7` | `--color-soft-pebble` | neutral | Pill-shaped Read Story and Listen controls, plus the pale footer surface. |
| Quiet Gray | `#a2a1a1` | `--color-quiet-gray` | semantic | Muted secondary details and subtle hairline separators, especially in lower-page content. |

### Semantic aliases

`--color-canvas` → `#f9f7f3` (Warm Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#ecebe7` (Soft Pebble) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#a2a1a1` (Quiet Gray) · `--color-border` → `#a2a1a1` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f9f7f3` | 19.63:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ecebe7` | 17.6:1 | AAA |
| `#a2a1a1` | `#f9f7f3` | 2.41:1 | fail |
| `#a2a1a1` | `#ffffff` | 2.58:1 | fail |
| `#a2a1a1` | `#ecebe7` | 2.16:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Messina Sans | `--font-body` | webfont | 400 | Navigation, body copy, section headings, captions, links, and controls | Inter |

- **Messina Sans:** Regular weight throughout; compact sans-serif forms, modest negative tracking in several text roles, and no forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 33.5px | 400 | 1 | 0 | — | Letterformvariations 04 Dmgx | Opening hero statement over the full-width media. |
| h2 | 24px | 400 | 1.33 | -0.01em | — | Messina Sans | Major catalogue or section headings. |
| h3 | 20px | 400 | 1.4 | -0.01em | — | Messina Sans | Project and collaboration titles. |
| body | 14px | 400 | 1.71 | -0.01em | — | Messina Sans | Project descriptions, editorial copy, and footer text. |
| caption | 10px | 400 | 1.6 | -0.01em | — | Messina Sans | Small metadata, labels, and secondary details. |
| button | 17px | 400 | 1 | 0 | — | Messina Sans | Read Story, Listen, and form submission controls. |
| nav | 17px | 400 | 1 | -0.01em | — | Messina Sans | Primary header navigation links. |
| link | 14px | 400 | 1.71 | -0.01em | — | Messina Sans | Inline project, social, and contact links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 8, 10, 12, 14, 15, 16, 18, 20, 21, 24, 30, 32, 33, 40 px.
- Section rhythm 40px · element gap 24px · card padding — · max content width 1352px.

A spacious editorial canvas uses a measured maximum page width of 1352px. The header aligns the wordmark left, primary links across the center, and the collaboration destination toward the right. Project content shifts between paired thumbnails, full-width media, and a centered feature image, creating asymmetry without losing clear alignment. The catalogue uses a three-column row structure, while the closing contact band divides social, contact, and brand narrative into columns. Section changes are calm and legible rather than card-heavy.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `8px` · nav `9999px` · link `8px` · xs `3px` · sm `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat, with no measured shadow system. Sections are differentiated through warm canvas, white, and pale gray-beige backgrounds rather than raised cards. Fine gray separators define catalogue rows, while rounded media and capsule controls provide the limited dimensional cues. Avoid adding ornamental borders or layered UI chrome.

## Imagery

Large project imagery and video are the page’s main expressive layer, ranging from an abstract iridescent hero to documentary-style installations, brand work, and technology exhibits. Media appears in both broad, nearly full-width placements and smaller paired or centered frames. The muted interface palette does not constrain image color; vivid hues belong to the work itself and should not be mistaken for interface accents. Media corners are softly rounded.

## Components

### Header navigation

A quiet horizontal header with a left-aligned wordmark and widely distributed Work, About, Contact, and Endless Vital Activity links in black.

### Project feature

Portfolio entries combine prominent rounded imagery with concise title and supporting description; vary image scale and alignment instead of enclosing every project in a card.

### Story control

Read Story uses black text on a pale #ecebe7 capsule with regular Messina Sans lettering.

### Collaboration catalogue row

White-section rows align topic, episode title, season marker, and a right-side Listen capsule, with subtle gray separators.

### Listen control

A compact pill-shaped #ecebe7 control labeled Listen, set in regular black sans-serif text.

### Contact and newsletter footer

A pale footer band groups social links, contact links, brand copy, and an email field with a Submit control.

### Measured component styles

- **Primary button** (“Read Story”): background #ecebe7 · text #000000 · radius 20px · padding 12px 33px 0px 33px · 400 17px Messina Sans
- **Secondary button** (“Submit”): background #e0dfdb · text #000000 · radius 0px · padding 8px 18px 8px 20px · 400 17px Messina Sans
- **Link** (“@endless_vital_activity”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Messina Sans
- **Input**: background #e0dfdb · text #333333 · radius 100px · padding 8px 0px 8px 20px · 400 17px Messina Sans
- **Navigation item** (“Work About Contact Endless Vital Activit”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Messina Sans

## Do

- Use #f9f7f3 as the main page canvas.
- Keep interface text black and typography regular-weight.
- Let project media carry the strongest colors and contrast.
- Vary project image scale and placement for an editorial rhythm.
- Use white as a distinct, clean catalogue-section surface.
- Keep controls simple, pale, and capsule-shaped.
- Separate catalogue rows with restrained gray hairlines.

## Don't

- Do not add saturated interface accent colors.
- Do not turn every project into a uniform boxed card.
- Do not add prominent shadows or heavy borders.
- Do not force navigation or headings into uppercase.
- Do not mistake colors inside portfolio media for brand UI colors.
- Do not crowd the page with dense decorative elements.

## Agent prompt

Build a new creative-agency page in an understated editorial style. Use Warm Canvas (#f9f7f3) for the main background, Studio Ink (#000000) for navigation and copy, Gallery White (#ffffff) for a clean content band, and Soft Pebble (#ecebe7) for quiet capsule controls. Use a clean regular-weight sans-serif comparable to Messina Sans, with restrained hierarchy and concise copy. Place a simple horizontal navigation above a strong, immersive hero image or video. Follow it with an asymmetrical portfolio feed that mixes paired, wide, and centered media placements. Reserve white space and use Quiet Gray (#a2a1a1) only for muted details and subtle separators. Keep surfaces flat, media softly rounded, and interface decoration minimal. Finish with a warm neutral contact area organized into clear columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width pale media beneath a horizontal header; brief statement centered over the visual. | persistent-style main navigation, centered hero statement | warm neutral canvas, large immersive media, minimal black text |
| 2 | gallery | Editorial project feed with paired thumbnails, wide media, and a centered feature image. | project links, varied media sequence | asymmetric image rhythm, soft media corners, concise project captions |
| 3 | content-feed | White section with an introduction and aligned rows for topic, episode, season, and Listen control. | episode browsing, Listen actions, See More control | white surface, gray row separators, pale capsule buttons |
| 4 | footer | Warm neutral footer arranged into social, contact, and agency-copy columns, with email signup below. | social navigation, contact links, email signup | pale footer band, compact link groups, simple signup form |

## Source CSS custom properties (selected)

```css
--secondary: #000;
--primary: #f9f7f3;
--body-background-dark-theme: #151515;
--image-border-radius: 8px;
--body-text-dark-theme: white;
--primary-80: #f9f7f3cc;
--primary-50: #f9f7f380;
--footer-background-dark-theme: #262626;
--body-background-light-theme: #f9f7f3;
--body-text-light-theme: #000;
--body-text-off-white: black;
```

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