Refto
Lens

Lens

The SocialFi chain.

Scrolling AnimationWeb AppGradientCryptoAnimationMinimalLightCleanTransitions
4.0
23
Visits
Visit

Categories

Web AppCrypto

Available Pages

Home

Version History

Design Analysis

Lens Home design analysis

Build the page as an airy white ecosystem space with only one strong fill color: mint. Let faint background linework and soft cards provide just enough personality without compromising clarity. Keep the whole experience...

Key Takeaways

  • Build the page as an airy white ecosystem space with only one strong fill color: mint.
  • Let faint background linework and soft cards provide just enough personality without compromising clarity.
  • Keep the whole experience optimistic and low-noise.
  • Use faint multicolor arcs, gentle iconography, and whisper-light surfaces rather than large illustrations.
  • Let mint carry the only fully saturated interaction cue.
  • Keep the shell nearly white.

Overview

  • Build the page as an airy white ecosystem space with only one strong fill color: mint.
  • Let faint background linework and soft cards provide just enough personality without compromising clarity.
  • Keep the whole experience optimistic and low-noise.

Image Direction

  • Use faint multicolor arcs, gentle iconography, and whisper-light surfaces rather than large illustrations.
  • Let mint carry the only fully saturated interaction cue.

Colors

  • Keep the shell nearly white.
  • Use charcoal for the voice and mint for action.
  • Keep all auxiliary arc colors soft and atmospheric.

Typography

  • Use a clean grotesk with friendly scale.
  • Keep body and support copy soft but not weak.

Design.md

System Overview

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

Social Arc Air

A light crypto-social marketing language built from airy white space, charcoal grotesk headlines, mint action pills, faint rainbow arc linework, and gentle FAQ cards.

Airy, optimistic, current, and low-noise.

Primary mode: lightsocial protocol marketingcontent-rich

Theme

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

Visual atmosphere
Summary
Airy, optimistic, current, and low-noise.
Density
3
Variance
4
Motion
1
Signals
rainbow arc linework · mint pills · soft white knowledge cards

Colors

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

Palette colors
Pure White
#FFFFFF
Charcoal
#2C2D31
Mist Gray
#A3A4A8
Mint Build
#16D1AF
Arc Peach
#F3D7C9
Arc Lime
#D7F0B0
Usage rules
Keep the field almost pure white.
Use mint as the only real UI fill color and keep the arc hues faint in the background.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 6rem)
panel_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
16px
lg
20px
xl
28px
full
999px

Typography Families

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

Display
Saans
clean optimistic grotesk
Body
Saans
lightweight ecosystem body voice
Accent
Inter
menu and utility label voice
Mono
IBM Plex Mono
rare protocol support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.25rem, 2vw, 1.7rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Keep the typography airy and slightly softened. · Let headline weight stay strong enough to anchor the otherwise low-contrast field.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-180ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use large white breathing room between modules.
Let background linework sit behind the hero without competing with it.
Keep FAQ and knowledge surfaces nearly colorless.

Component Preview

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

Actions mint pill
Base Attributes
Background
#16D1AF
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Actions ghost pill
Base Attributes
Background
#FFFFFF
Text
#2C2D31
Border
1px solid rgba(44, 45, 49, 0.08)
Radius
999px
Padding
0.8rem 1.15rem
Cards faq row
Feature Card
Component preview content
Base Attributes
Background
#FBFBFB
Text
#2C2D31
Border
1px solid rgba(44, 45, 49, 0.04)
Radius
16px
Padding
1rem
Shadow
none
Shells flyout panel
Base Attributes
Background
#FFFFFF
Text
#2C2D31
Border
1px solid rgba(44, 45, 49, 0.04)
Radius
16px
Padding
1rem
Shadow
0 10px 24px rgba(0,0,0,0.06)

Image direction

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

Role
supportive
Media types
  • -
    arc line field
  • -
    soft icon mascot
  • -
    airy card shell
Subject patterns
  • -
    faint rainbow curves
  • -
    gentle charcoal iconography
  • -
    white-on-white surfaces
Composition logic
  • -
    Use background linework as a whisper behind the main content.
  • -
    Keep the content area itself extremely clean.
Treatment rules
  • -
    Keep all non-mint colors very faint.
  • -
    Avoid texture or heavy shadow.
Generation cues
  • -
    Ask for a white field with faint multicolor arc lines and mint CTA accents.
  • -
    Describe soft FAQ cards and charcoal text.
Avoid
  • -
    No neon web3 black backgrounds.
  • -
    No heavy glassmorphism.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the airy field with dark crypto gradients.
  • -
    Do not make the background linework loud or saturated.
  • -
    Do not turn the FAQ into heavy enterprise accordions.