Refto
Delphi

Delphi

Delphi turns your expertise into an always-on presence, so you can grow your reach, serve your audience, and lead with clarity, without burning out.

SaasDigital ProductAi
5.0
10
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Delphi Home design analysis

Build a calm, human-first marketing surface with warm paper neutrals and generous negative space. Lead with portraits, soft product proof, and conversational trust cues instead of dense feature chrome. Let the orange CTA...

Key Takeaways

  • Build a calm, human-first marketing surface with warm paper neutrals and generous negative space.
  • Lead with portraits, soft product proof, and conversational trust cues instead of dense feature chrome.
  • Let the orange CTA work as the one clear pulse of urgency inside an otherwise quiet system.
  • Use original portrait photography or portrait-like renderings with warm, matte grading.
  • Favor mixed oval, rounded, or softly cropped frames over rigid rectangles.
  • Keep one person or one conversational focal point per module.

Overview

  • Build a calm, human-first marketing surface with warm paper neutrals and generous negative space.
  • Lead with portraits, soft product proof, and conversational trust cues instead of dense feature chrome.
  • Let the orange CTA work as the one clear pulse of urgency inside an otherwise quiet system.

Image Direction

  • Use original portrait photography or portrait-like renderings with warm, matte grading.
  • Favor mixed oval, rounded, or softly cropped frames over rigid rectangles.
  • Keep one person or one conversational focal point per module.

Colors

  • Base the page on warm beige and cream rather than true white.
  • Use dark espresso text for hierarchy and readability.
  • Reserve bright orange for primary action or tiny emphasis chips only.

Typography

  • Use a soft editorial serif for headlines and a neutral sans for UI, body, and metadata.
  • Keep headline weights light and let scale carry the drama.
  • Keep UI labels compact and quiet so the portraits and headings stay primary.

Design.md

System Overview

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

Warm Expert Portrait Marketplace

A warm, editorial product-marketing system that mixes portrait-led trust signals with soft utility cards and bright orange action moments.

Warm, human, editorial, and quietly premium.

Primary mode: lightAI knowledge commerceui-rich

Theme

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

Visual atmosphere
Summary
Warm, human, editorial, and quietly premium.
Density
3
Variance
3
Motion
2
Signals
paper-toned background · portrait collage hero · soft cream cards · orange action punctuation

Colors

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

Palette colors
Paper Beige
#FDF6EE
Espresso Ink
#2B180A
Signal Orange
#FF5C00
Sand Surface
#F0E6DC
Muted Taupe
#94877C
Usage rules
Keep the page atmosphere warm and low-chroma by default.
Use orange sparingly for high-intent actions or tiny emphasis chips.

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, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
12px
card
20px
full
999px

Typography Families

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

Display
Martina Plantijn
soft editorial serif
Body
Inter
neutral product sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.8rem, 5.5vw, 4.8rem)/—
Display
H2
clamp(2rem, 4vw, 3.1rem)/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Let display type carry warmth; keep supporting UI in an even sans voice. · Use airy line-height and restrained weights before adding more decoration.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Favor large blocks of quiet space between idea changes.
Mix portrait media and copy rather than relying on hard feature grids.

Component Preview

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

Buttons primary
Base Attributes
Background
#FF5C00
Text
#FFF8F2
Border
none
Radius
12px
Padding
0.8rem 1.1rem
Min height
44px
Shadow
none
Buttons secondary
Base Attributes
Background
#F0E6DC
Text
#2B180A
Border
none
Radius
12px
Padding
0.8rem 1.1rem
Min height
44px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F8EFE6
Text
#2B180A
Border
1px solid rgba(43,24,10,0.05)
Radius
20px
Padding
1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#2B180A
Height
40px
Active text
#2B180A
Item padding
0.4rem 0.65rem
Item radius
10px
Inputs default
Base Attributes
Background
#FFF8F2
Text
#2B180A
Border
1px solid rgba(43,24,10,0.08)
Radius
999px
Padding
0.75rem 1rem
Min height
44px
Placeholder
rgba(43,24,10,0.45)

Hero stage

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

Summary
Portrait-led hero with calm collage spacing and one bright call to action.

Image direction

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

Role
supportive
Media types
  • -
    portrait photography
  • -
    editorial cutout
Subject patterns
  • -
    one expert portrait per module
  • -
    softly separated headshots in mixed crop shapes
Composition logic
  • -
    Keep portrait subjects large and breathable.
  • -
    Use warmth and human presence to convey trust before product detail.
Treatment rules
  • -
    Preserve warm skin tones and matte surfaces.
  • -
    Avoid glossy commercial stock-photo treatment.
Generation cues
  • -
    Prompt for editorial portraiture, warm paper light, and quiet neutral backgrounds.
Avoid
  • -
    No hard corporate studio blue.
  • -
    No unrelated illustration styles in the same system.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold grayscale surfaces.
  • -
    No sharp enterprise corners or heavy shadows.
  • -
    No neon accents competing with the orange action color.