---
version: alpha
name: "Bear"
website: "https://bear.app"
description: >-
  Shiny Frog's Markdown notes app for Apple platforms uses two proprietary
  typefaces — Bear Sans for body and Bear Sans Headline for display — both
  custom-designed to feel pen-on-paper warm on a pure white canvas. The single
  brand accent is a warm coral red wired to --accent-color, appearing on links,
  the app mascot bear, and section headings. Colorful organic blob shapes
  (teal, purple, lilac) float behind app screenshots as the only decoration,
  reflecting the app's multi-theme philosophy rather than a single brand palette.

seo:
  title: "Bear Design System for React — coral red, Bear Sans, 13 components"
  metaDescription: "Bear's marketing system pairs two custom typefaces (Bear Sans and Bear Sans Headline) with a single coral-red accent on a pure white canvas. Colorful blobs reflect the app's theme library. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Two custom typefaces — Bear Sans Headline at 51px for h1 and Bear Sans for body; both are proprietary, warm, and calligraphic compared to system-sans peers"
    - "Single coral-red accent — the brand color at --accent-color appears on section heading links, the bear mascot icon, and navigation; never as a background fill in the hero"
    - "Organic blob decoration — teal, lavender, and lilac freeform shapes float behind app screenshots, signaling the app's multi-theme library without committing to a single background color"
    - "White canvas, near-black ink — the page runs pure white with a charcoal ink at #444444 wired as --text-color; the warmth lives in the typeface, not the surface"
    - "App Store badge as the only CTA — no primary-button-style download CTA; Bear ships a single Apple-spec Mac App Store badge as the hero action"
  tags:
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Bear's marketing page at bear.app announces itself with a single large headline — "Markdown notes you'll love" — in Bear Sans Headline, a custom typeface that sits somewhere between a geometric sans and a humanist text face. The letterforms have a slightly calligraphic warmth that San Francisco and Inter lack; the underline under "love" (the brand-accent coral red) is the only chromatic moment above the fold besides the bear mascot logo in the top-left corner. The hero is a Mac window mockup showing a note about polar bears, with a uncluttered white canvas, a sidebar with tag-based navigation, and a formatting toolbar. It reads less like a SaaS marketing page and more like a product screenshot in an Apple press kit.

    Where Notion signals editor-grade power through an ink-black canvas and Apple Notes signals simplicity through white and blue, Bear occupies a third position: warm type on white, with the brand color so restrained it functions more like a watermark than an accent. The colorful blob shapes that float behind the mid-page screenshots — teal curves, purple amorphous patches, lilac arcs — are the only chromatic release in the system, and they reference the app's own theme library rather than any single brand color. Bear ships with over a dozen editor themes, and the marketing page suggests this plurality rather than asserting one.

    Feed this file to an AI coding tool and it will reproduce Bear's specific signature: Bear Sans Headline for h1-h2 display at 51-42px in weight 400 (not bold — the custom family is drawn to read strongly at 400), Bear Sans for body at 16-22px, a single coral-red accent wired to exactly one interactive moment per section, and a pure-white canvas where the only warmth comes from the typeface itself. The design works because the custom typefaces carry the brand identity; without them, the system reads as generic white-page product marketing.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://bear.app"
      title: "Bear — official site"
      description: "Bear's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Bear's brand accent color?"
      answer: "Bear's single chromatic brand accent is a warm coral red wired to the CSS custom property --accent-color. It appears 28 times across the captured marketing page — 12 as text, 4 as background fill (the bear mascot icon background and a feature highlight), and 12 as border. The accent appears on the nav wordmark bear icon, section heading links like 'Joinless Markdown' and 'Organize easily', and the underline under 'love' in the hero headline. It does not fill the hero background or any full-width surface. A yellow-amber and a sky blue also appear in the extraction as brand-layer values (1 occurrence each), both used inside app screenshots — likely representing note-tag colors within the Bear UI rather than marketing-surface brand colors."
    - id: "typography"
      title: "What typefaces does Bear use, and what should I use as substitutes?"
      answer: "Bear runs two proprietary custom typefaces wired to CSS variables: Bear Sans Headline (--heading-font) for all display and heading surfaces, and Bear Sans (--text-font) for all body and navigation text. Bear Sans Headline renders h1 at 51.2px / weight 400 with a 56px line-height; h2 sections at 41.6px / weight 400; smaller h2 instances at 30.4px / weight 400. Bear Sans runs body text at 16px / weight 400 with a 27.2px generous line-height. The display typeface is designed to read strongly at weight 400 — it does not need 700 to hold the headline. A monospace family for code is Roboto Mono (wired to --code-font). Open-source substitutes: for Bear Sans Headline, try DM Serif Display or Lora at weight 400; for Bear Sans, try DM Sans or Nunito. Neither fully matches the calligraphic warmth of the custom family."
    - id: "blob-decoration"
      title: "What are the colorful blob shapes on Bear's marketing page?"
      answer: "The organic freeform blob shapes (teal curves, purple patches, lilac arcs) that appear behind the mid-page and lower-page screenshots are SVG or CSS decorative elements, not part of the structural token system. They reference Bear's multi-theme library — the app ships with themes that use these hue families. The teal family appears in the extraction at two values (a medium teal and a lighter teal variant), and the purple appears as an amethyst. These are design-intent signals about the product's expressive range, not brand colors. They do not appear as text or border colors; they are pure background decoration."
    - id: "radius-scale"
      title: "What corner-radius philosophy does Bear use?"
      answer: "Bear's dominant radius is 40px — a large, soft pill-adjacent rounding used on the Mac window screenshot frame and the prominent feature cards. Below it, the system uses 16px on mid-size cards, 8px and 9px on smaller interactive surfaces, and 4-5px on fine details. The 40px value appears 4 times in extraction — the highest frequency — and gives the product screenshots a characteristically rounded, Apple-native appearance. Bear avoids the sharp 3-4px tier that developer tools use; every surface has at least some softness."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own note-taking app marketing page?"
      answer: "Yes — the file packages Bear's token system for AI tools. Feed it to Claude or Cursor and it will reproduce the structural moves: pure-white canvas, single coral-red accent reserved for one interactive moment per section, generous display sizing (51px h1 in weight 400 not 700), 40px dominant rounding on screenshot containers, and the generous 1.7× line-height on body text. The one constraint: the custom typeface identity (Bear Sans and Bear Sans Headline) is proprietary. Without it, you'll need to source a comparable humanist-warm sans-serif at the same size-to-weight ratio, or the design will read as a generic white-canvas product site."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#dd4c4f"
  ink: "#444444"
  ink-muted: "#888888"
  canvas: "#ffffff"
  surface-1: "#f3f5f7"
  surface-2: "#e4e5e6"
  hairline: "#d9d9d9"
  teal-mid: "#8ec2c2"
  teal-light: "#b7d5d5"
  theme-purple: "#884aa8"
  theme-forest: "#2b6451"
  theme-blue: "#456aa3"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "bearsansheadline"
    fontSize: 51.2px
    fontWeight: 400
    lineHeight: 56.32px
    letterSpacing: 0
  display-lg:
    fontFamily: "bearsansheadline"
    fontSize: 41.6px
    fontWeight: 400
    lineHeight: 45.76px
    letterSpacing: 0
  display-md:
    fontFamily: "bearsansheadline"
    fontSize: 30.4px
    fontWeight: 400
    lineHeight: 33.44px
    letterSpacing: 0
  heading-lg:
    fontFamily: "bearsans"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 27.2px
    letterSpacing: 0
  body-lg:
    fontFamily: "bearsans"
    fontSize: 22.4px
    fontWeight: 400
    lineHeight: 31.36px
    letterSpacing: 0
  body-md:
    fontFamily: "bearsans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 27.2px
    letterSpacing: 0
  body-strong:
    fontFamily: "bearsans"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 27.2px
    letterSpacing: 0
  label-lg:
    fontFamily: "bearsans"
    fontSize: 17.6px
    fontWeight: 700
    lineHeight: 25.6px
    letterSpacing: 0
  label-sm:
    fontFamily: "bearsans"
    fontSize: 12.8px
    fontWeight: 700
    lineHeight: 17.92px
    letterSpacing: 0
  nav-link:
    fontFamily: "bearsans"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 27.2px
    letterSpacing: 0
  input-text:
    fontFamily: "bearsans"
    fontSize: 17.6px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "40px"
  full: "9999px"

spacing:
  xs: "5px"
  sm: "12px"
  base: "16px"
  md: "19px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "80px"
  4xl: "160px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 16px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "32px"
    borderColor: "{colors.hairline}"
  screenshot-frame:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.lg}"
    padding: "0px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.input-text}"
    rounded: "{rounded.sm}"
    padding: "0px 17.6px"
    height: "44px"
    borderColor: "{colors.hairline}"
  feature-list:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px 0px 0px 19px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-sm}"
    padding: "40px 24px"
---

## Overview

Bear's marketing site sits at the warmest end of the Mac-native notes-app spectrum. **Calligraphic minimalism.** Where Apple Notes uses system-blue and white, Notion uses inter-black and near-black, and Obsidian uses a deep purple-charcoal, Bear uses a coral-red accent so restrained it functions more as a signature than a color system, paired with two custom typefaces that carry the brand's warmth entirely through letterform rather than hue.

The hero headline — "Markdown notes you'll love" — runs Bear Sans Headline at 51px in weight 400. Not bold. The custom family is drawn strongly enough to anchor a 51px headline at regular weight; bumping to 700 would overwhelm the page. Below the h1 sits the Mac App Store badge (the only CTA above the fold), and then the product screenshot. Section headings below the fold ("Joinless Markdown", "Organize easily", "Universal beauty") render in the coral-red accent at 41.6px — the only place the brand color appears at scale, and the only non-neutral hue outside the decorative blob shapes.

The blobs are the other signature move. Teal freeform curves, lilac arcs, and purple patches float behind the feature screenshots as pure background decoration. They do not correspond to any CSS token in the brand chrome; they represent the app's multi-theme palette (Bear ships ~14 editor themes with distinct color sets). Compared to Notion (which uses no decoration), Craft (which uses geometric gradients), and Bear's closest peer Ulysses (which uses blue on white), Bear's blob decoration signals playfulness without committing to any single secondary color.

**Key Characteristics:**
- Bear Sans Headline for all display tiers (51px h1, 41.6px h2, 30.4px h3) at weight 400 — the custom family does not require bold to read strongly.
- Bear Sans for all body, label, and nav text — proprietary family wired to --text-font.
- Single coral-red accent (`{colors.primary}`) wired to --accent-color; appears on the nav bear icon, section headings, and inline links — 28 total occurrences, never as a hero background.
- Pure-white canvas (`{colors.canvas}`) with charcoal ink (`{colors.ink}` — , --text-color) rather than pure black — the warmth is typographic, not surface-based.
- Organic teal and purple blob shapes as mid-page decoration — background decoration only, no token counterpart.
- 40px dominant radius (`{rounded.lg}`) on screenshot frames and feature cards — the Apple-native rounded-window aesthetic.
- Generous line-height on body text: 27.2px on 16px type = 1.7× ratio, making paragraphs feel spacious and human.
- App Store badge as the sole hero CTA — no custom-designed primary button in the hero; the Apple badge is the download action.

## Colors

### Brand

- **Coral Red** (`{colors.primary}` — ): frequency 28. Used as text (12), background (4), border (12). Wired to --accent-color. The single brand voltage — section heading links, bear mascot icon, inline text accents. Not used as a hero fill.

### Surface

- **Canvas** (`{colors.canvas}` — ): frequency 17 (6 text, 5 background, 6 border). Pure white — the page floor, card interiors, and the screenshot mat. Wired to --background-color.
- **Surface-1** (`{colors.surface-1}` — ): frequency 3 as background. Slightly off-white — used as the light background behind secondary sections. Wired to --background-secondary-color.
- **Surface-2** (`{colors.surface-2}` — ): declared as --background-tertiary-color but not rendered in the captured surface; reserved for tertiary background moments.

### Text

- **Ink** (`{colors.ink}` — ): frequency 609 (305 text, 304 border). The dominant text color — a warm charcoal, not pure black. Wired to --text-color. Runs the entire type system from headlines to captions.
- **Ink Muted** (`{colors.ink-muted}` — ): frequency 50 (25 text, 25 border). Secondary text for metadata, captions, and feature sub-labels. Wired to --text-secondary-color.

### Hairlines

- **Hairline** (`{colors.hairline}` — ): frequency 1 as border. The sole divider tone — used on the email input field and structural rules. Wired to --text-tertiary-color and --stroke-color.

### Decoration (app-theme palette)

- **Teal Mid** (`{colors.teal-mid}` — ): frequency 19 (14 text, 2 background, 2 gradient). The primary blob decoration tone — a mid-teal that appears in the section-background blobs and inside the app screenshots.
- **Teal Light** (`{colors.teal-light}` — ): frequency 24 as text. Lighter teal variant in the blob surfaces.
- **Theme Purple** (`{colors.theme-purple}` — ): frequency 2. Amethyst purple used in the lower-page blob decoration.
- **Theme Forest** (`{colors.theme-forest}` — ): frequency 2. Forest green appearing in the app-theme blob zone.
- **Theme Blue** (`{colors.theme-blue}` — ): frequency 2. Slate blue — appears as a section heading color variant for one h2 link.
- **Shadow** (`{colors.shadow}` — ): frequency 5 (3 as shadow ink). Pure black-with-alpha for drop shadows beneath screenshot frames.

## Typography

### Font Families

The system runs **two proprietary Bear typefaces**:
- **Bear Sans Headline** (`--heading-font: "bearsansheadline"`) — all display and heading surfaces. A custom sans-serif with calligraphic warmth; designed to read strongly at weight 400.
- **Bear Sans** (`--text-font: "bearsans"`) — all body, label, nav, and button text. A companion sans that pairs warmth with legibility at 16-22px.
- **Roboto Mono** (`--code-font: "roboto-mono"`) — code-style annotations inside the app screenshot (not visible in the marketing chrome directly, but declared).

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 51.2px | 400 | 56.32px | Hero h1 ("Markdown notes you'll love") |
| `{typography.display-lg}` | 41.6px | 400 | 45.76px | Section h2 headings ("Joinless Markdown", "Organize easily") |
| `{typography.display-md}` | 30.4px | 400 | 33.44px | Smaller h2 instances below the fold |
| `{typography.heading-lg}` | 24px | 400 | 27.2px | Sub-section headings |
| `{typography.body-lg}` | 22.4px | 400 | 31.36px | Feature sub-deks and lead paragraphs |
| `{typography.body-md}` | 16px | 400 | 27.2px | Default body copy — dominant tier |
| `{typography.body-strong}` | 16px | 700 | 27.2px | Bold inline body emphasis |
| `{typography.label-lg}` | 17.6px | 700 | 25.6px | Feature list item labels |
| `{typography.label-sm}` | 12.8px | 700 | 17.92px | Small bold labels, app-version tags |
| `{typography.nav-link}` | 19.2px | 400 | 27.2px | Top-nav links |
| `{typography.input-text}` | 17.6px | 400 | 24px | Input field text |

### Principles

Display headings at weight 400 is the signature move. Bear Sans Headline is drawn with enough optical weight at regular that a 51px h1 needs no bold to anchor the page. The generous line-height on body text (27.2px on 16px type, a 1.7× ratio) gives the page breathing room that Apple Notes and Notion both lack. The type system has a single bold tier (weight 700) reserved for label callouts and inline emphasis; there is no 600 / semibold step.

### Note on Font Substitutes

Both Bear typefaces are proprietary. For Bear Sans Headline at display sizes, **Nunito** or **DM Sans** in weight 400 approximates the humanist warmth, though neither fully matches the calligraphic quality. For Bear Sans at body sizes, **Nunito** or **Inter** at 400 transfers cleanly. The key is to preserve the 1.7× body line-height and avoid substitutes with tight spacing — the spaciousness is part of the identity.

## Layout

### Spacing System

- **Base unit:** spacing tokens cluster around 4-5px micro steps with 16-19px as the dominant module.
- **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 19px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 80px · `{spacing.4xl}` 160px.
- **Section vertical padding:** 80px and 160px between major sections — notably generous, allowing the blob shapes to breathe.
- **Card internal padding:** `{spacing.xl}` (32px) on feature cards.
- **Body text indent:** 19.2px left-indent on feature bullet lists — matches the body-md line-height, creating a column-inset list style.

### Grid & Container

- **Max content width:** ~800px for the hero text and single-column editorial sections; screenshot containers expand to ~900px.
- **Hero:** centered single column — headline, platform selectors (Mac / iPhone / iPad chips), App Store badge.
- **Feature sections:** alternating 2-column layout — text column (feature heading + bullet list) on one side, screenshot on the other; blob shapes float freely behind.
- **Awards bar:** 3-column horizontal strip with Editor's Choice 2020, Apple Design Award 2017, App of the Year 2016.

### Rhythm

The page alternates between **white editorial** (hero, headings, award strip) and **decorated feature** (blob-backed screenshot sections). The blob shapes mark section transitions without changing the underlying white canvas. Between major sections the spacing is 80-160px — unusually generous for a product marketing page, making it feel like a long-form read rather than a feature checklist.

## Elevation

Bear's elevation system is minimal. Pure-white card surfaces on the white canvas require border treatment rather than shadow contrast. Screenshot frames use a 1px `{colors.hairline}` border and the `{rounded.lg}` 40px radius to read as distinct from the page; the only actual shadows (3 occurrences of black-with-alpha) appear beneath the floating Mac window mockup in the hero. No card shadow system exists in the marketing chrome.

- **Flat (no shadow):** the entire editorial surface — headers, body, awards, feature lists.
- **Hairline-bordered:** `{component.screenshot-frame}` and `{component.card}` use a 1px `{colors.hairline}` border as their sole depth signal.
- **Photographic shadow:** the Mac window in the hero carries its own 3-value black-with-alpha drop shadow.

## Shapes

The dominant radius is 40px — the Bear-app window's rounding value:

- `{rounded.none}` 0px — inline text surfaces.
- `{rounded.xs}` 4px — fine UI details inside screenshots.
- `{rounded.sm}` 8px — the email input field; small interactive surfaces.
- `{rounded.md}` 16px — mid-size feature cards.
- `{rounded.lg}` 40px — the primary screenshot frame, large feature cards, and the bear mascot icon background.
- `{rounded.full}` 9999px — fully circular elements.

The 40px tier is the signature. It is larger than most productivity tools (Notion uses 8-12px, Todoist uses 6-10px) but smaller than pill-shapes. The specific value matches the Bear Mac app's own window corner rounding — the marketing page frames the product at its own natural curvature.

## Components

**`button-primary`** — The newsletter submit and feature CTA. Charcoal `{colors.ink}` fill, white text at `{typography.body-md}`, `{rounded.lg}` 40px radius, 12×24px padding, 44px height. Bear does not use the brand coral for button fills; ink on white is the button convention.

**`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px hairline border, same radius and height. Alternative action style.

**`top-nav`** — Pure white canvas, 64px height, bear mascot icon (coral fill) flush left, nav links (Features / Pricing / Blog / Community / Support) right-aligned.

**`nav-link`** — Transparent background, charcoal ink at `{typography.nav-link}` (19.2px / 400), 8×16px padding. The nav links use the same size as body-adjacent text — larger than most nav systems.

**`hero-heading`** — Transparent background, charcoal ink at `{typography.display-xl}` (51.2px / 400). The h1 "Markdown notes you'll love" — the underscore beneath "love" is a coral-red text-decoration, not a separate element.

**`section-heading`** — Coral-red `{colors.primary}` text at `{typography.display-lg}` (41.6px / 400). The h2 section links ("Joinless Markdown", "Organize easily") — the only place the coral fills text at large scale.

**`body-paragraph`** — Charcoal ink at `{typography.body-md}` (16px / 400 / 27.2px line-height). Default body copy throughout; the generous line-height is the characteristic feel.

**`body-paragraph-muted`** — Muted `{colors.ink-muted}` at `{typography.body-md}`. Secondary captions and feature sub-labels.

**`card`** — White canvas fill, charcoal text, 1px hairline border, `{rounded.lg}` 40px radius, 32px padding. Feature content cards.

**`screenshot-frame`** — White canvas fill, 1px hairline border, `{rounded.lg}` 40px radius, 0 padding. The Mac and iPhone screenshot containers.

**`text-input`** — White canvas fill, charcoal text at `{typography.input-text}` (17.6px / 400), `{rounded.sm}` 8px radius, 17.6px horizontal padding, 44px height, hairline border. Newsletter email field.

**`feature-list`** — Transparent background, charcoal text at `{typography.body-md}`, 19.2px left-indent for the bullet list style.

**`footer`** — White canvas continuation, muted ink at `{typography.label-sm}`, 40×24px padding.

## Do's and Don'ts

**Do** use Bear Sans Headline at weight 400 for every display heading. The custom family holds the 51px h1 without bold; adding weight 700 at large display sizes would over-darken the letterforms and lose the calligraphic warmth.

**Do** keep section headings in the coral-red accent. The `{colors.primary}` on section h2 links is the primary color moment in the system — appearing once per section, always as a section transition signal, never as a surface fill.

**Do** preserve the 27.2px line-height on 16px body text. The 1.7× ratio is the most distinctive layout characteristic of the Bear marketing page — it creates the spacious, writing-focused feel that distinguishes Bear from Notion and Apple Notes.

**Do** use blob shapes only as background decoration behind screenshots, and keep them in the teal-and-purple family that reflects the app's theme library. Introducing a load-bearing orange or yellow blob would conflict with the coral accent's scarcity.

**Don't** use the coral red (`{colors.primary}`) as a button background fill. Bear's buttons use charcoal fill on white; the coral is reserved for text links and icon accents only. A coral-filled primary button would read as conflicting with the Apple HIG convention the app follows.

**Don't** tighten the line-height to 1.5× or lower. The 1.7× body rhythm is load-bearing; standard content-dense 1.5× spacing would make the page feel like a SaaS product sheet rather than a notes app.

**Don't** add a second sans-serif family. Bear Sans and Bear Sans Headline are designed together; introducing Inter or Geist as a display or body substitute would break the tonal unity between headlines and body.

**Don't** use radius values below 8px on any prominent surface. The 40px window rounding defines the system; adding tight 4px borders elsewhere would create a visual conflict with the Mac-window identity.

## Known Gaps

- **Hover and active states:** no hover treatment for nav links, section heading links, or the App Store badge is captured.
- **Dark mode:** Bear ships a dark editor theme, but the marketing page renders light-only. No dark-canvas token system is documented here.
- **App theme palette:** the teal and purple blob colors are signals of the app's theme library, not a complete palette. The full theme set (Mountain, Solarized, Cobalt, etc.) is not documented.
- **Bear mascot illustration:** the bear logo icon and the outline bear illustrations that appear in the lower-page sections are SVG art assets, not token-driven.
- **Primary CTA button:** the hero CTA is the Apple Mac App Store badge (a standardized asset), not a custom button component. The token system describes the newsletter submit button, which is a secondary action on the page.
- **Roboto Mono:** declared as the code font in --code-font but the marketing page does not render a code block; sizing and spacing for monospace content is not captured.