Refto
Shuttle

Shuttle

Collaborate easy. Simply drag, drop and add your brand.

InteractiveScrolling AnimationSaasLarge TypeWeb AppAnimationLightClean
4.0
5
Visits
Visit

Categories

SaasWeb App

Available Pages

About

Version History

Design Analysis

Shuttle About design analysis

Friendly Cloud Transfer is a light productivity system that stays almost frictionless: pale gray space, plain black text, one decisive blue action, and one large product frame that explains everything at a glance.

Key Takeaways

  • Primary ( 000000): Main text and iconography.
  • Secondary ( 525252): Supporting copy and secondary navigation tone.
  • Tertiary ( 0077FF): Primary CTA fill and active pricing emphasis.
  • Use one sans family throughout.
  • Make the headline large, clear, and direct rather than clever.
  • Keep labels compact and slightly bolder than body copy.

Overview

Friendly Cloud Transfer is a light productivity system that stays almost frictionless: pale gray space, plain black text, one decisive blue action, and one large product frame that explains everything at a glance.

Image Direction

Show the product as a bright white desktop panel with tiny collaboration chips or badges orbiting it. Avoid cinematic scenes; the imagery should feel like friendly product context.

Colors

  • Primary ( 000000): Main text and iconography.
  • Secondary ( 525252): Supporting copy and secondary navigation tone.
  • Tertiary ( 0077FF): Primary CTA fill and active pricing emphasis.

Typography

  • Use one sans family throughout.
  • Make the headline large, clear, and direct rather than clever.
  • Keep labels compact and slightly bolder than body copy.

Design.md

System Overview

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

Friendly Cloud Transfer

A minimal productivity landing system with soft gray space, bright blue action pills, and floating desktop-demo chrome.

Simple, helpful, and calm.

Primary mode: lightproductivity software marketingui-rich

Theme

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

Visual atmosphere
Summary
Simple, helpful, and calm.
Density
2
Variance
2
Motion
2
Signals
fog-gray background · bright blue action pills · white demo panels · floating lightweight chips

Colors

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

Palette colors
Fog Background
#F5F5F5
True Black
#000000
Signal Blue
#0077FF
Soft Gray
#525252
Panel White
#FFFFFF
Panel Line
#E7E7E7
Usage rules
Keep the page nearly monochrome except for blue actions.
Use white panels as product islands inside the gray field.
Avoid secondary accent colors unless a true system status needs them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
88px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
999px
panel
16px
chip
8px

Typography Families

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

Display
Inter
clean product headline
Body
Inter
plain helpful UI text

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
3.875rem/—
Display
H2
2rem/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use one sans family only. · Keep typography friendly and unforced.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Center the hero and keep it simple.
Show one large workspace frame instead of many competing screenshots.
Use small floating chips to imply collaboration without clutter.

Component Preview

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

Buttons primary
Base Attributes
Background
#0077FF
Text
#FFFFFF
Border
1px solid #0077FF
Radius
{tokens.radii.control}->999px
Padding
10px 18px
Min height
40px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#000000
Border
1px solid #E7E7E7
Radius
{tokens.radii.chip}->8px
Padding
8px 12px
Min height
32px
Shadow
0 0 1px rgba(0,0,0,0.25)
Typography
label
Cards workspace
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
1px solid #E7E7E7
Radius
{tokens.radii.panel}->16px
Padding
16px
Shadow
0 10px 30px rgba(0,0,0,0.04)
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
1px solid #D7E6FF
Radius
{tokens.radii.panel}->16px
Padding
24px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#525252
Height
44px
Active text
#000000
Item padding
8px 16px
Item radius
{tokens.radii.control}->999px

Image direction

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

Role
supportive
Media types
  • -
    workspace mockup
  • -
    floating chip
Subject patterns
  • -
    white panel on gray field
  • -
    small user/file badges
Composition logic
  • -
    Keep the main workspace large and centered.
  • -
    Use surrounding chips sparingly as lightweight context.
Treatment rules
  • -
    Use tiny shadows only where panels need separation.
  • -
    Keep the page brighter than the product surfaces.
Generation cues
  • -
    Describe a minimal white app frame on pale gray with one blue CTA.
  • -
    Add one or two friendly chips with tiny avatars or file labels.
Avoid
  • -
    No noisy collaboration sticker-cloud.
  • -
    No dark mode or glossy gradients.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No extra accent colors competing with blue.
  • -
    No dramatic glassmorphism or translucent blur panels.
  • -
    No complex enterprise-dashboard framing in the hero.