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

# Aaron Poe & Co. · Design System

> A quiet dark canvas for culture-led creative work.

**Theme:** dark · **Industry:** portfolio · **Source:** https://aaronpoeandco.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._

A restrained studio homepage built around a near-black canvas, a compact floating navigation bar, and one centered brand statement. Stark white typography and a vivid pink wordmark provide the main contrast, while the measured palette remains deliberately sparse.

## North star

Keep the page nearly black and spacious, letting a single bold white statement and compact floating navigation carry the identity.

## Overview

The visual strategy relies on restraint: a nearly black full-page canvas establishes a quiet, immersive setting, with white reserved for the central statement, navigation marks, and small utility icon. The measured palette is minimal; the vivid pink visible in the studio wordmark is a localized navigation detail, not a basis for expanding the site palette. Typography carries the message. The hero statement is bold, uppercase, tightly tracked, and centered as a single line, while navigation labels use a much smaller, utilitarian treatment. A pale rounded navigation capsule floats near the top center and contrasts sharply with the dark field; its pink brand tab supplies the only vivid accent in view. The composition leaves extensive open space around both navigation and headline. No prominent photography or decorative illustration appears in the supplied viewport, so the page reads as an intentionally sparse typographic portfolio rather than a media-heavy landing page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary hero text, navigation capsule, studio mark, and small top-right utility icon. |
| Studio Black | `#101010` | `--color-studio-black` | brand | Dominant full-page canvas and the dark field surrounding the headline and navigation. |
| Soft Porcelain | `#f5f5f5` | `--color-soft-porcelain` | surface | Measured minor neutral detail; not a defining page surface in the supplied screenshot. |

### Semantic aliases

`--color-canvas` → `#101010` (Studio Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#101010` (Studio Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101010` | 19.03:1 | AAA |
| `#101010` | `#ffffff` | 19.03:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| custom_156352 | `--font-body` | webfont | 700 | Bold hero statement, prominent navigation link, and small bold labels. | Inter |
| custom_152369 | `--font-custom-152369` | webfont | 400 | Regular-weight supporting text and compact navigation labels. | Inter |

- **custom_156352:** Measured at weight 700; display copy is uppercase, strongly bold, and tightly tracked.
- **custom_152369:** Measured at weight 400; use a restrained, clean sans-serif treatment for small utility copy.

### Type scale — Major Third (ratio ≈ 1.25, base 42px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 42px | 700 | 1.02 | -0.029em | — | custom_156352 | Central uppercase brand statement in the hero. |
| caption | 10px | 700 | 3.2 | -0.05em | — | custom_156352 | Small utility labels and compact navigation copy. |
| link | 42px | 700 | 1.02 | -0.029em | — | custom_156352 | Prominent navigation link styling. |

OpenType features in use: `"ss02"`.

## Spacing & layout

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

Use a single expansive dark canvas with sparse content and no visible column grid. Keep the navigation compact, centered near the top, and visually detached from the hero. Place the hero statement on the horizontal centerline, with generous empty space above, below, and on both sides. The screenshot suggests a comfortable rather than dense composition; avoid adding unsupported card groups or section bands. Keep the top-right utility mark separate from the main navigation.

## Shape & elevation

- Radius: xs `6px` · pill `9999px`
- No box shadows measured: the page is flat.

The page is predominantly flat, with no measured shadows or decorative borders. The navigation capsule is the main layered element, defined by its pale surface and rounded silhouette against the dark canvas. Keep separation tonal and simple; avoid adding cards, gradients, or simulated depth.

## Imagery

No prominent photography, illustration, 3D, or video is visible in the supplied viewport. The visual identity comes from typography, the studio wordmark, and a small geometric utility mark. Preserve the dark uninterrupted field rather than introducing decorative imagery; if later content includes portfolio work, let that work remain distinct from this sparse opening composition.

## Components

### Floating navigation capsule

A compact pale rounded bar near the top center, with a vivid pink studio tab and small dark navigation labels.

### Hero statement

A single centered line of bold uppercase white copy, using the measured 700-weight display family and tight tracking.

### Studio wordmark

The PoeStudio mark appears as white lettering on a vivid pink tab within the navigation; treat the pink as screenshot-specific rather than a measured palette token.

### Utility mark

A small white geometric mark sits independently near the upper-right edge of the dark canvas.

### Measured component styles

- **Link** (“brands”): transparent background · text #ffffff · radius 0px · padding 0px 0px 1px 0px · 700 42px custom_156352

## Do

- Use #101010 as the dominant page canvas.
- Set the main statement in bold white uppercase type.
- Keep the hero copy centered and visually isolated.
- Place navigation in a compact pale capsule near the top.
- Use pink only as a localized wordmark detail.
- Preserve broad areas of uninterrupted negative space.

## Don't

- Do not fill the canvas with extra content.
- Do not add gradients or shadows.
- Do not turn the hero into a multi-line editorial block without evidence.
- Do not introduce a large bright accent palette.
- Do not add card grids to the opening viewport.
- Do not make navigation compete with the hero statement.

## Agent prompt

Build a new page in the Aaron Poe & Co. visual style. Use Studio Black (#101010) for a nearly uninterrupted full-page canvas and Gallery White (#ffffff) for the primary statement and utility marks. Keep the layout sparse: a compact, pale rounded navigation capsule near the top, a separate small mark at upper right, and one bold uppercase statement centered in the open field. Use a heavy, tightly tracked sans-serif display face, with small restrained labels in regular sans-serif. The screenshot’s pink studio tab is a localized identity detail, not a measured palette color; do not spread it across the page. Avoid gradients, shadows, decorative borders, dense grids, and unnecessary imagery. Prioritize strong contrast, generous negative space, and clear separation between navigation and headline.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full dark canvas with a top-centered floating navigation and a centered single-line statement. | compact primary navigation, central brand message | near-black background, pale rounded nav capsule, bold white uppercase type |

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