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

# Bear · Design System

> Quiet clarity, with a playful edge

**Theme:** light · **Industry:** productivity · **Source:** https://bear.app/ · **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._

Bear presents a Markdown note-taking app through a bright, spacious page that pairs restrained typography with warm product imagery. A small red accent and colorful feature illustrations add personality without disrupting the calm, editorial flow.

## North star

Keep the page predominantly white and calm, letting crisp product imagery and small red accents provide the emphasis.

## Overview

The page is built on a nearly uninterrupted white canvas, with charcoal text carrying most of the visual structure. The Bear red is reserved for links, small PRO labels, and testimonial rules rather than large fields of color; pale cool gray supports feature cards and subtle divisions. Headings use the distinct Bear headline face, while Bear Sans handles navigation, paragraphs, and interface copy in a restrained, readable voice. The hero centers a concise headline, platform selectors, and a store badge above a large screenshot of the app. Below, generous vertical pauses separate feature storytelling, softly colored illustrative shapes, product demonstrations, pricing, community reviews, and the footer. Screenshots and interface mockups provide product proof; hand-drawn bear details and pastel shapes add a gentle, approachable counterpoint. Keep those illustration colors localized to artwork rather than treating them as core brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Main page canvas and open space around centered headings, product imagery, and content sections. |
| Soft Charcoal | `#444444` | `--color-soft-charcoal` | neutral | Primary headings, navigation, body copy, and the foreground text in app and pricing content. |
| Bear Red | `#dd4c4f` | `--color-bear-red` | accent | Links, small PRO badges, and testimonial rules; use sparingly rather than as a large background. |
| Cool Mist | `#f3f5f7` | `--color-cool-mist` | surface | Soft feature-card surfaces and pale boundaries that separate content without heavy contrast. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Muted supporting copy, captions, and secondary footer text. |
| Fine Silver | `#d9d9d9` | `--color-fine-silver` | semantic | Subtle input outlines and understated form or control boundaries. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f5f7` (Cool Mist) · `--color-text` → `#444444` (Soft Charcoal) · `--color-text-muted` → `#888888` (Quiet Gray) · `--color-border` → `#f3f5f7` (Cool Mist) · `--color-accent` → `#dd4c4f` (Bear Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#444444` | `#ffffff` | 9.74:1 | AAA |
| `#444444` | `#f3f5f7` | 8.91:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#f3f5f7` | 3.24:1 | AA-large |
| `#dd4c4f` | `#ffffff` | 4.02:1 | AA-large |
| `#dd4c4f` | `#f3f5f7` | 3.68:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| bearsans | `--font-body` | webfont | 400, 700 | Navigation, body copy, interface labels, captions, links, and some feature headings. | Inter |
| bearsansheadline | `--font-display` | webfont | 400 | Primary display headings and section headings. | Nunito Sans |

- **bearsans:** Use regular weight for most copy, bold for small captions; keep case natural and tracking neutral.
- **bearsansheadline:** Regular-weight, rounded display voice with neutral tracking and sentence-style capitalization.

### Type scale — Perfect Fourth (ratio ≈ 1.336, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 51px | 400 | 1.1 | 0 | — | bearsansheadline | Centered hero headline introducing the app. |
| h2 | 41.5px | 400 | 1.1 | 0 | — | bearsansheadline | Major centered section headings, including pricing and community. |
| h3 | 40px | 400 | 0.68 | 0 | — | bearsans | Feature titles and prominent subheadings. |
| h4 | 30.5px | 400 | 1.1 | 0 | — | bearsansheadline | Smaller feature or content section headings. |
| body | 16px | 400 | 1.7 | 0 | — | bearsans | Explanatory paragraphs, feature descriptions, and review copy. |
| caption | 13px | 700 | 1.4 | 0 | — | bearsans | Compact labels, badges, and small supporting notes. |
| nav | 16px | 400 | 1.7 | 0 | — | bearsans | Header navigation links and brand label. |
| link | 22.5px | 400 | 1.4 | 0 | — | bearsans | Prominent text links, including social links and calls to explore. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 11, 13, 16, 18, 19, 21, 24, 32, 40, 42, 48, 64 px.
- Section rhythm 32px · element gap 32px · card padding — · max content width 896px.

Use a centered, spacious page with measured maximum content width of 896px. Keep the header compact, then give the hero a large field of white space and centered alignment. Alternate centered introductions with left-aligned feature copy and split product demonstrations; allow illustrations and app screenshots to extend beyond their text columns. Maintain generous section pauses, with the measured section and element gaps at 32px. Keep dense information, such as pricing and reviews, organized in clear columns rather than broad bands.

## Shape & elevation

- Radius: input `9px` · card `40px` · badge `4px` · xs `4px` · sm `5px` · md `9px` · lg `16px` · xl `40px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.12) 0px 13px 34px 0px`

Most sections are flat and white, with pale gray cards providing gentle separation. Product mockups and selected pricing content can sit above the canvas with a soft, diffuse shadow. Use fine gray outlines for inputs and controls; avoid heavy borders or layered panels competing with screenshots.

## Imagery

Use crisp app screenshots and device or interface mockups as the main evidence of the product. Frame them prominently against white, with soft shadows where the mockup floats. Mix in sparse hand-drawn bear illustrations and large pastel organic shapes in feature storytelling; these colors belong to the artwork, not the core palette. Keep imagery uncrowded and readable.

## Components

### Header navigation

Small Bear mark and wordmark sit at the left; understated charcoal links span the right side on a white canvas.

### Hero product showcase

Centered display headline and platform choices lead to a store badge, followed by a large app screenshot with soft elevation.

### Feature storytelling

Pair concise headings and short lists with product-interface imagery, using asymmetric split layouts and localized pastel artwork.

### Feature cards

Pale #f3f5f7 surfaces hold short feature explanations and demonstrations; large rounded corners soften the presentation.

### Pricing comparison

Present Free and Bear PRO in side-by-side columns, using checklists, muted exclusions, red PRO labeling, and restrained card elevation.

### Testimonials

Arrange review excerpts in two columns, with a narrow Bear Red rule, compact copy, and red attribution links.

### Newsletter form

Use a subtle outlined email field and a red Subscribe control, centered beneath a short heading and muted explanatory copy.

### Footer

Group small links into compact labeled columns, with muted supporting details and delicate illustration near the bottom.

### Measured component styles

- **Link** (“David Pierce, The Verge”): transparent background · text #dd4c4f · radius 0px · padding 0px · 400 16px bearsans
- **Input**: transparent background · text #444444 · border 1px solid #d9d9d9 · radius 8.8px · padding 0px 17.6px · 400 17.6px bearsans
- **Card** (“Resize and crop images Keep what you nee”): background #f3f5f7 · text #444444 · radius 40px · padding 0px · 400 16px bearsans
- **Badge** (“PRO”): background #dd4c4f · text #ffffff · radius 3.84px · padding 0px 3.8px · 700 12.8px bearsans
- **Navigation item** (“Features Pricing Blog Community Support”): transparent background · text #444444 · radius 0px · padding 0px · 400 16px bearsans

## Do

- Keep the main canvas white and visually quiet.
- Use Bear Red for small, purposeful accents.
- Give product screenshots room to breathe.
- Alternate centered section introductions with split feature layouts.
- Use Bear Sans for readable supporting text.
- Reserve pastel colors for feature artwork and mockups.

## Don't

- Do not turn the page into a sequence of saturated color bands.
- Do not use the red accent as a dominant background.
- Do not crowd screenshots with decorative UI.
- Do not use heavy borders around every section.
- Do not style all copy as display typography.
- Do not treat illustration colors as the core brand palette.

## Agent prompt

Build a new Bear-style productivity page with a calm white canvas (#ffffff), Soft Charcoal text (#444444), and Bear Red accents (#dd4c4f) used only for links, badges, or small controls. Use Cool Mist (#f3f5f7) for soft card surfaces, Quiet Gray (#888888) for secondary copy, and Fine Silver (#d9d9d9) for subtle form outlines. Set display headings in a rounded headline-style face and supporting text in a clean sans serif. Center the hero and section introductions; alternate them with spacious split feature layouts. Make app screenshots the primary visual proof, with soft elevation and carefully localized pastel illustration. Keep pricing, testimonials, newsletter, and footer compact and clearly grouped. Preserve generous white space and avoid loud backgrounds, heavy borders, or overdecorated layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, platform choices, and store badge above a large app screenshot. | platform selection, download link | centered display heading, product screenshot, compact navigation |
| 2 | product-showcase | Centered section introduction above a large, softly elevated product demonstration. | product introduction, visual demonstration | centered heading, minimal supporting copy, illustrative details |
| 3 | feature-split | Long feature sequence alternating copy and app imagery with large organic color shapes. | feature discovery, scannable feature lists | split layouts, interface mockups, localized pastel shapes |
| 4 | feature-grid | Centered introduction followed by two-column feature copy and pale product cards. | feature browsing, PRO feature labels | soft gray cards, compact lists, product demonstrations |
| 5 | pricing | Centered pricing introduction above two side-by-side plan columns. | plan comparison, download action | checklists, PRO badge, subtle card elevation |
| 6 | other | Quiet, illustration-led interlude on the white canvas. | visual pause | hand-drawn illustration, open whitespace |
| 7 | testimonials | Centered community heading with two-column social links and review excerpts. | social discovery, read reviews | two-column quotes, red quote rules, accent links |
| 8 | footer | Compact footer with grouped links and subtle decorative details. | site navigation | link columns, small muted text, minimal illustration |

## Source CSS custom properties (selected)

```css
--background-color: #fff;
--background-secondary-color: #F3F5F7;
--background-tertiary-color: #E4E5E6;
--text-color: #444444;
--text-secondary-color: #888888;
--text-tertiary-color: #d9d9d9;
--accent-color: #DD4C4F;
--text-font: "bearsans";
--heading-font: "bearsansheadline";
--code-font: "roboto-mono";
--stroke-color: #D9D9D9;
```

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