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

# BitcoinOS · Design System

> A cinematic dark canvas for Bitcoin’s next chapter.

**Theme:** dark · **Industry:** crypto · **Source:** https://bitcoinos.build/ · **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._

BitcoinOS pairs a near-black interface with oversized condensed headlines and restrained serif copy. A cinematic hero image introduces a spacious, long-scroll story about making Bitcoin programmable.

## North star

Keep the interface nearly black and spacious, letting monumental white condensed headlines and cinematic media carry the story.

## Overview

The page is anchored by a near-black canvas (#101010), which fills the long scroll and keeps attention on bright type and media. Warm off-white (#fffafa) carries the main display headlines, body copy, links, and inverse CTA surfaces; muted charcoal tones define quiet navigation controls and fine boundaries. The hero uses cinematic, full-bleed imagery behind a tightly stacked, oversized uppercase headline. Review Condensed gives display copy an emphatic poster-like silhouette, while Review handles compact bold labels and Kalice adds an editorial, literary counterpoint in paragraphs and supporting statements. Content is arranged as a sequence of expansive dark sections, with substantial empty space between narrative moments and smaller, carefully grouped content such as partner marks and explanatory points. Cards and buttons remain simple and flat, using restrained radii and subtle borders rather than shadows. Image colors can vary within the artwork, but the page’s defining identity remains monochrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#101010` | `--color-carbon-canvas` | brand | Page canvas and primary dark field across the long scrolling sections. |
| Soft Snow | `#fffafa` | `--color-soft-snow` | surface | Headline and body text, prominent links, and the light primary CTA surface. |
| Quiet Graphite | `#2d2c2c` | `--color-quiet-graphite` | neutral | Fine media outlines and subdued boundaries; not a prominent section fill. |
| Button Charcoal | `#272727` | `--color-button-charcoal` | surface | Dark navigation button fill and subtle outline for secondary controls. |
| Silver Hush | `#bababa` | `--color-silver-hush` | semantic | Occasional muted navigation and supporting text, not a dominant brand color. |

### Semantic aliases

`--color-canvas` → `#101010` (Carbon Canvas) · `--color-surface` → `#fffafa` (Soft Snow) · `--color-text` → `#fffafa` (Soft Snow) · `--color-text-muted` → `#101010` (Carbon Canvas) · `--color-border` → `#2d2c2c` (Quiet Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fffafa` | `#101010` | 18.4:1 | AAA |
| `#101010` | `#fffafa` | 18.4:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Kalice | `--font-body` | webfont | 400 | Editorial body copy and literary supporting statements | Cormorant Garamond |
| Review | `--font-display` | webfont | 700, 900 | Bold navigation, captions, and uppercase section headings | Montserrat |
| Review Condensed | `--font-review-condensed` | webfont | 900 | Oversized hero display headline | Oswald |

- **Kalice:** Regular serif with airy tracking; use for readable supporting prose and elegant short statements.
- **Review:** Bold to black weights; compact labels and forceful uppercase headings with slightly tight tracking.
- **Review Condensed:** Very heavy, tightly stacked uppercase display type; keep its silhouette condensed and poster-like.

### Type scale — Custom (ratio ≈ 2, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 900 | 0.8 | 0 | uppercase | Review Condensed | Oversized uppercase hero headline over cinematic imagery |
| h1 | 32px | 900 | 0.75 | -0.01em | uppercase | Review | Bold uppercase section titles and major narrative headings |
| h2 | 24px | 400 | 1.4 | 0.04em | — | Kalice | Serif section statements and supporting subheads |
| body | 16px | 400 | 1.6 | 0.06em | — | Kalice | Editorial paragraphs, vision copy, and explanatory text |
| caption | 14px | 700 | 1 | 0.02em | — | Review | Bold compact labels and small section markers |
| nav | 14px | 700 | 1 | 0.02em | — | Review | Bold compact navigation labels and control text |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 12, 16, 21, 24, 32, 96, 128 px.
- Section rhythm 128px · element gap 8px · card padding 24px · max content width 1042px.

A single, spacious long-form page sits on a dark canvas, organized as sequential full-width narrative sections. The measured content max width is 1042px, with three columns appearing in the partner-logo area and single-column storytelling elsewhere. The hero centers its headline and supporting copy over media; later content alternates between centered statements and compact left-aligned details. Generous section spacing creates a deliberate slow scroll, with low information density and broad areas of negative space.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `16px` · nav `16px` · link `2px` · xs `2px` · sm `8px` · md `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.28s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on interactive elements.

The interface is mostly flat, with no measured shadows or gradients. Subtle charcoal borders separate selected media and controls from the canvas. Buttons and cards use modest measured radii, while media and navigation can be more rounded. Maintain contrast through light surfaces and outlines, not stacked elevation effects.

## Imagery

The hero is a cinematic, full-bleed scene with deep greens, shadows, and a central path, framed by dark geometric edges. Its colors belong to the image rather than the core brand palette. Partner marks appear as a compact grid of image assets. The page otherwise relies on typography and open dark space; avoid adding decorative illustrations or generic stock photography.

## Components

### Hero headline

Large centered uppercase Review Condensed display type, stacked over cinematic media with a short serif supporting statement.

### Primary CTA

Light #fffafa button with #101010 Review text and an 8px measured radius.

### Navigation controls

Compact bold Review labels; dark #272727 controls sit against the black canvas, with a light menu control visible in the screenshot.

### Partner mark grid

A measured three-column area of image marks, set on the dark background with restrained fine boundaries.

### Narrative section title

Bold uppercase Review heading paired with a smaller Kalice serif statement and ample surrounding space.

### Explanatory copy

Compact editorial paragraphs in Kalice, grouped into separated points rather than dense interface cards.

### Section navigation markers

Small stacked outline indicators positioned at the hero edge to suggest progress through the long page.

### Measured component styles

- **Primary button** (“Ecosystem Ecosystem”): background #272727 · text #fffafa · radius 8px · padding 0px · 700 14px Review
- **Secondary button** (“Join Us Join Us”): transparent background · text #fffafa · border 1px solid #272727 · radius 8px · padding 0px · 700 14px Review
- **Link** (“View Docs”): transparent background · text #101010 · radius 0px · padding 0px · 400 16px Times New Roman
- **Card** (“Using BitSNARK and Grail, BOS allows for”): background #fffafa · text #101010 · radius 8px · padding 24px · 400 16px Times New Roman
- **Navigation item** (“Ecosystem Ecosystem Token Token Tech Tec”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use #101010 as the dominant page canvas.
- Set major headlines in heavy, uppercase condensed type.
- Use #fffafa for primary text and the prominent CTA surface.
- Pair bold sans-serif labels with editorial serif copy.
- Preserve generous negative space between story sections.
- Use imagery as cinematic section media, not as interface decoration.

## Don't

- Do not introduce unmeasured brand colors into the interface.
- Do not fill the page with dense cards or dashboards.
- Do not add heavy shadows, gradients, or glossy effects.
- Do not use generic stock imagery in place of distinctive media.
- Do not set every text role in the same typeface.
- Do not compress the long-scroll narrative into a tight grid.

## Agent prompt

Build a new BitcoinOS-style page on a Carbon Canvas (#101010), using Soft Snow (#fffafa) for primary text and light CTA surfaces. Keep the composition cinematic and editorial: begin with bold, oversized uppercase condensed display type over a distinctive full-bleed image, then unfold the content in spacious dark sections. Use Kalice-like serif typography for supporting prose and Review-like bold sans-serif for navigation, labels, and section headings. Keep controls flat, with restrained charcoal boundaries and measured rounded corners; do not add shadows or gradients. Use large negative spaces to pace the narrative, grouping logos or explanatory points only where needed. Let artwork carry its own colors without extending them into interface chrome. Favor clear contrast, sparse components, and a deliberate long-scroll rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cinematic image with centered headline, supporting copy, CTA, and top navigation. | Primary call to action, Section progress indicators | Oversized condensed headline, Dark canvas, Light CTA |
| 2 | other | Single-column editorial statement on the continuing dark canvas. | Brand vision statement | Serif supporting text, Minimal section marker |
| 3 | logo-cloud | Three-column logo area within a broad, otherwise sparse section. | Partner recognition | Image-based marks, Subtle tile boundaries |
| 4 | other | Single-column, centered statement followed by separated explanatory points. | Problem framing, Progressive explanation | Uppercase section title, Serif supporting copy, Sparse text groups |
| 5 | feature-split | Single-column narrative section with a compact explanatory text block. | Protocol explanation | Editorial body copy, Dark continuous canvas |
| 6 | other | Tall single-column section with substantial open dark space. | Long-form storytelling | Minimal content density, Dark canvas |
| 7 | other | Tall single-column section preserving the page’s generous vertical rhythm. | Long-scroll pacing | Sparse layout, Monochrome interface |
| 8 | footer | Single-column footer with link collection and supporting marks. | Resource navigation, External links | Text links, Small SVG marks, Dark background |

## Source CSS custom properties (selected)

```css
--font-review-condensed: "Review Condensed",sans-serif;
--font-review: "Review",sans-serif;
--font-kalice: "Kalice",serif;
--PRIMARY_CHARCOAL: primary-charcoal;
--PRIMARY_GREY_800: primary-grey-800;
--PRIMARY_GREY_100: primary-grey-100;
--PRIMARY_SNOW: primary-snow;
--PRIMARY_OUTLINE_GREY_200: primary-outline-grey-200;
--PRIMARY_OUTLINE_CHARCOAL: primary-outline-charcoal;
--PRIMARY_OUTLINE_SNOW: primary-outline-snow;
--ease-in-quad: cubic-bezier(.55,.085,.68,.53);
--ease-in-cubic: cubic-bezier(.55,.055,.675,.19);
--ease-in-quart: cubic-bezier(.895,.03,.685,.22);
--ease-in-quint: cubic-bezier(.755,.05,.855,.06);
--ease-in-expo: cubic-bezier(.95,.05,.795,.035);
--ease-in-circ: cubic-bezier(.6,.04,.98,.335);
--ease-out-quad: cubic-bezier(.25,.46,.45,.94);
--ease-out-cubic: cubic-bezier(.215,.61,.355,1);
--ease-out-quart: cubic-bezier(.165,.84,.44,1);
--ease-out-quint: cubic-bezier(.23,1,.32,1);
--ease-out-expo: cubic-bezier(.19,1,.22,1);
--ease-out-circ: cubic-bezier(.075,.82,.165,1);
--ease-in-out-quad: cubic-bezier(.455,.03,.515,.955);
--ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
--ease-in-out-quart: cubic-bezier(.77,0,.175,1);
--ease-in-out-quint: cubic-bezier(.86,0,.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
--radius-small: 8px;
--radius-base: 16px;
--radius-large: 32px;
--radius-huge: 48px;
--layout-columns-gap: 12px;
--spacer-88: 88px;
--spacer-64: 64px;
--spacer-48: 48px;
--spacer-40: 40px;
--spacer-32: 32px;
--spacer-24: 24px;
--spacer-16: 16px;
```

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