Refto
Swap Commerce

Swap Commerce

Swap is the infrastructure for the agentic commerce future. Sell anything, anywhere — from one platform. Swap enables global commerce through cross-border, tax, demand planning, and returns.

Scrolling AnimationLarge TypeIllustrativeAgencyBig Background VideoFinance
3.0
7
Visits
Visit

Categories

AgencyFinance

Available Pages

Home

Version History

Design Analysis

Swap Commerce Home design analysis

Soft Commerce Bloom is a commerce-marketing language built from restraint: a light editorial serif voice, a barely-there warm wash, and proof delivered through warm video and customer imagery. The page should feel commer...

Key Takeaways

  • Primary ( 000000): Main type and dark supporting CTA.
  • Secondary ( FAF8EF): Atmospheric bloom and grouped surface tone.
  • Tertiary ( A3FDA7): High-intent signal pill and primary CTA fill.
  • Use the low-weight serif for conceptual headlines and section openers.
  • Keep all interface copy in a plain, contemporary sans.
  • Avoid heavy bolding; let scale and whitespace create luxury.

Overview

Soft Commerce Bloom is a commerce-marketing language built from restraint: a light editorial serif voice, a barely-there warm wash, and proof delivered through warm video and customer imagery. The page should feel commercial but never harsh or salesy.

Image Direction

Keep imagery warm, lived-in, and softly lit. Product proof can be video-led, but it should sit inside generous white space and rounded frames rather than inside loud device mockups.

Colors

  • Primary ( 000000): Main type and dark supporting CTA.
  • Secondary ( FAF8EF): Atmospheric bloom and grouped surface tone.
  • Tertiary ( A3FDA7): High-intent signal pill and primary CTA fill.

Typography

  • Use the low-weight serif for conceptual headlines and section openers.
  • Keep all interface copy in a plain, contemporary sans.
  • Avoid heavy bolding; let scale and whitespace create luxury.

Design.md

System Overview

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

Soft Commerce Bloom

A commerce-marketing system that mixes airy editorial serif headlines, mint signal pills, and warm media-led product proof.

Light, editorial, and softly optimistic.

Primary mode: lightcommerce platform marketingui-rich

Theme

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

Visual atmosphere
Summary
Light, editorial, and softly optimistic.
Density
3
Variance
3
Motion
3
Signals
pale cream-white field · mint atmospheric glow · high-contrast serif hero · warm customer photography

Colors

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

Palette colors
Warm White
#FFFFFF
Soft Bloom
#FAF8EF
Mint Signal
#A3FDA7
Pure Black
#000000
Quiet Line
#E6E2D8
Usage rules
Keep the page nearly white with a faint warm wash.
Use mint only for the highest-intent action or key status pills.
Let black remain crisp and editorial.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
96px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
200px
card
10px

Typography Families

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

Display
Editorial Contrast Serif
airy modern commerce serif
Body
Clean Commerce Sans
clear product body

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
5rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Label
0.9375rem/—
Label

Typography Rules

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

Rules
Use a low-weight serif for hero and major section headlines. · Keep body and UI copy plain and contemporary.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-240ms
Easing
cubic-bezier(.2,.75,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-240ms
easingcubic-bezier(.2,.75,.2,1)

Layout Principles

Lead with one large serif statement and immediate CTA pair.
Alternate media and text in generous two-column sections.
Use big rounded media frames instead of dense feature-card matrices.

Component Preview

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

Buttons primary
Base Attributes
Background
#A3FDA7
Text
#000000
Border
1px solid #A3FDA7
Radius
{tokens.radii.control}->200px
Padding
12px 20px
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#000000
Text
#FFFFFF
Border
1px solid #000000
Radius
{tokens.radii.control}->200px
Padding
12px 20px
Min height
48px
Shadow
none
Typography
label
Cards media
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
1px solid #E6E2D8
Radius
{tokens.radii.card}->10px
Padding
24px
Shadow
none
Cards story
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#000000
Border
0px solid transparent
Radius
{tokens.radii.card}->10px
Padding
0px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#000000
Height
56px
Active text
#000000
Item padding
4px 6px
Item radius
{tokens.radii.control}->200px

Scroll motion

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

Role
supportive
Scroll driver
native
Cadence
soft
Patterns
  • -
    carousel media
  • -
    section reveal
Page logic
  • -
    Use motion to move between media proofs and editorial text.
  • -
    Keep the page readable when motion is disabled.
Constraints
  • -
    Do not let animation overpower the serif statement.
  • -
    Favor content transitions over spectacle.
Reduced motion
Preserve the pale atmosphere and card order while disabling motion.

Image direction

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

Role
supportive
Media types
  • -
    product video
  • -
    customer photography
Subject patterns
  • -
    warm lifestyle retail crop
  • -
    large product demo panel
Composition logic
  • -
    Place generous white space around media.
  • -
    Use one media frame per message instead of many competing thumbnails.
Treatment rules
  • -
    Keep color temperature slightly warm.
  • -
    Avoid overprocessing or harsh contrast.
Generation cues
  • -
    Describe a pale commerce hero with a mint accent and one warm media proof.
  • -
    Use soft natural retail photography alongside clean product UI.
Avoid
  • -
    No harsh black-box enterprise mood.
  • -
    No hyper-saturated ecommerce neon.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark futuristic commerce styling.
  • -
    No oversaturated mint gradients.
  • -
    No dense feature-card walls replacing media-led proof.