# Bear · Design system migration spec

> Source: https://bear.app  ·  Curated by OpenDesign  ·  en

> An excellent reference for restrained, text-first product design that prioritizes focus and clarity over visual noise.

## 1. Identity DNA

Bear’s design system is constructed like a modern notebook built for the Apple ecosystem: a tool whose refinement lies in what it deliberately leaves out. Its DNA is one of extreme restraint, focusing on a clean white canvas, high-contrast text, and a single, warm red accent that signals the brand without shouting. This is a system for focused, markdown-first work.

**One-liner:** A focused markdown notes app with a refined, text-first interface.
**Keywords:** minimal · markdown · focused · apple-native
**Analogy:** A clean, modern notebook designed for the Apple ecosystem

## 2. Color

The palette is a study in minimalist contrast, built on a pure white canvas and dark gray text. A single warm red accent provides the only chromatic punctuation, used sparingly for brand moments.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#444444` | body text |
| `--muted` | `#888888` | placeholder |
| `--accent` | `#DD4C4F` | single accent |
| `--line` | `rgba(68,68,68,1)` | divider |

**Color principle:** Clean white canvas with high-contrast text and a single warm red accent for the brand.

The governing principle is clarity through high contrast and deliberate, singular use of color.

## 3. Typography

Typographically, Bear employs a refined humanist sans-serif for both headlines and body, creating a unified, clean voice. Monospace is reserved strictly for code, reinforcing the app’s dual nature as a writer’s and developer’s tool.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headline |
| heading | 40px | 1.1 | 700 | 0 | Section headings |
| body | 16px | 1.7 | 400 | 0 | Main text |
| caption | 14px | 1.6 | 400 | 0 | Navigation and UI labels |

**Type rules:**
- Headlines use a clean, humanist sans-serif with tight tracking
- Body text uses the same family with generous line height for readability
- Monospace is reserved strictly for code snippets and technical references

## 4. Spacing

The vertical rhythm is established by a generous 64px baseline between major sections, creating a calm, measured pace for reading and scrolling.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous 64px vertical rhythm between major sections

## 5. Surfaces

Surfaces are defined by their relationship to the background canvas, using soft, large-radius shadows to create subtle depth. Borders are kept thin and understated, often just 1px solid, to maintain the interface's quiet precision.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 13px 34px 0px rgba(0, 0, 0, 0.12)
  - 0px -5px 15px 1px rgba(0, 0, 0, 0.2)
- **Borders:** 1px solid #444444

## 6. Layout

The layout skeleton is a single, centered column that alternates between blocks of text and floating application screenshots. This structure prioritizes linear reading and focuses attention squarely on the product’s interface and benefits.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single column centered layout with alternating content and app screenshot sections

## 7. Motion & Interaction

Motion is used to gently introduce content, not to decorate the interface. Smooth fade-ins for sections and a subtle floating effect on screenshots maintain the product's calm, focused demeanor.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth fade-ins for content sections
  - Subtle floating effect on app screenshots

- **Hover:** Subtle opacity or color change on navigation and buttons
- **Click:** Immediate feedback with minimal visual state change
- **Transition:** All 0.2s ease-in-out
- **Keyboard:** Standard focus outlines for accessibility

## 8. Voice & Don'ts

Bear’s editorial voice is friendly, confident, and understated, using short, benefit-focused headlines and direct calls to action. The tone supports the system’s visual restraint, avoiding clutter and aggressive persuasion.

- **Tone:** Friendly, confident, and understated
- **Headline style:** Short, punchy, and benefit-focused
- **CTA style:** Direct and action-oriented, often linked to the App Store
- **Avoid:** Overly technical jargon / Dense paragraphs in hero sections / Loud, aggressive calls to action / Cluttered visual hierarchy

### Don'ts
- ❌ Don't use dark mode as the primary surface — screenshot shows a clean white background
- ❌ Don't use heavy drop shadows — screenshot shows very subtle, large-radius shadows
- ❌ Don't use dense, multi-column layouts — screenshot shows a centered, single-column text flow
- ❌ Don't use aggressive gradient backgrounds — screenshot shows solid colors or simple organic shapes
- ❌ Don't use thick, heavy borders — screenshot shows very thin, subtle borders or none at all
- ❌ Don't use complex animations — screenshot shows a static, calm interface

The system deliberately avoids complex animations, dense layouts, heavy borders, and aggressive gradients to protect its core identity of focused simplicity.

## System Prompt (paste into AI tool)

```
Bear is a focused, markdown notes app designed for the Apple ecosystem. The design DNA is characterized by extreme restraint, a clean white canvas, and a single warm red accent (#DD4C4F). The typography uses a refined humanist sans-serif (bearsans/bearsansheadline) for both display and body, with a bold, tight-tracked hero headline. The layout is strictly single-column and centered, with generous vertical rhythm (64px) and wide margins. Critical donts: never use dark mode as the primary surface, avoid heavy drop shadows, never use aggressive gradients, never clutter the interface with dense multi-column layouts, and keep all borders thin and subtle. The interaction model is minimal, relying on hover states and subtle transitions rather than complex motion. The voice is friendly and understated, focusing on the app's core benefit of clean, markdown-based writing.
```