Bear Markdown Notes

# Bear Markdown Notes — Style Reference
> Digital Notebook Page — where every element is legible and inviting.

**Theme:** light

**Site:** https://bear.app

This system evokes clarity and approachability, like a crisp page from a digital notebook. Its light, airy aesthetic is built on a high-contrast palette of near-achromatic grays and subtle background tints, punctuated by a single vibrant red for brand presence and interactive elements. Soft 8px corner radii on interactive components and a few larger 16px/40px organic shapes add a friendly, understated warmth to the otherwise precise informational layout. The custom sans-serif typography, with a generous body line height, ensures a comfortable reading experience, reinforcing the app's focus on content.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Bear Red | `#dd4c4f` | `--color-bear-red` | Brand accent, primary call-to-action (CTA), active state indicators, semantic error. This vivid red provides a clear focal point against the neutral background, signaling primary actions and brand identity. |
| Blueprint Blue | `#456aa3` | `--color-blueprint-blue` | Decorative accent color for certain headings. |
| Leaf Green | `#2b6451` | `--color-leaf-green` | Decorative accent color for certain headings. |
| Orchid Pink | `#884aa8` | `--color-orchid-pink` | Decorative accent color for certain headings. |
| Content Teal | `#9fd7e4` | `--color-content-teal` | Subtle background for specific content blocks, providing a soft accent. |
| Ink Black | `#444444` | `--color-ink-black` | Primary text, icon fills, strong borders. This dark, slightly softened black maintains excellent readability. |
| Paper White | `#ffffff` | `--color-paper-white` | Page backgrounds, card surfaces, input fields. The predominant background color. |
| Ash Gray | `#f3f5f7` | `--color-ash-gray` | Secondary section backgrounds, subtle dividers. A very light gray providing visual separation. |
| Divider Gray | `#d5d6d9` | `--color-divider-gray` | Input borders, subtle strokes, inactive elements. A light, desaturated gray for UI structure. |
| Subtle Text | `#888888` | `--color-subtle-text` | Secondary text, descriptive labels. A mid-gray for softer emphasis. |
| Stroke Silver | `#e6e7eb` | `--color-stroke-silver` | Fine separators and outlines, very subtle strokes. |
| Highlight Yellow | `#fcb827` | `--color-highlight-yellow` | Semantic warning/highlight, badge background. |
| Badge Blue | `#44a2e5` | `--color-badge-blue` | Semantic information, badge background. |

## Tokens — Typography

### bearsansheadline
- **Substitute:** system-ui
- **Weights:** 400
- **Sizes:** 16px, 30px, 42px, 51px
- **Line height:** 1.1, 1.7, 1.8
- **Role:** Display and marketing headlines. This custom font, used at moderate weights, provides a distinct editorial feel without being overly bold, allowing the content to retain a friendly tone.

### bearsans
- **Substitute:** system-ui
- **Weights:** 400, 700
- **Sizes:** 13px, 14px, 16px, 18px, 19px, 20px, 22px, 24px, 29px, 40px
- **Line height:** 1.13, 1.2, 1.36, 1.4, 1.42, 1.45, 1.6, 1.7, 1.8, 1.89
- **Letter spacing:** 0.031em
- **Role:** Body text, navigation, interactive elements, captions. The primary workhorse font, its consistent letter spacing provides a clean, airy feel that's highly readable across all uses.

## Tokens — Type Scale

Perfect Fourth (1.333) from 16px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 13px | 1.45 | 0.31px |
| body | 16px | 1.6 | 0.31px |
| subheading | 18px | 1.4 | 0.31px |
| heading-sm | 29px | 1.7 | 0.31px |
| heading-lg | 42px | 1.1 | — |
| display | 51px | 1.1 | — |

## Tokens — Spacing

- **Max width:** 960px
- **Element gap:** 11px

## Tokens — Radius

- **Default:** 8px
- **badges:** 3.84px
- **largeItems:** 16px
- **organicShapes:** 40px

## Tokens — Elevation

- **Feature Card:** `rgba(0, 0, 0, 0.12) 0px 13px 34px 0px`

## Layout

The layout is predominantly a max-width centered design, constrained to 960px, providing a focused, article-like reading experience. The hero section features a large, centered headline over a white background, with calls-to-action. Sections below are typically alternating blocks of text-left/image-right compositions or reversed, creating a rhythmic flow down the page. Feature lists often use two-column layouts. Vertical spacing between sections is generous, around 48px to 64px, contributing to an open, uncrowded feel. The navigation is a fixed top bar with branding on the left and primary links on the right, maintaining simplicity.

## Imagery

The site's imagery strategy focuses on product screenshots and abstract, playful illustrations, with minimal use of photography. Product screenshots are typically high-fidelity, showing the app UI clearly, often positioned within a device mockup (MacBook). These are sometimes slightly elevated with subtle shadows. Illustrations are flat, line-based, and whimsical (e.g., the astronaut in the lower section), using a monochromatic palette or subtle tints of blues and greens, serving a decorative and atmospheric role rather than explanatory. Icons are filled and monochromatic, predominantly Ink Black (#444444) or Subtle Text (#888888), used sparingly to aid navigation and highlight features. The density is moderate; imagery provides visual breaks and enhances key sections without overwhelming the text-dominant layout.

## Components

### Pricing Cards — Free vs Bear Pro

### Platform Selector Tabs

### Awards Row

### Primary Navigation Link
*Navigation*

Text link using bearsans, weight 400, size 16px, color Ink Black (#444444) on hover, otherwise Subtle Text (#888888). Displays with underline on hover.

### Basic Input Field
*Form Element*

Input field with Paper White (#ffffff) background, Divider Gray (#d5d6d9) border. Text color Ink Black (#444444), uses bearsans 16px, weight 400. Has 8.8px border-radius and 0px vertical, 17.6px horizontal padding.

### PRO Badge (Red)
*Indicator/Tag*

Small rectangular badge with Bear Red (#dd4c4f) background and Paper White (#ffffff) text. Features a 3.84px border-radius and 0px vertical, 3.84px horizontal padding. Text uses bearsans, likely small size.

### Benefit Checkmark
*Feature List Item*

List item with checkmark icon, featuring text in Ink Black (#444444), bearsans, 19px, weight 400. Generous line height for readability, with 13px bottom margin between items.

### Feature Card
*Content Display*

Card with Paper White (#ffffff) background, features a large shadow: rgba(0, 0, 0, 0.12) 0px 13px 34px 0px. Rounded corners at 8px on interactive elements, or 16px for content cards, implying a slight lift from the page. Contains nested elements, often with Padding of 8px vertical and 18px horizontal.

### Promo Badge (Yellow)
*Indicator/Tag*

Small rectangular badge with Highlight Yellow (#fcb827) background and Paper White (#ffffff) text. Features a 4.8px border-radius and 0px vertical, 4.8px horizontal padding. Text uses bearsans, likely small size.

### Install Option Tag
*Category/Indicator*

Small text (e.g., 'Mac', 'iPhone', 'iPad') using bearsans, 16px, weight 400, color Subtle Text (#888888). These are often underlined with the Bear Red (#dd4c4f) to indicate active selection. The letter spacing is distinct, making these tags feel airy.

## Guidelines

### Do

- Use Bear Red (#dd4c4f) exclusively for primary calls-to-action, active states, and brand highlights.
- Maintain a clear visual hierarchy with Ink Black (#444444) for primary text and Subtle Text (#888888) for secondary information.
- Apply an 8px border-radius to interactive elements like buttons and input fields for a consistent, soft touch.
- Employ bearsans for all body text and UI elements at 400 weight, ensuring the 0.031em letter spacing is consistent for legibility.
- Utilize Paper White (#ffffff) as the primary background and Ash Gray (#f3f5f7) for subtle section differentiation.
- Ensure generous line heights (e.g., 1.45 at 16px) for all body text (`bearsans`) to enhance readability.
- Use a vertical element gap of 11px for most stacked items to maintain 'comfortable' density.

### Don't

- Do not introduce new vibrant colors outside of the defined brand and semantic palette; rely on the neutral scale for structure.
- Avoid box shadows on non-interactive elements, reserving rgba(0, 0, 0, 0.12) 0px 13px 34px 0px for elevated feature cards only.
- Do not use letter spacing on `bearsansheadline` as it is explicitly set to `normal`.
- Avoid using bold or heavy weights for headlines; use bearsansheadline at 400 weight to maintain the light visual tone.
- Do not use dark backgrounds for sections, maintaining the light theme across all content areas.
- Avoid overly tight typography; the standard `letterSpacing: 0.031em` on `bearsans` is critical for its open feel.
- Do not introduce square corners; the soft radii are an important part of the brand's friendly visual language.

## Agent Prompt Guide

### Quick Color Reference
- Text: #444444 (Ink Black)
- Background: #ffffff (Paper White)
- CTA: #dd4c4f (Bear Red)
- Border/Divider: #d5d6d9 (Divider Gray)
- Secondary Text: #888888 (Subtle Text)

### 3-5 Example Component Prompts
1.  **Create a primary headline for a new section:** Use `bearsansheadline` at `51px` size, `1.1` line height, `400` weight, and color `Ink Black (#444444)`. Ensure `letterSpacing` is `normal`.
2.  **Generate a standard body paragraph:** Use `bearsans` at `16px` size, `1.6` line height, `400` weight, `0.031em` letter spacing, and color `Ink Black (#444444)`. Ensure there is an `11px` bottom margin.
3.  **Design a call-to-action button:** Text 'Download Now' using `bearsans` at `18px` size, `400` weight, `0.031em` letter spacing. Background `Bear Red (#dd4c4f)`, text `Paper White (#ffffff)`. Set `8px` border-radius and `13px` vertical, `24px` horizontal padding.
4.  **Create a text input field:** Background `Paper White (#ffffff)`, border color `Divider Gray (#d5d6d9)`, `8.8px` border-radius. Placeholder text `bearsans` `16px`, `400` weight, `0.031em` letter spacing, color `Subtle Text (#888888)`. Padding `0px` vertical, `17.6px` horizontal.
5.  **Build a 'PRO' badge:** Background `Bear Red (#dd4c4f)`, text 'PRO' in `Paper White (#ffffff)`. `3.84px` border-radius, `0px` vertical, `3.84px` horizontal padding. Font `bearsans`, `13px` size, `700` weight (or smallest available given data for badges).