---
title: "Bevel design system"
variant: extended
source: https://www.bevel.health/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/bevel-health)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bevel · Design System

> Personal health data, presented with calm clarity

**Theme:** light · **Industry:** health · **Source:** https://www.bevel.health/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Bevel pairs a bright, spacious health-app homepage with soft color gradients, device imagery, and clear product explanations. A full-width dark feature chapter contrasts with the white editorial sections and gives its AI coaching features a distinct visual setting.

## North star

Keep the interface calm and legible, using restrained gradients and real product imagery to make health features feel approachable.

## Overview

The visual identity is built on a white canvas, near-black text, and pale blue-gray cards, with soft multicolor gradients bringing warmth and dimensionality to feature areas. Large, tightly tracked system-sans headlines establish a clear hierarchy; body copy is smaller, muted, and compact, keeping the focus on the product. The page alternates centered introductions and testimonial moments with image-rich feature panels, then shifts into a long charcoal chapter for Bevel Intelligence. Product imagery—phones, wearables, app screens, and lifestyle scenes—does most of the storytelling, with gradients used as atmospheric backdrops rather than as decoration everywhere. Generous section whitespace separates otherwise dense product details. Cards have substantial rounded corners and rely on tonal contrast and imagery instead of visible borders. The overall effect is calm, modern, and clinical without feeling sterile.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Ink | `#222326` | `--color-graphite-ink` | neutral | Primary headings, body copy, dark-section text, and deep surfaces. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas and bright content sections. |
| Cloud Blue | `#ebf0f8` | `--color-cloud-blue` | surface | Rounded feature and testimonial cards, plus light text on dark download controls. |
| Mist Gray | `#f3f6f7` | `--color-mist-gray` | surface | Subtle cool alternate surface tone. |
| Slate Copy | `#717379` | `--color-slate-copy` | neutral | Muted descriptions and supporting text. |
| Soft Graphite | `#79797c` | `--color-soft-graphite` | neutral | Secondary navigation and subdued supporting text. |
| Pewter Note | `#a5a6a8` | `--color-pewter-note` | neutral | Low-emphasis supporting copy; not a defining surface color. |
| Sky Wash | `#d2e5ff` | `--color-sky-wash` | accent | Pale blue gradient stop behind hero and product imagery. |
| Warm Cream | `#fff9ee` | `--color-warm-cream` | accent | Warm gradient stop that softens atmospheric section backgrounds. |
| Lavender Haze | `#e3dbff` | `--color-lavender-haze` | accent | Lavender gradient color in feature backdrops, especially dark-chapter cards. |
| Muted Violet | `#5d557c` | `--color-muted-violet` | brand | Measured violet accent, present in gradient treatments rather than as a dominant UI fill. |
| Ice Tint | `#e6f9f8` | `--color-ice-tint` | accent | Cool mint gradient stop in health feature and interface backdrops. |
| Aqua Mist | `#cdf4f2` | `--color-aqua-mist` | accent | Soft aqua gradient color, supporting the cool product palette. |
| Mint Light | `#d9fff3` | `--color-mint-light` | accent | Light mint gradient stop in atmospheric section treatments. |
| Mint Glow | `#b2ffe7` | `--color-mint-glow` | accent | Brighter mint gradient color; use as a subtle glow, not a primary control color. |
| Earth Umber | `#753e30` | `--color-earth-umber` | semantic | Occasional warm gradient color; not a core interface or brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#ebf0f8` (Cloud Blue) · `--color-surface-2` → `#f3f6f7` (Mist Gray) · `--color-surface-3` → `#222326` (Graphite Ink) · `--color-text` → `#222326` (Graphite Ink) · `--color-text-muted` → `#717379` (Slate Copy) · `--color-text-subtle` → `#79797c` (Soft Graphite) · `--color-accent` → `#5d557c` (Muted Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222326` | `#ffffff` | 15.71:1 | AAA |
| `#222326` | `#ebf0f8` | 13.73:1 | AAA |
| `#222326` | `#f3f6f7` | 14.47:1 | AAA |
| `#717379` | `#ffffff` | 4.74:1 | AA |
| `#717379` | `#ebf0f8` | 4.14:1 | AA-large |
| `#717379` | `#f3f6f7` | 4.36:1 | AA-large |
| `#717379` | `#222326` | 3.32:1 | AA-large |
| `#79797c` | `#ffffff` | 4.34:1 | AA-large |
| `#79797c` | `#ebf0f8` | 3.79:1 | AA-large |
| `#79797c` | `#f3f6f7` | 4:1 | AA-large |

### Gradients

- `linear-gradient(rgb(210, 229, 255), rgb(255, 249, 238))`
- `linear-gradient(rgba(255, 255, 255, 0), rgba(185, 166, 255, 0.4) 90%, rgba(185, 166, 255, 0.4))`
- `linear-gradient(rgba(255, 255, 255, 0), rgba(131, 227, 222, 0.2) 90%, rgba(131, 227, 222, 0.4))`
- `radial-gradient(circle at 50% 0px, rgba(255, 255, 255, 0) 40%, rgba(63, 255, 194, 0.2) 90%, rgba(63, 255, 194, 0.4))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 400, 600, 500 | System sans-serif for navigation, headings, body copy, and controls. | Inter |

- **-apple-system:** Use semibold display headings with tight negative tracking; keep body text regular and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.452, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1 | -0.03em | — | -apple-system | Oversized hero statement and high-impact landing-page message. |
| h1 | 64px | 600 | 1 | -0.03em | — | -apple-system | Primary section or page headline. |
| h2 | 40px | 600 | 1 | -0.03em | — | -apple-system | Feature-section headline and prominent content heading. |
| h3 | 24px | 400 | 1.3 | 0 | — | -apple-system | Feature card titles and supporting section headings. |
| body | 18px | 400 | 1.3 | 0 | — | -apple-system | Product explanations and descriptive paragraphs. |
| caption | 16px | 500 | 1.4 | 0 | — | -apple-system | Compact review, rating, and supporting interface text. |
| nav | 16px | 500 | 1.4 | 0 | — | -apple-system | Header navigation and download control text. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 12, 16, 24, 32, 40, 48, 80, 160 px.
- Section rhythm 32px · element gap 8px · card padding 32px · max content width 1376px.

The measured content max width is 1376px, with a compact spacing system based on an 8px unit. Sections use a mix of centered, single-column introductions and wide split feature panels; the testimonial and device imagery can span broad horizontal bands. The page has a spacious rhythm between major chapters, while cards group denser feature details. White sections dominate the upper and lower page, interrupted by a full-width charcoal AI chapter. Alignment shifts intentionally between centered headings and left-aligned product descriptions.

## Shape & elevation

- Radius: button `9999px` · card `32px` · media `16px` · nav `9999px` · xs `16px` · sm `24px` · md `32px` · pill `9999px`
- Shadow `md` (media): `rgba(0, 0, 0, 0.25) 0px 0px 16px -8px`
- Shadow `inset` (text): `rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 4px 0px inset`
- Shadow `inset-2` (section, card): `rgb(255, 255, 255) 0px 0px 24px 0px inset`
- Shadow `md-2` (media): `rgba(0, 0, 0, 0.15) 0px 2px 16px 0px`
- Shadow `inset-3` (media): `rgba(255, 255, 255, 0.36) 0px 1px 0px 0px inset`
- Motion: standard transition `0.15s ease` on interactive elements.

Cards are primarily defined by pale fills, rounded corners, and the imagery they contain, not by visible borders. Media may use restrained soft shadows to separate devices from their backgrounds. Inset highlights appear in selected media and section treatments; avoid adding heavy elevation to ordinary content cards.

## Imagery

The page relies on phone and wearable product renders, app interface screenshots, lifestyle photos, and a hero video. Devices are layered against soft, luminous gradients; feature screenshots sit inside rounded panels, while lifestyle images appear as a horizontal mosaic and review context. Keep product UI legible and treat gradients as atmospheric backdrops. Some tiny interface colors and imagery details belong to app mockups, not the brand palette.

## Components

### Header navigation

Compact centered brand and navigation row, with secondary links and a dark pill-shaped download CTA.

### Download CTA

Near-black rounded pill with light text and an Apple mark; repeated in the header and hero.

### Hero product stage

Centered headline and supporting copy over a pale atmospheric gradient, with layered phone and wearable media.

### Feature cards

Rounded #ebf0f8 panels for health metrics and reviews, with app imagery and near-black text.

### Intelligence chapter

Full-width #1f2025 section with light text and large rounded gradient-backed feature panels.

### Testimonial carousel

Lifestyle-image strip above centered social-proof copy and horizontally arranged rounded review cards.

### Measured component styles

- **Primary button** (“Download app”): background #1f2025 · text #ebf0f8 · radius 128px · padding 8px 16px · 500 16px -apple-system
- **Card** (“Never leaving Isaac_andy97, September 9,”): background #ebf0f8 · text #222326 · radius 32px · padding 32px · 500 18px -apple-system
- **Navigation item** (“About Login Download app”): transparent background · text #222326 · radius 0px · padding 0px · 500 18px -apple-system

## Do

- Use white as the default canvas.
- Set primary text in #222326.
- Use cool pale surfaces for grouped feature content.
- Reserve dark charcoal for a distinct feature chapter.
- Keep gradient color soft and atmospheric.
- Show app screens and devices as the main evidence.

## Don't

- Do not use bright gradients as a page-wide default.
- Do not add prominent borders to cards.
- Do not make body copy compete with headlines.
- Do not flatten every section into the same layout.
- Do not mistake mockup colors for interface brand colors.
- Do not use heavy shadows on ordinary cards.

## Agent prompt

Build a new Bevel-style health product page with a calm white canvas (#ffffff), Graphite Ink text (#222326), and Cloud Blue surfaces (#ebf0f8). Use a system sans-serif such as Inter, with bold, tightly tracked headlines and restrained muted body copy. Organize content into spacious, distinct chapters: centered introduction, product-led feature panels, and an optional full-width dark section. Use pale gradients such as Sky Wash (#d2e5ff), Warm Cream (#fff9ee), and Lavender Haze (#e3dbff) only as soft backdrops. Prioritize believable phone, wearable, and app-screen imagery; keep interface details legible. Give cards generous rounded corners, relying on fill and media rather than borders. Maintain strong contrast, clear download actions, and varied alignment without making the layout visually busy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero with centered navigation, headline, CTA, and layered device imagery. | primary download CTA, app rating proof, floating app download prompt | pale gradient backdrop, oversized centered heading, layered devices |
| 2 | testimonials | Centered social-proof heading over a wide, horizontally arranged image strip. | member proof, brand trust signals | centered headline, lifestyle and app-image carousel |
| 3 | feature-grid | Centered introduction followed by a three-column health-metric card group. | feature comparison, health metrics overview | pale rounded cards, app screen imagery |
| 4 | feature-split | Wide split feature panel with copy on one side and food-tracking screens on the other. | feature explanation, meal tracking showcase | soft gradient panel, app interface collage |
| 5 | feature-split | Wide split feature panel pairing record-management imagery and copy. | feature explanation, health-record organization | cool-toned backdrop, phone and floating app marks |
| 6 | feature-grid | Dark four-column visual strip with character imagery and short labels. | coach persona selection | charcoal background, floating character media |
| 7 | how-it-works | Centered heading and explanatory copy within the charcoal chapter. | AI coach introduction | light-on-dark typography, centered layout |
| 8 | feature-split | Large rounded feature card with left-aligned copy and supporting product media. | ask questions, answers grounded in personal metrics | light gradient card, dark chapter background |
| 9 | feature-split | Large rounded gradient-backed card within the dark feature chapter. | daily summaries, reminders and nudges | warm-tinted gradient, rounded feature panel |
| 10 | feature-split | Wide rounded feature card with concise copy and product imagery. | research-informed answers, source discovery | cool pastel panel, dark surrounding section |
| 11 | feature-split | Wide rounded feature card with copy and supporting media. | goal-based workout planning, schedule-aware recommendations | cool gradient wash, rounded panel |
| 12 | feature-grid | Bright three-column feature area combining a feature list and phone app demonstrations. | feature discovery, in-app feature previews | white background, phone mockups, compact feature rows |
| 13 | feature-split | Centered copy within a wide, dark green-toned visual panel. | privacy reassurance, data ownership message | large lock graphic, dark atmospheric panel |
| 14 | gallery | Wide multi-column mosaic of narrow lifestyle images. | lifestyle storytelling | rounded image tiles, asymmetric photo grid |
| 15 | testimonials | Centered title and introduction above a horizontal row of review cards. | star ratings, user reviews, social proof | lifestyle image band, rounded pale review cards |

## Source CSS custom properties (selected)

```css
--_typography---font-families--sf-pro: -apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;
--v3-bento-radius: 36px;
--_theme---text--primary: #1f2025;
--_typography---heading-4--font-size-lg: clamp(1.25rem,.357vw + 1.179rem,1.5rem);
--_typography---heading-4--font-weight: 600;
--_typography---heading-4--letter-spacing: -.01em;
--_typography---heading-6--font-size-lg: .75rem;
--_typography---heading-6--font-weight: 600;
--_typography---heading-6--letter-spacing: 0em;
--_theme---background--primary: white;
--_typography---body--font-size: 1.125rem;
--_typography---paragraph--font-weight: 400;
--_typography---paragraph--letter-spacing: 0em;
--_typography---heading-1--font-size-lg: clamp(3rem,2.857vw + 2.429rem,5rem);
--_typography---heading-1--font-weight: 600;
--_typography---heading-1--letter-spacing: -.03em;
--_typography---heading-5--font-weight: 600;
--_typography---heading-5--letter-spacing: -.01em;
--_spacing---rems--0-5rem: .5rem;
--_spacing---rems--1rem: 1rem;
--_theme---text--secondary: color-mix(in hsl,#1f2025/**/60%,#1f2025/**/0%);
--_typography---heading-3--font-size-lg: clamp(2rem,.714vw + 1.857rem,2.5rem);
--_typography---heading-3--font-weight: 600;
--_typography---heading-3--letter-spacing: -.03em;
--_typography---heading-2--font-size-lg: clamp(2.5rem,2.143vw + 2.071rem,4rem);
--_typography---heading-2--font-weight: 600;
--_typography---heading-2--letter-spacing: -.03em;
--_spacing---rems--0rem: 0rem;
--_spacing---rems--1-5rem: 1.5rem;
--_responsive-spacing---80-40: clamp(2.5rem,3.571vw + 1.786rem,5rem);
--_spacing---rems--2rem: 2rem;
--_responsive-spacing---64-40: clamp(2.5rem,2.143vw + 2.071rem,4rem);
--_responsive-spacing---16-8: clamp(.5rem,.714vw + .357rem,1rem);
--_colors---secondary--red: #f46c41;
--_spacing---rems--2-5rem: 2.5rem;
--_spacing---rems--0-25rem: .25rem;
--_spacing---rems--0-75rem: .75rem;
--_spacing---rems--0-875rem: .875rem;
--_spacing---rems--1-125rem: 1.125rem;
--_spacing---rems--1-25rem: 1.25rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bevel-health