Refto
Basic Capital

Basic Capital

Join us on a mission to increase the rate at which Americans save for retirement.

Scrolling AnimationSaasAiBig Background ImageLightCleanFinance
4.0
8
Visits
Visit

Categories

SaasAiFinance

Available Pages

Home

Version History

Design Analysis

Basic Capital Home design analysis

Blend enterprise clarity with scenic emotional softening. Keep the core UI neutral, structured, and trustworthy. Use paintings as a brand atmosphere layer, not as the main information surface. Use romantic landscape pain...

Key Takeaways

  • Blend enterprise clarity with scenic emotional softening.
  • Keep the core UI neutral, structured, and trustworthy.
  • Use paintings as a brand atmosphere layer, not as the main information surface.
  • Use romantic landscape paintings or similarly muted scenic imagery.
  • Keep painted scenes wide and quiet.
  • Pair imagery with orderly comparison or dashboard blocks.

Overview

  • Blend enterprise clarity with scenic emotional softening.
  • Keep the core UI neutral, structured, and trustworthy.
  • Use paintings as a brand atmosphere layer, not as the main information surface.

Image Direction

  • Use romantic landscape paintings or similarly muted scenic imagery.
  • Keep painted scenes wide and quiet.
  • Pair imagery with orderly comparison or dashboard blocks.

Colors

  • The neutral shell should stay gray and white.
  • Use charcoal for text and main actions.
  • Allow muted taupe and sage only as secondary atmospheric notes.

Typography

  • Use a modern sans with a serious but not harsh tone.
  • Keep headings large and clean.
  • Avoid decorative financial-institution flourishes.

Design.md

System Overview

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

Painterly Retirement Enterprise

A restrained enterprise system that mixes muted gray shells, dark pill actions, and romantic painted backdrops to soften a compliance-heavy category.

Quietly premium, practical, and softened by art direction.

Primary mode: lightretirement and wealth infrastructureui-rich

Theme

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

Visual atmosphere
Summary
Quietly premium, practical, and softened by art direction.
Density
4
Variance
2
Motion
1
Signals
gray shell · painterly landscape · dark pill CTA · orderly comparison blocks

Colors

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

Palette colors
Mist Gray
#F5F5F5
Ink Charcoal
#26231E
Ivory White
#FFFFFF
Muted Taupe
#CDBDB2
Sage Green
#6C7C65
Usage rules
Keep the UI mostly neutral.
Let the paintings add warmth without overpowering the information architecture.

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

Token Radii

Corner radii tokens with a live surface sample.

control
999px
card
8px
panel
12px
full
999px

Typography Families

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

Display
Saans
clean modern sans
Body
Saans
calm operational sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.7rem, 5vw, 4.4rem)/—
Display
H2
clamp(2rem, 3.8vw, 3rem)/—
H2
Body
1rem/—
Body
Label
0.86rem/—
Label

Typography Rules

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

Rules
Keep type large, modern, and unadorned. · Use the paintings for emotion instead of decorative typography.

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

Use wide scenic hero bands and simple grid tables.
Keep content framed by clear horizontal sections and quiet neutral spacing.

Component Preview

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

Buttons primary
Base Attributes
Background
#26231E
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.75rem 1rem
Min height
42px
Shadow
none
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.8)
Text
#26231E
Border
1px solid rgba(38,35,30,0.10)
Radius
999px
Padding
0.75rem 1rem
Min height
42px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#26231E
Border
1px solid rgba(38,35,30,0.08)
Radius
8px
Padding
1.25rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.8)
Text
#26231E
Height
34px
Active text
#26231E
Item padding
0.35rem 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
  • -
    painterly landscape
  • -
    soft UI screenshot
Subject patterns
  • -
    wide scenic header painting
  • -
    one product screenshot inside a neutral module
Composition logic
  • -
    Use art direction at the top of chapters or as full-width dividers.
  • -
    Keep operational UI crisp and separate from scenic imagery.
Treatment rules
  • -
    Preserve muted, romantic paintings.
  • -
    Avoid hyper-real 3D renders or generic office stock imagery.
Generation cues
  • -
    Prompt for muted landscape paintings, gray enterprise shell, and dark pill CTAs.
Avoid
  • -
    No loud fintech gradients.
  • -
    No busy collage hero.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No neon fintech color.
  • -
    No playful rounded wellness geometry.
  • -
    No cluttered hero background behind dense text.