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

# Art + Commerce · Design System

> A quiet gallery for image-making talent.

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

Art + Commerce presents a global roster of image makers through a restrained, gallery-like homepage. Monochrome typography and generous white space let campaign photography and video carry the visual impact.

## North star

Treat the interface as a quiet white gallery: keep typography and controls restrained so each image has room to command attention.

## Overview

The page uses a white canvas as a quiet gallery ground, with black typography providing the only consistent graphic contrast and a pale gray hairline separating the compact navigation from the work. The measured palette is deliberately narrow; vivid reds, blues, and other hues belong to campaign imagery rather than the site’s interface. Adobe Garamond gives headlines, captions, and editorial copy a refined print sensibility, while Akzidenz Grotesk appears in compact uppercase navigation and metadata. The layout alternates full-bleed moving image, centered or inset campaign visuals, a two-column editorial feature, and tightly aligned multi-column indexes. Large vertical gaps create a slow viewing rhythm without adding decorative framing. Captions sit close to imagery and remain visually subordinate. The overall system is flat and unembellished: no shadows, rounded cards, or persistent accent-color buttons compete with the portfolio.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and the uninterrupted ground around editorial blocks, campaign images, and the artist index. |
| Print Ink | `#000000` | `--color-print-ink` | brand | Wordmark, navigation, headings, captions, body copy, and linked text. |
| Quiet Rule | `#e7e7e7` | `--color-quiet-rule` | neutral | Fine navigation hairline; use as a subtle divider rather than a card outline. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Print Ink) · `--color-border` → `#e7e7e7` (Quiet Rule)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Adobe Garamond | `--font-body` | webfont | 400 | Editorial headlines, body copy, and image credits | EB Garamond |
| Akzidenz Grotesk | `--font-akzidenz-grotesk` | webfont | 700, 500, 400 | Uppercase navigation, eyebrows, and compact metadata | Roboto |

- **Adobe Garamond:** Regular weight; use the serif for readable editorial text and let headlines retain a print-like character.
- **Akzidenz Grotesk:** Use bold or medium weight, uppercase, and modest positive tracking for small utility labels.

### Type scale — Custom (ratio ≈ 1.871, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.1 | -0.018em | — | Adobe Garamond | Large editorial display typography where featured content calls for emphasis. |
| h1 | 20px | 400 | 1.1 | 0 | — | Adobe Garamond | Editorial feature title, such as the photographer exhibition headline. |
| body | 16px | 400 | 1.3 | 0 | — | Adobe Garamond | News announcements, editorial descriptions, and linked text. |
| caption | 10px | 700 | 1.25 | 0.03em | uppercase | Akzidenz Grotesk | Compact uppercase campaign and image metadata. |
| nav | 10px | 700 | 1 | 0.027em | uppercase | Akzidenz Grotesk | Top-level navigation labels in the header. |
| eyebrow | 10px | 700 | 1.25 | 0.03em | uppercase | Akzidenz Grotesk | Small uppercase section labels and editorial identifiers. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 8, 12, 13, 16, 23, 29, 32, 36, 80, 160 px.
- Section rhythm 160px · element gap 8px · card padding — · max content width 1417px.

A compact horizontal header sits above a long, spacious portfolio feed on a white canvas. The measured maximum page width is 1417px; sections alternate full-bleed media, inset single-image compositions, split editorial blocks, paired images, and a four-column campaign row. The final roster is organized in aligned columns. Keep text and imagery carefully aligned, but allow selected media to span broadly. The measured section gap is 160px, with a spacious overall density and short gaps within related content.

## Shape & elevation

- No box shadows measured: the page is flat.

The system is flat: measured data reports no shadows, gradients, or radius scale. Keep campaign images flush against the white canvas without card shells or floating panels. Use the measured #e7e7e7 hairline sparingly at the navigation boundary; rely on whitespace and alignment, not borders, to separate sections.

## Imagery

Photography and video are the main event: fashion campaigns, portraits, editorial covers, runway imagery, and creative work appear in varied aspect ratios. Some media runs edge to edge; other images sit centered or in paired columns with restrained credits close by. Preserve original image color and tonal treatment rather than applying a site-wide filter. The grayscale hero demonstrates campaign content, not a mandatory monochrome treatment for all imagery.

## Components

### Header navigation

Compact horizontal white bar with the wordmark at left and small bold uppercase destinations at right; use a fine #e7e7e7 divider.

### Featured media

Large campaign video or image, sometimes full bleed, followed by a concise serif announcement or credit.

### Editorial feature

Two-column feature pairing a campaign image with a small eyebrow, serif title, and concise editorial description.

### Campaign image and caption

Single or paired photography with understated serif creator credit and compact uppercase project metadata.

### Campaign row

Four evenly organized campaign entries with image, small project label, and creator credit.

### Artist index

Dense, multi-column roster of creative disciplines and linked names, set in small type on the open white canvas.

### Measured component styles

- **Link** (“Art + Commerce is pleased to announce re”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Adobe Garamond
- **Navigation item** (“ARTISTS IMAGE ARCHIVE PRODN NEW LIGHT FI”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Adobe Garamond

## Do

- Keep the canvas white and the interface palette restrained.
- Let campaign imagery dominate the visual hierarchy.
- Use Garamond-style serif for editorial text and credits.
- Set navigation and metadata in compact uppercase grotesk.
- Alternate image-led layouts with generous vertical breathing room.
- Keep captions close to the work they identify.

## Don't

- Do not turn campaign colors into interface accents.
- Do not add shadows, gradients, or rounded card containers.
- Do not crowd the page with promotional UI or decorative chrome.
- Do not make captions compete with the featured imagery.
- Do not force every portfolio image into the same aspect ratio.
- Do not replace the spacious rhythm with dense dashboard-like grids.

## Agent prompt

Build a new Art + Commerce page as a restrained editorial gallery, not a conventional agency landing page. Use Gallery White (#ffffff) for the canvas, Print Ink (#000000) for all core text and navigation, and Quiet Rule (#e7e7e7) only for subtle dividers. Set editorial headlines, descriptions, and credits in a Garamond-style serif; reserve a compact, uppercase grotesk for navigation, eyebrows, and project metadata. Create a short horizontal header, then give campaign photography or video broad, varied placements: full-bleed feature, inset image, paired work, and carefully aligned multi-column entries. Use ample whitespace to separate stories and keep captions close to their images. Avoid card shells, shadows, gradients, rounded corners, and interface accent colors. Preserve the distinct colors and framing of the supplied campaign assets.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video below the compact navigation, with a serif announcement directly underneath. | Lead with moving campaign work, Announcement caption | Edge-to-edge media, White caption band, Serif text |
| 2 | feature-split | Two-column editorial feature pairing a campaign poster with text. | Image-and-story pairing, Editorial detail | Serif headline, Small uppercase eyebrow, Open white space |
| 3 | gallery | A campaign image presented as an inset single-column feature with a slim credit line. | Image-led browsing, Creator and project credit | Wide photography, Small serif caption, White margins |
| 4 | video | Broad, near-full-bleed campaign video followed by understated creator and project labels. | Featured campaign playback, Credit below media | Large video frame, Minimal captioning |
| 5 | gallery | Two campaign images placed side by side within a centered content area. | Compare related images, Campaign identification | Paired imagery, Compact metadata |
| 6 | gallery | A broad, inset campaign image with creator credits and small project metadata. | Showcase campaign work, Credit creative collaborators | Wide image, White surrounding space, Small caption |
| 7 | gallery | Two magazine-cover images arranged as a centered pair with a shared credit line. | Present related editions, Shared creator credit | Paired covers, Small serif caption |
| 8 | video | Large single-column video work with small creator and campaign identifiers. | Featured motion work, Contextual credit | Spacious media area, Minimal metadata |
| 9 | gallery | Four campaign images aligned in a row, each with compact project and creator labels. | Scan multiple campaigns, Open project links | Four-column image grid, Small uppercase metadata, Creator captions |
| 10 | footer | Multi-column roster of creative disciplines and names above a narrow utility footer. | Browse by discipline, Navigate to individual creators | Small linked text, Bold uppercase category labels, Aligned columns |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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