Refto
Titan

Titan

Professional wealth management from your phone. $1.1B AUM, 10.7% avg client CAGR, 0.40% fee. Built for tech professionals and couples.

Large TypeIllustrativeAgencyBlack WhiteMinimalCleanFinance
4.0
7
Visits
Visit

Categories

AgencyFinance

Available Pages

Home

Version History

Design Analysis

Titan Home design analysis

Editorial Advisor Ledger is a high-trust financial system that feels more like a modern ledger than a fintech app. Hairline rules, warm ivory grouping, and etched monochrome illustration create an atmosphere of patience...

Key Takeaways

  • Primary ( 111111): Main text and primary CTA fill.
  • Secondary ( F2EEE8): Warm ivory chip grouping and subtle surface emphasis.
  • Tertiary ( 615E5B): Support copy and muted secondary text.
  • Use one modern sans family with controlled weight.
  • Break long headlines into measured lines rather than chasing decorative styling.
  • Keep metric and support copy calm and lightly colored.

Overview

Editorial Advisor Ledger is a high-trust financial system that feels more like a modern ledger than a fintech app. Hairline rules, warm ivory grouping, and etched monochrome illustration create an atmosphere of patience and judgment rather than speed or hype.

Image Direction

Use monochrome engraved illustration, architectural fragments, and quiet city scenes instead of glossy finance photography. The image layer should feel printed, not cinematic.

Colors

  • Primary ( 111111): Main text and primary CTA fill.
  • Secondary ( F2EEE8): Warm ivory chip grouping and subtle surface emphasis.
  • Tertiary ( 615E5B): Support copy and muted secondary text.

Typography

  • Use one modern sans family with controlled weight.
  • Break long headlines into measured lines rather than chasing decorative styling.
  • Keep metric and support copy calm and lightly colored.

Design.md

System Overview

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

Editorial Advisor Ledger

A high-trust financial marketing language with ruled layouts, warm ivory chips, black CTAs, and engraved monochrome illustration.

Trustworthy, editorial, and quietly premium.

Primary mode: lightfinancial advisory marketingui-rich

Theme

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

Visual atmosphere
Summary
Trustworthy, editorial, and quietly premium.
Density
3
Variance
2
Motion
3
Signals
hairline ruled layout · warm ivory nav chips · black CTA · engraved monochrome illustration

Colors

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

Palette colors
Ledger White
#FFFFFF
Ink Black
#111111
Warm Ivory
#F2EEE8
Stone Gray
#615E5B
Rule Line
#E7E1DA
Usage rules
Keep the page mostly white and ruled.
Use the warm ivory chip sparingly for grouped navigation and subtle emphasis.
Avoid bright fintech accent colors.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
88px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
160px
chip
140px
card
0px

Typography Families

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

Display
Geist
calm modern advisor display
Body
Geist
clean human advisory body
Mono
Geist Mono
data detail support

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
3.75rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use weight sparingly and rely on scale plus line breaks. · Let supporting metrics breathe inside ruled modules.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-300ms
Easing
cubic-bezier(.2,.75,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration220ms-300ms
easingcubic-bezier(.2,.75,.2,1)

Layout Principles

Split major sections with visible ruling.
Use the grid itself as a design element rather than hiding structure.
Pair one statement block with one monochrome illustration or structured list.

Component Preview

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

Buttons primary
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid #111111
Radius
{tokens.radii.control}->160px
Padding
0px 24px
Min height
44px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#111111
Border
0px solid transparent
Radius
{tokens.radii.control}->160px
Padding
0px
Min height
24px
Shadow
none
Typography
label
Cards ruled
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E7E1DA
Radius
{tokens.radii.card}->0px
Padding
{tokens.spacing.card_padding}->24px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#F2EEE8
Text
#111111
Height
38px
Active text
#111111
Item padding
11px 18px
Item radius
{tokens.radii.chip}->140px

Scroll motion

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

Role
supportive
Scroll driver
smooth
Cadence
calm
Patterns
  • -
    section reveal
  • -
    metric progression
Page logic
  • -
    Use motion to pace the long-form advisory narrative.
  • -
    Keep the ruled structure readable at every point.
Constraints
  • -
    Do not make motion feel startup-playful.
  • -
    Preserve instant legibility in reduced motion.
Reduced motion
Render each section at its settled layout without transitions.

Image direction

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

Role
supportive
Media types
  • -
    engraved illustration
  • -
    monochrome scene
Subject patterns
  • -
    classical building engraving
  • -
    city bird silhouette
  • -
    architectural fragment
Composition logic
  • -
    Place illustration on one side of a ruled split.
  • -
    Let monochrome imagery feel etched and quiet.
Treatment rules
  • -
    Keep imagery black-on-white with minimal warm tint.
  • -
    Avoid glossy realism.
Generation cues
  • -
    Describe editorial ledger layout with engraved city illustration.
  • -
    Use black ink lines and warm ivory chips only.
Avoid
  • -
    No app-store device mockups.
  • -
    No photo-real fintech luxury scenes.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No fintech neon green or purple.
  • -
    No soft blob gradients.
  • -
    No card-wall layouts that hide the ruled editorial structure.