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

# Gamma · Design System

> A clean marketplace frame for expressive Bitcoin art.

**Theme:** light · **Industry:** crypto · **Source:** https://www.gamma.io/ · **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._

Gamma pairs a bright, restrained marketplace interface with vivid artwork that supplies most of the page’s colour. A dramatic dark feature panel and soft pink-to-lilac gradients add a distinct brand moment without competing with collection imagery.

## North star

Keep the marketplace chrome quiet and let vivid artwork, rather than interface colour, lead every discovery moment.

## Overview

Gamma’s visual strategy gives the artwork the loudest voice: the marketplace sits on a white canvas, while vivid, often pixelated or painterly collection images carry saturated colour. Near-black text, quiet grey metadata and pale hairlines keep navigation, rankings and discovery tools legible without turning them into competing panels. Gamma Sans Display provides a consistent typographic voice, with large, confident headings, lighter supporting copy and restrained button labels. The page moves from a full-bleed artwork hero into a two-column feature collage, then returns to airy white discovery sections for prints, charts and ranked collections. A large, rounded charcoal brand panel interrupts that rhythm with pink-to-lilac gradient accents and cropped artwork motifs. Generous blank space around section headings contrasts with compact, information-dense collection rows. Rounded controls and image corners soften the otherwise spare, editorial marketplace presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Main page canvas, light content areas, hero navigation surface and white collection CTA. |
| Carbon Ink | `#0c0c0d` | `--color-carbon-ink` | brand | Primary text, dark buttons, inverse panels and the large brand feature section. |
| Gallery Charcoal | `#1d1d1e` | `--color-gallery-charcoal` | surface | Dark card and brand-panel surface; creates contrast behind feature content. |
| Porcelain Grey | `#f3f3f3` | `--color-porcelain-grey` | neutral | Light UI surfaces and subtle input or divider treatment. |
| Soft Graphite | `#8e8e8f` | `--color-soft-graphite` | neutral | Muted supporting copy and subdued metadata on light backgrounds. |
| Quiet Silver | `#c2c2c2` | `--color-quiet-silver` | neutral | Secondary text and low-emphasis details; also occurs in artwork imagery. |
| Mist Line | `#e9e9ec` | `--color-mist-line` | neutral | Pale hairline borders separating controls and content. |
| Slate Grey | `#7f7f7f` | `--color-slate-grey` | semantic | Muted inverse surface and low-contrast text or details on dark content. |
| Ash Grey | `#858586` | `--color-ash-grey` | neutral | Occasional subdued text detail; not a defining brand colour. |
| Petal Rose | `#e0a6b5` | `--color-petal-rose` | accent | Pink end of the gradient accent and highlighted words in the dark brand panel. |
| Orchid Haze | `#dc94d5` | `--color-orchid-haze` | accent | Lilac gradient endpoint used for brand-panel highlights and artwork-adjacent accents. |
| Night Slate | `#242629` | `--color-night-slate` | surface | Isolated dark link or interface detail; secondary to the main near-black surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1d1d1e` (Gallery Charcoal) · `--color-surface-2` → `#0c0c0d` (Carbon Ink) · `--color-surface-3` → `#f3f3f3` (Porcelain Grey) · `--color-surface-4` → `#7f7f7f` (Slate Grey) · `--color-text` → `#0c0c0d` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#8e8e8f` (Soft Graphite) · `--color-border` → `#f3f3f3` (Porcelain Grey) · `--color-accent` → `#e0a6b5` (Petal Rose) · `--color-accent-2` → `#dc94d5` (Orchid Haze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0c0d` | `#ffffff` | 19.55:1 | AAA |
| `#0c0c0d` | `#1d1d1e` | 1.16:1 | fail |
| `#0c0c0d` | `#f3f3f3` | 17.62:1 | AAA |
| `#ffffff` | `#1d1d1e` | 16.84:1 | AAA |
| `#ffffff` | `#0c0c0d` | 19.55:1 | AAA |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |
| `#8e8e8f` | `#ffffff` | 3.27:1 | AA-large |
| `#8e8e8f` | `#1d1d1e` | 5.15:1 | AA |
| `#8e8e8f` | `#0c0c0d` | 5.97:1 | AA |
| `#8e8e8f` | `#f3f3f3` | 2.95:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(168.57deg, rgb(255, 255, 255) 14.81%, rgb(251, 240, 237) 22.79%, rgb(224, 166, 181) 81.04%, rgb(220, 148, 213) 91.42%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gamma Sans Display | `--font-body` | webfont | 300, 400, 600 | Page-wide display and interface type, from hero titles to metadata and controls. | Inter |

- **Gamma Sans Display:** Use light weights for supporting copy, regular for controls and semibold for headings; keep case natural and tracking restrained.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 600 | 1.15 | -0.005em | — | Gamma Sans Display | Large hero or brand-section headline. |
| h1 | 48px | 600 | 1.17 | 0.02em | — | Gamma Sans Display | Primary page or feature headline. |
| h2 | 40px | 600 | 1.2 | 0.02em | — | Gamma Sans Display | Major section headings such as prints and charts. |
| h3 | 32px | 600 | 1.25 | 0.02em | — | Gamma Sans Display | Subsection titles and collection feature headings. |
| h4 | 24px | 600 | 1.17 | 0.02em | — | Gamma Sans Display | Compact card and feature headings. |
| body | 18px | 300 | 1.5 | 0.02em | — | Gamma Sans Display | Descriptions, collection summaries and explanatory copy. |
| caption | 14px | 300 | 1.43 | 0.01em | — | Gamma Sans Display | Small metadata, volume, floor-price and supporting labels. |
| button | 16px | 400 | 1.5 | 0.02em | — | Gamma Sans Display | Marketplace actions, including collection and discovery CTAs. |
| link | 18px | 300 | 1.5 | 0.02em | — | Gamma Sans Display | Navigation, collection names and inline discovery links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 32, 40, 52 px.
- Section rhythm 40px · element gap 4px · card padding 131px · max content width 1360px.

A centered marketplace shell uses a measured 1360px page max width, with a compact top navigation and broad, image-led hero. The content alternates between a two-column feature collage, open single-column promotional bands, a three-column chart row and a two-column ranked-list layout. A long, spacious white page rhythm culminates in a centered dark brand panel and a multi-column footer. Use the measured 4px-based spacing scale and compact overall density; preserve generous whitespace around section transitions.

## Shape & elevation

- Radius: button `8px` · input `9999px` · card `9999px` · media `4px` · link `8px` · xs `4px` · sm `8px` · pill `9999px`
- No box shadows measured: the page is flat.

The page is mostly flat: white sections meet without prominent shadows, and subtle pale hairlines define inputs or separations. Artwork cards rely on image contrast and dark overlays rather than floating elevation. Use rounded corners for media and buttons, and reserve the large, pill-like silhouette for the dark brand feature panel.

## Imagery

Treat collection artwork as the page’s primary colour source: use large, edge-to-edge crops in hero and feature cards, with dark overlays where copy sits over busy images. Artwork ranges from pixel-art avatars to painterly prints and collaged collections. The prints promotion and dark brand panel use cropped, rounded image motifs and soft pink-to-lilac gradients. Keep artwork visually distinct from neutral UI chrome.

## Components

### Marketplace navigation

Place the Gamma mark and pill-shaped search input at left, destination links across the center, and a compact near-black Connect pill at right.

### Artwork hero

Use a full-bleed featured artwork crop with a darkened lower area for a large white title, supporting description, mint and price metadata, and white View collection CTA.

### Collection feature cards

Arrange large artwork-led cards in two columns, with white text and compact collection details over darkened image areas.

### Prints promotion

Set a Prints heading and short descriptor above a light, spacious promotional panel with centered copy, a near-black CTA and artwork imagery fading into pink and lilac.

### Chart cards

Show Top collections, Top drops and Top prints as three aligned cards with concise labels and image or surface treatment behind the ranking.

### Ranked collection lists

Present numbered collections in two columns of compact rows, pairing small artwork thumbnails with collection names and muted volume or floor-price metadata.

### Brand feature panel and footer

Use a tall, rounded charcoal panel for three editorial benefits, gradient-highlighted headings, artwork motifs, partner marks and a white CTA; follow with a light link-rich footer.

### Measured component styles

- **Primary button** (“Connect”): background #0c0c0d · text #ffffff · radius 999px · padding 0px 12px · 400 14px Gamma Sans Display
- **Secondary button** (“View collection”): background #ffffff · text #0c0c0d · radius 8px · padding 16px 24px · 400 16px Gamma Sans Display
- **Link** (“1 Leo Cats 223.9 STX Volume 45 STX Floor”): transparent background · text #0c0c0d · radius 0px · padding 0px · 400 16px Gamma Sans Display
- **Input**: transparent background · text #0c0c0d · border 1px solid #f3f3f3 · radius 999px · padding 12px 20px 12px 48px · 300 14px Gamma Sans Display
- **Card** (“Create without complexity Our seamless u”): background #1d1d1e · text #0c0c0d · radius 999px · padding 230px 32px · 400 16px Gamma Sans Display

## Do

- Keep the marketplace canvas white and the interface chrome restrained.
- Let collection artwork provide most of the page’s saturated colour.
- Use Carbon Ink #0c0c0d for primary text and dark CTAs.
- Reserve Petal Rose #e0a6b5 and Orchid Haze #dc94d5 for selective gradient accents.
- Use muted grey metadata to separate trading details from collection titles.
- Build clear transitions between image-led discovery and spacious editorial sections.

## Don't

- Do not add bright interface colours that compete with the artwork.
- Do not place long, low-contrast copy over busy images without a dark treatment.
- Do not make every section a card or add heavy shadows.
- Do not use the pink-lilac gradient as a general page background.
- Do not give collection metadata the same emphasis as collection names.
- Do not flatten the dark brand panel into the surrounding white canvas.

## Agent prompt

Build a new Bitcoin art marketplace page in Gamma’s restrained editorial style. Use Gallery White #ffffff as the main canvas, Carbon Ink #0c0c0d for text and primary actions, and Porcelain Grey #f3f3f3 or Mist Line #e9e9ec for quiet UI boundaries. Use Gamma Sans Display, or Inter as a free substitute, with light supporting copy and semibold headings. Make artwork the dominant colour source: use large, carefully cropped collection images, with dark overlays behind text where needed. Alternate image-led discovery with open white sections and compact ranked rows. Introduce a single dark feature panel in Gallery Charcoal #1d1d1e, accented selectively with Petal Rose #e0a6b5 and Orchid Haze #dc94d5. Keep shadows minimal, corners rounded and the hierarchy clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width artwork hero beneath a compact horizontal navigation bar. | Search collections, Explore navigation, Connect wallet, View collection | Edge-to-edge artwork, Dark image overlay, White headline, Light CTA |
| 2 | gallery | Two-column artwork feature cards followed by an open Top Drops heading. | Browse featured collections, View collection, Explore drops | Large image cards, Overlay copy, Darkened artwork, Open section heading |
| 3 | product-showcase | Section heading and descriptor above a broad, centered promotional print panel. | Explore prints, See trending prints | White canvas, Centered message, Black CTA, Soft gradient imagery |
| 4 | stats | Three equal chart cards aligned in a single row beneath a left-aligned heading. | Compare top charts, Open chart category | Three-column grid, Compact labels, Artwork-backed card |
| 5 | product-grid | Two columns of numbered collection rows beneath a section heading and exploration link. | Scan ranked collections, Compare trading details, Explore collections | Numbered rows, Artwork thumbnails, Muted metadata, Pale row surfaces |
| 6 | footer | Tall centered dark brand panel followed by a light multi-column link footer and partner marks. | Learn about Gamma, Get started, Browse resources, Contact support | Rounded charcoal panel, Gradient headline accents, Artwork motifs, Partner logos |

## Source CSS custom properties (selected)

```css
--spacing-none: 0px;
--spacing-xxs: 4px;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing-m: 16px;
--spacing-l: 20px;
--spacing-xl: 24px;
--spacing-2xl: 32px;
--spacing-3xl: 40px;
--spacing-4xl: 64px;
--spacing-5xl: 88px;
--spacing-6xl: 104px;
--spacing-auto: auto;
--border-radius-xs: 4px;
--border-radius-s: 8px;
--border-radius-m: 12px;
--border-radius-l: 16px;
--border-radius-full: 999px;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-size-xxs: 10px;
--font-size-xs: 12px;
--font-size-s: 14px;
--font-size-m: 16px;
--font-size-l: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
--font-size-4xl: 40px;
--font-size-5xl: 48px;
--font-size-6xl: 64px;
--font-size-7xl: 72px;
--font-size-8xl: 88px;
--letter-spacing-tightest: -.05em;
--letter-spacing-tighter-still: -.02em;
--letter-spacing-tighter: -.01em;
--letter-spacing-tight: -.005em;
--letter-spacing-normal: 0em;
```

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