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

# Atoms · Design System

> Quietly monumental, built for physical automation.

**Theme:** dark · **Industry:** other · **Source:** https://atoms.co/ · **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._

Atoms pairs a near-black canvas and warm ivory typography with a restrained, earthy accent. A centered hero introduces the mission, then a modular company grid presents the portfolio with sparse copy and subtle borders.

## North star

Let black space and warm, precise typography carry the page; use imagery and accents sparingly.

## Overview

The page is built on a nearly uninterrupted black canvas (#000000), which gives the wordmark, navigation, and content a quiet, high-contrast presence. Warm ivory (#e6dfc7) carries the primary text, including the hero statement and company names; muted bronze (#c8ad86) is a restrained accent rather than a broad surface colour. Switzer supplies a clean sans-serif voice, with compact navigation and captions balancing a larger, softly tracked hero statement. The opening composition centers a geometric mark above the mission copy, leaving generous black space around both. Below, the Companies section shifts to a practical modular grid: thin outlines distinguish dark cards without introducing bright panels. Portfolio marks and imagery retain subdued earthy tones, while brief descriptions and small links keep attention on each company. The overall strategy is deliberately sparse and monumental: scale comes from empty space, alignment, and the oversized footer wordmark, not decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Industrial Black | `#000000` | `--color-industrial-black` | brand | Dominant canvas across the hero and company portfolio; preserves the site's near-black, uninterrupted visual field. |
| Warm Ivory | `#e6dfc7` | `--color-warm-ivory` | neutral | Primary color for the logo, navigation, hero statement, headings, and company-card copy. |
| Muted Bronze | `#c8ad86` | `--color-muted-bronze` | accent | Restrained warm accent; earthy tones are most visible in the geometric hero mark and portfolio imagery. |

### Semantic aliases

`--color-canvas` → `#000000` (Industrial Black) · `--color-text` → `#e6dfc7` (Warm Ivory) · `--color-accent` → `#c8ad86` (Muted Bronze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6dfc7` | `#000000` | 15.74:1 | AAA |
| `#c8ad86` | `#000000` | 9.78:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 25%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 500, 400 | Primary face for navigation, headings, body copy, and captions. | Inter |

- **Switzer:** Mostly regular and medium weights; compact negative tracking, with clean sentence case and a centered multi-line hero.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 400 | 1 | -0.008em | — | Switzer | Centered, multi-line homepage mission statement. |
| body | 16px | 500 | 1.13 | -0.016em | — | Switzer | Company descriptions and supporting page copy. |
| caption | 12px | 400 | 1 | -0.042em | — | Switzer | Compact metadata, company labels, and small footer details. |
| nav | 16px | 500 | 1.13 | -0.016em | — | Switzer | Top navigation links and utility menu labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 16, 20, 24, 60, 80 px.
- Section rhythm 80px · element gap 2px · card padding — · max content width 1200px.

The homepage uses a centered hero beneath a slim, widely spread navigation row. The measured page maximum width is 1200px, while the hero and company heading align centrally. The portfolio becomes a dense, multi-column grid of dark cards, with later rows accommodating individual company marks. Section spacing feels generous above the fold and more compact within the portfolio. A large footer wordmark anchors the bottom, separated from the grid by a fine horizontal rule.

## Shape & elevation

- Radius: xs `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page is essentially flat: the black canvas remains continuous, with no visible shadows or raised panels. Thin, low-contrast card outlines and a footer divider provide structure. Rounded corners are confined to the geometric mark and should not become a general card treatment.

## Imagery

The hero uses a geometric mark made from rounded, square-like forms; its earthy, textured appearance contrasts with the flat black canvas. Portfolio cards mix wordmarks, abstract symbols, and subdued image treatments. Keep media contained within its dark card, with restrained contrast and no bright framing. The screenshots show brand and company imagery, not a conventional product-photography system.

## Components

### Top navigation

Wordmark at the left and compact Announcement, Vision, Careers, and Contact links aligned at the right.

### Hero mark

A centered geometric arrangement of rounded square forms with subdued bronze, earthy imagery.

### Hero statement

A centered, three-line mission statement in warm ivory, followed by understated text links.

### Company portfolio cards

Dark, thinly outlined cards combining company marks, short descriptions, and small supporting links.

### Portfolio heading

Centered section label with a small company count and a separate Careers link.

### Oversized footer wordmark

Large warm-toned ATOMS lettering above a thin rule and compact footer navigation.

### Measured component styles

- **Link** (“Careers”): transparent background · text #0000ee · radius 0px · padding 4px 0px · 400 12px sans-serif
- **Navigation item** (“Vision Announcement Careers Contact”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the canvas consistently black.
- Use warm ivory for primary text.
- Reserve bronze for restrained accents and earthy media.
- Center the hero mark and mission statement.
- Use subtle outlines to define portfolio cards.
- Leave generous negative space around major content.

## Don't

- Do not introduce bright section backgrounds.
- Do not use colorful gradients or glowing effects.
- Do not turn cards into elevated, shadowed panels.
- Do not crowd the hero with supporting copy.
- Do not use oversized decorative icons throughout.
- Do not treat link blue from crawler noise as a brand color.

## Agent prompt

Build a new page in the Atoms visual style: use Industrial Black (#000000) as the dominant canvas, Warm Ivory (#e6dfc7) for primary text, and Muted Bronze (#c8ad86) only as a restrained accent. Use Switzer or a close sans-serif substitute such as Inter, with compact navigation, clean sentence-case headings, and concise copy. Place a slim navigation row above a spacious, centered hero with a geometric mark, a short multi-line statement, and understated text links. Organize supporting content into modular dark cards separated by fine, low-contrast outlines rather than shadows. Keep imagery subdued and earthy, and reserve generous empty space around major sections. Finish with a fine divider and a strongly scaled wordmark. Avoid bright panels, decorative gradients, and heavy elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim top navigation above a spacious, centered mark, mission statement, and paired text links. | Primary navigation, Mission-led introduction, Text-link actions | Black canvas, Centered geometric mark, Warm ivory headline |
| 2 | feature-grid | Centered section heading followed by a multi-column portfolio grid and a large footer wordmark. | Company discovery, Careers link, Company detail links | Thin card outlines, Dark image areas, Compact card copy, Footer divider |

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