Refto
Jeton

Jeton

One wallet for all needs

Scrolling AnimationGradientBig Background VideoSingle PageCleanFinance
4.0
8
Visits
Visit

Categories

Finance

Available Pages

Home

Version History

Design Analysis

Jeton Home design analysis

Coral Orbit Wallet is a bold consumer-finance system that relies on color, scale, and soft 3D form more than dense explanation. It should feel large, mobile-native, and unmistakably upbeat: giant white statements, coral...

Key Takeaways

  • Primary is white and used for the most visible text and bright action surfaces.
  • Secondary is a muted taupe used for quiet support capsules.
  • Tertiary is a small blue utility accent.
  • Use one blunt, geometric sans throughout.
  • Make the display extremely large and simple.
  • Keep body copy light enough that color and form remain dominant.

Overview

Coral Orbit Wallet is a bold consumer-finance system that relies on color, scale, and soft 3D form more than dense explanation. It should feel large, mobile-native, and unmistakably upbeat: giant white statements, coral and peach gradients, glossy floating forms, and a persistent dock-like navigation cue.

Image Direction

Use soft 3D forms, glossy disc-like objects, and simple lifestyle crops with lots of breathing room. Avoid hard technical rendering styles.

Colors

  • Primary is white and used for the most visible text and bright action surfaces.
  • Secondary is a muted taupe used for quiet support capsules.
  • Tertiary is a small blue utility accent.

Typography

  • Use one blunt, geometric sans throughout.
  • Make the display extremely large and simple.
  • Keep body copy light enough that color and form remain dominant.

Design.md

System Overview

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

Coral Orbit Wallet

A saturated consumer-finance marketing system with coral-peach gradients, floating 3D discs, huge white type, and capsule-based navigation.

Bold, glossy, youthful, and mobile-first.

Primary mode: lightconsumer fintechmarketing-rich

Theme

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

Visual atmosphere
Summary
Bold, glossy, youthful, and mobile-first.
Density
3
Variance
4
Motion
4
Signals
coral shell · soft 3D disc render · giant white sans display · floating bottom dock

Colors

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

Palette colors
Coral Flame
#FF3A22
Peach Glow
#F6B6A1
Blush Pink
#F08AA0
Signal Blue
#4C86F7
Signal White
#FFFFFF
Muted Taupe
#A57F75
Usage rules
Let coral dominate the shell.
Use white for the main type and utility contrast.
Keep blue as a small support accent, not a competing brand color.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

control
22px
dock
999px

Typography Families

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

Display
Sequel Sans
large, geometric, and extremely blunt
Body
Sequel Sans
clean modern consumer-finance sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4.5rem, 10vw, 7rem)/—
Display
H2
clamp(2.2rem, 5vw, 3.4rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Use very large display with simple line breaks. · Keep body copy secondary to the color and form system.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
200ms-280ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration200ms-280ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use giant verbal sections with minimal supporting copy.
Keep a floating bottom dock visible as a navigational anchor.
Let full-screen chapter changes do more than dense content blocks.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFFFFF
Text
#FF3A22
Border
0px none transparent
Radius
{tokens.radii.control}->22px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.14)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.24)
Radius
{tokens.radii.control}->22px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
rgba(255,255,255,0.12)
Text
#FFFFFF
Border
0px none transparent
Radius
24px
Padding
{tokens.spacing.card_padding}->1.25rem
Shadow
none
Inputs default
Base Attributes
Background
rgba(255,255,255,0.14)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.24)
Radius
{tokens.radii.control}->22px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(255,255,255,0.55)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.14)
Text
#FFFFFF
Height
44px
Active text
#FFFFFF
Item padding
0.5rem 1rem
Item radius
{tokens.radii.dock}->999px

Scroll motion

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

Role
load-bearing
Scroll driver
native
Cadence
bold
Patterns
  • -
    sticky chapter progression
  • -
    persistent floating dock
  • -
    single-concept full-screen transitions
Page logic
  • -
    Scroll should reveal one oversized concept at a time.
  • -
    The bottom dock should feel like a persistent mobile-navigation anchor.
Constraints
  • -
    The experience should still make sense as a static sequence of strong sections.

Image direction

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

Role
supportive
Media types
  • -
    soft 3D render
  • -
    clean lifestyle crop
Subject patterns
  • -
    floating discs
  • -
    large simple product motifs
Composition logic
  • -
    Keep forms large and glossy with generous negative space.
Avoid
  • -
    No hard-edged isometric dashboard renders.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark enterprise shell replacing the coral stage.
  • -
    No tiny understated typography.
  • -
    No square-corner control language.