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

# PencilBooth · Design System

> A quiet canvas for expressive visual storytelling

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

PencilBooth pairs an expansive black-and-white canvas with a hand-drawn artist-world illustration and restrained color accents. Oversized wordmark, spacious section breaks, and compact comparison content make the homepage feel independent, creative, and easy to scan.

## North star

Keep the page as a spacious white gallery: let expressive artist imagery and oversized black typography lead, with color reserved for clear actions and small illustrative details.

## Overview

The visual strategy starts with white as an uninterrupted page canvas, letting a very large, heavy black PencilBooth wordmark dominate the opening view. Soehne carries the identity throughout: bold, clear headings and smaller regular-weight body copy keep the page editorial without feeling formal. The hero illustration is a wide, monochrome drawing of artists gathered around a worktable; small green and blue details add personality without displacing the neutral palette. Pale gray surfaces organize interface previews, comparison rows, and content cards, while fine light-gray rules quietly separate long sections. A soft blue CTA is the main recurring action color, with green reserved for the smaller Join Free button. The layout favors broad single-column passages, generous whitespace, and occasional dense modules such as a comparison table or four-item creator gallery. Artwork supplies the texture; surrounding UI stays flat and restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas and open section background, creating a bright gallery-like field around type and artwork. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Wordmark, headings, primary text, and dark details within the illustrated hero. |
| Paper Gray | `#f2f2f2` | `--color-paper-gray` | surface | Soft card and comparison-table fills, plus pale UI-preview rows. |
| Quiet Rule | `#e7e7e7` | `--color-quiet-rule` | neutral | Fine section dividers and subtle interface boundaries. |
| Soft Graphite | `#b2b2b2` | `--color-soft-graphite` | neutral | Muted supporting text and secondary details in the mostly monochrome interface. |
| Booth Blue | `#8cb4ff` | `--color-booth-blue` | accent | Primary newsletter signup CTA fill, standing out against the white canvas. |
| Join Green | `#62c071` | `--color-join-green` | accent | Join Free button fill; a small, friendly signup accent. |
| Slate Note | `#5a5e62` | `--color-slate-note` | neutral | Sparse supporting text detail; not a defining surface or primary brand color. |
| Illustration Blue | `#8fbaff` | `--color-illustration-blue` | semantic | Very limited blue detail, mainly an illustration-level accent rather than a core interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f2` (Paper Gray) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#b2b2b2` (Soft Graphite) · `--color-border` → `#e7e7e7` (Quiet Rule) · `--color-accent` → `#8cb4ff` (Booth Blue) · `--color-accent-2` → `#62c071` (Join Green) · `--color-accent-3` → `#8fbaff` (Illustration Blue) · `--color-on-accent` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#b2b2b2` | `#ffffff` | 2.12:1 | fail |
| `#b2b2b2` | `#f2f2f2` | 1.89:1 | fail |
| `#8cb4ff` | `#ffffff` | 2.08:1 | fail |
| `#8cb4ff` | `#f2f2f2` | 1.86:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne | `--font-body` | webfont | 400, 700 | Sole measured typeface for the wordmark, headings, body copy, buttons, and captions. | Inter |

- **Soehne:** Use a striking heavy display treatment and bold headings; body and button copy stay regular. Tracking is nearly neutral, with slight openness in display and caption roles.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 700 | 1 | 0.01em | — | Soehne | Oversized PencilBooth wordmark and opening brand statement. |
| h1 | 32px | 700 | 1.2 | 0.01em | — | Soehne | Hero and major section headings, including the closing CTA. |
| body | 16px | 400 | 1.2 | 0 | — | Soehne | Explanatory paragraphs, feature descriptions, and FAQ copy. |
| caption | 14px | 400 | 1.2 | 0.01em | — | Soehne | Compact labels and secondary details around content and comparisons. |
| button | 16px | 400 | 1.2 | 0 | — | Soehne | Signup CTA and small navigation actions. |

## Spacing & layout

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

The measured page maximum width is 1392px, with a comfortable density and a 48px section rhythm. The hero uses a centered, nearly full-width illustration beneath an oversized wordmark; later sections alternate spacious text-led areas with denser comparison, creator, and FAQ modules. Align the main hero and CTA centrally, but let long-form copy and utility content use practical left alignment. Preserve conspicuous white space between major blocks.

## Shape & elevation

- Radius: button `2px` · card `10px` · media `50%` · xs `2px` · sm `4px` · md `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface reads as flat, with no measured shadows. Separate sections primarily through white space and occasional fine gray rules; use pale gray fills for cards and table rows. Cards are softly rounded, while buttons remain nearly square. Avoid layered, floating-panel effects.

## Imagery

A wide hand-drawn scene of artists working around a shared table anchors the hero. It is predominantly black, white, and gray, with a few tiny green and blue details. Later creator examples and recent-post previews bring in colorful artwork, thumbnails, and varied media; keep those images as content rather than extending their colors across the interface.

## Components

### Hero wordmark

An oversized, heavy black PencilBooth wordmark spans the opening canvas, with small Login and green Join Free actions tucked below its right side.

### Signup CTA

A compact, nearly square-cornered #8cb4ff button with black regular-weight Soehne text; repeat it beneath the hero statement and in the closing CTA.

### Join Free button

A small #62c071 filled button with black text, used as the secondary signup action in the header.

### Feature preview

A pale gray composer or feature interface preview sits alongside a short heading and descriptive copy, with the page canvas remaining white.

### Creator gallery

A four-column row of creator artwork and names, with image-forward cards and restrained black labels.

### Comparison table

A compact multi-column feature comparison uses pale gray row fills and blue highlights to distinguish PencilBooth values.

### FAQ list

A long, white FAQ area uses thin dividers, concise question text, and simple plus icons to signal expandable rows.

### Recent posts grid

A content feed of varied creator thumbnails and short captions, arranged as an image-led grid near the bottom of the page.

### Measured component styles

- **Primary button** (“Start your visual newsletter”): background #8cb4ff · text #000000 · radius 2px · padding 6px 8px · 400 16px Soehne
- **Secondary button** (“Join Free”): background #62c071 · text #000000 · radius 2px · padding 6px 8px · 400 16px Soehne
- **Link** (“Out of Commission ↗”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Soehne
- **Card**: background #f2f2f2 · text #000000 · radius 10px · padding 0px · 400 16px Soehne

## Do

- Use white as the dominant canvas.
- Make the brand wordmark visually prominent.
- Use Soehne or a close neutral sans-serif substitute.
- Reserve blue for the main signup action.
- Keep green accents limited to secondary signup cues.
- Let illustrations and creator artwork supply color and texture.
- Use whitespace and fine rules to pace long sections.

## Don't

- Do not introduce large colored background bands.
- Do not add shadows or layered card effects.
- Do not turn every section into a card grid.
- Do not use colorful gradients as a page-wide treatment.
- Do not let small illustration accents become interface colors.
- Do not crowd the hero or section transitions.
- Do not style buttons with pill-shaped corners.

## Agent prompt

Build a new page in the PencilBooth visual style as a bright, spacious gallery for creative work. Use Gallery White (#ffffff) as the canvas and Studio Ink (#000000) for the wordmark, headings, and primary text. Set typography in Soehne or Inter, with bold oversized display type and calm regular-weight body copy. Use a wide, hand-drawn or image-led creative-work scene as the visual anchor, preserving its own colors rather than recoloring the whole interface. Apply Booth Blue (#8cb4ff) to the main signup CTA and Join Green (#62c071) only to a secondary signup action. Use Paper Gray (#f2f2f2) for previews and comparison surfaces, and Quiet Rule (#e7e7e7) for delicate dividers. Keep sections roomy, layouts mostly simple, cards flat, and corners restrained. Prioritize clarity and visual breathing room over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White canvas with an oversized wordmark and compact actions aligned to its lower right. | Login access, Join Free signup | Large black wordmark, Small green CTA |
| 2 | hero | Wide centered illustration followed by a centered statement and signup CTA. | Immediate product positioning, Primary signup action | Full-width hand-drawn scene, Blue CTA |
| 3 | feature-split | Spacious two-part editorial block with text on opposing sides. | Problem framing, Product differentiation | Black lead statement, Muted supporting copy |
| 4 | feature-split | Product preview and feature copy share a broad, airy section. | Feature explanation, Composer preview | Pale interface panel, Short bold heading |
| 5 | gallery | Four creator examples in a horizontal gallery with labels beneath. | Community discovery, Outbound creator links | Artwork thumbnails, Simple text labels |
| 6 | comparison | Feature list beside multiple platform columns in a dense table. | Plan and feature comparison, Competitor scanning | Pale gray rows, Blue PencilBooth highlights |
| 7 | cta | Centered heading, brief reassurance copy, and signup button. | Signup conversion, Risk-reduction reassurance | Large centered headline, Blue primary CTA |
| 8 | faq | Long single-column accordion list with questions and plus icons. | Expandable answers, Self-service support | Thin separators, Plus indicators |

## Source CSS custom properties (selected)

```css
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255, 255, 255, .7);
--toastify-icon-color-info: #3498db;
--toastify-icon-color-success: #07bc0c;
--toastify-icon-color-warning: #f1c40f;
--toastify-icon-color-error: #e74c3c;
--toastify-toast-background: #fff;
--toastify-toast-bd-radius: 6px;
--toastify-font-family: sans-serif;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55 );
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: #3498db;
--toastify-color-progress-success: #07bc0c;
--toastify-color-progress-warning: #f1c40f;
--toastify-color-progress-error: #e74c3c;
--toastify-color-progress-bgo: .2;
--rt-color-white: #fff;
--rt-color-dark: #222;
--rt-color-success: #8dc572;
--rt-color-error: #be6464;
--rt-color-warning: #f0ad4e;
--rt-color-info: #337ab7;
--font-size-mobile-heading-4xl: 44px;
--font-size-mobile-heading-3xl: 32px;
--font-size-mobile-heading-2xl: 42px;
--font-size-mobile-heading-xl: 26px;
--font-size-mobile-heading: 22px;
```

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