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

# ThreeTools · Design System

> A stark dark canvas for expressive 3D tooling.

**Theme:** dark · **Industry:** devtools · **Source:** https://three.tools/ · **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._

ThreeTools presents a Three.js browser extension through a stark dark interface, vivid 3D artwork, and compact product demos. A restrained orange CTA and clear card groupings guide visitors from discovery to beta signup.

## North star

Keep the interface nearly black and typographically direct, letting vivid 3D product imagery and a single orange CTA provide the emphasis.

## Overview

The page is built on a near-black canvas, with black hero and media areas giving the product renders room to stand out. Dark charcoal section and card surfaces, fine gray borders, and muted gray copy provide hierarchy without breaking the restrained palette; the vivid orange is reserved for signup actions and small product accents. White headings use a bold system sans, with large centered hero typography giving way to smaller, left-aligned feature and creator content. The opening 3D mark is the visual anchor, followed by a video/demo area and a tightly arranged feature-card grid. The later creator block uses a split layout, while beta signup and FAQ content return to simple, focused modules. Comfortable section spacing contrasts with dense card content. Keep the interface flat and precise: use hairline borders and rounded containers rather than dramatic shadows, and let embedded product imagery carry the color and detail.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | surface | Primary page canvas, navigation backdrop, and dark media surroundings. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted explanatory text and secondary copy across dark sections. |
| Section Charcoal | `#111111` | `--color-section-charcoal` | surface | Creator section band and dark content surfaces. |
| Soft Silver | `#cacaca` | `--color-soft-silver` | neutral | Muted body copy and secondary link text on black. |
| Card Charcoal | `#181818` | `--color-card-charcoal` | surface | Feature and carousel card backgrounds. |
| Fade Gray | `#404040` | `--color-fade-gray` | neutral | Appears in section gradient treatment, not a primary flat UI color. |
| Border Graphite | `#343434` | `--color-border-graphite` | semantic | Fine outlines around cards and dark controls. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Main headings, navigation text, and text on the orange CTA. |
| Midtone Gray | `#999999` | `--color-midtone-gray` | neutral | Secondary headings and subdued gradient text treatment. |
| Tool Orange | `#ff4300` | `--color-tool-orange` | accent | Primary Get Notified CTA and small interface highlights. |
| Footer Silver | `#cfcfcf` | `--color-footer-silver` | neutral | Muted footer and secondary text. |
| Slate Gray | `#8d8d8d` | `--color-slate-gray` | neutral | Low-emphasis headings on dark content. |
| Deep Divider | `#262626` | `--color-deep-divider` | surface | Subtle card and component outline details. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#111111` (Section Charcoal) · `--color-surface-2` → `#181818` (Card Charcoal) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#666666` (Quiet Gray) · `--color-text-subtle` → `#cacaca` (Soft Silver) · `--color-border` → `#343434` (Border Graphite) · `--color-accent` → `#ff4300` (Tool Orange) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#181818` | 17.76:1 | AAA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#666666` | `#111111` | 3.29:1 | AA-large |
| `#666666` | `#181818` | 3.09:1 | AA-large |
| `#cacaca` | `#000000` | 12.81:1 | AAA |
| `#cacaca` | `#111111` | 11.52:1 | AAA |
| `#cacaca` | `#181818` | 10.83:1 | AAA |
| `#ff4300` | `#000000` | 6.05:1 | AA |

### Gradients

- `radial-gradient(300% 120% at 50% 100%, rgba(255, 255, 255, 0.25) 0px, rgba(0, 0, 0, 0) 50%)`
- `radial-gradient(100% 150% at 50% 100%, rgba(255, 255, 255, 0.25) 0px, rgba(0, 0, 0, 0) 50%)`
- `-webkit-linear-gradient(45deg, rgb(255, 255, 255), rgb(153, 153, 153))`
- `linear-gradient(135deg, rgb(255, 255, 255), rgb(146, 146, 146) 125%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 700 | Headings, navigation, body copy, buttons, and links throughout the page. | Inter |

- **-apple-system:** Bold system sans throughout; display and headings are large and direct, with slightly tight tracking in display and body roles.

### Type scale — Perfect Fourth (ratio ≈ 1.336, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 700 | 1 | -0.015em | — | -apple-system | Oversized opening hero statement. |
| h1 | 48px | 700 | 1 | 0 | — | -apple-system | Primary page headline and large section heading. |
| h2 | 46px | 700 | 1 | -0.011em | — | -apple-system | Major section headings, including feature and creator areas. |
| h3 | 24px | 700 | 1.25 | 0 | — | -apple-system | Feature card titles and supporting section headings. |
| h4 | 22px | 700 | 1.25 | 0 | — | -apple-system | Small module headings and subheads. |
| body | 16px | 700 | 1.25 | -0.016em | — | -apple-system | Explanatory copy and feature descriptions. |
| caption | 14px | 700 | 1.25 | 0 | — | -apple-system | Small supporting notes and metadata. |
| button | 12px | 700 | 1 | -0.008em | — | -apple-system | Compact CTA and control labels. |
| nav | 16px | 700 | 1.25 | -0.011em | — | -apple-system | Brand name and navigation labels. |
| link | 10px | 700 | 1.25 | 0 | — | -apple-system | Small attribution and inline links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 8, 10, 12, 16, 20, 22, 24, 25, 32, 40, 44, 48, 60 px.
- Section rhythm 70px · element gap 20px · card padding — · max content width 820px.

A centered, single-column landing flow opens with a compact navigation bar and spacious hero, then moves through a product video and testimonial snippets into a feature-card grid. The measured page max width is 820px; the feature cards use two columns, while the creator section becomes a two-column split. Center the hero headline and signup, then use left alignment for content-heavy blocks. Sections have generous separation, with denser content contained inside cards and FAQ rows.

## Shape & elevation

- Radius: button `15px` · input `22px` · card `20px` · nav `9999px` · xs `15px` · sm `16px` · md `20px` · lg `22px` · xl `24px` · 2xl `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease-in` on interactive elements.

The visual system is mostly flat, with no measured shadow system. Use dark surface changes to separate sections and cards, plus fine charcoal borders for definition. Rounded card and control edges soften the otherwise restrained, high-contrast layout; avoid adding floating layers or strong drop shadows.

## Imagery

Lead with a large glossy red-orange ThreeTools mark shown with editor selection overlays, then use screen recordings and browser-interface images to demonstrate the extension. Product cards contain dark UI screenshots with orange selections and occasional vivid 3D assets. Treat these colors as embedded product imagery, not as a broader page palette; keep framing crisp and surrounding UI dark.

## Components

### Hero signup

Centered headline and supporting copy above a white email field; pair the form with an orange Get Notified action.

### Access pill

Compact pale pill navigation action with dark text and a small orange icon.

### Product demo

Large embedded video or product screen centered in a black section, with interface imagery kept prominent.

### Feature cards

Two-column dark cards with a fine #343434 outline, rounded corners, short copy, and product UI imagery.

### Creator split

Charcoal section with product carousel imagery on one side and creator biography on the other.

### FAQ rows

Stacked dark rounded question rows with subdued text and circular expand controls.

### Beta CTA

Signup module combining concise feature copy, an email input, and the orange notification button.

### Measured component styles

- **Primary button** (“Get Notified”): background #ff4300 · text #ffffff · radius 16px · padding 1px 6px · 700 14px -apple-system
- **Secondary button** (“Get access”): background #e9e6e6 · text #000000 · radius 99px · padding 8px 12px 8px 16px · 700 12px -apple-system
- **Link** (“@kmkota0”): transparent background · text #ffffff · radius 0px · padding 0px · 700 10px -apple-system
- **Input**: background #ffffff · text #000000 · radius 22px · padding 0px 165px 0px 25px · 700 18px -apple-system
- **Card** (“Chrome extension. Use it in any live pro”): background #1a1a1a · text #ffffff · border 1px solid #343434 · radius 20px · padding 0px · 700 18px -apple-system
- **Navigation item** (“beta”): background #ffffff · text #000000 · radius 7px · padding 1px 5px 0px 5px · 700 9px -apple-system

## Do

- Use #000000 as the dominant canvas.
- Reserve #ff4300 for primary signup actions and small highlights.
- Use charcoal surfaces and fine borders to define cards.
- Give hero product imagery ample dark negative space.
- Keep hero messaging centered and content sections plainly aligned.
- Use compact, bold system-sans typography.

## Don't

- Do not add a broad multicolor interface palette.
- Do not use bright accent colors for ordinary copy.
- Do not add heavy shadows or glossy UI layers.
- Do not make every section a bordered card.
- Do not let product screenshots dictate the page-wide palette.
- Do not replace the dark canvas with large light panels.

## Agent prompt

Build a developer-tool landing page in the ThreeTools visual style. Use Deep Canvas (#000000) as the dominant background, Signal White (#ffffff) for primary headings, and restrained gray copy including Quiet Gray (#666666) and Soft Silver (#cacaca). Reserve Tool Orange (#ff4300) for the main signup action and small UI highlights. Set bold system-sans typography with a large centered hero, concise supporting copy, and a compact email form. Feature the product through vivid 3D imagery and dark browser-interface demos, keeping their colors contained within the media. Arrange feature content in rounded charcoal cards with fine Border Graphite (#343434) outlines, then use a split creator section and a simple stacked FAQ. Maintain generous section breaks, clear alignment, and flat surfaces without prominent shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on a black canvas with a large 3D product mark, headline, supporting copy, and signup form. | email signup, primary CTA | centered headline, 3D hero artwork, white input, orange button |
| 2 | video | Centered product video within a black section, followed by a short row of testimonial snippets. | product walkthrough, social proof | embedded video, dark media frame, compact testimonial row |
| 3 | feature-grid | Feature-card grid leads into a two-column creator section, then beta signup and a stacked FAQ. | feature discovery, beta signup, expandable FAQ | outlined dark cards, creator carousel, split biography, rounded question rows |

## Source CSS custom properties (selected)

```css
--font-size-h0: 68px;
--font-size-h1: 46px;
```

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