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

# xTool · Design System

> Precision tools, presented with a maker’s imagination

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.xtool.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._

xTool’s homepage pairs a restrained black-and-white storefront with vivid maker stories, product imagery, and soft campaign gradients. A long, modular page guides visitors from featured launches and product categories to creative tools, community stories, support, and shopping links.

## North star

Keep the interface quiet and product-led so vivid maker imagery carries the colour and personality.

## Overview

The visual system starts with a white canvas and a compact black-and-white storefront header. Black anchors headings and pill-shaped primary actions, while muted gray text and fine gray borders keep product details legible without competing with imagery. Pale gray and blue-white surfaces distinguish selected cards and quiet content bands. The homepage’s strongest colour moments come from campaign artwork: mint and blush gradients, colourful product scenes, and community photography; treat these as section-specific media rather than a site-wide palette. InterTight provides a modern, compact sans-serif voice, with medium body and navigation weights and stronger, larger headings. The page alternates broad, image-led campaign areas with product grids, editorial cards, and support links. Left-aligned titles organize most sections, while the AI feature is centered. Generous whitespace around major stories contrasts with dense product and footer information. Rounded black CTAs and card corners soften the technical product focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and frequent text colour on black buttons; keeps the storefront bright and uncluttered. |
| Maker Black | `#000000` | `--color-maker-black` | brand | Primary headings, inverse content surfaces, and filled pill-shaped calls to action. |
| Quiet Graphite | `#595959` | `--color-quiet-graphite` | neutral | Muted supporting copy and navigation or footer text against light backgrounds. |
| Fine Silver | `#d9d9d9` | `--color-fine-silver` | neutral | Subtle outlines and hairline dividers around product cards, controls, and footer content. |
| Soft Fog | `#f3f3f3` | `--color-soft-fog` | surface | Light neutral panels and link or footer surfaces that separate secondary content. |
| Cool Porcelain | `#f8f9fd` | `--color-cool-porcelain` | surface | Pale card and section backgrounds, including quiet feature areas. |
| Deep Charcoal | `#1f1f1f` | `--color-deep-charcoal` | neutral | Secondary headings and product text where softer contrast than pure black is appropriate. |
| Slate Gray | `#7d7d7e` | `--color-slate-gray` | neutral | Occasional low-emphasis supporting text; use sparingly within the measured palette. |
| Signal Blue | `#1677ff` | `--color-signal-blue` | accent | Small interactive or linked text accents, including footer links; not the dominant CTA colour. |
| Carbon Ink | `#191c1d` | `--color-carbon-ink` | neutral | Rare heading and navigation text variations within the dark neutral family. |
| Navigation Ink | `#1f2329` | `--color-navigation-ink` | neutral | Store navigation text against the white header. |
| Link Ink | `#141414` | `--color-link-ink` | neutral | Low-key link text across feature and editorial content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Maker Black) · `--color-surface-2` → `#f8f9fd` (Cool Porcelain) · `--color-surface-3` → `#f3f3f3` (Soft Fog) · `--color-text` → `#000000` (Maker Black) · `--color-text-muted` → `#595959` (Quiet Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d9d9d9` (Fine Silver) · `--color-accent` → `#1677ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f9fd` | 19.96:1 | AAA |
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#595959` | `#ffffff` | 7:1 | AAA |
| `#595959` | `#000000` | 3:1 | AA-large |
| `#595959` | `#f8f9fd` | 6.66:1 | AA |
| `#595959` | `#f3f3f3` | 6.31:1 | AA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f8f9fd` | 1.05:1 | fail |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 65%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterTight | `--font-body` | webfont | 500, 600, 700 | Site-wide headings, body copy, navigation, buttons, captions, and links. | Inter |

- **InterTight:** Use weights 500–700 with tight, clean sans-serif forms; measured tracking is generally neutral, with no forced uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.419, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 600 | 1.1 | 0 | — | InterTight | Primary campaign and lead headline. |
| h2 | 32px | 600 | 1.13 | 0 | — | InterTight | Major section titles and prominent product or feature headings. |
| h3 | 24px | 500 | 1.33 | 0 | — | InterTight | Subsection headings and product names. |
| body | 14px | 500 | 1.29 | 0 | — | InterTight | Product descriptions, campaign support copy, and explanatory text. |
| caption | 12px | 500 | 1.33 | 0 | — | InterTight | Compact metadata and small supporting labels. |
| button | 14px | 600 | 1.29 | 0 | — | InterTight | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.64 | 0 | — | InterTight | Header navigation items and store category links. |
| link | 13px | 500 | 1.5 | 0 | — | InterTight | Editorial, product-detail, and footer text links. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 11, 12, 15, 16, 24, 32, 36, 40, 64 px.
- Section rhythm 32px · element gap 8px · card padding 34px · max content width 1312px.

Use a centered storefront frame with a measured maximum width of 1312px and a compact overall density. The header runs horizontally above a sequence of broad campaign sections and narrower content grids. Most section titles align left; the Atomm feature centers its title and copy. Measured sections use two-, three-, four-, six-, and eight-column arrangements, with full-bleed media for hero campaigns and contained layouts for product and editorial content. Keep section changes clear and whitespace generous around major imagery.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · nav `4px` · link `8px` · xs `4px` · sm `8px` · md `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The measured system has no defined shadows; rely on flat surfaces, fine borders, and image layering instead. Product cards use subtle outlines, while black filled buttons and rounded card corners provide distinction without heavy elevation. Hero artwork can overlap or layer within the composition, but keep the surrounding page clean and flat.

## Imagery

Lead with large campaign images that combine product scenes, creator portraits, and interface-like creative outputs. Product grids use isolated equipment photography; editorial blocks mix maker photos, event artwork, and brand graphics. Video testimonials appear as broad photographic cards. Campaign imagery may contain vivid gradients and colours not present in the measured interface palette, so keep those colours within their media rather than extending them to global controls.

## Components

### Store header

Compact white horizontal navigation with dark labels, xTool wordmark, and utility icons; keep it distinct from the campaign imagery below.

### Primary CTA

Black pill button with white InterTight semibold text; measured labels are 14px, with generous horizontal padding and no shadow.

### Outlined product action

Secondary Buy action uses dark text, a fine gray outline, and a rounded pill treatment.

### Product card

Equipment image, concise product title, short description, and paired actions; measured cards use a thin gray border and compact text.

### Campaign hero

Broad image-led slide combining a left-aligned headline and CTA with creator or product media; carousel arrows and a small progress indicator support browsing.

### Editorial feature card

Image-led card with a compact title and copy beneath or over media; use for creative tools, community, and business content.

### Support link tile

Small utility tile combining an icon, short support heading, and a blue or dark text link.

### Measured component styles

- **Primary button** (“Explore Wedding Ideas”): background #000000 · text #ffffff · border 1px solid · radius 80px · padding 11px 24px · 600 14px InterTight
- **Secondary button** (“Buy”): transparent background · text #1d1d1d · border 1px solid #d6d6d9 · radius 40px · padding 15px 24px · 600 14px InterTight
- **Link** (“Craft-ready files with AImake Describe a”): transparent background · text #141414 · radius 0px · padding 0px · 500 13px InterTight
- **Input**: transparent background · text #000000 · radius 8px · padding 12px 16px · 500 12px InterTight
- **Card** (“Full-Color CMYK Inkjet & 10W/20W Diode L”): transparent background · text #1d1d1d · border 1px solid #d9d9d9 · radius 0px · padding 36px 32px · 500 13px InterTight
- **Navigation item** (“Store”): transparent background · text #1f2329 · radius 0px · padding 0px · 500 14px InterTight

## Do

- Use white as the default page canvas.
- Set headings and primary CTAs in black.
- Use InterTight-style compact sans-serif typography.
- Let campaign photography supply most vivid colour.
- Separate product cards with fine gray borders.
- Use rounded pill shapes for primary buttons.
- Alternate broad media sections with tidy content grids.

## Don't

- Do not turn campaign artwork colours into global UI colours.
- Do not add heavy shadows to otherwise flat cards.
- Do not use oversized, decorative display typography.
- Do not crowd hero images with extra interface elements.
- Do not use blue as the dominant CTA colour.
- Do not make all sections center-aligned.
- Do not replace product photography with generic abstract graphics.

## Agent prompt

Build a new xTool-style page as a clean, image-led ecommerce experience. Use Gallery White (#ffffff) as the canvas, Maker Black (#000000) for headings and primary pill CTAs, Quiet Graphite (#595959) for secondary copy, and Fine Silver (#d9d9d9) for restrained borders. Use Cool Porcelain (#f8f9fd) or Soft Fog (#f3f3f3) only for quiet surfaces. Set compact InterTight-like sans-serif typography with clear heading hierarchy and left-aligned section titles. Compose a broad campaign hero, then alternate contained product or editorial grids with spacious feature sections. Use real product and maker imagery as the main source of colour; keep campaign gradients inside the media. Prefer flat layouts, subtle outlines, rounded buttons, and clear shopping actions. Avoid heavy shadows and decorative interface clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign carousel with left-aligned copy and CTA beside layered creator media. | carousel arrows, slide indicator, primary CTA | white canvas, black pill button, image-led composition |
| 2 | feature-split | Centered feature heading and copy above broad, full-bleed creative imagery. | feature CTA, campaign storytelling | centered typography, soft gradient media, large visual |
| 3 | product-grid | Product category tabs above a multi-column equipment grid. | category tabs, product comparison, paired purchase actions | outlined cards, equipment photography, pill buttons |
| 4 | category-nav | Two side-by-side image-led category panels. | category discovery, Shop Now links | paired panels, product imagery, quiet backgrounds |
| 5 | feature-grid | Six-column section with a title and a row of image-led creative feature cards. | feature links, carousel pagination | editorial cards, large artwork, compact captions |
| 6 | team | Three-column community story layout with broad image cards. | event discovery, appointment CTA, carousel controls | community photography, rounded media cards, black buttons |
| 7 | testimonials | Video testimonial cards arranged in a horizontally browsable row. | video playback, carousel pagination | wide photographic cards, text overlay, dark media |
| 8 | feature-grid | Three-column editorial grid of business, donation, and maker content cards. | content discovery, per-card CTA | colourful campaign imagery, mixed light and dark cards, compact headings |
| 9 | other | Four-column strip of compact support and learning links. | support shortcuts, resource navigation | icon-led tiles, short headings, blue or dark text links |
| 10 | footer | Dense multi-column link directory with a newsletter form and legal links. | newsletter signup, category navigation, social links | compact text links, column headings, light background |

## Source CSS custom properties (selected)

```css
--host-font-family: 'InterTight', sans-serif;
--body-letter-spacing: 0em;
--body-lg-letter-spacing: 0em;
--h1-letter-spacing: 0;
--h2-letter-spacing: 0.05em;
--h3-letter-spacing: 0em;
--h4-letter-spacing: 0em;
--h5-letter-spacing: 0.05em;
--h6-letter-spacing: 0em;
--list-letter-spacing: 0em;
--list-lg-letter-spacing: 0em;
--button-letter-spacing: 0.05em;
--input-letter-spacing: 0em;
--home-sections-title-letter-spacing: 0em;
--product-page-title-letter-spacing: 0em;
--product-collection-title-letter-spacing: 0em;
--product-collection-more-info-letter-spacing: 0em;
--product-collection-button-letter-spacing: 0.05em;
--collection-page-heading-title-letter-spacing: 0em;
--carousel-article-title-letter-spacing: 0em;
--page-title-letter-spacing: 0em;
--input-bg: #f7f8fa;
--input-f-bg: #ffffff;
--button-bg: #ffffff;
--button-act-bg: #ffffff;
--button2-bg: #00c601;
--button2-h-bg: #ffffff;
--button2-act-bg: #ffffff;
--button3-h-bg: #ffffff;
--button3-act-bg: #ffffff;
--button4-bg: #5a31f4;
--button4-h-bg: #6b46f4;
--button4-act-bg: #5a31f4;
--button5-bg: #ffffff;
--button5-h-bg: #00c601;
--button5-act-bg: #00c601;
--button-text-c: #141414;
--label-sale-bg: #F54337;
--label-new-bg: #42A5F6;
--label-hot-bg: #FF7143;
```

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