Refto
Dawn

Dawn

Evidence-based AI for mental health. Personalized support for everyday emotional challenges. Private, science-backed, and judgement-free. Sign up for early access.

Scrolling AnimationGradientAiHealthWhitelistAnimationColorfulBig Background ImageClean
5.0
11
Visits
Visit

Categories

AiHealth

Available Pages

Home

Version History

Design Analysis

Dawn Home design analysis

Keep the interface emotionally safe and gently optimistic. Use rounded macro-panels and warm gradients to avoid clinical coldness. Lead with reassurance and clarity, not with product complexity. Use warm sky photography...

Key Takeaways

  • Keep the interface emotionally safe and gently optimistic.
  • Use rounded macro-panels and warm gradients to avoid clinical coldness.
  • Lead with reassurance and clarity, not with product complexity.
  • Use warm sky photography and approachable human portraits.
  • Round image windows heavily.
  • Keep the photographic language soft, sunlit, and breathable.

Overview

  • Keep the interface emotionally safe and gently optimistic.
  • Use rounded macro-panels and warm gradients to avoid clinical coldness.
  • Lead with reassurance and clarity, not with product complexity.

Image Direction

  • Use warm sky photography and approachable human portraits.
  • Round image windows heavily.
  • Keep the photographic language soft, sunlit, and breathable.

Colors

  • Cream should dominate the shell.
  • Dark brown should replace harsh black for most text and dark chapters.
  • Use amber as a hopeful action color, not as constant decoration.

Typography

  • Use a serif for the emotional headline voice.
  • Use a neutral sans for forms, labels, and supporting copy.
  • Keep line lengths short and easy to digest.

Design.md

System Overview

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

Therapeutic Warm Gradient Editorial

A therapy-adjacent landing system built from soft cream backgrounds, amber-to-brown gradients, serif reassurance, and generously rounded panels.

Warm, reassuring, and sunlight-soaked.

Primary mode: lightmental health supportcontent-rich

Theme

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

Visual atmosphere
Summary
Warm, reassuring, and sunlight-soaked.
Density
2
Variance
3
Motion
2
Signals
amber gradient field · cream shell · serif reassurance · rounded wellness cards

Colors

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

Palette colors
Cream Base
#FBF3EB
Cocoa Brown
#4B1F05
Amber Glow
#F5B036
Sunlit Peach
#F7D7AF
Sky Blue
#3C789C
Usage rules
Keep the system warm and low-stress.
Use amber for action and hopeful emphasis, not as constant fill.

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.5rem
section_gap
clamp(4rem, 9vw, 8rem)

Token Radii

Corner radii tokens with a live surface sample.

control
999px
card
28px
panel
36px
full
999px

Typography Families

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

Display
Source Serif Pro
gentle editorial serif
Body
Inter
soft clinical sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.8rem, 5vw, 4.5rem)/—
Display
H2
clamp(2rem, 3.8vw, 3rem)/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Let serif headlines carry emotional warmth. · Keep body copy short, even, and easy to scan.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-240ms
Easing
cubic-bezier(.25,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-240ms
easingcubic-bezier(.25,0,.2,1)

Layout Principles

Use oversized rounded panels to soften section transitions.
Move from warm cream into dark brown chapters and back to cream, like a guided emotional arc.

Component Preview

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

Buttons primary
Base Attributes
Background
#F5B036
Text
#4B1F05
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Min height
44px
Shadow
none
Buttons secondary
Base Attributes
Background
#FFF6EE
Text
#4B1F05
Border
1px solid rgba(75,31,5,0.08)
Radius
999px
Padding
0.8rem 1.15rem
Min height
44px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFF7EF
Text
#4B1F05
Border
1px solid rgba(75,31,5,0.06)
Radius
28px
Padding
1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFF9F3
Text
#4B1F05
Border
1px solid rgba(75,31,5,0.08)
Radius
999px
Padding
0.8rem 1rem
Min height
48px
Placeholder
rgba(75,31,5,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#4B1F05
Height
52px
Active text
#4B1F05
Item padding
0.4rem 0.7rem
Item radius
999px

Image direction

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

Role
supportive
Media types
  • -
    portrait photography
  • -
    sky backdrop
Subject patterns
  • -
    sunlit human portrait
  • -
    small trustworthy expert row
Composition logic
  • -
    Use images to create emotional safety and optimism.
  • -
    Keep the sky motif open and uncluttered.
Treatment rules
  • -
    Favor warm skin tones and soft sunlight.
  • -
    Avoid stark studio flash or corporate stock poses.
Generation cues
  • -
    Prompt for sunrise warmth, cream UI framing, and hopeful but calm faces.
Avoid
  • -
    No gloomy noir mood.
  • -
    No hyper-saturated wellness cliché gradients.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No harsh medical blues.
  • -
    No hard-edged modal or dashboard chrome.
  • -
    No aggressive animation language.