Refto
Natural

Natural

Natural is the agentic payments platform powering frictionless money movement between agents, businesses, and consumers.

SaasAiBlack WhiteBig Background ImageMinimalLightCleanFinance
4.0
9
Visits
Visit

Categories

SaasAiFinance

Available Pages

Home

Version History

Design Analysis

Natural Home design analysis

Build for a technical product that expresses confidence through restraint, not density. Let the page feel almost unfinished at first glance, but precisely so. Emptiness is part of the design language. Keep every artifact...

Key Takeaways

  • Build for a technical product that expresses confidence through restraint, not density.
  • Let the page feel almost unfinished at first glance, but precisely so. Emptiness is part of the design language.
  • Keep every artifact small relative to the page around it.
  • Use one technical artifact, code window, or cropped object still life per section.
  • Place it against a soft clouded, leafy, or washed photographic field rather than a hard product stage.
  • Keep the object undersized so white space remains dominant.

Overview

  • Build for a technical product that expresses confidence through restraint, not density.
  • Let the page feel almost unfinished at first glance, but precisely so. Emptiness is part of the design language.
  • Keep every artifact small relative to the page around it.

Image Direction

  • Use one technical artifact, code window, or cropped object still life per section.
  • Place it against a soft clouded, leafy, or washed photographic field rather than a hard product stage.
  • Keep the object undersized so white space remains dominant.

Entry & Arrival Motion

  • A light staggered fade-up is appropriate for nav, hero words, and the first artifact.
  • The arrival sequence should feel like a gentle settling, not a reveal stunt.
  • Reduced-motion behavior should skip the sequence and render the resting frame immediately.

Colors

  • Use pure white as the main field.
  • Keep text in a near-black olive rather than dead black.
  • Use pale linen and slate whites for the few filled controls or quiet panels.

Design.md

System Overview

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

Monospaced Agent Payments Canvas

A sparse product-marketing system that uses mono typography, sharp micro-rectangles, and large quiet fields around tiny technical artifacts.

Sparse, mechanical, airy, and editorial.

Primary mode: lightagentic payments infrastructureui-rich

Theme

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

Visual atmosphere
Summary
Sparse, mechanical, airy, and editorial.
Density
2
Variance
3
Motion
3
Signals
oversized blank space · mono type across everything · small framed product artifacts

Colors

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

Palette colors
Paper White
#FFFFFF
Ink Olive
#111400
Fog Gray
#888980
Slate Linen
#F8F9F6
Warm Linen
#F1F2EC
Usage rules
Keep the shell nearly achromatic.
Use soft material shifts, not strong brand color, to separate actions.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
6rem
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
2px
component
2px

Typography Families

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

Display
STK Miso
quirky mono headline voice
Body
STK Miso
mechanical but warm

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
2rem/—
Display
H2
1.75rem/—
H2
Body
0.9375rem/—
Body
Label
0.9375rem/—
Label

Typography Rules

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

Rules
Keep weight almost flat and let spacing create hierarchy. · Do not switch into polished grotesk UI language.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
250ms-500ms
Easing
cubic-bezier(.2, .8, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration250ms-500ms
easingcubic-bezier(.2, .8, .2, 1)

Layout Principles

Give the hero and product pages far more blank space than seems necessary.
Anchor each section with one small artifact instead of a large hero card.
Keep columns narrow and leave the rest of the width unclaimed.

Component Preview

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

Buttons primary
Base Attributes
Background
#F8F9F6
Text
#111400
Border
1px solid transparent
Radius
{tokens.radii.control}->2px
Padding
0.5rem 0.75rem
Min height
36px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#454545
Border
1px solid transparent
Radius
{tokens.radii.control}->2px
Padding
0.5rem 0.75rem
Min height
36px
Shadow
none
Typography
label
Cards artifact
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111400
Border
1px solid transparent
Radius
{tokens.radii.component}->2px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards panel
Feature Card
Component preview content
Base Attributes
Background
#F1F2EC
Text
#111400
Border
1px solid transparent
Radius
{tokens.radii.component}->2px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
transparent
Text
#111400
Border
1px solid #E7E8E1
Radius
0px
Padding
0.75rem 0
Min height
48px
Placeholder
#888980
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#454545
Height
72px
Active text
#111400
Item padding
0.375rem 0.75rem
Item radius
{tokens.radii.control}->2px

Entry motion

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

Role
supportive
Trigger
every-load
Patterns
  • -
    staggered fade-up
Sequence logic
  • -
    Navigation, hero words, and the small artifact resolve in a controlled sequence.
  • -
    The first frame must still read when the sequence is removed.
Constraints
  • -
    Keep the motion small and vertical.
  • -
    Never delay access to the call to action.
Reduced motion
  • -
    Render the settled frame immediately.

Scroll motion

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

Role
supportive
Scroll driver
native
Cadence
slow
Patterns
  • -
    held hero artifact
  • -
    section-anchored product windows
Page logic
  • -
    One technical artifact holds visual focus while sparse copy advances.
  • -
    The narrative should feel measured rather than animated.
Constraints
  • -
    Do not turn the sticky behavior into a spectacle.
  • -
    Preserve comprehension without scroll effects.
Reduced motion
  • -
    Release held frames into a simple stacked layout.

Image direction

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

Role
supportive
Media types
  • -
    soft photographic texture
  • -
    code-window mockup
  • -
    cropped object still life
Subject patterns
  • -
    one tiny artifact against a large soft field
  • -
    one strict product window over a clouded or leaf-shadow background
Composition logic
  • -
    Keep the subject intentionally undersized within the section.
  • -
    Let large white margins frame the technical object.
Treatment rules
  • -
    Use washed whites, pale sky tones, and low-noise textures.
  • -
    Avoid illustrative icon clutter.
Generation cues
  • -
    Describe a quiet technical artifact in a soft daylight field.
  • -
    Favor grain, blur, and controlled emptiness over sharp decoration.
Avoid
  • -
    No bright fintech dashboards.
  • -
    No glossy startup hero renders.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No pill-heavy consumer SaaS UI.
  • -
    No saturated fintech blues, greens, or gradients in the shell.
  • -
    No dense card stacks trying to fill the empty space.