Refto
Refined

Refined

Turn your idea into the market-ready MVP

Scrolling AnimationSaasBlack WhiteMarketingAnimationPersonalSingle PageClean
3.0
11
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Refined Home design analysis

Build the experience like a launch message dropped onto a real desk. Keep one bold headline at the center and let smaller utility artifacts orbit around it. Use paper texture, cropped peripherals, and rounded cards to cr...

Key Takeaways

  • Build the experience like a launch message dropped onto a real desk.
  • Keep one bold headline at the center and let smaller utility artifacts orbit around it.
  • Use paper texture, cropped peripherals, and rounded cards to create tactility without visual heaviness.
  • Use desk objects, receipts, task fragments, inbox snippets, and simple form cards as the recurring image system.
  • Crop objects at the frame edge so the scene feels larger than the viewport.
  • Keep the object layer supportive. The main message should still dominate the first read.

Overview

  • Build the experience like a launch message dropped onto a real desk.
  • Keep one bold headline at the center and let smaller utility artifacts orbit around it.
  • Use paper texture, cropped peripherals, and rounded cards to create tactility without visual heaviness.

Image Direction

  • Use desk objects, receipts, task fragments, inbox snippets, and simple form cards as the recurring image system.
  • Crop objects at the frame edge so the scene feels larger than the viewport.
  • Keep the object layer supportive. The main message should still dominate the first read.

Colors

  • FFFFFF and F4F6F8 should create a bright paper-ground system rather than a sterile flat white screen.
  • 232A35 is the main ink color for copy, strong chips, and important marks.
  • D8DEE8 should stay quiet in card outlines and subtle structure.

Typography

  • Use one strong modern sans for the main hierarchy and supporting body copy.
  • Keep the headline oversized, centered, and direct.
  • Use a handwritten or stamped accent sparingly for tiny marks or labels.

Design.md

System Overview

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

Desk Artifact Launchpad

A launch-page system that stages bold messaging inside a softly textured desktop collage of cards, peripherals, and productivity fragments.

Casual, tactile, productive, and highly composed.

Primary mode: lightproduct studiocontent-light

Theme

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

Visual atmosphere
Summary
Casual, tactile, productive, and highly composed.
Density
4
Variance
7
Motion
2
Signals
paper-grain white field · floating desk objects · bold central headline with rounded utility cards

Colors

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

Palette colors
Graphite
#232A35
Paper White
#FFFFFF
Soft Grain
#F4F6F8
Cloud Border
#D8DEE8
Slate Fog
#A7B0BC
Ink Accent
#151922
Usage rules
Keep the system overwhelmingly light and textured rather than flat.
Use dark ink tones for message emphasis and small utility controls.
Let the object collage create visual variety instead of relying on many accent colors.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.45rem
sm
0.8rem
md
1.2rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 9vw, 8rem)
panel_padding
clamp(1rem, 2vw, 1.5rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
20px
lg
28px
xl
36px
full
999px

Typography Families

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

Display
Geist
big utilitarian sans with friendly weight
Body
Geist
clear functional sans for short support copy
Accent
Caveat
small handwritten or stamped accent voice
Mono
IBM Plex Mono
tiny utility labels only

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.2rem, 6vw, 5rem)/—
Display
H2
clamp(2rem, 3vw, 2.8rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.7rem)/—
H3
Body
1rem/—
Body
Label
0.88rem/—
Label

Typography Rules

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

Rules
Keep the headline block oversized and centered. · Use the handwritten accent sparingly for stickers, marks, or tiny labels. · Favor short copy lines that read like notes around a workspace.

Borders

Border tokens with resolved values.

Fine
1px solid #D8DEE8
Dark
1px solid #151922

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Borders

Resolved border token values.

PropertyValue
fine1px solid #D8DEE8
dark1px solid #151922

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Center the main message and let smaller objects orbit around it.
Treat cards and peripherals as part of the composition, not just as content containers.
Keep the page airy even when many fragments are visible.
Use edge positioning and slight overlap to create desktop realism.

Component Preview

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

Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#232A35
Border
1px solid #D8DEE8
Radius
999px
Item padding
0.35rem 0.65rem
Typography
small sans
Buttons primary link
Base Attributes
Background
transparent
Text
#232A35
Border
none
Radius
0px
Padding
0px
Buttons dark chip
Base Attributes
Background
#151922
Text
#FFFFFF
Border
none
Radius
14px
Padding
0.35rem 0.55rem
Cards utility card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#232A35
Border
1px solid #D8DEE8
Radius
20px
Padding
1rem
Shadow
0 10px 24px rgba(35, 42, 53, 0.08)
Cards tool row
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#232A35
Border
1px solid #D8DEE8
Radius
20px
Padding
1rem 1.2rem
Shadow
0 8px 18px rgba(35, 42, 53, 0.06)

Image direction

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

Role
supportive
Media types
  • -
    desk artifact
  • -
    small workspace UI card
  • -
    receipt or utility fragment
Subject patterns
  • -
    keyboard segments, receipts, inbox strips, or cables framing the scene
  • -
    one large headline with many small edge artifacts
  • -
    lightweight tool pages made of stacked rounded rows
Composition logic
  • -
    Keep the headline in control and the objects peripheral.
  • -
    Use overlap and edge cropping to suggest a real desk.
  • -
    Balance objects diagonally around the main message.
Treatment rules
  • -
    Use soft shadow, subtle texture, and mostly white surfaces.
  • -
    Favor casual realism over polished 3D spectacle.
  • -
    Let artifacts feel useful, not decorative for their own sake.
Generation cues
  • -
    Describe which desk objects are present and how much of each is cropped.
  • -
    Call out paper texture, shadow softness, and how tightly the hero is centered.
  • -
    Keep card content short and legible at a glance.
Avoid
  • -
    No neon gadget styling.
  • -
    No colorful skeuomorphic clutter.
  • -
    No symmetrical sterile dashboard composition.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not flatten the collage into a generic centered hero with no peripheral objects.
  • -
    Do not add bright palette accents that fight the paper-and-ink tone.
  • -
    Do not turn every card into a heavy dashboard module.
  • -
    Do not let the handwritten accent become the main typography.