Overview
Design fintech pages that feel cinematic and calm instead of hard-edged or overtly crypto-native. The atmosphere should come from light, field, and spatial framing, with one controlled purple accent shaping emphasis.
Legend
Put your assets to work with the all-in-one mobile app to Earn, Trade, and Borrow digital assets onchain. Built to make your assets work harder for you, Legend makes accessing DeFi easy for everyone. Now available in the App Store.
4.0
8
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Legend Home design analysis
Design fintech pages that feel cinematic and calm instead of hard-edged or overtly crypto-native. The atmosphere should come from light, field, and spatial framing, with one controlled purple accent shaping emphasis.
Image Direction
Use pale environmental scenes, subtle grid overlays, and one centered product device or card stack. The world should feel slightly surreal and expensive, but still grounded enough to support a serious financial product.
Colors
Build on mist neutrals, white cards, and black utility chrome. Purple is a concentrated accent, not a palette flood. Secondary text and grid details should sit in stone gray and stay understated.
Typography
Use a modern display sans with slightly compressed presence for headlines. Keep legal and utility details quiet, with occasional mono labels for coordinates or technical framing.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Pastoral Finance Future
A cinematic light-finance system mixing misty landscapes, black framing, and a single purple action accent.
cinematic, light-filled, and quietly futuristic with a grounded physical landscape
Primary mode: lightconsumer fintech marketingconsumer-product
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
cinematic, light-filled, and quietly futuristic with a grounded physical landscape
Density
2
Variance
3
Motion
3
Signals
mist field · centered device · purple accent phrase · black utility chrome
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Mist Ground
#EDEDED
Ink Black
#131313
Legend Purple
#8B3DDB
Stone Gray
#949494
Cloud White
#FFFFFF
Field Beige
#DCCEB7
Usage rules
Keep the shell light and misty rather than stark white.
Use purple only where it reframes a key value proposition.
Let black utility chrome act as an anchor against the softer scenery.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
104px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
16px
lg
24px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Knapp
slightly compressed, modern, and high-presence
Body
Knapp
clean fintech copy
Mono
diatypeMono
coordinates and technical labels
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
3.5rem/—
Display
H2
2.25rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large, centered display headlines with generous line height. · Keep body copy simple and measured so the imagery stays calm. · Use mono sparingly for coordinates, legal navigation, or technical utility moments.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
220ms-600ms
Easing
cubic-bezier(.2,.82,.2,1)
Spring
stiffness 95, damping 17
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 220ms-600ms |
easing | cubic-bezier(.2,.82,.2,1) |
spring | stiffness 95, damping 17 |
Layout Principles
Use a centered device or product object as the hero anchor.
Frame the page with subtle coordinate or grid references to create spatial control.
Let scenic imagery occupy the lower field while UI and copy stay suspended above it.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#131313
Text
#FFFFFF
Border
1px solid #131313
Radius
16px
Padding
12px 20px
Min height
40px
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#131313
Border
1px solid #949494
Radius
16px
Padding
12px 20px
Min height
40px
Cards device
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#131313
Border
1px solid rgba(255,255,255,0.5)
Radius
24px
Padding
24px
Navigation utility
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#131313
Border
1px solid rgba(19,19,19,0.1)
Radius
16px
Item padding
10px 14px
Labels coordinates
Base Attributes
Background
transparent
Text
#949494
Radius
0px
Typography
mono
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -mist landscape
- -centered mobile UI card
- -grid overlay
Subject patterns
- -rocks and flowers in shallow fog
- -white financial dashboard on light field
- -single purple phrase accent
Composition logic
- -Center one product object above a low scenic horizon.
- -Use the environment as atmosphere, not as literal stock photography.
Treatment rules
- -Keep the scene pale, quiet, and lightly surreal.
- -Avoid colorful crypto icon explosions or glossy abstract backdrops.
Generation cues
- -minimal fintech hero over misty field
- -white device card in fog with purple accent
Avoid
- -No neon trading charts.
- -No gamer sci-fi effects.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not switch into a loud neon DeFi palette.
- -Do not overfill the page with dashboards and charts.
- -Do not make the scenic field feel whimsical or pastoral in a lifestyle sense.