Bear — Airy Native-App Showcase

---
version: alpha
name: Bear — Airy Native-App Showcase
colors:
  primary: '#444444'
  background: '#FFFFFF'
  secondary: '#888888'
  accent: '#DD4C4F'
  surface: '#F3F5F7'
  markdown-heading: '#456AA3'
  organization-heading: '#884AA8'
  beauty-heading: '#2B6451'
typography:
  h1:
    fontFamily: bearsansheadline
    fontSize: 51.2px
    fontWeight: 400
    lineHeight: 1.1
  h2:
    fontFamily: bearsansheadline
    fontSize: 41.6px
    fontWeight: 400
    lineHeight: 1.1
  intro:
    fontFamily: bearsans
    fontSize: 22.4px
    fontWeight: 400
    lineHeight: 1.4
  body:
    fontFamily: bearsans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
spacing:
  mobile-gutter: 32px
omitted:
  - section: rounded
    reason: Rounded edges in app imagery and store badges were visually observed, not measured as host-page CSS tokens.
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
  intro:
    textColor: '{colors.secondary}'
    typography: '{typography.intro}'
  markdown-heading:
    textColor: '{colors.markdown-heading}'
    typography: '{typography.h2}'
  organization-heading:
    textColor: '{colors.organization-heading}'
    typography: '{typography.h2}'
  beauty-heading:
    textColor: '{colors.beauty-heading}'
    typography: '{typography.h2}'
---

## Overview

Bear's note-taking landing page mixes the precision of a native Mac interface with friendly lettering, tiny illustrated marks and an exceptionally airy white canvas. The opening composition is almost entirely typographic: a small brand/navigation strip, the promise “Markdown notes you'll love,” a device selector, an official store badge and a large application screenshot. This is a calm writing tool, not an enterprise dashboard brand. Source: https://bear.app/, observed 2026-09-27 at 1440 × 1000 and 390 × 844, device scale 1. The supplied screenshot preserves the opening 1400 desktop pixels at native width; it is not a full-page capture.

## Colors

Use measured charcoal #444444 for primary text rather than pure black, with white as the canvas and #888888 for supporting prose. Red #DD4C4F appears in lower-page controls; the bear logo is a red-toned graphic, not a flat sampled swatch. Pale #F3F5F7 supports light feature surfaces. A thin cyan hand-drawn underline emphasizes “love” and the selected device; its precise artwork color was not sampled as a token.

Below the opening screenshot, the observed feature sequence adds cyan, mauve, sage and yellow organic shapes. These background illustrations are visual estimates, not normative hex values. Their corresponding measured heading colors include blue #456AA3 for Markdown, purple #884AA8 for organization and green #2B6451 for appearance. Preserve these local chapter accents instead of making every heading a different arbitrary color.

## Typography

Computed styles identify `bearsansheadline` for headings and `bearsans` for prose. The headline family looks bold and friendly even though its declared weight is 400; do not map that number blindly to an unrelated font. Use the real family only with appropriate access, or choose and visually test a humanist sans-serif fallback. Desktop H1 measures 51.2px with 56.32px leading; feature H2 measures 41.6px/45.76px. Intro copy is 22.4px/31.36px and compact body copy 16px/27.2px. Tracking is normal.

At 390px the opening H1 measures 41.6px/45.76px and wraps to two centered lines inside a 326px block. Keep its generous size rather than shrinking it to a small mobile heading. Store badges and the embedded app interface contain their own typography and must not be treated as host-page CSS text.

## Layout

The desktop opening centers every major element. A narrow navigation strip sits high above the headline. The headline block is 650px wide, starting at x=395 on the 1440px canvas. Beneath it, the horizontal Mac/iPhone/iPad chooser provides both icons and labels, followed by a large vertical gap and the outlined store badge. The application window spans roughly 1056px and begins around y=565 (visual estimates). Leave ample white space around its soft shadow.

On mobile, the logo and wordmark remain left-aligned while navigation condenses to a small menu glyph at the right. The headline uses measured 32px side gutters. The three device choices remain in one horizontal row; Mac is still selected in the observed mobile state. The store badge remains centered. The desktop-app image is deliberately cropped, revealing the note content rather than scaling the entire window into unreadable miniature text. Document scrollWidth equals 390px, so this image crop is not document overflow.

Further down the desktop page, alternating text/image sections accompany organic color shapes; a mixed feature grid leads into Free/Pro pricing, community links, a newsletter and a low-key footer. The below-fold mobile composition and exact breakpoints were not visually inspected. An embedded third-party video below the hero rendered blank during capture, so that section is excluded from the supplied screenshot and no playback appearance is specified.

## Elevation & Depth

The hero application's diffuse gray shadow lifts it gently off white. Its sidebar, note list and writing pane already supply the internal hierarchy; avoid adding another outer border or heavy frame. Lower-page floating note cards overlap and rotate slightly over colored shapes, creating paper-like depth. Keep host navigation and the device row flat. Shadow blur and offsets were visually estimated rather than extracted as exact tokens.

## Shapes

Use a combination of soft application-window corners, an outlined rectangular store badge and thin hand-drawn underline marks. Later sections introduce irregular organic blobs and faint bear/star doodles, never a strict repeated geometry. Rounded corner dimensions in screenshot assets were not measured as CSS values; match their visual proportions instead of asserting exact radii.

## Components

- Brand/navigation: red bear mark and charcoal wordmark on the left, widely spaced text links on desktop, compact menu icon on mobile.
- Main promise: a single expressive headline with only the final word underlined. Keep that accent narrow and handmade in appearance.
- Device selector: line icons above or beside labels, active Mac in charcoal, inactive options lighter gray, with cyan strokes indicating the selected option. Other selected states were not clicked or verified.
- Download action: official outlined Mac App Store badge, not a generic colored SaaS trial button. The mobile capture also shows this Mac-selected badge; do not claim automatic device-specific switching.
- Hero demonstration: a large native window with dark sidebar, pale list and white editor, showing a polar-bear note, photograph and small data table. This makes the product's editing experience concrete.
- Feature storytelling: paired copy and layered note examples, each with a distinct illustration color; preserve the local heading/shape relationship.
- Supporting conversion: restrained Free/Pro columns, quiet community link groups and a small newsletter action, all subordinate to the product preview.

## Do's and Don'ts

Do preserve the large white intervals, approachable custom lettering, native application details and sparing hand-drawn accents. Do crop product imagery intentionally on narrow screens so the editor remains readable. Do distinguish measured text colors from estimated illustration hues. Don't replace the store badge with a neon pill, cover every surface with blobs, or recreate the app's complete interface as the landing-page design system. Don't claim tested menu, device-switch, download or video behavior. The desktop overview, native-scale hero and feature crops, mobile opening and thumbnail were reviewed; the supplied opening screenshot contains no consent overlay, broken image or blank video panel.