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

# shadcn/ui · Design System

> Quiet monochrome, modular components, and confident type.

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

A restrained monochrome homepage pairs a centered, typographic introduction with a dense showcase of component examples. Rounded dashboard cards demonstrate how customizable interface building blocks work in context.

## North star

Let a quiet white-and-gray canvas make black typography and reusable interface examples the primary visual signals.

## Overview

The visual strategy is built around a white canvas, black typography, and pale neutral surfaces rather than a bright brand accent. The hero is deliberately quiet: a small muted announcement leads into a large, tightly tracked heading, a short centered explanation, and compact pill-shaped actions. Below it, a four-column field of rounded cards makes the component library tangible through forms, charts, navigation, and financial dashboard examples. These mock interfaces use restrained gray fills and hairline borders, while occasional dark buttons provide the strongest contrast and focus. Geist carries the entire hierarchy, with a heavy, compact display heading offset by smaller, readable supporting text. Generous separation around the introduction gives way to a much denser showcase. The cards sit on the same pale background as the gallery, using subtle outlines and soft shadows for separation rather than dramatic elevation. Product mock-up colors remain neutral and serve the component demonstrations, not a separate brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | surface | Pale gray for secondary buttons, badges, subtle fields, and muted interface areas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the clean card surface behind component demonstrations. |
| Quiet Gray | `#737373` | `--color-quiet-gray` | neutral | Muted copy, supporting descriptions, captions, and secondary navigation details. |
| Soft Ink | `#0a0a0a` | `--color-soft-ink` | neutral | Dark neutral text on secondary controls, cards, and supporting interface content. |
| Fine Rule | `#e5e5e5` | `--color-fine-rule` | neutral | Hairline borders around outlined buttons, badges, cards, and other controls. |
| True Black | `#000000` | `--color-true-black` | brand | Primary navigation and the strongest headline and text contrast. |
| Button Charcoal | `#171717` | `--color-button-charcoal` | neutral | Dark filled button and badge surfaces with light foreground text. |
| Graphite | `#535353` | `--color-graphite` | neutral | Minor dark gray detail in text and interface examples; not a defining brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Mist) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#737373` (Quiet Gray) · `--color-text-subtle` → `#0a0a0a` (Soft Ink) · `--color-border` → `#e5e5e5` (Fine Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#737373` | `#ffffff` | 4.74:1 | AA |
| `#737373` | `#f5f5f5` | 4.35:1 | AA-large |
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#f5f5f5` | 18.16:1 | AAA |

### Gradients

- `linear-gradient(lab(100 0 0) 0%, lab(96.52 -0.0000298023 0.0000119209) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, lab(100 0 0) 0%, oklab(0.969998 -0.00000959635 0.0000227094 / 0.8) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 600 | All page typography, from navigation and hero heading to component labels and controls. | Inter |

- **Geist:** Use weights 400, 500, and 600; the hero heading is bold with tight negative tracking, while most interface text stays neutral and compact.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.1 | -0.05em | — | Geist | Centered hero headline; large, bold, and tightly tracked. |
| h2 | 36px | 500 | 1.11 | 0 | — | Geist | Section-level headings where present; medium-weight and prominent. |
| h3 | 30px | 600 | 1.2 | 0 | — | Geist | Card or subsection titles within interface examples. |
| h4 | 18px | 400 | 1.56 | 0 | — | Geist | Short supporting headings and compact content labels. |
| body | 14px | 400 | 1.43 | 0 | — | Geist | Hero description and readable component or dashboard copy. |
| caption | 12px | 500 | 1.33 | 0 | — | Geist | Small labels, helper text, and card metadata. |
| button | 14px | 400 | 1.43 | 0 | — | Geist | Compact action labels in dark and secondary pill controls. |
| nav | 14px | 500 | 1.43 | 0 | — | Geist | Top navigation links and documentation navigation. |
| link | 12px | 500 | 1.33 | 0.05em | uppercase | Geist | Small uppercase links and utility actions. |
| eyebrow | 12px | 500 | 1.33 | 0.05em | uppercase | Geist | Announcement-style label above the hero heading. |

## Spacing & layout

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

The measured page uses a centered hero followed by a broad, four-column component showcase. The available page maximum is 1400px, with 48px section separation and a comfortable overall density. The hero heading, supporting copy, and actions are centered; the gallery switches to aligned card columns with varied card content. Use the measured 4px-based spacing scale for rhythm, keeping the introduction visibly open before the denser examples. The top navigation remains a compact horizontal strip.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · badge `9999px` · nav `8px` · link `18px` · xs `6px` · sm `8px` · md `10px` · lg `14px` · xl `18px` · 2xl `22px` · pill `9999px`
- Shadow `sm` (card): `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.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0`
- Shadow `hairline` (button, nav): `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) 0px 0px 0px 0px`
- Shadow `hairline-2` (input): `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.75381 0 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-2` (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.75381 0 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep the interface mostly flat. Separate cards with white surfaces, subtle gray borders, and a restrained soft shadow where needed; avoid dramatic depth or colored glow. Pill controls are distinguished chiefly by fill and outline, while darker primary actions create clear visual hierarchy.

## Imagery

There is no photographic brand imagery. The visual content is made from interface mock-ups: form controls, chart bars, dashboard cards, menus, a chat panel, and a QR-code example. Frame these as crisp, rounded white cards with restrained gray content and small black accents. Treat the QR code and chart graphics as product-demo details, not as standalone brand illustrations.

## Components

### Top navigation

A compact horizontal row of black Geist links with a documentation search field and small utility controls.

### Centered hero

A muted announcement pill sits above the large black headline, centered supporting copy, and two compact actions.

### Primary pill action

Use a dark filled, rounded control with light text; the measured primary button radius is 18px.

### Secondary pill action

A pale gray or white control with dark text; outlined variants use the measured #e5e5e5 border.

### Showcase card

Rounded white cards with a 24px measured radius contain realistic component and dashboard demonstrations.

### Component controls

Inputs use pale gray fills and rounded ends; badges and button examples contrast dark and soft-gray treatments.

### Measured component styles

- **Primary button** (“View Full Report”): background #171717 · text #fafafa · border 1px solid · radius 18px · padding 0px 12px · 500 14px Geist
- **Secondary button** (“Outline”): transparent background · text #0a0a0a · border 1px solid #e5e5e5 · radius 18px · padding 0px 12px · 500 14px Geist
- **Link** (“Change transfer limit Adjust how much yo”): background #fafafa · text #0a0a0a · border 1px solid · radius 18px · padding 14px 16px · 400 14px Geist
- **Input** (“$15,000”): background #f2f2f2 · text #0a0a0a · border 1px solid · radius 18px · padding 4px 10px · 400 14px Geist
- **Card** (“Button Secondary Outline Badge Secondary”): background #ffffff · text #0a0a0a · radius 24px · padding 20px 0px · 400 14px Geist · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Badge”): background #171717 · text #fafafa · border 1px solid · radius 18px · padding 2px 8px · 500 12px Geist
- **Navigation item** (“Home”): transparent background · text #000000 · radius 8px · padding 0px 10px · 500 14px Geist

## Do

- Keep the page canvas white and the palette monochrome.
- Center the hero headline and its supporting copy.
- Use Geist or a close sans-serif substitute throughout.
- Reserve dark filled controls for prominent actions.
- Show components inside rounded, clearly separated cards.
- Use muted gray for secondary copy and helper text.

## Don't

- Do not introduce bright accent colors.
- Do not add photographic or decorative hero imagery.
- Do not make every section equally dense.
- Do not use heavy shadows or dramatic gradients.
- Do not use decorative typefaces or all-caps headings.
- Do not turn dashboard mock-up colors into brand colors.

## Agent prompt

Build a new page in the shadcn/ui visual style: a white, restrained canvas with black Geist typography and soft-gray interface surfaces. Use Gallery White (#ffffff) for the page and card backgrounds, Soft Mist (#f5f5f5) for quiet secondary controls, Quiet Gray (#737373) for supporting copy, Fine Rule (#e5e5e5) for hairline outlines, and Button Charcoal (#171717) for high-contrast actions. Start with compact horizontal navigation, then a spacious centered hero with a small announcement, tightly tracked headline, brief description, and pill actions. Follow with a denser showcase of rounded component cards arranged in aligned columns. Demonstrate real interface patterns rather than decorative artwork. Keep elevation subtle, hierarchy clear, and spacing comfortable; avoid bright accents, photography, and ornamental gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath compact horizontal navigation, with announcement, headline, description, and two actions. | Announcement link, Primary and secondary actions | Large centered headline, Pill controls, Black-on-white type |
| 2 | product-showcase | Four-column card showcase with varied dashboard and component examples, continuing down the page. | Interactive component examples, Dashboard previews, Form controls | Rounded cards, Gray input fills, Charts and menus, Dark primary buttons |

## Source CSS custom properties (selected)

```css
--font-sans: "Geist", "Geist Fallback";
--primary: lab(0% 0 0);
--primary-foreground: lab(98.26% 0 0);
--sidebar-primary: lab(7.78201% -.0000149012 0);
--sidebar-primary-foreground: lab(98.26% 0 0);
--radius: .625rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 1.6rem;
--text-7xl: 4.5rem;
--text-8xl: 1.8rem;
--text-base: 1rem;
--text-sm: .875rem;
--spacing: .25rem;
--tw-shadow: 0 0 #0000;
--background: lab(100% 0 0);
--foreground: lab(0% 0 0);
--card-foreground: lab(0% 0 0);
--popover-foreground: lab(0% 0 0);
--secondary: lab(96.52% -.0000298023 .0000119209);
--secondary-foreground: lab(7.78201% -.0000149012 0);
--muted-foreground: lab(48.496% 0 0);
--accent: lab(96.52% -.0000298023 .0000119209);
--accent-foreground: lab(7.78201% -.0000149012 0);
--destructive-foreground: lab(96.4152% 3.22586 1.14673);
--border: lab(90.952% 0 -.0000119209);
--sidebar-foreground: lab(0% 0 0);
--sidebar-accent: lab(96.52% -.0000298023 .0000119209);
--sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
--sidebar-border: lab(90.952% 0 -.0000119209);
--shadow-2xs: 4px 4px 0px 0px #3e43f012;
--shadow-xs: 4px 4px 0px 0px #3e43f012;
--shadow-sm: 4px 4px 0px 0px #3e43f026, 4px 1px 2px -1px #3e43f026;
--shadow: 4px 4px 0px 0px #3e43f026, 4px 1px 2px -1px #3e43f026;
--shadow-md: 4px 4px 0px 0px #3e43f026, 4px 2px 4px -1px #3e43f026;
--shadow-lg: 4px 4px 0px 0px #3e43f026, 4px 4px 6px -1px #3e43f026;
```

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