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

# Antimetal · Design System

> Quiet editorial design for autonomous production

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

Antimetal presents autonomous production software through a calm, editorial interface built on a warm gray canvas and expressive serif headlines. Technical diagrams, interface imagery, and restrained dark panels explain a complex product without crowding the page.

## North star

Keep the page quiet and spacious: let editorial serif headlines lead, and use diagrams and dark panels only to clarify the product story.

## Overview

The visual identity is anchored by a continuous warm gray canvas (#d7d7d0), with dark ink text and fine gray hairlines keeping the page quiet and cohesive. Large Test Signifier serif headlines bring an editorial, human tone to technical subject matter; Geist handles navigation, explanatory copy, and controls, while Geist Mono marks compact uppercase labels. The layout favors broad open fields, asymmetric two-column storytelling, and occasional full-bleed media bands rather than a dense dashboard-like grid. Product diagrams use spare linework and small annotations, while interface screenshots and a network of black nodes make the system tangible. Dark navy-black panels are reserved for prominent product and closing moments, creating contrast without introducing a competing palette. Rounded pill controls and translucent navigation sit lightly above otherwise flat, carefully ruled content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Pewter | `#d7d7d0` | `--color-quiet-pewter` | brand | Dominant page canvas, including the hero and most content sections; establishes the muted warm-gray field. |
| Soft Graphite | `#524f4c` | `--color-soft-graphite` | neutral | Primary muted copy and subdued heading text on the light canvas. |
| Warm Ink | `#1a1614` | `--color-warm-ink` | brand | Main headline and body ink, links, badges, and dark primary CTA fill. |
| Pencil Line | `#c4c3bd` | `--color-pencil-line` | neutral | Fine card and diagram borders; use as quiet hairlines, not prominent dividers. |
| Midnight Panel | `#090d13` | `--color-midnight-panel` | surface | Large inverse section surface behind product presentation and closing CTA imagery. |
| Ash Text | `#66635f` | `--color-ash-text` | neutral | Secondary muted explanatory copy against the warm gray canvas. |
| Mist Surface | `#e3e3de` | `--color-mist-surface` | surface | Light navigation and control surfaces, plus pale interface and gradient details. |
| Paper Card | `#f7f6f3` | `--color-paper-card` | surface | Light card backgrounds and product UI surfaces, distinct from the gray page canvas. |
| Deep Taupe | `#292523` | `--color-deep-taupe` | semantic | Minor dark control and media-detail color; not a principal brand surface. |
| Cloud Wash | `#e8e8e6` | `--color-cloud-wash` | surface | Subtle pale gradient and navigation variation, used as a supporting light tint. |
| Porcelain Haze | `#f0f0ee` | `--color-porcelain-haze` | surface | Gradient and light UI transition tint; secondary to the dominant gray canvas. |
| Blue-Black | `#0d1418` | `--color-blue-black` | surface | Occasional deep inverse media or panel surface alongside the primary midnight tone. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Highlight and gradient endpoint within translucent interface treatments, not a major canvas color. |
| Stone Mist | `#ddddd8` | `--color-stone-mist` | neutral | Small supporting light-gray variation in gradient and interface details. |
| Muted Stone | `#9c9b93` | `--color-muted-stone` | neutral | Low-emphasis text detail; use sparingly for tertiary annotations. |
| Linen Cream | `#f4f4e7` | `--color-linen-cream` | accent | Pale text on the dark primary CTA and a restrained light accent in badges and controls. |

### Semantic aliases

`--color-canvas` → `#d7d7d0` (Quiet Pewter) · `--color-surface` → `#090d13` (Midnight Panel) · `--color-surface-2` → `#e3e3de` (Mist Surface) · `--color-surface-3` → `#f7f6f3` (Paper Card) · `--color-surface-4` → `#0d1418` (Blue-Black) · `--color-text` → `#1a1614` (Warm Ink) · `--color-text-muted` → `#524f4c` (Soft Graphite) · `--color-text-subtle` → `#66635f` (Ash Text) · `--color-border` → `#c4c3bd` (Pencil Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1614` | `#d7d7d0` | 12.42:1 | AAA |
| `#1a1614` | `#090d13` | 1.08:1 | fail |
| `#1a1614` | `#e3e3de` | 13.95:1 | AAA |
| `#1a1614` | `#f7f6f3` | 16.63:1 | AAA |
| `#524f4c` | `#d7d7d0` | 5.62:1 | AA |
| `#524f4c` | `#090d13` | 2.39:1 | fail |
| `#524f4c` | `#e3e3de` | 6.32:1 | AA |
| `#524f4c` | `#f7f6f3` | 7.53:1 | AAA |
| `#66635f` | `#d7d7d0` | 4.13:1 | AA-large |
| `#66635f` | `#090d13` | 3.26:1 | AA-large |

### Gradients

- `linear-gradient(115deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.16) 68%, rgba(26, 22, 20, 0.08)), none`
- `linear-gradient(122deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0.05) 78%)`
- `linear-gradient(122deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 44%)`
- `radial-gradient(circle at 30% 0px, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0) 34%), linear-gradient(rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0) 62%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, and explanatory interface text | Inter |
| Test Signifier | `--font-display` | webfont | 400 | Editorial headlines and prominent text links | Cormorant Garamond |
| Geist Mono | `--font-mono` | webfont | 400 | Eyebrows, technical labels, and compact metadata | IBM Plex Mono |

- **Geist:** Mostly regular weight; controls and navigation use medium weight, with sentence case and clear compact copy.
- **Test Signifier:** Regular serif; large headlines use tight tracking, while links and section titles retain a refined editorial feel.
- **Geist Mono:** Small uppercase labels with visibly expanded tracking; reserve for short annotations and system-like metadata.

### Type scale — Major Third (ratio ≈ 1.282, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.1 | -0.037em | — | Test Signifier | Hero headline; large editorial serif introducing autonomous production. |
| h2 | 50px | 400 | 1 | 0 | — | Test Signifier | Major section headlines and prominent narrative statements. |
| h3 | 48px | 400 | 1.1 | -0.021em | — | Test Signifier | Feature and product-story headlines within the long-form sections. |
| h4 | 36px | 400 | 1.1 | 0 | — | Test Signifier | Smaller section and card headings in the editorial hierarchy. |
| body | 20px | 400 | 1.5 | 0 | — | Geist | Primary explanatory copy and readable product descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | Geist | Supporting notes, article metadata, and secondary descriptions. |
| button | 14px | 500 | 1.5 | 0 | — | Geist | CTA and action labels, set in compact Geist medium. |
| nav | 14px | 500 | 1.5 | 0 | — | Geist | Navigation links and compact menu labels. |
| link | 24px | 400 | 1.2 | 0 | — | Test Signifier | Prominent editorial links and selected text actions. |
| eyebrow | 10px | 400 | normal | 0.1em | uppercase | Geist Mono | Uppercase section markers and numbered labels. |
| code | 10px | 400 | normal | 0.1em | uppercase | Geist Mono | Compact technical or system-style annotations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 6, 8, 9, 10, 12, 13, 14, 16, 20, 24, 25, 30, 32 px.
- Section rhythm 80px · element gap 8px · card padding 32px · max content width —.

The page uses an open, wide composition with no measured max-width value to impose. The hero pairs left-aligned editorial copy with a floating network illustration; later sections alternate two-column text and diagrams with single-column feature storytelling. Full-bleed dark media and CTA bands interrupt the continuous canvas. Comfortable density and generous vertical pauses give each idea room, while card groups and the research feed introduce more structured columns near the bottom.

## Shape & elevation

- Radius: button `9999px` · badge `4px` · nav `9999px` · xs `4px` · pill `9999px`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0.08) 0px 0px 10px 0px inset, rgba(0, 0, 0, 0) 0px 6px 24px 0px`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.08) 0px 1px 10px 0px inset`
- Shadow `md` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 10px 24px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(26, 22, 20, 0.25) 0px 30px 60px -30px`
- Shadow `inset-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.34) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with fine gray borders defining cards and diagram frames. Rounded translucent navigation and pill controls sit lightly above the canvas; their inset shading is subtle. Product cards may use a soft shadow, but avoid stacked elevation or heavy drop shadows that compete with the restrained linework.

## Imagery

A black node-and-link network anchors the hero, followed by a video still, explanatory curve diagram, layered system schematics, and product dashboard imagery. These assets are mostly framed as clean, rectangular inserts or sparse diagrams rather than decorative photography. Article thumbnails show technical drawings. A few warm or bright colors belong to product-interface mockups and diagrams, not the core brand palette.

## Components

### Floating navigation

Pill-shaped translucent light navigation groups sit across the top, with a centered brand mark and a dark Book a demo action.

### Primary CTA

Warm Ink (#1a1614) pill button with Linen Cream (#f4f4e7) Geist medium label; compact and high contrast.

### Editorial text link

Large serif links in Warm Ink (#1a1614), used sparingly beside or below explanatory copy.

### Technical diagram card

Open, lightly ruled content with Pencil Line (#c4c3bd) borders, sparse labels, and generous interior breathing room.

### Product showcase band

Full-width Midnight Panel (#090d13) frames a light product-interface screenshot as the focal point.

### Research cards

Three-column editorial feed with technical thumbnails, serif titles, small metadata, and minimal framing.

### Measured component styles

- **Primary button** (“Book a demo”): background #1a1614 · text #f4f4e7 · radius 3.35544e+07px · padding 6px 14px · 500 14px Geist
- **Secondary button** (“2:07”): background #2a2724 · text #1a1614 · radius 0px · padding 0px · 400 16px Geist
- **Link** (“About”): transparent background · text #1a1614 · radius 0px · padding 0px · 400 24px Test Signifier
- **Card** (“THE WORLD MODEL A layer that owns the ru”): transparent background · text #1a1614 · border 1px dashed #c4c3bd · radius 0px · padding 32px · 400 16px Geist
- **Badge** (“2:07”): background #cac9c8 · text #1a1614 · radius 4px · padding 5px 8px · 400 10px Geist Mono · uppercase · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Blog Careers Government Antimetal Sign I”): transparent background · text #1a1614 · radius 0px · padding 0px · 400 16px Geist

## Do

- Use Quiet Pewter as the dominant canvas.
- Pair large serif headlines with clean sans-serif explanatory copy.
- Keep technical labels short, uppercase, and monospace.
- Use fine borders to organize diagrams and cards.
- Reserve dark panels for key product and CTA moments.
- Leave broad breathing room around the main story.

## Don't

- Do not introduce a saturated brand palette.
- Do not make the page feel like a dense admin dashboard.
- Do not use heavy shadows on ordinary content.
- Do not over-round editorial cards or diagram frames.
- Do not treat colors inside product mockups as brand colors.
- Do not make every section a boxed card grid.

## Agent prompt

Build a new Antimetal page in a restrained editorial style. Use Quiet Pewter (#d7d7d0) as the broad canvas, Warm Ink (#1a1614) for headings and primary actions, and Soft Graphite (#524f4c) for supporting copy. Set major headlines in an expressive serif close to Test Signifier, with Geist-like sans-serif for body and controls and tracked Geist Mono-style uppercase labels. Compose content with generous open space, left-aligned narrative blocks, asymmetric columns, fine Pencil Line (#c4c3bd) rules, and sparse technical diagrams. Use Midnight Panel (#090d13) selectively for a product showcase or closing CTA, with pale interface surfaces inside. Keep buttons pill-shaped, navigation light and floating, shadows subtle, and imagery functional rather than decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open single-column canvas with left-aligned headline and copy beside a floating network illustration. | Primary demo CTA, Research text link, Network visual | Editorial serif headline, Floating pill navigation, Dark pill CTA |
| 2 | video | Video still and testimonial quote arranged side by side on the main canvas. | Video play control, Credibility quote | Video thumbnail, Serif quote, Speaker attribution |
| 3 | comparison | Two-column explanation pairing a rising complexity diagram with narrative text. | Problem explanation, Diagram-led reading | Sparse chart, Monospace callout, Editorial copy |
| 4 | feature-split | Short section heading and explanatory sentence aligned across two columns. | Product positioning | Numbered eyebrow, Serif section heading |
| 5 | product-showcase | Long single-column narrative with alternating feature statements, diagrams, and product illustrations. | Progressive product explanation, Feature storytelling | Serif feature headlines, Layer diagrams, Lightly ruled cards |
| 6 | product-showcase | Full-bleed dark band framing a centered, wide product dashboard image. | Visual product proof | Midnight background, Light dashboard screenshot |
| 7 | feature-grid | Two-column section with a large heading and a structured set of agent capabilities. | Capability browsing, Agent specialization | Section eyebrow, Serif title, Simple feature modules |
| 8 | faq | Two-column FAQ area with title and supporting introduction beside question-and-answer content. | Question-led browsing, Expandable answers | Editorial section title, Quiet dividers, Compact controls |
| 9 | content-feed | Three-column research and article card row with thumbnails, titles, and small metadata. | Article discovery, View all link | Technical thumbnails, Serif card titles, Small metadata |
| 10 | cta | Full-bleed dark closing panel with centered headline, brief copy, and paired actions. | Demo conversion, Secondary research action | Centered serif headline, Light primary pill, Dark outlined secondary action |
| 11 | footer | Multi-column footer on the light canvas with grouped product, company, resources, and compliance links. | Grouped navigation, System status cue | Compact link columns, Small uppercase labels, Brand mark |

## Source CSS custom properties (selected)

```css
--color-bg: #d7d7d0;
--color-fg: #1a1614;
--color-cream: #f4f4e7;
--color-card: #fdfcfa;
--color-accent: #e2e67d;
--color-border: #1a16141a;
--color-nav-bg: #cfcfc8bd;
```

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