Refto
Ray

Ray

An open-source AI financial advisor that learns your full situation and gives personalized advice from your real bank data — running locally on your machine.

SaasAiBlack WhiteSingle PageLightCleanFinance
4.0
32
Visits
Visit

Categories

SaasAiFinance

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Ray Home design analysis

--- version: alpha name: "Ray Design Language" description: "A local-first product system that combines oversized blunt typography, dark terminal windows, and plainspoken guide layouts." colors: primary: " 1C1917" second...

Key Takeaways

  • Build for a product that wants to sound useful, local, and technically honest.
  • Keep the page stripped down. Big typography and product proof should do almost all the work.
  • Avoid the usual glossy fintech tone. This system should feel closer to a good CLI tool than to a finance lifestyle brand.
  • Use dark terminal or app windows as the main visual proof.
  • Support them with simple light cards and plain documentation layouts.
  • Keep color bursts small and data-driven, mostly inside the product frame.

Overview

  • Build for a product that wants to sound useful, local, and technically honest.
  • Keep the page stripped down. Big typography and product proof should do almost all the work.
  • Avoid the usual glossy fintech tone. This system should feel closer to a good CLI tool than to a finance lifestyle brand.

Image Direction

  • Use dark terminal or app windows as the main visual proof.
  • Support them with simple light cards and plain documentation layouts.
  • Keep color bursts small and data-driven, mostly inside the product frame.

Colors

  • Use a warm near-white page field.
  • Keep text and primary actions in a dark stone-black.
  • Use soft gray for secondary links and supporting labels.

Typography

  • Use oversized modern sans-serif headlines.
  • Keep the body voice plain and readable.
  • Use monospace only for commands, snippets, and in-product terminal text.

Design.md

System Overview

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

Ray Design Language

A local-first product system that combines oversized blunt typography, dark terminal windows, and plainspoken guide layouts.

Calm, technical, and stripped down.

Primary mode: lighttechnical consumer finance softwareui-rich

Theme

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

Visual atmosphere
Summary
Calm, technical, and stripped down.
Density
4
Variance
2
Motion
1
Signals
warm off-white field · oversized black headings · terminal-led hero framing · plain instructional structure

Colors

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

Palette colors
Warm Paper
#FAFAF9
Stone Ink
#1C1917
Soft Border
#E7E5DF
Quiet Gray
#78716C
Signal Green
#84CC16
Usage rules
Keep the product shell quiet and mostly monochrome.
Use bright color mostly inside terminal or data surfaces.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
card_padding
1.5rem
terminal_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
16px
command
8px

Typography Families

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

Display
GeistSans
blunt modern sans
Body
GeistSans
clear technical prose
Mono
"SF Mono"
command-line support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.6rem, 7vw, 6rem)/—
Display
H2
clamp(1.8rem, 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
Use large scale before adding ornament. · Keep monospace for commands, snippets, and terminal internals only.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-180ms
Easing
cubic-bezier(.4, 0, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.4, 0, .2, 1)

Layout Principles

Center the hero headline and anchor it with one prominent command CTA.
Use large dark terminal surfaces as the main visual proof.
Keep guide pages narrow, linear, and step-driven.

Component Preview

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

Buttons primary
Base Attributes
Background
#1C1917
Text
#FFFFFF
Border
none
Radius
{tokens.radii.command}->8px
Padding
0.85rem 1.25rem
Min height
48px
Shadow
0 10px 15px -3px rgba(28, 25, 23, 0.20)
Typography
label
Buttons secondary
Base Attributes
Background
#1C1917
Text
#FFFFFF
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.65rem 1rem
Min height
36px
Shadow
none
Typography
label
Cards default
Base Attributes
Background
#FFFFFF
Text
#1C1917
Border
1px solid #E7E5DF
Radius
{tokens.radii.component}->16px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards terminal
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.06)
Radius
{tokens.radii.component}->16px
Padding
{tokens.spacing.terminal_padding}->1.25rem
Shadow
0 16px 32px rgba(17, 17, 17, 0.16)
Inputs default
Base Attributes
Background
#FFFFFF
Text
#1C1917
Border
1px solid #E7E5DF
Radius
{tokens.radii.command}->8px
Padding
0.75rem 0.875rem
Min height
40px
Placeholder
rgba(28, 25, 23, 0.55)

Image direction

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

Role
supportive
Media types
  • -
    terminal window
  • -
    dark app panel
  • -
    light document card
Subject patterns
  • -
    one dark product frame per major section
  • -
    quiet support cards around it
Composition logic
  • -
    Make the terminal or app panel the proof object below large text.
  • -
    Keep surrounding layout sparse and structurally honest.
Treatment rules
  • -
    Use high contrast within the product frame and low chroma outside it.
  • -
    Let colored metrics stay small and purposeful.
Generation cues
  • -
    Prompt for dark CLI or app frames on a warm neutral page.
  • -
    Describe exact data density, tabs, and metric accents instead of abstract futuristic visuals.
Avoid
  • -
    No stock-finance imagery.
  • -
    No glassmorphism or shiny gradient cards.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No bright fintech gradients.
  • -
    No glossy dashboard chrome.
  • -
    No decorative illustration replacing product evidence.