Bevel Health

Overview

Bevel Health embodies a **Data-Forward Minimalism** aesthetic—a design philosophy that prioritizes clarity and actionability over visual ornamentation. The brand serves health-conscious individuals who wear wearables and want to understand their biomarkers without cognitive overload. The UI evokes precision, trust, and calm confidence: a serene light background (rgb(243, 246, 247)) paired with a deep, authoritative dark navy primary (rgb(31, 32, 37)) creates visual hierarchy that feels both professional and approachable. Accent colors—a vibrant golden yellow (rgb(254, 204, 0)) for highlights and a sky blue (rgb(90, 156, 255)) for data visualization—inject energy without disrupting the meditative quality of the interface. The emotional response is one of empowerment: users feel in control of their health data, not overwhelmed by it.

Bevel's voice is conversational yet precise—never alarmist, always evidence-based. The brand speaks in active, present-tense language: "Your recovery is at 84%" rather than "Recovery metrics indicate…" Vocabulary leans toward wellness vernacular (strain, recovery, biomarkers, coaching) while remaining accessible to non-specialists. The tone is encouraging without being patronizing, technical without being jargon-heavy. Example sentence in Bevel's voice: "Your sleep quality improved 12% this week—here's what changed in your routine."

Colors

Bevel's color system is anchored in a **light-first, data-driven palette** where surface colors (rgb(243, 246, 247) as primary surface, rgb(235, 240, 248) as container) provide a clean, medical-grade canvas. The primary color—a deep charcoal navy (#1f2025)—is reserved for text, buttons, and interactive elements that demand user attention; it conveys authority and trustworthiness without the coldness of pure black. The secondary accent, a warm golden yellow (#fecc00), is deployed sparingly on CTAs, achievement badges, and data highlights to signal progress and positive outcomes. The tertiary blue (#5a9cff) is used for data visualization, charts, and secondary interactive states, creating visual distinction from the primary action layer. Error states use a warm coral (#f46c41) to indicate ca

Typography

Bevel's type system uses **Inter** as the primary typeface—a geometric sans-serif that balances warmth with precision, essential for a health app where clarity is non-negotiable. The hierarchy spans from a display size (75px, fontWeight 600, lineHeight 84px, letterSpacing -0.02em) for hero headlines down to label-sm (12px, fontWeight 500, lineHeight 16px, letterSpacing 0.02em) for metadata and timestamps. Body text sits at 16px with a 400 fontWeight and 24px lineHeight, providing comfortable reading at arm's length on mobile devices. Headlines use fontWeight 600 to create visual weight without heaviness; body copy uses 400 to maintain legibility in longer passages. The letterSpacing tightens on larger sizes (-0.02em on display, -0.015em on headline-lg) to create optical balance, while smal

Layout

Bevel uses a **fluid 12-column grid** with a maximum container width of 1280px, allowing the design to breathe on desktop while remaining compact on mobile. The page rhythm is governed by a semantic spacing scale: `lg` (40px) separates major sections (hero, feature blocks, testimonials), `md` (24px) divides subsections and card groups, and `sm` (12px) provides internal padding within components. The gutter width is fixed at 24px on desktop, collapsing to 16px on tablet and 12px on mobile to maintain proportional margins. White space is treated as a first-class design element—the hero section uses 96px top padding (from computed styles) to create breathing room before the headline, and card stacks maintain 24px vertical gaps to prevent visual clustering. The container max-width of 1280px en

Elevation & Depth

Depth in Bevel is achieved through a **subtle shadow and surface-color hierarchy** rather than dramatic layering. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on surface-container background colors to define the plane; Level 2 (Standard Cards) applies `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)` with a 1px solid border at rgba(202, 203, 206, 0.5) to create gentle separation; Level 3 (Modals/Overlays) uses `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12)` with a 2px border to signal prominence. Hover states transition to Level 2 via `transition: all 200ms ease-ou

Shapes

Bevel employs a **Soft-Technical** border-radius philosophy: sharp enough to feel modern and data-driven, soft enough to feel approachable and human. Buttons and primary CTAs use `border-radius: 128px` (computed as 9999px in the token system, rendered as a full pill) to signal action and create visual contrast against rectangular cards. Standard cards use `border-radius: 24px` (1.5rem) to provide visual softness while maintaining a structured, grid-aligned appearance. Input fields and secondary containers use `border-radius: 8px` (0.5rem) for a more technical, form-like appearance. The rationa

Components

Action Elements Buttons are the primary interaction layer. The primary button uses `backgroundColor: {colors.primary}` (#1f2025), `textColor: {colors.on-primary}` (#ebf0f8), `border-radius: 128px`, and `padding: 12px 24px` with a fixed `height: 48px` for touch-friendly sizing. On hover, the background transitions to `{colors.primary-container}` (#2d2e33) via `transition: all 200ms ease-out`, maintaining the same text color. Secondary buttons use a transparent background with a 2px solid border in primary color, inverting to a surface-container-high background on hover. Accent buttons (for positive actions like "Download") use the secondary yellow (#fecc00) with dark text, transitioning to secondary-fixed-dim (#e6b800) on hover. All buttons include a 200ms ease-out transition to prevent

Do's and Don'ts

**Do**

• Do use the primary navy (#1f2025) for all primary CTAs and text—it signals trust and authority in a health context.
• Do apply the secondary yellow (#fecc00) sparingly on achievement badges, progress indicators, and positive outcomes to reinforce the emotional reward of health progress.
• Do maintain 24px vertical spacing between major sections and 12px between subsections to create visual rhythm and prevent cognitive overload.
• Do use Inter fontFamily at 600 fontWeight for all headlines and 400 fontWeight for body text to maintain the data-forward, professional tone.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-out timing to provide tactile feedback without distraction.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary colors—Bevel's palette uses carefully calibrated near-blacks and off-whites (rgb(31, 32, 37) and rgb(235, 240, 248)) to reduce eye strain and maintain the calm, medical aesth
• Don't apply shadows larger than `0 8px 32px rgba(0, 0, 0, 0.12)` or use blur effects (backdrop-filter)—data clarity is paramount, and heavy shadows obscure content.
• Don't mix border-radius values arbitrarily; stick to the defined scale (8px for inputs, 24px for cards, 128px for buttons) to maintain visual coherence.
• Don't use more than three accent colors in a single view—Bevel's palette (primary navy, secondary yellow, tertiary blue) is intentionally limited to prevent visual chaos and maintain focus on data.