Refto
Holo

Holo

Test 110+ biomarkers every year, track all your health in a single place, and get insights from top doctors.

Scrolling AnimationSaasDigital ProductHealthLightClean
4.0
7
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Holo Home design analysis

Build for a wellness product that wants to feel trustworthy, modern, and unrushed. Let the hero feel editorial rather than app-store promotional. One large serif statement should do most of the emotional work. Keep the s...

Key Takeaways

  • Build for a wellness product that wants to feel trustworthy, modern, and unrushed.
  • Let the hero feel editorial rather than app-store promotional. One large serif statement should do most of the emotional work.
  • Keep the shell nearly monochrome so the few image-led moments feel intentional.
  • Use one quiet clinical or magnified subject per module rather than many small illustrations.
  • Favor microscopy textures, device photos, and restrained data-map graphics over lifestyle photography.
  • Keep imagery inside pale rounded frames with broad white margins.

Overview

  • Build for a wellness product that wants to feel trustworthy, modern, and unrushed.
  • Let the hero feel editorial rather than app-store promotional. One large serif statement should do most of the emotional work.
  • Keep the shell nearly monochrome so the few image-led moments feel intentional.

Image Direction

  • Use one quiet clinical or magnified subject per module rather than many small illustrations.
  • Favor microscopy textures, device photos, and restrained data-map graphics over lifestyle photography.
  • Keep imagery inside pale rounded frames with broad white margins.

Colors

  • Use a warm white or near-white field for almost the entire experience.
  • Keep primary text and decisive actions in ink black.
  • Use soft stone gray for secondary emphasis and large support headlines.

Typography

  • Use an editorial serif for the main hero message and rare emphasis moments.
  • Keep navigation, cards, forms, and explanatory copy in a quiet modern sans-serif.
  • Prefer scale and spacing over aggressive weight jumps.

Design.md

System Overview

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

Quiet Biomarker Wellness Canvas

A spacious wellness product system that combines editorial serif emphasis, soft clinical cards, and decisive black pill actions.

Calm, clinical-soft, spacious, and quietly premium.

Primary mode: lightwellness diagnostics softwareui-rich

Theme

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

Visual atmosphere
Summary
Calm, clinical-soft, spacious, and quietly premium.
Density
3
Variance
3
Motion
1
Signals
serif-led hero message · broad white negative space · rounded light-gray feature cards

Colors

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

Palette colors
Porcelain Field
#FBFAF8
Ink Black
#171615
Mist Card
#F3F2F1
Stone Text
#767370
Mineral Teal
#3E889B
Usage rules
Keep UI chroma low and let imagery carry the cooler accents.
Use black for the strongest call to action instead of bright brand color.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
5rem
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
24px

Typography Families

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

Display
EB Garamond
editorial and calm
Body
Geist
clean modern utility

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Label
1rem/—
Label

Typography Rules

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

Rules
Reserve the serif voice for the hero and rare emphasis moments. · Keep the rest of the system in a quiet sans-serif without weight theatrics.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Center the first message with broad white space and minimal supporting chrome.
Pair one image-led card with one explanatory card rather than building equal grids.
Use comparison tables and stacked step panels when explanation becomes procedural.

Component Preview

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

Buttons primary
Base Attributes
Background
#171615
Text
#FFFFFF
Border
1px solid #171615
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#171615
Border
1px solid #E2DEDA
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
46px
Shadow
none
Typography
label
Chips default
Base Attributes
Background
#F3F2F1
Text
#171615
Border
1px solid transparent
Radius
{tokens.radii.control}->999px
Padding
0.45rem 1rem
Min height
32px
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F3F2F1
Text
#171615
Border
1px solid transparent
Radius
{tokens.radii.component}->24px
Padding
2rem
Shadow
none
Cards feature
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#171615
Border
1px solid #E2DEDA
Radius
{tokens.radii.component}->24px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#171615
Border
1px solid #D2CFCC
Radius
{tokens.radii.control}->999px
Padding
0.8rem 1.25rem
Min height
48px
Placeholder
#767370
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FBFAF8
Text
#171615
Height
64px
Active text
#171615
Item padding
0.25rem 0
Item radius
0px

Image direction

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

Role
supportive
Media types
  • -
    microscopy texture
  • -
    product photo
  • -
    clinical diagram
Subject patterns
  • -
    one abstract lab image per feature block
  • -
    one phone or app surface paired with clean white margins
Composition logic
  • -
    Keep the subject large and quiet inside a rounded pale frame.
  • -
    Favor clinical calm over lifestyle exuberance.
Treatment rules
  • -
    Use cool blue-green tones inside imagery while keeping the UI shell nearly monochrome.
  • -
    Let white space around the asset stay generous.
Generation cues
  • -
    Describe the subject as clinical, magnified, softly lit, and minimally staged.
  • -
    Pair product shots with pale rounded containers rather than free-floating cutouts.
Avoid
  • -
    No glossy biotech futurism.
  • -
    No stock-photo wellness scenes.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No saturated wellness gradients across the UI shell.
  • -
    No enterprise dashboard framing or dense data tables outside the pricing comparison.
  • -
    No hard-edged cards or square CTA geometry.