№ bear-app--xurl

Bear

Cool, crisp digital expanse—clean sans-serif geometry on a muted, calming teal and gray.

Feature Stackminimalism swiss monochrome saaslight

The page prioritizes a clean, functional aesthetic with a focus on clarity. The muted color palette and ample whitespace create a sense of calm, while the prominent call to action and clear navigation emphasize usability. · markdown notes, note-taking app, minimalist notes, developer notes, productivity app, bear app, clean interface, note-taking

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · monochrome · cool

SwatchHexOKLCHSuggested roleCopy

Hex#30c444
OKLCHoklch(71.9% 0.208 145)
RoleDominant
find sites →
Hex#1a6a24
OKLCHoklch(46.1% 0.129 145)
RoleSurface
find sites →
Hex#df5f5c
OKLCHoklch(64.6% 0.161 24)
RoleInk
find sites →
Hex#85a061
OKLCHoklch(67.0% 0.092 128)
RoleAccent
find sites →
Hex#c4d4ac
OKLCHoklch(84.7% 0.057 125)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	bearsansheadline	51px	400	1.1	Aa Bb Cc
h2	bearsansheadline	42px	400	1.1	Aa Bb Cc
body	bearsans	16px	400	1.7	Aa Bb Cc

Spacing scale

8px

16px

48px

64px

80px

96px

192px

208px

Radius scale

0px

8px

9px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #30c444;
  --color-surface: #1a6a24;
  --color-ink: #df5f5c;
  --color-accent: #85a061;
  --color-detail: #c4d4ac;
}

/* CSS variables exposed by source */
:root {
  --background-tertiary-color: #E4E5E6;
  --background-secondary-color: #F3F5F7;
  --accent-color: #DD4C4F;
  --background-color: #fff;
  --text-tertiary-color: #d9d9d9;
  --text-font: "bearsans";
  --text-color: #444444;
  --text-secondary-color: #888888;
  --heading-font: "bearsansheadline";
  --code-font: "roboto-mono";
  --stroke-color: #D9D9D9;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Bear.
Reference design system (extracted from the live site):
- Palette: #30c444, #1a6a24, #df5f5c, #85a061, #c4d4ac
- Typefaces: bearsansheadline, bearsans
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bear-app--xurl

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

bearsansheadline

51px

400

1.1

Aa Bb Cc

bearsansheadline

42px

400

1.1

Aa Bb Cc

body

bearsans

16px

400

1.7

Aa Bb Cc

:root { --color-dominant: #30c444; --color-surface: #1a6a24; --color-ink: #df5f5c; --color-accent: #85a061; --color-detail: #c4d4ac; } /* CSS variables exposed by source */ :root { --background-tertiary-color: #E4E5E6; --background-secondary-color: #F3F5F7; --accent-color: #DD4C4F; --background-color: #fff; --text-tertiary-color: #d9d9d9; --text-font: "bearsans"; --text-color: #444444; --text-secondary-color: #888888; --heading-font: "bearsansheadline"; --code-font: "roboto-mono"; --stroke-color: #D9D9D9; }

Build a landing page in the visual style of Bear. Reference design system (extracted from the live site): - Palette: #30c444, #1a6a24, #df5f5c, #85a061, #c4d4ac - Typefaces: bearsansheadline, bearsans - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/bear-app--xurl