Refto
Bevel

Bevel

Bevel is the AI health companion that turns your data into personalized insights and recommendations across sleep, fitness, nutrition, and more.

Mobile AppAiHealth
5.0
7
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Bevel Home design analysis

Build the page from calm white space, soft gradients, and device proof. Anchor trust with one charcoal action button or one dark reassurance block per chapter. Keep the surface polished and modern without tipping into ge...

Key Takeaways

  • Build the page from calm white space, soft gradients, and device proof.
  • Anchor trust with one charcoal action button or one dark reassurance block per chapter.
  • Keep the surface polished and modern without tipping into generic fintech slickness.
  • Use clean device mockups and health-oriented app close-ups.
  • Support devices with diffused lilac, mint, and blush glows.
  • Keep product imagery crisp and centered.

Overview

  • Build the page from calm white space, soft gradients, and device proof.
  • Anchor trust with one charcoal action button or one dark reassurance block per chapter.
  • Keep the surface polished and modern without tipping into generic fintech slickness.

Image Direction

  • Use clean device mockups and health-oriented app close-ups.
  • Support devices with diffused lilac, mint, and blush glows.
  • Keep product imagery crisp and centered.

Colors

  • The page should stay mostly pale and airy.
  • Pastels belong to large card washes, not to tiny UI chrome.
  • Charcoal should be used for primary action, privacy, and trust anchors.

Typography

  • Use bold modern sans headlines and a clean supporting sans for everything else.
  • Keep typography crisp, large, and spacious.
  • Avoid clinical microcopy density.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Pastel Health Intelligence

An airy health-tech system pairing white space, charcoal utility chrome, pastel gradient cards, and device-led proof.

Airy, polished, and quietly clinical.

Primary mode: lightconsumer health technologyui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Airy, polished, and quietly clinical.
Density
3
Variance
2
Motion
3
Signals
pale shell · floating nav pill · pastel feature cards · charcoal utility anchor

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Ice White
#F3F6F7
Graphite
#1F2025
Soft Lilac
#E9E6FF
Soft Mint
#DBF4EF
Soft Blush
#F7E5E2
Usage rules
Keep gradients soft and low-contrast.
Use charcoal sparingly to anchor trust and action.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.25rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
32px
card
22px
panel
26px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Inter
modern health-tech grotesk
Body
Inter
clean product sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.7rem, 5vw, 4.5rem)/—
Display
H2
clamp(1.9rem, 3.6vw, 2.8rem)/—
H2
Body
1rem/—
Body
Label
0.88rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use big clean type with little ornament. · Keep line-height open and avoid dense clinical tables on the marketing surface.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.22,1,.36,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.22,1,.36,1)

Layout Principles

Use stacked device proof and wide breathing space.
Alternate pale informative sections with one dark reassurance block.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#1F2025
Text
#EBF0F8
Border
none
Radius
999px
Padding
0.75rem 1.1rem
Min height
40px
Shadow
none
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.6)
Text
#222326
Border
1px solid rgba(34,35,38,0.08)
Radius
999px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
linear-gradient(135deg, #F1F3FF 0%, #FFF4F1 100%)
Text
#222326
Border
1px solid rgba(34,35,38,0.04)
Radius
22px
Padding
1.5rem
Shadow
none
Cards dark
Feature Card
Component preview content
Base Attributes
Background
#23242B
Text
#F3F6F7
Border
none
Radius
22px
Padding
1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.6)
Text
#222326
Height
54px
Active text
#222326
Item padding
0.45rem 0.8rem
Item radius
999px
Inputs default
Base Attributes
Background
#FFFFFF
Text
#222326
Border
1px solid rgba(34,35,38,0.08)
Radius
14px
Padding
0.8rem 1rem
Min height
44px
Placeholder
rgba(34,35,38,0.45)

Scroll motion

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Scroll driver
smooth
Cadence
calm
Patterns
  • -
    section reveal
  • -
    device stack progression
Page logic
  • -
    Move through the page with a steady reveal cadence.
  • -
    Keep final resting frames fully legible without the scroll effect.
Constraints
  • -
    Do not let motion overpower readability.
  • -
    Use motion to stage proof, not to create spectacle.
Reduced motion
  • -
    Remove smooth scrolling and reveal choreography while preserving the final layout.

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Media types
  • -
    device mockup
  • -
    soft product render
Subject patterns
  • -
    phone-and-watch pair
  • -
    clean app screen close-up
Composition logic
  • -
    Keep devices centered in large light fields.
  • -
    Let pastel glows support, not swallow, the product.
Treatment rules
  • -
    Use restrained gradients and crisp UI edges.
  • -
    Avoid hard metallic reflections.
Generation cues
  • -
    Prompt for health-tech device mockups, soft lilac or mint diffusion, and calm product lighting.
Avoid
  • -
    No gamer-tech neon.
  • -
    No cluttered data visualization walls.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No hard medical alarm colors.
  • -
    No overly glassmorphic chrome across the whole page.
  • -
    No dense B2B dashboard tables on the marketing surface.