Refto
Steps

Steps

Track your daily steps, workouts, and health data with Steps - the ultimate fitness companion for your Apple device.

Large TypeMobile AppHealthLightClean
3.0
8
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Steps Home design analysis

Bright Wellness Sheet is a friendly product-marketing system that relies on air, scale, and soft product illustration instead of lifestyle overload. The page should feel optimistic and helpful, with the product screensho...

Key Takeaways

  • Primary ( 171717): Headline ink and the default CTA fill.
  • Secondary ( F6F6F3): Quiet supporting surfaces where content needs grouping.
  • Tertiary ( FF8A26): Cheerful highlight for brand cues and hero objects.
  • Use one rounded grotesk across headlines, body copy, and labels.
  • Make the hero headline oversized and center aligned before adding any extra decoration.
  • Keep supporting copy light and readable, never compressed or all-caps.

Overview

Bright Wellness Sheet is a friendly product-marketing system that relies on air, scale, and soft product illustration instead of lifestyle overload. The page should feel optimistic and helpful, with the product screenshots doing most of the persuasion.

Image Direction

Use one oversized hero object, then support it with rounded screenshot tiles and simple 3D icons. Images should feel helpful and warm rather than cinematic or hyper-athletic.

Colors

  • Primary ( 171717): Headline ink and the default CTA fill.
  • Secondary ( F6F6F3): Quiet supporting surfaces where content needs grouping.
  • Tertiary ( FF8A26): Cheerful highlight for brand cues and hero objects.

Typography

  • Use one rounded grotesk across headlines, body copy, and labels.
  • Make the hero headline oversized and center aligned before adding any extra decoration.
  • Keep supporting copy light and readable, never compressed or all-caps.

Design.md

System Overview

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

Bright Wellness Sheet

A clean wellness landing system with oversized grotesk headlines, white space, and warm mobile-product illustration.

Bright, optimistic, and product-led.

Primary mode: lightconsumer wellness app marketingui-rich

Theme

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

Visual atmosphere
Summary
Bright, optimistic, and product-led.
Density
3
Variance
2
Motion
2
Signals
white paper field · dark ink typography · soft orange hero object · oversized mobile proofs

Colors

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

Palette colors
Pure Canvas
#FFFFFF
Ink Black
#171717
Warm Orange
#FF8A26
Soft Mist
#F6F6F3
Quiet Line
#EAEAEA
Usage rules
Keep the page mostly white.
Use orange as a cheerful signal, not as a blanket background.
Reserve the dark fill for primary actions.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
80px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
999px
card
28px
tile
20px

Typography Families

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

Display
Bricolage Grotesque
friendly rounded grotesk
Body
Bricolage Grotesque
clear app-marketing voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
3.75rem/—
Display
H2
1.875rem/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use scale and line breaks before heavy weight changes. · Keep supporting copy airy and center it in the hero.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-220ms
Easing
cubic-bezier(.4,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-220ms
easingcubic-bezier(.4,0,.2,1)

Layout Principles

Lead with one centered statement and one hero object.
Use large rounded tiles instead of dense feature grids.
Let screenshot strips create rhythm below the fold.

Component Preview

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

Buttons primary
Base Attributes
Background
#171717
Text
#FFFFFF
Border
1px solid #171717
Radius
{tokens.radii.control}->999px
Padding
10px 18px
Min height
40px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#171717
Border
1px solid #EAEAEA
Radius
{tokens.radii.control}->999px
Padding
10px 18px
Min height
40px
Shadow
none
Typography
label
Cards feature
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#171717
Border
1px solid #F1F1F1
Radius
{tokens.radii.card}->28px
Padding
{tokens.spacing.card_padding}->24px
Shadow
0 12px 30px rgba(0,0,0,0.04)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#5B5B5B
Height
56px
Active text
#171717
Item padding
0px
Item radius
{tokens.radii.control}->999px

Image direction

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

Role
supportive
Media types
  • -
    app mockup
  • -
    soft 3d icon
Subject patterns
  • -
    one centered hero icon
  • -
    phone screenshots inside rounded cards
Composition logic
  • -
    Keep imagery large and immediately readable.
  • -
    Use one warm accent object before introducing smaller supporting visuals.
Treatment rules
  • -
    Prefer soft lighting and simple object silhouettes.
  • -
    Keep illustration style lighter than the typography.
Generation cues
  • -
    Describe a mobile screenshot frame plus one wellness icon or route object.
  • -
    Use soft orange, off-white, and clean shadow transitions rather than glossy chrome.
Avoid
  • -
    No generic fitness stock photos.
  • -
    No neon gradients or gamer-style glow.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark-mode futurism.
  • -
    No dashboard-density hero blocks.
  • -
    No accent-saturated panels that compete with the product screenshots.