Preview image. Unlock full-res
Digital Notebook Page — where every element is legible and inviting.
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.
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.
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.
