Refto
Alma

Alma

Meet Alma, your personal AI nutrition coach. Track meals with voice or photos, get instant nutrition insights, and reach your health goals with personalized guidance.

Mobile AppParallaxHealthClean
3.0
4
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Alma Home design analysis

Warm Nutrition Companion is a friendly wellness system that pairs editorial warmth with app-like clarity. The first fold should feel like a helpful coach rather than a hard-selling product page: cream shell, chocolate di...

Key Takeaways

  • Primary ( 3C5627): Main action fill and high-intent coaching signal.
  • Secondary ( FFFDFC): Card and note surface.
  • Tertiary ( A7C93D): Score and success accent.
  • Display: Editorial serif with enough softness for persuasive, caring statements.
  • Body: Friendly grotesk for utility copy, metadata, and app-like controls.
  • Labels: Slightly firmer grotesk for compact UI clarity.

Overview

Warm Nutrition Companion is a friendly wellness system that pairs editorial warmth with app-like clarity. The first fold should feel like a helpful coach rather than a hard-selling product page: cream shell, chocolate display type, olive action, a centered phone, and a constellation of floating cards that make the guidance feel immediate and human.

Image Direction

Use floating utility cards, nutrition notes, score chips, and soft mobile UI close-ups around a central device. The imagery should feel light, constructive, and health-positive rather than clinical or futuristic.

Colors

The palette is warm, edible, and softly optimistic. Support orange and yellow can appear inside data or food-adjacent details, but they should not replace the olive-first action logic.

  • Primary ( 3C5627): Main action fill and high-intent coaching signal.
  • Secondary ( FFFDFC): Card and note surface.
  • Tertiary ( A7C93D): Score and success accent.

Typography

The system depends on a warm type pairing.

  • Display: Editorial serif with enough softness for persuasive, caring statements.
  • Body: Friendly grotesk for utility copy, metadata, and app-like controls.
  • Labels: Slightly firmer grotesk for compact UI clarity.

Design.md

System Overview

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

Warm Nutrition Companion

A warm consumer-wellness marketing system combining cream backgrounds, chocolate editorial display type, olive action blocks, and floating nutrition-card composition.

Warm, caring, lively, and gently coached.

Primary mode: lightconsumer app marketingmarketing-rich

Theme

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

Visual atmosphere
Summary
Warm, caring, lively, and gently coached.
Density
4
Variance
4
Motion
3
Signals
cream shell · brown editorial display · olive CTA · floating nutrition cards around a phone

Colors

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

Palette colors
Warm Cream
#F7F2E8
Milk White
#FFFDFC
Chocolate Ink
#4A2418
Olive Leaf
#3C5627
Sage Bright
#A7C93D
Harvest Orange
#F5A24A
Soft Border
#E8E0D4
Usage rules
Keep the shell warm and edible rather than sterile.
Use olive as the primary action fill, not black.
Let brighter yellow-green and orange appear inside data or wellness details, not as the shell color.
Preserve white cards for clarity against the cream background.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
group_gap
1rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
20px
card
24px
pill
999px

Typography Families

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

Display
Ivar Display
editorial serif with room for italic emphasis and lifestyle warmth
Body
HAL Four Grotesk
friendly modern grotesk for navigation, labels, and utility
Mono
IBM Plex Mono
rare nutritional-data support font

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.8rem, 8vw, 5.5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Use serif display for emotionally resonant hero and section statements. · Use grotesk body text for utility, metadata, and navigation. · Allow italic emphasis inside display lines when warmth matters.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
soft and buoyant

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.2, .8, .2, 1)
springsoft and buoyant

Layout Principles

Build the hero around one central phone stage.
Use floating angled cards to make the system feel coached and alive.
Keep copy centered and emotionally legible before the product detail stack begins.
Let sections breathe so the warm palette never feels crowded.
Maintain a strong difference between editorial statements and practical UI labels.

Component Preview

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

Buttons primary
Base Attributes
Background
#3C5627
Text
#FFFDFC
Border
0px none transparent
Radius
{tokens.radii.control}->20px
Padding
1rem 1.5rem
Min height
56px
Shadow
0 15px 14px -10px rgba(0, 0, 0, 0.15)
Typography
body
Buttons secondary
Base Attributes
Background
#FFFDFC
Text
#4A2418
Border
1px solid #E8E0D4
Radius
{tokens.radii.card}->24px
Padding
0.875rem 1.125rem
Min height
48px
Typography
body
Cards floating note
Feature Card
Component preview content
Base Attributes
Background
#FFFDFC
Text
#4A2418
Border
1px solid rgba(232, 224, 212, 0.65)
Radius
{tokens.radii.card}->24px
Padding
1rem
Shadow
0 24px 45px rgba(74, 36, 24, 0.10)
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFDFC
Text
#4A2418
Border
1px solid #E8E0D4
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.card_padding}->1.25rem
Shadow
0 12px 30px rgba(74, 36, 24, 0.06)
Inputs default
Base Attributes
Background
#FFFDFC
Text
#4A2418
Border
1px solid #E8E0D4
Radius
{tokens.radii.card}->24px
Padding
0.875rem 1rem
Min height
48px
Placeholder
rgba(74, 36, 24, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#4A2418
Height
44px
Active text
#3C5627
Item padding
0px
Item radius
0px

Hero stage

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

Summary
A centered phone stage surrounded by floating utility cards and gentle data chips.
Guidance
  • -
    Let the device and cards create delight, not the background itself.
  • -
    Keep floating objects readable and soft rather than hyperreal.

Image direction

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

Summary
Friendly interface cards, health scores, and nutrition notes arranged around a central mobile screen.

Responsive guidance

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

  • -
    Stack floating cards into a cleaner vertical rhythm on smaller screens instead of preserving every dramatic angle.
  • -
    Maintain generous space around the primary CTA so it stays emotionally inviting.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold grayscale SaaS shell.
  • -
    No heavy black CTA system.
  • -
    No sharp industrial corners on the main card family.
  • -
    No generic all-grotesk typography without editorial display contrast.
  • -
    No candy gradient flood across the background.