CURATED · OPEN · FREE

Bear

A focused markdown notes app with a refined, text-first interface.

productnotes
Bear screenshot
↓ Download design system (11 MB)Open in OpenDesign

Visit: https://bear.app

📦 Browse pack contents →

01

Identity DNA

minimalmarkdownfocusedapple-native

A clean, modern notebook designed for the Apple ecosystem

02

Color

#DD4C4FAccent
#444444Ink
#FFFFFFBG
#888888Muted
rgba(68,68,68,1)Line

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

03

Typography

humanist-sans · monospace

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

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Generous 64px vertical rhythm between major sections

05

Surfaces

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid #444444

0px 13px 34px 0px rgba(0, 0, 0, 0.12) · 0px -5px 15px 1px rgba(0, 0, 0, 0.2)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Single column centered layout with alternating content and app screenshot sections

07

Motion & Interaction

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth fade-ins for content sections · Subtle floating effect on app screenshots

Subtle opacity or color change on navigation and buttons · Immediate feedback with minimal visual state change

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Bear — 桌面首屏（hero）
桌面首屏（hero）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko