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

# ATM Holdings — Bolt.com · Design System

> A quiet, confident stage for a premium domain

**Theme:** light · **Industry:** other · **Source:** https://atmholdings.com/domains/bolt-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 domain-sale page pairs a centered Bolt.com headline with a vivid cyan radial gradient. A clean corporate header and compact company profile keep the focus on serious inquiries.

## North star

Give the domain one unmistakable focal point, using a soft cyan glow and otherwise restrained corporate styling.

## Overview

The page balances a bright corporate header with a full-width hero whose cyan radial gradient draws the eye toward a pale central glow. The domain name sits at the visual center in regular-weight black DM Sans, with a short, bold inquiry prompt and underlined email link directly beneath it. Navigation stays compact and uppercase, while the ATM Holdings wordmark anchors the opposite side of the header. Below the hero, a quiet company-information section uses a two-column arrangement: social links occupy one side, while a portrait, company introduction, subscriber count, and dark Substack button form the other. White and near-white surfaces preserve a calm, open feel. Sparse content, generous whitespace, and restrained color accents make the domain—not decorative UI—the main event.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, header, and bright footer areas; keeps the page open and uncluttered. |
| Anchor Ink | `#000000` | `--color-anchor-ink` | neutral | Primary text, domain heading, navigation, and email link. |
| Mist Halo | `#f8f8f8` | `--color-mist-halo` | surface | Pale center of the hero radial gradient and softly washed section backgrounds. |
| Bolt Cyan | `#069ac3` | `--color-bolt-cyan` | brand | Outer hero gradient color; provides the page’s defining cyan field. |
| Quiet Gray | `#9ea4aa` | `--color-quiet-gray` | neutral | Muted footer copy and secondary text, including small copyright details. |
| Midnight Button | `#101b42` | `--color-midnight-button` | accent | Background of the Subscribe on Substack call-to-action. |
| Link Blue | `#0d66c2` | `--color-link-blue` | accent | Small social accent in the footer; not a defining page background color. |
| Signal Orange | `#ff681a` | `--color-signal-orange` | accent | Small social accent in the footer; limited to icon-level detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Anchor Ink) · `--color-text-muted` → `#9ea4aa` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#069ac3` (Bolt Cyan) · `--color-accent-2` → `#0d66c2` (Link Blue) · `--color-accent-3` → `#ff681a` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#9ea4aa` | `#ffffff` | 2.52:1 | fail |
| `#069ac3` | `#ffffff` | 3.27:1 | AA-large |

### Gradients

- `radial-gradient(rgb(248, 248, 248) 34%, rgb(6, 154, 195) 97%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 600, 700 | All page typography, from navigation and domain headline to body copy and calls to action. | Manrope |

- **DM Sans:** Use regular weights for the domain and body, heavier weight for inquiry emphasis and CTA; navigation and captions are uppercase.

### Type scale — Perfect Fifth (ratio ≈ 1.556, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 400 | 1 | 0.04em | — | DM Sans | Centered Bolt.com domain headline in the hero. |
| h2 | 24px | 400 | normal | 0 | — | DM Sans | ATM Holdings heading in the company information section. |
| body | 19px | 400 | 1.5 | 0 | — | DM Sans | Inquiry line and company introduction copy. |
| caption | 16px | 600 | 1.5 | 0 | uppercase | DM Sans | Compact uppercase labels and secondary details. |
| nav | 16px | 600 | 1.5 | 0 | uppercase | DM Sans | Uppercase header navigation links. |
| link | 19px | 400 | 1.5 | 0 | — | DM Sans | Underlined inquiry email and other inline links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 10, 13, 15, 18, 20, 40, 60, 80, 90 px.
- Section rhythm 60px · element gap 40px · card padding — · max content width 1240px.

A full-width header sits above a broad, single-column hero, with the domain and inquiry details centered in the gradient field. The measured page max width is 1240px, while the hero background spans the viewport. The following company section shifts to two columns, balancing small social links with a compact profile and subscription content. The measured spacing system is spacious, with a 60px section gap and 40px element gap; keep the content sparse and the vertical rhythm calm.

## Shape & elevation

- Radius: button `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The design is predominantly flat, with no measured shadows. Separate the header, hero, and company content through background treatment and whitespace rather than cards or heavy borders. The CTA is the main contained element, using a solid midnight fill and a subtle measured corner radius.

## Imagery

The hero relies on a radial color field rather than photography, with a pale center fading into cyan edges. In the lower company section, a small portrait adds a human touch beside the text. Social marks and the wordmark remain compact supporting graphics; avoid oversized imagery or decorative mockups that compete with the domain.

## Components

### Header navigation

White corporate header with ATM Holdings wordmark at left and compact uppercase black navigation links at right.

### Domain hero

Full-width radial gradient from #f8f8f8 to #069ac3, with the domain name and inquiry line centered over the pale glow.

### Inquiry link

Black, underlined email link placed inline after the bold serious-inquiries prompt.

### Company profile

Two-column information section with small social links opposite a portrait, ATM Holdings introduction, and subscriber detail.

### Substack CTA

White-text Subscribe on Substack button on #101b42, with a measured 5px radius and generous horizontal padding.

### Footer details

Quiet copyright text and small social accents sit against a light, minimally treated background.

### Measured component styles

- **Primary button** (“Subscribe on Substack”): background #101b42 · text #ffffff · radius 5px · padding 13px 18px · 600 19px DM Sans
- **Link** (“domains@atmholdings.com”): transparent background · text #000000 · radius 0px · padding 0px · 400 19px DM Sans
- **Navigation item** (“DOMAIN NAMES”): transparent background · text #000000 · radius 0px · padding 0px · 600 16px DM Sans · uppercase

## Do

- Keep the domain headline centered in the hero.
- Use the measured cyan-to-pale radial gradient as the primary visual feature.
- Set navigation in compact uppercase DM Sans.
- Keep the inquiry email directly beneath the domain title.
- Use black for primary text and reserve muted gray for secondary details.
- Keep the company profile restrained and clearly separated from the hero.

## Don't

- Do not add extra colors beyond the measured palette.
- Do not let footer social accents dominate the page.
- Do not place the domain title in a card or boxed panel.
- Do not add shadows or heavy borders.
- Do not crowd the hero with extra content or imagery.
- Do not turn the compact company profile into a dense multi-column grid.

## Agent prompt

Build a responsive domain-sale landing page in the ATM Holdings style. Use Gallery White (#ffffff) for the header and light content areas, Anchor Ink (#000000) for the main text, and a full-width radial hero fading from Mist Halo (#f8f8f8) at its center to Bolt Cyan (#069ac3) at the edges. Set all text in DM Sans or a close sans-serif substitute. Center a large, regular-weight domain title above a bold inquiry prompt with an underlined email link. Keep the header compact, with the wordmark on the left and uppercase navigation on the right. Below the hero, use a calm two-column company profile with a small portrait, muted details, and a Midnight Button (#101b42) CTA. Preserve generous whitespace; use Link Blue (#0d66c2) and Signal Orange (#ff681a) only for tiny social accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered single-column domain title and inquiry line over a full-width radial gradient. | Centered focal headline, Direct email inquiry | Cyan radial gradient, Underlined inline email link, Open whitespace |
| 2 | team | Two-column company section with social links on one side and profile, portrait, and subscription CTA on the other. | Company credibility copy, Social links, Subscribe CTA | Small portrait, Dark filled button, Muted footer details |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--base: #ffffff;
--wp--preset--color--base-text: #535C65;
--wp--preset--color--grey-text: #9EA4AA;
--wp--preset--color--contrast: #000000;
--wp--preset--color--blue-highlight: #668B88;
--wp--preset--color--blue-border: #6D89AA;
--wp--preset--color--navy: #101B42;
--wp--preset--color--orange: #E38F68;
--wp--preset--color--red: red;
--wp--preset--color--primary: #FFBB45;
--wp--preset--color--primary-dark: #FA9F02;
--wp--preset--color--secondary: #0080E8;
--wp--preset--color--info: #027ab6;
--wp--preset--color--warning: #ba191a;
--wp--preset--color--success: #1cb956;
```

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