Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.

Back to Browse

Ro

Healthcare

Ro's brand radiates calm medical authority through gradient transitions from cool grays to warm teals, creating a soothing yet confident healthcare atmosphere. The custom 'Ro Sans' typography maintains consistent 400 weight across all elements, establishing approachable professionalism rather than clinical sterility.

(0)
0
Visit Website
Screenshot of Ro website

Design Identity

Signature Color

Ro Teal

#add8d5

Healthcare trust meets wellness optimism - bridging clinical reliability with accessible modern medicine

Visual Identity

Gradient card overlays that transition from muted grays to soft teals, combined with large-scale lifestyle photography and the distinctive 'ro' lowercase wordmark creates immediate recognition through color-story storytelling.

Component Style

Buttons feature generous 24px horizontal padding with subtle rounded corners (4-8px), no harsh shadows or borders. Cards use soft gradients as backgrounds rather than solid colors, creating depth through color rather than elevation. Everything feels pillowy and approachable.

Spacing Philosophy

Breathing room defines the experience - large hero sections with ample whitespace, 50-72px top margins create separation, while components maintain intimate 12px vertical padding. The rhythm alternates between expansive storytelling areas and focused interaction zones.

Design Principles

  • Border radius stays minimal at 4-8px maximum, except pill buttons at 27px
  • Typography weight remains consistently 400 across all elements - no bold hierarchy
  • Gradients replace solid backgrounds on primary surfaces
  • Button padding follows 12px vertical, 24px horizontal standard
  • Transition timing uses .3s normal duration for most interactions

Target Audience

Health-conscious millennials and Gen X who prioritize convenience and discretion in healthcare, seeking medical solutions that feel more like wellness brands than clinical institutions

Mood

clinical-calmgradient-soothinglifestyle-aspirationalmedical-accessiblewellness-forwarddigitally-nativetrust-building

Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.

Design System

Typography Scale

ElementFontSizeWeightLine Height
body"Ro Sans"16px40018.4px
h2"Ro Sans"32px40038px
h3"Ro Sans"23px40028px
h4"Ro Sans"26px40031px
p"Ro Sans"14px40020px
a"Ro Sans"16px40018.4px
button"Ro Sans"16px40018.4px
nav"Ro Sans"16px40018.4px
header"Ro Sans"16px40018.4px
footer"Ro Sans"16px40018.4px

Color Palette

#d70f0f
#ffdbc7
#e5f2f2
#add8d5
#f3f5f6
#e1e4e7
#bac3d3
#f4f4ef
#f8ffa1
#ffa674
#ffe6e4
#ff6554

UI Elements

button
a
nav
button-primary

Similar Designs

Completely Different Designs

Discussion

Loading comments...