Refto
Fynza

Fynza

Fynza provides working capital based on OTA bookings with no collateral or banks, built for tour and activity operators.

TravelInteractiveScrolling AnimationSaasGradientAnimationBig Background ImageLightCleanFinance
3.0
4
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Fynza Home design analysis

Build a finance shell that feels calm and operationally credible rather than flashy. Use white space, direct copy, and a narrow accent range to signal trust. Keep proof and action modules simple and grounded. Favor restr...

Key Takeaways

  • Build a finance shell that feels calm and operationally credible rather than flashy.
  • Use white space, direct copy, and a narrow accent range to signal trust.
  • Keep proof and action modules simple and grounded.
  • Favor restrained product scenes or clear business context rather than dramatic stock imagery.
  • Use images sparingly and keep them subordinate to clarity.
  • Base the shell on FFFFFF and keep 16181D as the primary reading color.

Overview

  • Build a finance shell that feels calm and operationally credible rather than flashy.
  • Use white space, direct copy, and a narrow accent range to signal trust.
  • Keep proof and action modules simple and grounded.

Image Direction

  • Favor restrained product scenes or clear business context rather than dramatic stock imagery.
  • Use images sparingly and keep them subordinate to clarity.

Colors

  • Base the shell on FFFFFF and keep 16181D as the primary reading color.
  • Use FF6B4A as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let F7F7F5 and F3C7BA separate secondary surfaces without introducing noisy ornament.

Typography

  • Use Golos Text Variable as the display voice. It should read as assertive display sans.
  • Use Golos Text Variable for body copy, controls, and supporting metadata.
  • Let scale and spacing create emphasis before adding extra font families or decorative effects.

Design.md

System Overview

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

Peach Glow Diagrammatic Fintech

A white fintech shell softened by peach atmospheric glow, thin coral connector lines, compact orange CTAs, and occasional deep-blue dashboard cards.

measured, reliable, and sparse

Primary mode: lightfintech marketingui-rich

Theme

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

Visual atmosphere
Summary
measured, reliable, and sparse
Density
3
Variance
3
Motion
2
Signals
primary background #FFFFFF · primary action #FF6B4A · display font Golos Text Variable · body font Golos Text Variable

Colors

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

Palette colors
Primary
#FF6B4A
Secondary
#FFFFFF
Neutral
#FFFFFF
Surface
#F7F7F5
On Surface
#16181D
Usage rules
Keep #FF6B4A reserved for intentional emphasis.
Use #F7F7F5 and #F3C7BA to separate layers without over-framing them.

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

Token Radii

Corner radii tokens with a live surface sample.

control
14px
card
18px
full
999px

Typography Families

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

Display
Golos Text Variable
assertive display sans
Body
Golos Text Variable
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Use clean sections, consistent gutters, and modest proof bands.
Let the hierarchy stay stable from hero through pricing or process sections.

Component Preview

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

Buttons primary
Base Attributes
Background
#FF6B4A
Text
#FFFFFF
Border
none
Radius
999px
Padding
0 16px
Min height
38px
Shadow
none
Font family
"Golos Text Variable", system-ui, sans-serif
Font size
14px
Font weight
500
Specimen label
Contact us
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.08)
Text
#FFFFFF
Border
1px solid rgba(66, 83, 111, 0.2)
Radius
999px
Padding
6px 12px
Min height
31px
Shadow
none
Font family
"Golos Text Variable", system-ui, sans-serif
Font size
16px
Font weight
400
Specimen label
Continue
Cards default
Dashboard Card
Component preview content
Base Attributes
Background
#263A8B
Text
#FFFFFF
Border
none
Radius
24px
Padding
24px
Min width
320px
Shadow
0 20px 50px rgba(38,58,139,0.18)
Specimen label
Dashboard Card
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#42536F
Height
38px
Active text
#16181D
Item padding
0.35rem 0.6rem
Item radius
999px
Specimen label
Contact us
Inputs default
Base Attributes
Background
#FFFFFF
Text
#16181D
Placeholder color
rgba(66,83,111,0.6)
Border
1px solid rgba(255,107,74,0.18)
Radius
999px
Padding
0 16px
Min height
40px
Font family
"Golos Text Variable", system-ui, sans-serif
Font size
14px
Specimen label
Type your email

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.