Axiom 首页以近黑色画布搭配清晰字体和克制的橙色行动按钮。产品界面与数据内容承担主要叙事，区块之间留白充足，并以低调边框划分层次。
North star · Keep the canvas nearly black and let restrained orange, precise type, and authentic product UI carry the story.
The visual system is anchored by a nearly black canvas, #090909, used continuously from hero through footer. White headings create strong contrast, while muted grays carry supporting copy and navigation without competing with the message. Signal orange is reserved for primary actions and inline links; brighter orange and blue appear sparingly in product visualization details. Geist provides the clean, compact interface voice, with Berkeley Mono distinguishing code, data labels, and technical captions. The layout uses a wide centered content area, left-aligned feature storytelling, and occasional split or multi-column arrangements. Large gaps between long-form sections keep the page calm despite its length. Product screenshots and interface mockups are dark, tightly framed, and integrated into the canvas rather than presented as bright standalone images. Fine borders and low-contrast surfaces define cards and controls; depth comes from layering rather than conspicuous shadows.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Axiom Black
#090909
Page canvas across the hero, content sections, and footer.
强调色
Signal Ember
#da5c2b
Primary Start free buttons and inline Learn more links.
Warm Flare
#ffa057
Occasional highlighted text and small warm details.
表层色
Shadow Panel
#151515
Subtle dark panel and gradient transition detail.
Raised Coal
#111111
Slightly raised card and section surfaces against the canvas.
Dark Slate
#1b1b1b
Subtle badge and interface fills; minor supporting surface color.
中性色
Soft Alloy
#a4a4a4
Muted supporting copy and secondary navigation text.
Quiet Graphite
#7b7b7b
Low-emphasis labels, badges, and footer text.
Screen White
#eeeeee
Primary body text and high-contrast product interface text.
Pale Alloy
#b4b4b4
Secondary text and supporting interface labels.
Bright Chalk
#fafafa
Headings, navigation, and brighter text within product cards.
Muted Steel
#757575
Low-priority navigation text.
Dim Steel
#6e6e6e
Subtle secondary labels and badges.
Faded Graphite
#606060
Low-contrast code and supporting text.
功能色
Rule Charcoal
#222222
Fine borders separating cards, sections, and interface controls.
Data Blue
#70b8ff
Sparse blue text accents in technical interface details.
文字 背景 对比度 WCAG #eeeeee Screen White#090909 Axiom Black17.16:1 AAA #eeeeee Screen White#111111 Raised Coal16.28:1 AAA #a4a4a4 Soft Alloy#090909 Axiom Black7.99:1 AAA #a4a4a4 Soft Alloy#111111 Raised Coal7.58:1 AAA #7b7b7b Quiet Graphite#090909 Axiom Black4.7:1 AA #7b7b7b Quiet Graphite#111111 Raised Coal4.46:1 AA-large
字体 字号阶梯：Golden Ratio（比例约 1.633，正文 15px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Geist 网络字体 · 字重 400 / 500 / 450 · 占比 65%
免费替代：Inter
Headings, body copy, navigation, buttons, and links.
Aa 设计
berkeleyMono 网络字体 · 字重 400 / 500 · 占比 35%
免费替代：IBM Plex Mono
Code, technical captions, and compact data labels.
角色 示例 字号 字重 行高 字距 一级标题 Hero headline; large, medium-weight, tightly tracked sans.
Axiom
40px 500 1.1 -0.025em 二级标题 Feature section headings and key comparison or CTA headings.
Axiom
36px 500 1.35 -0.025em 正文 Feature descriptions, testimonials, and supporting explanatory copy.
The quick brown fox 敏捷的狐狸
15px 400 1.6 0 辅助文字 Compact technical captions and data-oriented labels.
The quick brown fox 敏捷的狐狸
13px 400 1.5 0 按钮 Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
14px 400 1.43 0 导航 Header navigation and compact menu items.
The quick brown fox 敏捷的狐狸
13px 400 1.38 0 链接 Inline calls to action such as Learn more.
The quick brown fox 敏捷的狐狸
14px 500 1.43 0 代码 Query editor content and technical examples.
const style = 1;
13px 400 1.5 0
间距与布局 基准单位 4px · 密度：宽松
96px 版块间距
8px 元素间距
— 卡片内边距
1208px 内容最大宽度
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
Use a centered content frame capped at the measured 1208px maximum width. The long page is built from spacious, mostly left-aligned feature sections, alternating split text-and-product compositions with occasional three- or four-column grids. Keep the hero headline and description aligned to the left, with product UI occupying the opposing visual area. Preserve large vertical gaps between major sections; the measured section rhythm is 96px. Keep dense data confined to product panels so surrounding marketing content stays calm.
圆角与层次 lg · card, other, section
hairline · other
md · link
lg · card, section
The interface is mostly flat against the dark canvas. Use thin charcoal borders and slightly lifted near-black panels to distinguish product cards and controls. Keep shadows soft and rare; visual depth comes from layered UI mockups, subtle gradients, and contrast between adjacent dark surfaces rather than heavy elevation.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary CTA Compact Signal Ember (#da5c2b) button with white text, a subtly rounded rectangle, and a concise Start free label.
Text link Medium-weight orange inline link, commonly labeled Learn more and finished with a small arrow.
Product panel Dark interface card with fine charcoal border, restrained rounding, and dense query, chart, or dataset content.
Code editor Berkeley Mono query text on a black surface, with subtle line numbers and selective syntax color.
Comparison card Compact dark card with a platform mark, name, and short comparison copy, separated by subtle borders.
Navigation Minimal top bar with white brand mark, subdued text links, sign-in action, and orange primary CTA.
Imagery · There is no dominant photography. The page relies on dark product-interface mockups, code editors, charts, dataset tables, and restrained abstract diagonal light streaks. Frame interfaces as wide, precise product demonstrations, with legible controls and selective orange or blue data marks. Keep the imagery dark and integrated with the black canvas; brighter details inside mockups are product content, not a separate brand palette.
页面版块 共 23 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Use #090909 as the dominant page canvas. Reserve #da5c2b for primary actions and selected links. Use Geist for marketing and interface text. Use Berkeley Mono for code and technical labels. Give major sections generous vertical separation. Frame product interfaces in subtle dark panels with fine borders. ✕ 不该做 Do not introduce bright full-width section backgrounds. Do not use orange as a large decorative field. Do not add prominent shadows or glossy effects. Do not let product mockups overwhelm their surrounding content. Do not use decorative display fonts in place of the measured sans. Do not treat illustration-only colors as broad brand colors. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new Axiom-style page with a continuous Axiom Black canvas (#090909), restrained Screen White (#fafafa, #eeeeee) typography, and Signal Ember (#da5c2b) reserved for primary actions and selected links. Use Geist or a close sans substitute for headings, body, navigation, and buttons; use Berkeley Mono or IBM Plex Mono for code and compact technical labels. Center content within the measured 1208px maximum width. Create spacious, predominantly left-aligned sections with split text-and-product layouts and occasional compact grids. Show dark, credible product UI in near-black panels, edged with Rule Charcoal (#222222), not bright showcase frames. Keep supporting copy muted, borders subtle, and shadows minimal. Let authentic query editors, datasets, and charts provide visual detail; keep accent colors sparse and preserve generous vertical breathing room.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Axiom design system"
variant: extended
source: https://axiom.co/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/axiom-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Axiom · Design System
> A near-black canvas for clear, technical storytelling.
**Theme:** dark · **Industry:** devtools · **Source:** https://axiom.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._
Axiom’s homepage pairs a near-black canvas with crisp typography and restrained orange calls to action. Product interfaces and data-focused sections carry the story, with generous vertical breathing room and subtle borders.
## North star
Keep the canvas nearly black and let restrained orange, precise type, and authentic product UI carry the story.
## Overview
The visual system is anchored by a nearly black canvas, ## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Axiom Black | ` | `--color-axiom-black` | brand | Page canvas across the hero, content sections, and footer. |
| Signal Ember | ` | `--color-signal-ember` | accent | Primary Start free buttons and inline Learn more links. |
| Soft Alloy | ` | `--color-soft-alloy` | neutral | Muted supporting copy and secondary navigation text. |
| Quiet Graphite | ` | `--color-quiet-graphite` | neutral | Low-emphasis labels, badges, and footer text. |
| Shadow Panel | ` | `--color-shadow-panel` | surface | Subtle dark panel and gradient transition detail. |
| Rule Charcoal | ` | `--color-rule-charcoal` | semantic | Fine borders separating cards, sections, and interface controls. |
| Raised Coal | ` | `--color-raised-coal` | surface | Slightly raised card and section surfaces against the canvas. |
| Screen White | ` | `--color-screen-white` | neutral | Primary body text and high-contrast product interface text. |
| Dark Slate | ` | `--color-dark-slate` | surface | Subtle badge and interface fills; minor supporting surface color. |
| Pale Alloy | ` | `--color-pale-alloy` | neutral | Secondary text and supporting interface labels. |
| Bright Chalk | ` | `--color-bright-chalk` | neutral | Headings, navigation, and brighter text within product cards. |
| Warm Flare | ` | `--color-warm-flare` | accent | Occasional highlighted text and small warm details. |
| Muted Steel | ` | `--color-muted-steel` | neutral | Low-priority navigation text. |
| Dim Steel | ` | `--color-dim-steel` | neutral | Subtle secondary labels and badges. |
| Data Blue | ` | `--color-data-blue` | semantic | Sparse blue text accents in technical interface details. |
| Faded Graphite | ` | `--color-faded-graphite` | neutral | Low-contrast code and supporting text. |
### Semantic aliases
`--color-canvas` → ` (Axiom Black) · `--color-surface` → ` (Raised Coal) · `--color-text` → ` (Screen White) · `--color-text-muted` → ` (Soft Alloy) · `--color-text-subtle` → ` (Quiet Graphite) · `--color-border` → ` (Rule Charcoal) · `--color-accent` → ` (Signal Ember) · `--color-accent-2` → ` (Warm Flare) · `--color-accent-3` → ` (Data Blue) · `--color-on-accent` → `
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 17.16:1 | AAA |
| ` | ` | 16.28:1 | AAA |
| ` | ` | 7.99:1 | AAA |
| ` | ` | 7.58:1 | AAA |
| ` | ` | 4.7:1 | AA |
| ` | ` | 4.46:1 | AA-large |
| ` | ` | 5.26:1 | AA |
| ` | ` | 4.99:1 | AA |
### Gradients
- `linear-gradient(to top, lab(2.47865 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, lab(2.47865 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, lab(4.4379 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, lab(5.06335 0 0) 100%)`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 450 | Headings, body copy, navigation, buttons, and links. | Inter |
| berkeleyMono | `--font-mono` | webfont | 400, 500 | Code, technical captions, and compact data labels. | IBM Plex Mono |
- **Geist:** Use clean mixed-case sans; medium headings with slightly tight tracking, regular body, and restrained button weight.
- **berkeleyMono:** Use for query snippets and terse technical metadata; keep labels compact and avoid decorative styling.
### Type scale — Golden Ratio (ratio ≈ 1.633, base 15px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.1 | -0.025em | — | Geist | Hero headline; large, medium-weight, tightly tracked sans. |
| h2 | 36px | 500 | 1.35 | -0.025em | — | Geist | Feature section headings and key comparison or CTA headings. |
| body | 15px | 400 | 1.6 | 0 | — | Geist | Feature descriptions, testimonials, and supporting explanatory copy. |
| caption | 13px | 400 | 1.5 | 0 | — | berkeleyMono | Compact technical captions and data-oriented labels. |
| button | 14px | 400 | 1.43 | 0 | — | Geist | Primary and secondary action labels. |
| nav | 13px | 400 | 1.38 | 0 | — | Geist | Header navigation and compact menu items. |
| link | 14px | 500 | 1.43 | 0 | — | Geist | Inline calls to action such as Learn more. |
| code | 13px | 400 | 1.5 | 0 | — | berkeleyMono | Query editor content and technical examples. |
## Spacing & layout
- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 24 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1208px.
Use a centered content frame capped at the measured 1208px maximum width. The long page is built from spacious, mostly left-aligned feature sections, alternating split text-and-product compositions with occasional three- or four-column grids. Keep the hero headline and description aligned to the left, with product UI occupying the opposing visual area. Preserve large vertical gaps between major sections; the measured section rhythm is 96px. Keep dense data confined to product panels so surrounding marketing content stays calm.
## Shape & elevation
- Radius: button `4px` · card `6px` · badge `2px` · nav `5px` · link `6px` · xs `1px` · sm `2px` · md `3px` · lg `4px` · xl `5px` · 2xl `6px` · pill `9999px`
- Shadow `lg` (card, other, section): `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, oklab(0 0 0 / 0.05) 0px 0px 40px 20px`
- Shadow `hairline` (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, lab(2.47865 0 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (link): `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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `lg-2` (card, section): `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, oklab(0.14 -0.00000137836 0.00000326335) 0px 0px 40px 20px`
- Shadow `inset` (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.5) 0px 0.5px 0px 0px inset`
- Shadow `sm` (other): `color(srgb -0.000793195 0.564744 0.999998 / 0.25) 0px 0px 6px 2px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.
The interface is mostly flat against the dark canvas. Use thin charcoal borders and slightly lifted near-black panels to distinguish product cards and controls. Keep shadows soft and rare; visual depth comes from layered UI mockups, subtle gradients, and contrast between adjacent dark surfaces rather than heavy elevation.
## Imagery
There is no dominant photography. The page relies on dark product-interface mockups, code editors, charts, dataset tables, and restrained abstract diagonal light streaks. Frame interfaces as wide, precise product demonstrations, with legible controls and selective orange or blue data marks. Keep the imagery dark and integrated with the black canvas; brighter details inside mockups are product content, not a separate brand palette.
## Components
### Primary CTA
Compact Signal Ember (### Text link
Medium-weight orange inline link, commonly labeled Learn more and finished with a small arrow.
### Product panel
Dark interface card with fine charcoal border, restrained rounding, and dense query, chart, or dataset content.
### Code editor
Berkeley Mono query text on a black surface, with subtle line numbers and selective syntax color.
### Comparison card
Compact dark card with a platform mark, name, and short comparison copy, separated by subtle borders.
### Navigation
Minimal top bar with white brand mark, subdued text links, sign-in action, and orange primary CTA.
### Measured component styles
- **Primary button** (“Start free → →”): background ## Do
- Use ## Don't
- Do not introduce bright full-width section backgrounds.
- Do not use orange as a large decorative field.
- Do not add prominent shadows or glossy effects.
- Do not let product mockups overwhelm their surrounding content.
- Do not use decorative display fonts in place of the measured sans.
- Do not treat illustration-only colors as broad brand colors.
## Agent prompt
Build a new Axiom-style page with a continuous Axiom Black canvas (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and copy beside a large product interface showcase. | Primary signup action, Secondary sales action | Large headline, Dark product mockup, Orange CTA |
| 2 | logo-cloud | Four-column customer-logo band alongside a compact testimonial. | Social proof, Customer attribution | Quote block, Logo grid, Subtle separators |
| 3 | feature-grid | Left-aligned introduction above three problem cards. | Problem framing, Learn-more link | Three-column cards, Small data illustrations, Muted copy |
| 4 | product-showcase | Feature copy above a broad dataset interface with an overlapping detail panel. | Feature explanation, Learn-more link | Dataset table, Floating detail pane, Dark bordered surfaces |
| 5 | feature-split | Two-column pricing explanation with a wide calculator-style product visualization. | Pricing education, Usage exploration | Cost estimate panel, Horizontal comparisons, Orange data marker |
| 6 | testimonials | Single centered quote in a broad, sparse dark section. | Social proof, Customer attribution | Centered quotation, Muted typography, Generous negative space |
| 7 | feature-split | Two-column text and query editor, with copy at left and product UI at right. | Feature explanation, Learn-more link | Code editor, Query controls, Dark UI panel |
| 8 | feature-split | Two-column migration story with copy and a Splunk-oriented interface demonstration. | Migration reassurance, Learn-more link | Legacy product mockup, Stacked interface layers, Subtle borders |
| 9 | feature-split | Split text and agent-oriented terminal or conversation interface. | Developer use-case education, Learn-more link | Agent conversation UI, Dark terminal styling, Code details |
| 10 | product-showcase | Left-side prompt and action paired with a right-side query playground. | Try without account, Open playground | Query editor, Results visualization, Orange chart details |
| 11 | comparison | Centered heading and introduction above a four-column comparison-card row. | Compare alternatives, Explore competitor pages | Four platform cards, Logos or names, Subtle card borders |
| 12 | cta | Centered headline, reassurance copy, and compact paired actions. | Start free, Talk to sales | Centered CTA, Orange primary button, Minimal secondary action |
| 13 | footer | Brand and abstract accent above a dense multi-column navigation footer. | Grouped navigation, Company and resource links | Brand mark, Multi-column link lists, Social icons |
## Source CSS custom properties (selected)
```css
--brand: lab(55.3975% 51.7722 56.8029);
--background: lab(2.47865% 0 0);
--foreground: lab(98.26% 0 0);
--card-foreground: lab(98.26% 0 0);
--popover-foreground: lab(98.26% 0 0);
--primary: lab(100% 0 0);
--primary-foreground: lab(4.4379% 0 0);
--secondary: lab(15.204% 0 -.00000596046);
--secondary-foreground: lab(100% 0 0/.63);
--muted-foreground: lab(48.438% 0 0);
--accent: lab(15.204% 0 -.00000596046);
--accent-foreground: lab(98.26% 0 0);
--border: lab(11.84% 0 0);
--radius: .475rem;
--sidebar-foreground: lab(98.26% 0 0);
--sidebar-primary: lab(36.9089% 35.0961 -85.6872);
--sidebar-primary-foreground: lab(98.26% 0 0);
--sidebar-accent: lab(15.204% 0 -.00000596046);
--sidebar-accent-foreground: lab(98.26% 0 0);
--sidebar-border: lab(100% 0 0/.1);
--c15t-primary: hsl(228, 100%, 70%);
--c15t-primary-hover: hsl(228, 100%, 65%);
--c15t-surface: hsl(0, 0%, 7%);
--c15t-surface-hover: hsl(0, 0%, 10%);
--c15t-border: hsl(0, 0%, 20%);
--c15t-border-hover: hsl(0, 0%, 25%);
--c15t-text: hsl(0, 0%, 93%);
--c15t-text-muted: hsl(0, 0%, 60%);
--c15t-text-on-primary: hsl(0, 0%, 100%);
--c15t-font-family: system-ui, -apple-system, sans-serif;
--c15t-font-size-sm: 0.875rem;
--c15t-font-size-base: 1rem;
--c15t-font-size-lg: 1.125rem;
--c15t-font-weight-normal: 400;
--c15t-font-weight-medium: 500;
--c15t-font-weight-semibold: 600;
--c15t-space-xs: 0.25rem;
--c15t-space-sm: 0.5rem;
--c15t-space-md: 1rem;
--c15t-space-lg: 1.5rem;
```
---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/axiom-co
