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

# Artworld · Design System

> Artist names as an identity; typography as the canvas.

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

Artworld’s homepage leads with a typographic roster of represented artists and a striking oversized wordmark. A strict black-and-white palette and abundant white space give the agency’s creative work room to speak.

## North star

Let oversized, art-directed typography carry the identity, and use white space to make every mark feel deliberate.

## Overview

The page is built around a pure white canvas (#ffffff) and black typography (#000000), with no measured accent colours. The opening roster uses large, elegant serif names, mixing upright and italic treatments to create an editorial rhythm; small discipline markers and a tiny legend sit quietly beside them. Below, an enormous, heavy ARTWORLD wordmark anchors the viewport like a graphic object. The measured type system pairs Cardinal Fruit for display names with lighter Graphik Light for small utility text and an italic serif for body copy. Layout is intentionally sparse: names form loose, staggered rows, while broad white intervals separate the roster from the brand mark. The screenshot is primarily typography rather than photography or illustration. Keep the visual hierarchy driven by scale, contrast, type style and empty space, not by decorative colour, cards or effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Uninterrupted page canvas and negative space surrounding the artist roster and oversized wordmark. |
| Ink Black | `#000000` | `--color-ink-black` | brand | Artist names, discipline markers, small utility labels, and the dominant ARTWORLD wordmark. |

### Semantic aliases

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

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik Light | `--font-graphik-light` | webfont | 300 | Small captions, discipline labels, and utility text. | Inter |
| Cardinal Fruit | `--font-display` | webfont | 300 | Large artist names and display typography. | Bodoni Moda |
| Cardinal Fruit Italic | `--font-cardinal-fruit-italic` | webfont | 300 | Italic emphasis within the artist roster and expressive display text. | Bodoni Moda |
| Cardinal Classic Italic | `--font-body` | webfont | 300 | Measured body-copy style; the page screenshot mainly shows small supporting text. | Cormorant Garamond |

- **Graphik Light:** Use a light sans-serif weight for compact, understated labels; keep it secondary to the serif names.
- **Cardinal Fruit:** Light, high-contrast editorial serif; set names at display scale, mixing upright and italic styles.
- **Cardinal Fruit Italic:** Use the italic cut to vary the roster rhythm while retaining the same delicate, editorial character.
- **Cardinal Classic Italic:** Light italic serif treatment with subtly tight tracking; keep usage restrained.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 74.5px | 300 | 1 | -0.01em | — | Cardinal Fruit | Oversized artist names form the main roster and editorial focal point. |
| body | 18px | 300 | normal | -0.011em | — | Cardinal Classic Italic | Supporting copy or artist-related text in an italic serif style. |
| caption | 12px | 300 | normal | 0 | — | Graphik Light | Small discipline abbreviations and the roster’s explanatory legend. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 20, 29, 30, 90 px.
- Section rhythm 90px · element gap — · card padding — · max content width —.

The viewport presents a broad, loose roster of artist names across staggered rows, followed by a small centered discipline legend and a large vertical interval. The oversized ARTWORLD wordmark spans nearly the full lower viewport, aligned close to the page edges. The composition feels open rather than card-based; preserve the irregular rhythm and generous white areas. Measurements do not establish a grid or maximum content width, so match the screenshot’s visual alignment rather than imposing a rigid column system.

## Shape & elevation

- No box shadows measured: the page is flat.

The measured system reports no shadows, gradients, or component borders. Keep the page flat and unlayered: contrast comes from black lettering against white canvas, while spacing separates content. Avoid cards, panels, outlines, or floating surfaces that would interrupt the open editorial composition.

## Imagery

The supplied first viewport and full-page overview are typographic: artist names and the ARTWORLD wordmark provide the visual content. No photography, illustration, or 3D imagery defines this view. Preserve the restrained presentation by treating text as the artwork; if imagery appears elsewhere, avoid inventing a treatment based on this screenshot alone.

## Components

### Artist name roster

Large black serif names in loose, staggered rows; vary upright and italic cuts to reproduce the expressive editorial rhythm.

### Discipline markers

Tiny parenthetical abbreviations sit beside artist names, using subdued scale so they do not compete with the names.

### Roster legend

A small centered caption explains the discipline abbreviations beneath the names.

### ARTWORLD wordmark

A massive, bold black uppercase wordmark anchors the bottom of the viewport against uninterrupted white.

### Info label

A tiny italic 'Info' label appears near the lower-right edge beside the large wordmark.

### Measured component styles

- **Link** (“Marc Hibbert ( P D )”): transparent background · text #000000 · radius 0px · padding 0px · 300 74.7px Cardinal Fruit

## Do

- Use only measured black and white for the defining interface palette.
- Make artist names the first visual focus.
- Mix serif italics and roman forms for editorial variation.
- Keep discipline labels much smaller than the names.
- Leave broad, deliberate intervals between content groups.
- Scale the wordmark until it reads as a graphic anchor.

## Don't

- Do not add unmeasured accent colours.
- Do not place the roster inside cards or bordered panels.
- Do not add shadows, gradients, or decorative effects.
- Do not crowd the page with dense explanatory copy.
- Do not make utility labels compete with the artist names.
- Do not impose a conventional uniform card grid.

## Agent prompt

Build a new page in Artworld’s sparse, editorial style. Use Gallery White (#ffffff) as the uninterrupted canvas and Ink Black (#000000) for all defining typography. Make expressive serif display text the visual anchor, mixing upright and italic forms; use a light sans-serif only for tiny captions and utility labels. Arrange key names or content in loose, staggered lines rather than cards, and separate major groups with generous white space. Use one oversized, bold uppercase wordmark or equivalent typographic anchor near the viewport edge. Keep the composition flat: no shadows, gradients, borders, decorative colour, or unnecessary imagery. Let scale, letterform contrast, irregular rhythm, and negative space establish hierarchy.

## Source CSS custom properties (selected)

```css
--color-black: #000;
--color-white: #fff;
--big-font: 78px;
--body-font: 20px;
--title-font: 28px;
--content-font: 14px;
--splash-font: 100px;
--small-font: 12px;
--menu-font: 63px;
--menu-big-font: 30px;
--about-big-font: 44px;
--slide-text: 48px;
--overview-font: 36px;
--overlay-artist-discipline-text-size: 21px;
--artist-font: 93px;
--artist-font-profile: 48px;
--artist-letter-spacing: -2px;
--menu-content-font: 18px;
--mobile-content-font: 14px;
--peek-gap: 40px;
```

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