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

# Album Colors Of The Year · Design System

> A quiet canvas for the colors of music

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

Album Colors presents a collection of album covers through an oversized typographic title and a single featured image. A muted sage canvas, dark olive text, and a refresh control keep attention on the artwork.

## North star

Let oversized, precise typography and a muted sage canvas frame the album art without competing with it.

## Overview

The page uses a restrained three-colour system: a muted sage canvas fills the background, dark olive ink carries the typography and fine outlines, and a softer green identifies the image-area surface. The palette feels intentionally quiet, letting the changing album artwork supply the stronger and more varied colours. A very large, lightweight uppercase title dominates the top of the page, with the year aligned as a separate counterpoint on the right. Smaller uppercase copy sits inside a thin rectangular frame below. The central cover is presented as a large, straightforward image rather than a card with decorative effects; a vertical refresh link runs along the frame’s right edge. Spacing is open and the composition is asymmetric but orderly, with clear contrast between the title, framed gallery area, and artwork. Keep the page flat, typographic, and image-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Ink | `#35361e` | `--color-olive-ink` | brand | Primary title, year, supporting copy, refresh link, and thin frame outlines. |
| Sage Canvas | `#99aa91` | `--color-sage-canvas` | brand | Dominant page background, creating a muted field around the title and artwork. |
| Moss Surface | `#809f89` | `--color-moss-surface` | surface | Green image-area surface sampled in the measured palette; keep its use subordinate to the album artwork. |

### Semantic aliases

`--color-canvas` → `#99aa91` (Sage Canvas) · `--color-surface` → `#809f89` (Moss Surface) · `--color-text` → `#35361e` (Olive Ink) · `--color-border` → `#35361e` (Olive Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#35361e` | `#99aa91` | 5.01:1 | AA |
| `#35361e` | `#809f89` | 4.26:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica LT Pro | `--font-body` | webfont | 400 | Display title, year, uppercase supporting copy, and refresh link. | Helvetica Neue |

- **Helvetica LT Pro:** Regular weight throughout; oversized display text is tightly tracked with a compact line height, while supporting copy and links are uppercase.

### Type scale — Custom (ratio ≈ 6.548, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 137.5px | 400 | 0.79 | -0.05em | — | Helvetica LT Pro | Oversized two-line page title and prominent year. |
| body | 21px | 400 | 1 | 0 | uppercase | Helvetica LT Pro | Uppercase supporting description inside the framed gallery. |
| link | 21px | 400 | 1 | 0 | uppercase | Helvetica LT Pro | Uppercase vertical refresh-to-change-color control. |

## Spacing & layout

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

Build a full-bleed canvas with a compact page inset and no visible navigation bar. The title occupies the upper left in two tightly stacked lines; the year sits on the right as a separate large element. A thin outlined gallery frame begins directly below the heading and spans nearly the full page width. Place the artwork centrally within that open area, leaving substantial breathing room around it. Keep the density low and the alignment deliberately asymmetric; the refresh link tracks vertically along the frame’s right side.

## Shape & elevation

- No box shadows measured: the page is flat.

Keep the interface flat: no measured shadows, gradients, or rounded component treatments. Use dark olive hairline borders to define the gallery frame and let the image sit directly within the canvas. Preserve clear layering through scale and placement rather than depth effects.

## Imagery

Use album-cover artwork as the central focal point, framed as a direct, large image rather than a decorative card. The screenshot shows a photographic portrait with warm hair and a dark graphic shape against a cool green cover field. Artwork colours can vary and should be treated as content, not as additions to the fixed brand palette.

## Components

### Oversized title

Large, regular-weight uppercase display text on two compact lines, aligned to the upper left in Olive Ink (#35361e).

### Year marker

A prominent four-digit year set apart on the right side of the title area.

### Framed gallery

A broad, thin Olive Ink (#35361e) outline containing uppercase introductory copy and the featured cover.

### Album cover

A large central artwork image; its changing photographic colours remain distinct from the fixed page palette.

### Refresh control

An uppercase text link reading “REFRESH TO CHANGE COLOR,” set vertically along the gallery frame’s right edge.

### Measured component styles

- **Link** (“REFRESH TO CHANGE COLOR”): transparent background · text #35361e · radius 0px · padding 0px · 400 21px Helvetica LT Pro · uppercase

## Do

- Use Sage Canvas (#99aa91) as the dominant page field.
- Set headings and frame lines in Olive Ink (#35361e).
- Let the cover artwork provide the strongest colour variation.
- Keep the headline large, uppercase, and tightly stacked.
- Use open space around the central artwork.
- Keep controls text-led and visually integrated with the frame.

## Don't

- Do not add gradients or drop shadows.
- Do not introduce rounded cards or pill controls.
- Do not turn the page into a dense navigation-led layout.
- Do not use the cover’s incidental colours as fixed brand colours.
- Do not compete with the artwork using extra decoration.
- Do not replace the flat canvas with a white page.

## Agent prompt

Create a new editorial gallery page in the Album Colors visual style. Use Sage Canvas (#99aa91) as a full-page background and Olive Ink (#35361e) for typography, links, and fine outlines; use Moss Surface (#809f89) only as a restrained image-area surface where appropriate. Set text in a clean Helvetica-like sans serif, with a very large regular-weight uppercase headline, tight display leading, and compact uppercase supporting copy. Arrange the heading asymmetrically, reserve a large outlined area for one prominent piece of artwork, and place a simple text control at its edge. Keep spacing open, components flat, and the image visually dominant. Avoid shadows, gradients, rounded cards, and decorative UI. Artwork colours may vary independently of the fixed palette.

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