Bevel. Morning metrics in cloudlight.
- Productivity
- Light theme
- 11 colors
- 1 typeface
Bevel frames health data as a sunlit consumer device experience: a white editorial canvas, near-black SF Pro headlines, mist-blue bento surfaces, and realistic iPhone/Apple Watch product imagery. Oversized 600-weight headings use tight negative tracking and compact line-height, while supporting copy stays soft gray and generously spaced. Color is restrained in the site shell; pale sky gradients and small multicolor health-data rings are reserved for product visuals and feature atmosphere rather than universal controls.
Bevel design system
Accent6
Rating stars and small positive health-data indicators
Warm metric accents and lower-edge washes in feature visualizations
Recovery rings and green-tinted metric visualizations
Circular metric indicators and blue gradient treatments in product visuals
Sleep-oriented metric rings and soft violet visual accents
Top hero atmosphere behind the device composition, fading from cool daylight into warm paper
Neutrals5
Filled download controls, dark surface blocks, logos, and monochrome iconography
Display headings, section headings, feature titles, and primary text
Body copy, muted navigation links, helper text, and secondary labels
Feature-card surfaces, light icon fills, and text inside Charcoal download controls
Page backgrounds, navigation surfaces, footer backgrounds, and open whitespace
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Charcoal on Signal Gold
10.61 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
