
Preview image. Unlock full-res
Warm, Crisp Canvas
Steep captures a 'white canvas with depth' aesthetic: crisp backgrounds, carefully chosen neutrals, and a warm, inviting accent. The overall impression is one of restrained elegance and confident clarity, suitable for an analytics platform. Typography plays a central role with a high-contrast serif for display elements paired with a clean sans-serif for UI, creating both gravitas and legibility. Subtle shadows provide gentle elevation, preventing the interface from feeling flat.
Use 'Ink' (#17191c) for primary text and filled buttons to ensure strong contrast and clear calls to action.
Apply 'Canvas' (#ffffff) as the default background for most page sections and card surfaces, creating a bright and airy feel.
Pair the 'Signifier' font at large sizes for headlines with 'Sohne' for all body text and UI elements to leverage their distinct roles.
Utilize a 24px border-radius for cards and main content blocks to maintain a soft, approachable aesthetic.
Ensure generous spacing, with elementGap of 8px and sectionGap of 80px, to support content readability and perceived quality.
Implement the full shadow stack (rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px) for elevated cards to provide subtle depth without heaviness.
Use 'Warm Mist' (#fbe1d1) sparingly as a background accent to introduce a subtle warmth and highlight featured content.
Avoid using highly saturated colors; the palette favors muted neutrals with a single warm accent.
Do not use 'Signifier' for body text, UI labels, or buttons; its distinctive character is reserved for large display headings.
Refrain from sharp, 0px border-radii for interactive elements or containers; maintain the consistent rounded aesthetic.
Do not introduce heavy, opaque shadows; elevation should be subtle and air-like, not dense or dark.
Avoid tight spacing between elements; maintain adequate elementGap and sectionGap values to preserve visual order and reduce cognitive load.
Do not use dark backgrounds for primary page sections; the system is built around a light, high-contrast canvas.
Resist using multiple font families beyond 'Sohne' and 'Signifier'; maintain typographic consistency.









