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

# Specify · Design System

> A dark technical canvas for design-system tooling

**Theme:** light · **Industry:** devtools · **Source:** https://specifyapp.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._

Specify pairs a dramatic dark hero with a long, airy white product narrative. Gradient headlines and restrained interface visuals give the design-token platform a technical but approachable identity.

## North star

Use a dramatic dark opening, then let spacious white product sections and precise Inter typography carry the story.

## Overview

The page opens on a near-black hero, where white navigation and supporting copy frame a large headline filled with a purple-to-blue gradient. A softly vignetted, low-contrast 3D product illustration sits below the copy, reinforcing the technical subject without competing for attention. The hero gives way to broad white sections with centered dark headings, muted explanatory text, and generous whitespace. Inter is used throughout for a clean, contemporary interface voice; bold display headings use tight tracking, while body copy remains open and readable. Product screenshots, customer proof, and feature explanations are arranged as focused content groups rather than dense dashboards. Purple, blue, and green accents appear selectively in gradients, small icons, and product details. Cards use pale neutral fills and subtle shadows, while the overall page stays mostly flat and spacious.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for the product, customer, feature, and footer sections; also used for inverse text on the dark hero. |
| Token Blue | `#1d58c0` | `--color-token-blue` | accent | One of the brand accents, visible in gradient treatments and small interface or product details. |
| Specify Violet | `#8d4af7` | `--color-specify-violet` | brand | Signature purple accent in the hero headline gradient, logo details, and product-related visuals. |
| Workflow Green | `#009639` | `--color-workflow-green` | accent | Secondary accent in gradient treatments and small product details, not a dominant page background. |
| Charcoal Ink | `#1a1d1e` | `--color-charcoal-ink` | neutral | Primary heading and body-text color on white sections; also used for dark controls and footer text. |
| Night Canvas | `#151718` | `--color-night-canvas` | surface | Full-width hero background and dark visual field behind the 3D product artwork. |
| Graphite Text | `#3c3f40` | `--color-graphite-text` | neutral | Muted text color for secondary copy and footer details. |
| Deep Iris | `#624de3` | `--color-deep-iris` | accent | Purple tone appearing in section and footer visuals; supports the broader violet brand language. |
| Mist Surface | `#f6f7f9` | `--color-mist-surface` | surface | Soft neutral fill for selected cards and product-supporting areas. |
| Soft Slate | `#8c8e8e` | `--color-soft-slate` | neutral | Low-emphasis text in supporting copy and footer details. |
| Cloud Gray | `#ebedef` | `--color-cloud-gray` | surface | Pale gray card or interface-panel fill, including product output examples. |
| Electric Orchid | `#c63af8` | `--color-electric-orchid` | accent | Bright violet-pink accent detected in a gradient section treatment, used sparingly. |
| Quiet Silver | `#d0d1d1` | `--color-quiet-silver` | neutral | Subtle navigation or text detail; use only for low-contrast supporting information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#151718` (Night Canvas) · `--color-surface-2` → `#f6f7f9` (Mist Surface) · `--color-surface-3` → `#ebedef` (Cloud Gray) · `--color-text` → `#1a1d1e` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#3c3f40` (Graphite Text) · `--color-accent` → `#1d58c0` (Token Blue) · `--color-accent-2` → `#8d4af7` (Specify Violet) · `--color-accent-3` → `#009639` (Workflow Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1d1e` | `#ffffff` | 16.96:1 | AAA |
| `#1a1d1e` | `#151718` | 1.06:1 | fail |
| `#1a1d1e` | `#f6f7f9` | 15.82:1 | AAA |
| `#1a1d1e` | `#ebedef` | 14.45:1 | AAA |
| `#ffffff` | `#151718` | 17.99:1 | AAA |
| `#ffffff` | `#f6f7f9` | 1.07:1 | fail |
| `#ffffff` | `#ebedef` | 1.17:1 | fail |
| `#3c3f40` | `#ffffff` | 10.62:1 | AAA |
| `#3c3f40` | `#151718` | 1.69:1 | fail |
| `#3c3f40` | `#f6f7f9` | 9.91:1 | AAA |

### Gradients

- `radial-gradient(50% 84.5% at -14.7% -11.9%, rgb(29, 88, 192) 0%, rgb(255, 255, 255) 100%)`
- `radial-gradient(50% 84.5% at -14.7% -11.9%, rgb(141, 74, 247) 0%, rgb(255, 255, 255) 100%)`
- `radial-gradient(50% 84.5% at -14.7% -11.9%, rgb(0, 150, 57) 0%, rgb(255, 255, 255) 100%)`
- `radial-gradient(71.875% 69.4289% at 53.8393% 50%, rgba(21, 23, 24, 0) 63.244%, rgb(21, 23, 24) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400 | Main body copy and general interface text | Inter |
| Inter-Medium | `--font-inter-medium` | system | 500 | Navigation, captions, and medium-emphasis labels | Inter |
| Inter-SemiBold | `--font-display` | system | 600 | Section headings and prominent feature titles | Inter |
| Fira Code | `--font-mono` | webfont | 400 | Code-like product labels and technical output snippets | Fira Code |
| Inter-Bold | `--font-inter-bold` | system | 700 | Hero heading and strongest display emphasis | Inter |

- **Inter:** Clean sans-serif with regular weight; keep body copy readable and avoid decorative styling.
- **Inter-Medium:** Medium weight for concise UI labels; navigation uses sentence case.
- **Inter-SemiBold:** Semibold with tight negative tracking on large headings; keep capitalization natural.
- **Fira Code:** Monospaced technical accent; reserve for brief code or output contexts.
- **Inter-Bold:** Bold display voice with tight negative tracking; gradient fill can emphasize the hero title.

### Type scale — Perfect Fifth (ratio ≈ 1.549, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.17 | -0.021em | — | Inter-Bold | Hero title, large and bold with a purple gradient fill. |
| h2 | 32px | 600 | 1.25 | -0.031em | — | Inter-SemiBold | Centered section headings and prominent feature titles. |
| body | 20px | 400 | 1.6 | 0 | — | Inter | Hero supporting sentence and primary explanatory copy. |
| caption | 16px | 500 | 1.5 | 0 | — | Inter-Medium | Small supporting labels and compact feature descriptions. |
| nav | 14px | 500 | 1.71 | 0 | — | Inter-Medium | Header navigation links and concise utility labels. |
| code | 14px | 400 | 1.57 | 0 | — | Fira Code | Technical snippets and code-oriented product output. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 16, 24, 40 px.
- Section rhythm 80px · element gap 8px · card padding 16px · max content width 1120px.

The measured content width is capped at 1120px, with the header and main content centered within it. The hero uses centered alignment and a single column; later white sections alternate centered headings with product imagery, customer proof, and feature content. Sections feel deliberately separated, with a measured section gap of 80px and comfortable overall density. The measured spacing scale is built around an 8px base unit. Preserve the long vertical rhythm and open whitespace rather than compressing content into a dashboard-like layout.

## Shape & elevation

- Radius: button `50%` · card `16px` · media `8px` · nav `6px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `16px` · pill `9999px`
- Shadow `md` (link): `rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px`
- Shadow `inset` (link, nav): `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 3px 2px -1px, rgba(0, 0, 0, 0.12) 0px 1px 1px -1px`
- Shadow `md-3` (other): `rgba(0, 0, 0, 0.14) 0px 4px 6px -2px, rgba(0, 0, 0, 0.16) 0px 12px 16px -4px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.12) 0px 8px 8px -4px, rgba(0, 0, 0, 0.18) 0px 20px 24px -4px`

Most of the page stays flat, especially the white content bands. Cards have a measured 16px radius and a soft shadow; product media uses an 8px radius. Avoid prominent hairlines or heavy outlines, and reserve layered shadows for floating interface or showcase elements.

## Imagery

The hero uses dark, cinematic 3D product artwork with a soft vignette and dim highlights, leaving the headline dominant. Later sections use product-interface screenshots, customer logos, and testimonial cards as evidence of real workflows. Keep media contained within the content area, with restrained framing and rounded corners; avoid introducing generic lifestyle photography.

## Components

### Header navigation

Compact links sit across the dark hero header, with the Specify mark at left and a discreet outlined sign-in control at right.

### Hero announcement pill

A white, pill-shaped announcement link sits centered above the title, using dark text and a small circular arrow treatment.

### Gradient hero title

A centered, bold Inter headline uses a violet-to-blue gradient against the near-black hero canvas.

### Product showcase media

A dark, vignetted 3D illustration appears beneath the hero copy; later product screenshots are framed with soft corners.

### Feature cards

Feature and product cards use pale neutral surfaces, measured 16px card rounding, and subtle low-contrast shadows.

### Customer proof

Customer logos and testimonial content provide social proof in light, spacious sections without heavy decoration.

### Measured component styles

- **Primary button** (“Case study”): background #1a1d1e · text #0000ee · radius 40px · padding 8px 8px 8px 16px · 400 12px sans-serif
- **Secondary button**: background #8d4af7 · text #0000ee · radius 20px · padding 0px · 400 12px sans-serif
- **Link**: transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“Color”): transparent background · text #000000 · radius 16px · padding 16px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px
- **Navigation item** (“Solutions Resources Pricing Sign in”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Open with a near-black, full-width hero.
- Center the hero announcement, title, and supporting copy.
- Use the measured violet, blue, and green accents selectively.
- Keep white content sections spacious and clearly separated.
- Use Inter for interface and editorial text.
- Frame product imagery as real technical evidence.

## Don't

- Do not turn the page into a dense dashboard.
- Do not use bright accent colors as large section backgrounds.
- Do not let product artwork overpower the hero title.
- Do not add heavy borders or strong shadows to every card.
- Do not introduce decorative typefaces or all-caps-heavy styling.
- Do not fill the large whitespace between content groups.

## Agent prompt

Build a new SaaS page in Specify’s visual style. Use Night Canvas (#151718) for a cinematic opening and Gallery White (#ffffff) for broad, airy content sections. Set headings and interface copy in Inter, with a bold, tightly tracked hero title and a restrained gradient drawing on Specify Violet (#8d4af7) and Token Blue (#1d58c0); use Workflow Green (#009639) only as a small accent. Center key headings, keep supporting text muted, and organize content as focused feature, customer-proof, and product-showcase groups. Use Mist Surface (#f6f7f9) or Cloud Gray (#ebedef) for occasional cards, with softly rounded corners and subtle shadows. Keep the page within the measured 1120px content width, preserve generous vertical whitespace, and use dark technical product imagery rather than generic lifestyle photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width hero with centered announcement, headline, supporting copy, and product artwork. | announcement link, primary product message, customer logo proof | near-black canvas, gradient headline, pill announcement, cinematic 3D media |
| 2 | feature-split | White content band with centered introduction, feature copy, and product-interface imagery. | feature explanation, product walkthrough, customer testimonial | centered section heading, interface screenshot, testimonial card, spacious layout |
| 3 | feature-grid | White section with a centered title and grouped supporting feature content. | benefit scanning, feature discovery | multi-column feature groups, small accent icons, generous whitespace |
| 4 | other | White content section with centered headline and feature-led explanatory groups. | concept explanation, capability overview | centered heading, feature illustrations, minimal footer transition |

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