Bear Design System

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.