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

# Decide AI · Design System

> Monochrome editorial design with a luminous AI signal.

**Theme:** dark · **Industry:** ai · **Source:** https://decideai.xyz/ · **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._

Decide AI pairs a near-black canvas and oversized white typography with restrained mint-green signals. Product cards, technical grid artwork, and a high-contrast white footer give the long homepage a clear, deliberate rhythm.

## North star

Let oversized white type lead on a near-black canvas, and use mint only as a precise technical signal.

## Overview

The visual identity is built on a near-black canvas (#030303) with white typography and large, sharply contrasting white bands. The mint green (#73ffb9) is a rare signal, reserved for hero indicators and small technical marks rather than broad fills. A neutral gray card (#c1c1c1) differentiates one product tile, while the pale hairline color (#f4f6f6) appears in fine separators and interface details. PP Neue Montreal carries the full page: oversized, tightly tracked headlines sit above restrained body copy and compact uppercase labels. Layout alternates between spacious black sections, a scrolling wordmark band, compact white product cards, and dark feature panels. Fine grid lines, comparison tables, and abstract wireframe forms lend technical character without relying on photography. The footer reverses the dark palette into a broad white closing panel. Keep surfaces mostly flat, using thin rules and precise alignment to organize the dense product story.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#030303` | `--color-obsidian-canvas` | brand | Dominant page background and dark-section canvas; also used for text and link details on white surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary headline and body text on dark sections, product-card surfaces, marquee band, and footer. |
| Soft Alloy | `#c1c1c1` | `--color-soft-alloy` | surface | Muted gray surface for the Decide Cortex product card, distinguishing its coming-soon state. |
| Pale Trace | `#f4f6f6` | `--color-pale-trace` | neutral | Fine border and interface-detail color; keep its use to subtle rules and small marks. |
| Signal Mint | `#73ffb9` | `--color-signal-mint` | accent | Sparse accent for hero status indicators and technical checks; not a broad background color. |

### Semantic aliases

`--color-canvas` → `#030303` (Obsidian Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#c1c1c1` (Soft Alloy) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#030303` (Obsidian Canvas) · `--color-border` → `#f4f6f6` (Pale Trace)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#030303` | 20.62:1 | AAA |
| `#ffffff` | `#c1c1c1` | 1.8:1 | fail |
| `#030303` | `#ffffff` | 20.62:1 | AAA |
| `#030303` | `#c1c1c1` | 11.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 400, 500, 700 | The site-wide sans-serif for navigation, hero headlines, body copy, labels, cards, and links. | DM Sans |

- **PP Neue Montreal:** Use medium-weight display headlines with tight negative tracking; keep body regular and small labels uppercase at medium weight.

### Type scale — Golden Ratio (ratio ≈ 1.669, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 220px | 500 | 1 | 0 | — | PP Neue Montreal | Oversized hero and marquee display lettering. |
| h1 | 110.5px | 500 | 1 | -0.036em | — | PP Neue Montreal | Primary hero headline and major page titles. |
| h2 | 54px | 500 | 1 | 0 | — | PP Neue Montreal | Section headings, including mission and solution sections. |
| h3 | 50px | 400 | 1 | -0.032em | — | PP Neue Montreal | Feature and product-panel headings. |
| h4 | 46px | 700 | 1 | 0 | — | PP Neue Montreal | Emphasized subheadings within product or feature content. |
| body | 17px | 400 | 1.27 | 0 | — | PP Neue Montreal | Descriptions, supporting paragraphs, and explanatory card copy. |
| caption | 14.5px | 500 | 1 | 0 | uppercase | PP Neue Montreal | Compact uppercase labels, indexes, and technical metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 6, 7, 8, 12, 14, 16, 20, 32, 36, 39, 40, 48, 56, 60, 80 px.
- Section rhythm 40px · element gap 20px · card padding 14px · max content width 1362px.

Use a wide, centered content frame with the measured maximum width of 1362px. The desktop hero aligns to the left, pairing an expansive headline with a lighter supporting line; a thin rule anchors its lower edge. The long page alternates full-width visual bands with inset product and feature panels. Product cards form a three-column row, while comparison content splits into a table and numbered text. Spacious black intervals offset compact labels and dense technical detail, creating a comfortable rather than crowded rhythm.

## Shape & elevation

- Radius: link `9px` · xs `9px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with surfaces distinguished by strong black-to-white contrast rather than shadows. Fine pale rules separate content and form the comparison-table grid. Keep cards square-edged as measured, without adding rounded treatments; the measured link radius is 9px. Maintain artwork and text on clear layers without heavy overlays.

## Imagery

Avoid conventional lifestyle photography. The page uses abstract technical visuals: fine grid fields, wireframe spherical forms, comparison marks, and oversized scrolling wordmarks. Keep graphics monochrome and low-contrast against black, with occasional mint details; frame artwork inside broad dark panels. Product tiles are clean typographic compositions with small diagram-like emblems rather than image-led cards.

## Components

### Header navigation

Compact brand mark at the left and a right-aligned row of white product and resource links on the black canvas.

### Hero status rail

Four numbered or labeled signals above the headline; use white labels and sparse Signal Mint (#73ffb9) bars or rules.

### Hero headline

Large white, left-aligned display copy with a lighter supporting sentence and a thin pale divider below.

### Product cards

Three adjacent square-edged cards for Protocol, ID, and Cortex; primarily white, with Cortex shown on Soft Alloy (#c1c1c1).

### Comparison block

Fine-lined comparison table beside a numbered list of benefits; use restrained mint checks and compact supporting copy.

### Technical showcase panels

Large dark feature panels with subtle grid artwork, wireframe forms, small corner labels, and underlined action links.

### White footer band

High-contrast white closing surface with a black brand mark, oversized wordmark treatment, navigation, and social links.

### Measured component styles

- **Primary button** (“Back to top”): transparent background · text #030303 · radius 0px · padding 0px · 400 16px PP Neue Montreal
- **Link** (“Decide AI”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px PP Neue Montreal
- **Card** (“TRAINING PROTOCOL Decide Protocol Build ”): background #ffffff · text #ffffff · radius 0px · padding 12px 15.8px · 400 16px PP Neue Montreal

## Do

- Use #030303 as the primary page canvas.
- Set key headings in oversized white type.
- Reserve #73ffb9 for small, meaningful signals.
- Use fine rules to organize dark content.
- Keep product cards square-edged and typographic.
- Alternate dark sections with deliberate white bands.

## Don't

- Do not introduce broad saturated color fields.
- Do not use lifestyle photography as the main visual.
- Do not add heavy shadows or glossy gradients.
- Do not round every card or panel.
- Do not crowd the hero with supporting elements.
- Do not use mint as a large-area background.

## Agent prompt

Build a new AI product page in Decide AI’s visual style. Use Obsidian Canvas (#030303) for the primary background, Gallery White (#ffffff) for headline and body contrast, and Signal Mint (#73ffb9) only for sparse technical indicators. Use Soft Alloy (#c1c1c1) for a secondary product surface and Pale Trace (#f4f6f6) for subtle rules. Set type in PP Neue Montreal or a close sans-serif substitute, with oversized, tightly tracked headings, restrained body copy, and uppercase micro-labels. Create a wide, left-aligned hero, then alternate open dark sections with product cards, comparison content, and grid-based technical artwork. Keep panels flat and square-edged. Finish with a broad white footer. Favor abstract wireframes and precise alignment over photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A long single-column page on a near-black canvas, alternating hero, white wordmark bands, product cards, feature panels, and footer. | top navigation, scroll-led storytelling, product links, back-to-top | oversized hero typography, mint status indicators, fine dividers, technical grid artwork, contrasting white footer |

## Source CSS custom properties (selected)

```css
--color-dark-01: #030303;
--color-dark-02: #191a1a;
--color-red-01: #ff6338;
--color-green-01: #73ffb9;
--color-white-01: #fff;
```

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