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

# B150 · Design System

> Warm editorial design for builders shaping what comes next

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

B150 pairs a quiet, warm-neutral editorial shell with immersive cinematic imagery and detailed product previews. The page introduces an AI-builder community through concise typography, generous open space, and alternating feature showcases.

## North star

Keep the page quiet and paper-like, then let cinematic imagery and real product previews supply the contrast.

## Overview

The visual identity balances a warm paper-like canvas with near-black ink and cinematic, cool-toned video. Most of the long page stays on the same pale background, so the photography and product interface captures provide the contrast rather than frequent colored section bands. Geist carries the oversized, tightly tracked headlines and readable supporting copy; Fragment Mono adds a precise, uppercase editorial layer to navigation, labels, and tiny interface cues. The opening is a full-bleed video hero with white text over a darkened image, followed by open, spacious sections, compact trust marks, and a four-column benefits area. Product features alternate the copy and interface preview from side to side. Pale surfaces, fine gray borders, rounded media frames, and restrained shadows make interface mockups feel lifted without adding heavy card decoration. Pill-shaped beta actions are the most distinct recurring control.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ink | `#1f1915` | `--color-warm-ink` | brand | Primary text, navigation, headings, and the dark opening hero base. |
| Soft Parchment | `#f2efe9` | `--color-soft-parchment` | surface | Main canvas across the long-form page and the background surrounding feature sections. |
| Quiet Line | `#e6e3dd` | `--color-quiet-line` | semantic | Fine borders and separators around cards, navigation, and pale controls. |
| Mist Gradient | `#d0cdc7` | `--color-mist-gradient` | neutral | Subtle gradient transition within section and media treatments, not a primary flat brand fill. |
| Porcelain | `#f7f5f1` | `--color-porcelain` | surface | Light section and card surfaces that gently distinguish content from the canvas. |
| Muted Umber | `#6b6661` | `--color-muted-umber` | neutral | Secondary explanatory text and less prominent supporting copy. |
| Warm Chalk | `#fffdf6` | `--color-warm-chalk` | accent | Light text and pale beta-button surfaces, especially where contrast against dark media is needed. |
| Soft Ash | `#aeaaa5` | `--color-soft-ash` | neutral | Occasional subdued details and thin interface marks; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#f2efe9` (Soft Parchment) · `--color-surface` → `#f7f5f1` (Porcelain) · `--color-surface-2` → `#1f1915` (Warm Ink) · `--color-surface-3` → `#e6e3dd` (Quiet Line) · `--color-text` → `#1f1915` (Warm Ink) · `--color-text-muted` → `#6b6661` (Muted Umber) · `--color-text-subtle` → `#fffdf6` (Warm Chalk) · `--color-border` → `#e6e3dd` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1915` | `#f2efe9` | 15.15:1 | AAA |
| `#1f1915` | `#f7f5f1` | 15.96:1 | AAA |
| `#1f1915` | `#e6e3dd` | 13.57:1 | AAA |
| `#6b6661` | `#f2efe9` | 4.95:1 | AA |
| `#6b6661` | `#f7f5f1` | 5.21:1 | AA |
| `#6b6661` | `#1f1915` | 3.06:1 | AA-large |
| `#6b6661` | `#e6e3dd` | 4.43:1 | AA-large |
| `#fffdf6` | `#f2efe9` | 1.13:1 | fail |
| `#fffdf6` | `#f7f5f1` | 1.07:1 | fail |
| `#fffdf6` | `#1f1915` | 17.08:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(31, 25, 21, 0.16), rgba(255, 255, 255, 0))`
- `linear-gradient(rgba(31, 25, 21, 0.16), rgb(31, 25, 21))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Display headlines, section titles, body copy, and interface text. | Inter |
| Fragment Mono | `--font-mono` | webfont | 400, 700, 600 | Navigation, eyebrow labels, captions, and compact uppercase links. | Space Mono |

- **Geist:** Use clean sans-serif forms; headlines are large and tightly tracked, with medium-weight headings and regular body copy.
- **Fragment Mono:** Use uppercase labels with lightly expanded tracking; reserve the monospaced voice for small metadata and navigation.

### Type scale — Custom (ratio ≈ 1.778, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 0.93 | -0.067em | — | Geist | Oversized hero and campaign headlines. |
| h1 | 96px | 500 | 0.91 | -0.031em | — | Geist | Primary page headline and major display statements. |
| h2 | 48px | 500 | 1 | -0.042em | — | Geist | Feature and section headlines. |
| h3 | 32px | 500 | 1.12 | -0.031em | — | Geist | Smaller section titles and supporting feature headings. |
| body | 12px | 400 | 1.7 | 0 | — | Geist | Compact descriptive copy and supporting explanations. |
| caption | 10px | 400 | 1.33 | 0.03em | uppercase | Fragment Mono | Uppercase micro-labels and image captions. |
| nav | 10px | 700 | 1 | 0.03em | uppercase | Fragment Mono | Uppercase primary navigation items. |
| link | 10px | 400 | 1.33 | 0.03em | uppercase | Fragment Mono | Small uppercase links such as contact and beta actions. |
| eyebrow | 10px | 400 | 1.33 | 0.03em | uppercase | Fragment Mono | Section category labels above feature headlines. |
| code | 10px | 400 | 1.33 | 0.03em | uppercase | Fragment Mono | Compact monospaced interface-style labels and metadata. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120 px.
- Section rhythm 40px · element gap 12px · card padding — · max content width 1376px.

The page uses a broad centered content area, measured at a 1376px maximum width, with a compact top navigation and a full-bleed opening video. Below, the canvas remains visually continuous while content alternates between centered or left-led editorial blocks, multi-column benefit copy, and side-by-side product showcases. Feature rows switch which side holds copy and imagery, creating rhythm without changing the overall grid language. Sections are generously separated; individual labels and descriptions stay compact, keeping the page airy rather than dense.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `8px` · link `8px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `md` (media): `rgba(0, 0, 0, 0.03) 0px 7px 20px 20px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat: separation comes from the warm canvas, pale inset surfaces, and fine gray hairlines rather than heavy shadows. Product previews sit slightly above the background with restrained soft shadowing and rounded media corners. Use dark image overlays for text legibility, while keeping buttons and navigation visually light.

## Imagery

Use cinematic photographic video for the hero and closing call to action, darkened enough for white headline contrast. Product sections should show believable interface screenshots in softly framed, pale panels, with subtle gradient fading near their lower edges. Include creator and product imagery in the horizontal work gallery. Keep imagery rectangular and crisp; avoid decorative illustration or synthetic 3D as the main visual language.

## Components

### Compact navigation

A restrained top bar with B150 identity, uppercase Fragment Mono links, and a pale pill-shaped beta action.

### Video hero

Full-bleed cinematic media with a large white multiline headline, short supporting copy, beta action, and a small film preview.

### Benefit grid

A four-column set of compact reasons to join, with small labels, concise descriptions, and generous surrounding space.

### Creator gallery

A horizontal strip of rounded creator-work cards, combining imagery, category labels, and small author chips.

### Product feature row

Alternating copy and interface-preview layouts; use compact uppercase eyebrows, short headlines, and pale framed screenshots.

### Beta pill

An uppercase join action in a white or warm-white pill, with a fine pale border and restrained visual emphasis.

### Trust strip

A small centered trust label above a horizontal partner-logo row divided by thin gray rules.

### Measured component styles

- **Primary button** (“JOIN BETA”): background #ffffff · text #1f1915 · border 1px solid #e6e3dd · radius 1440px · padding 12px 16px · 500 10px Fragment Mono · uppercase
- **Secondary button** (“JOIN THE BETA”): background #fffdf6 · text #1f1915 · border 1px solid #e6e3dd · radius 1440px · padding 12px 20px · 500 16px Geist · uppercase
- **Link** (“CONTACT US”): transparent background · text #1f1915 · radius 0px · padding 0px · 400 10px Fragment Mono · uppercase
- **Card** (“THESMIT69”): transparent background · text #fffdf6 · border 1px solid #e3e2e2 · radius 16px · padding 0px · 500 10px Geist
- **Navigation item** (“EVENTS”): transparent background · text #1f1915 · radius 0px · padding 0px · 400 10px Fragment Mono · uppercase

## Do

- Keep the main canvas warm and consistently pale.
- Use Warm Ink for primary text and navigation.
- Reserve Fragment Mono for compact uppercase labels.
- Let real imagery and product UI provide visual interest.
- Alternate the alignment of product showcase rows.
- Use fine borders and rounded media frames.
- Keep beta actions light, pill-shaped, and understated.

## Don't

- Do not introduce bright accent colors absent from the measured palette.
- Do not divide every section with a new background color.
- Do not use heavy shadows or dense card decoration.
- Do not make the supporting copy as prominent as the headlines.
- Do not replace interface screenshots with abstract illustrations.
- Do not use monospaced type for long paragraphs.
- Do not let navigation compete with the hero.

## Agent prompt

Build a new B150-style page with a restrained editorial shell and a clear emphasis on creators and product. Use Soft Parchment (#f2efe9) as the continuous canvas, Warm Ink (#1f1915) for primary text, and Porcelain (#f7f5f1) for occasional inset surfaces. Set expressive headlines and readable copy in Geist; use Fragment Mono for compact uppercase navigation, category labels, and metadata. Start with cinematic full-bleed media and legible white copy, then alternate spacious text-and-product-preview rows. Frame interface previews with Quiet Line (#e6e3dd), rounded corners, and very subtle elevation. Keep calls to action pale and pill-shaped. Preserve generous whitespace, concise supporting text, and a calm rhythm; avoid bright accents, busy decoration, and excessive card treatment.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic video with left-aligned headline and a compact preview inset. | Primary beta action, Film preview play control | Dark image overlay, Large white headline, Pale pill actions |
| 2 | product-showcase | Open single-column introduction above a centered product interface preview. | Product introduction | Warm canvas, Pale screenshot panel |
| 3 | logo-cloud | Centered trust label and horizontal partner-logo strip between thin rules. | Sponsor contact link | Fine separators, Compact logos |
| 4 | feature-grid | Four-column benefit content, introduced by a prominent editorial heading. | Scan benefits | Small icons, Compact copy, Open grid |
| 5 | other | Single-column editorial statement with a compact category label. | Audience orientation | Large whitespace, Simple text treatment |
| 6 | gallery | Horizontal gallery of rounded creator-work cards with short labels. | Browse examples, Carousel navigation | Image-led cards, Author chips, Compact captions |
| 7 | other | Spacious continuous canvas with no detected content blocks. | Visual pause | Uninterrupted canvas |
| 8 | testimonials | Two-column founder quote panel paired with a portrait. | Founder credibility | Pale quote surface, Portrait image, Compact attribution |
| 9 | feature-split | Product-feed screenshot beside explanatory copy. | Feature explanation | Interface preview, Eyebrow label, Soft media fade |
| 10 | feature-split | Explanatory copy beside a network visualization preview. | Feature explanation | Connection diagram, Pale media panel |
| 11 | feature-split | Profile interface preview opposite feature copy. | Expertise discovery | Profile screenshot, Compact feature label |
| 12 | feature-split | Marketplace preview and explanatory copy in alternating feature-row alignment. | Browse tools | Product cards, Pale interface panel |
| 13 | feature-split | Jobs interface opposite a short recruitment-focused description. | Explore jobs, Find talent | Job listings, Compact labels |
| 14 | feature-split | Community invitation copy opposite a group conversation preview. | Peer connection | Conversation interface, Coming-soon label |
| 15 | cta | Full-bleed cinematic closing video with centered headline and beta action. | Join beta | Darkened media, Centered white text, Pill CTA |

## Source CSS custom properties (selected)

```css
--_colors---color--bg-2: #f2efe9;
--font--main: Geist, sans-serif;
--_colors---color--dark: #1f1915;
--_text-style---text-body--font-size: 10px;
--_text-style---text-body--line-height: 150%;
--font-weight--medium: 500;
--_text-style---text-body--letter-spacing: -.3px;
--_text-style---h1--font-size: 120px;
--_text-style---h1--line-height: 93.3%;
--_text-style---h1--font-weight: 400;
--_text-style---h1--letter-spacing: -8px;
--_text-style---h2--font-size: 96px;
--_text-style---h2--line-height: 91.6%;
--_text-style---h2--font-weight: 500;
--_text-style---h2--letter-spacing: -3px;
--_text-style---h3--font-size: 64px;
--_text-style---h3--line-height: 100%;
--_text-style---h3--font-weight: 500;
--_text-style---h3--letter-spacing: -2px;
--_text-style---h4--font-size: 48px;
--_text-style---h4--line-height: 100%;
--_text-style---h4--font-weight: 500;
--_text-style---h4--letter-spacing: -2px;
--_text-style---h5--font-size: 40px;
--_text-style---h5--line-height: 100%;
--_text-style---h5--font-weight: 500;
--_text-style---h5--letter-spacing: -1px;
--_text-style---h6--font-size: 32px;
--_text-style---h6--line-height: 112.5%;
--_text-style---h6--font-weight: 500;
--_text-style---h6--letter-spacing: -1px;
--_text-style---text-large--font-size: 12px;
--_spacing---site-padding--main: 32px;
--_spacing---section-spacing--0: 0px;
--_spacing---section-spacing--hero-top-padding: 168px;
--font--secondary: "Fragment Mono", sans-serif;
--_colors---white: white;
--font-weight--normal: 400;
--_buttons---button-small--font-size: 10px;
--_colors---color--light: #fffdf6;
```

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