Refto
LookAway

LookAway

Smart screen break, blink, and posture reminders for Mac that adapt to your work. Reduce eye strain and build healthier screen habits without disrupting your flow.

Large TypeDesktop AppGradientHealthGlassProductBig Background VideoDarkCleanTransitions
4.0
18
Visits
Visit

Available Pages

Home

Version History

Design Analysis

LookAway Home design analysis

Build for a calm dark wellness product, not a hard-edged productivity dashboard. Let the first impression feel restorative and soft, with rounded framing and glow-backed depth. Keep the message reassuring and low-pressur...

Key Takeaways

  • Build for a calm dark wellness product, not a hard-edged productivity dashboard.
  • Let the first impression feel restorative and soft, with rounded framing and glow-backed depth.
  • Keep the message reassuring and low-pressure. The product should feel like a quiet helper.
  • Use one centered icon or product-state panel per major section.
  • Keep imagery dark, softly blurred, and gently lit with amber or violet ambience.
  • Let product-state surfaces read as large rounded panels rather than as thin screenshots.

Overview

  • Build for a calm dark wellness product, not a hard-edged productivity dashboard.
  • Let the first impression feel restorative and soft, with rounded framing and glow-backed depth.
  • Keep the message reassuring and low-pressure. The product should feel like a quiet helper.

Image Direction

  • Use one centered icon or product-state panel per major section.
  • Keep imagery dark, softly blurred, and gently lit with amber or violet ambience.
  • Let product-state surfaces read as large rounded panels rather than as thin screenshots.

Colors

  • Use near-black as the global base.
  • Keep primary text warm white.
  • Let color appear as soft glow, green numeric emphasis, or a featured outline rather than as large solid fills.

Typography

  • Use a clean modern sans-serif with large centered headlines.
  • Keep support text understated and easy to scan.
  • Let the softness come from spacing and contrast, not from decorative letterforms.

Design.md

System Overview

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

LookAway Design Language

A soft dark wellness-product system with rounded capsules, muted glow fields, and calm product-state surfaces.

Calm, restorative, and softly premium.

Primary mode: darkwellbeing softwareui-rich

Theme

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

Visual atmosphere
Summary
Calm, restorative, and softly premium.
Density
4
Variance
3
Motion
3
Signals
near-black shell · rounded capsule navigation · violet and amber glow · soft white CTA contrast

Colors

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

Palette colors
Night Base
#070707
Panel Charcoal
#211F1F
Warm White
#F8F5EF
Wellbeing Green
#8FD24A
Glow Violet
#CF58FF
Usage rules
Keep the base very dark and matte.
Let color appear as glow, pricing emphasis, or featured outline rather than solid blocks.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
card_padding
1.5rem
feature_padding
2rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
24px
shell
28px

Typography Families

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

Display
"SF Pro Display"
soft modern sans
Body
"SF Pro Display"
calm utility sans
Mono
"SF Mono"
light support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 4.8rem)/—
Display
H2
clamp(2rem, 3vw, 3rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Keep headlines large, centered, and easy to breathe through. · Let support copy stay quiet and reassuring.

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 a centered hero with one bright action and one dominant product-state panel.
Keep sections isolated and generously spaced.
Move into three-card pricing and large FAQ rows without abandoning the soft dark shell.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFFFFF
Text
#111111
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
36px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.04)
Text
rgba(248,245,239,0.92)
Border
1px solid rgba(255,255,255,0.12)
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.4rem
Min height
44px
Shadow
inset 0 1px 0 rgba(255,255,255,0.04)
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#211F1F
Text
#F8F5EF
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.component}->24px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards featured
Feature Card
Component preview content
Base Attributes
Background
#211F1F
Text
#F8F5EF
Border
1px solid transparent
Radius
{tokens.radii.component}->24px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.04)
Text
rgba(248,245,239,0.68)
Height
56px
Active text
#FFFFFF
Item padding
0.5rem 0.9rem
Item radius
{tokens.radii.control}->999px

Three d scene

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

Role
supportive
Integration
hero-object
Behaviors
  • -
    ambient glow field
  • -
    soft canvas-backed atmosphere
Spatial logic
  • -
    Use a spatial glow or field behind the hero to support depth without competing with the copy.
  • -
    Keep the spatial layer passive enough that the resting frame still explains the product.
Material logic
  • -
    Favor diffuse, blurred, and low-detail surfaces over literal 3D object spectacle.
Fallback
  • -
    Replace the live scene with a still glow field or blurred render that preserves the same composition.
Reduced motion
  • -
    Freeze the glow field and keep the settled hero intact.

Image direction

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

Role
supportive
Media types
  • -
    blurred product screenshot
  • -
    soft icon render
  • -
    dark testimonial and pricing surfaces
Subject patterns
  • -
    one centered icon or state panel per section
  • -
    large rounded product demos
Composition logic
  • -
    Use darkness and blur to create calm, not drama.
  • -
    Let bright product controls and white text emerge from the dark field with generous breathing room.
Treatment rules
  • -
    Keep glows soft and localized.
  • -
    Favor matte surfaces with occasional polished highlights.
Generation cues
  • -
    Prompt for a dark wellness-product scene with violet and amber ambience and rounded product panels.
  • -
    Describe the interface as restorative and calm rather than futuristic or game-like.
Avoid
  • -
    No hard neon cyberpunk rendering.
  • -
    No busy background textures.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No harsh high-contrast dashboard grids.
  • -
    No sharp-cornered containers.
  • -
    No saturated rainbow UI outside controlled glow accents.