Artworld

以艺术家之名,构建视觉画布Artist names as an identity; typography as the canvas.

浅色主题设计机构artist representation agency homepage极简编辑风字体主导黑白艺术指导原网页 artworld.agency ↗ · 2026-10-12 采集 · 1440×900 桌面端
Artworld 首屏

Artworld 首页以艺术家名单开场,并用醒目的超大字标建立品牌识别。黑白配色与大面积留白,让代理艺术家的姓名成为页面主角。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
表层色
页面底色 · Gallery White主文字 · Ink Black
文字背景对比度WCAG
#000000 Ink Black#ffffff Gallery White21:1AAA

字体

字号阶梯:Custom(比例约 4.139,正文 18px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Graphik Light

网络字体 · 字重 300 · 占比 51%
免费替代:Inter

Small captions, discipline labels, and utility text.

Aa 设计

Cardinal Fruit

网络字体 · 字重 300 · 占比 28%
免费替代:Bodoni Moda

Large artist names and display typography.

Aa 设计

Cardinal Fruit Italic

网络字体 · 字重 300 · 占比 21%
免费替代:Bodoni Moda

Italic emphasis within the artist roster and expressive display text.

Aa 设计

Cardinal Classic Italic

网络字体 · 字重 300 · 占比 1%
免费替代:Cormorant Garamond

Measured body-copy style; the page screenshot mainly shows small supporting text.

角色示例字号字重行高字距
特大标题
Oversized artist names form the main roster and editorial focal point.
Artworld
74.5px3001-0.01em
正文
Supporting copy or artist-related text in an italic serif style.
The quick brown fox 敏捷的狐狸
18px300normal-0.011em
辅助文字
Small discipline abbreviations and the roster’s explanatory legend.
The quick brown fox 敏捷的狐狸
12px300normal0

间距与布局

基准单位 2px · 密度:适中

90px版块间距
—元素间距
—卡片内边距
—内容最大宽度
20px
29px
30px
90px

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.

圆角与层次

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

该做与不该做

✓ 该做

  • 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.

✕ 不该做

  • 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.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Artworld 设计系统 — 配色、字体与 DESIGN.md | Design DNA