Refto
Craft

Craft

A premium writing experience that follows you across all your devices.

SaasWeb AppDesktop AppMobile AppHorizontal ScrollingGradientAiColorfulBig Background ImageClean
4.0
9
Visits
Visit

Available Pages

HomeAgentsMermaid

Design Analysis

Craft Home design analysis

Build the page like a scenic paper stage rather than a plain app landing page. Let oversized serif headlines sit inside a sky-blue textured field framed by collage tears and clouds. Use black capsules and a floating roun...

Key Takeaways

  • Build the page like a scenic paper stage rather than a plain app landing page.
  • Let oversized serif headlines sit inside a sky-blue textured field framed by collage tears and clouds.
  • Use black capsules and a floating rounded nav shell to keep the system anchored.
  • Use paper tears, cloud dots, grain, and floating app badges around one clean workspace window.
  • Keep the collage deliberate and premium rather than scrapbook-chaotic.
  • Use warm paper as the base, sky blue as the scenic field, and green as a promotional rail.

Overview

  • Build the page like a scenic paper stage rather than a plain app landing page.
  • Let oversized serif headlines sit inside a sky-blue textured field framed by collage tears and clouds.
  • Use black capsules and a floating rounded nav shell to keep the system anchored.

Image Direction

  • Use paper tears, cloud dots, grain, and floating app badges around one clean workspace window.
  • Keep the collage deliberate and premium rather than scrapbook-chaotic.

Colors

  • Use warm paper as the base, sky blue as the scenic field, and green as a promotional rail.
  • Keep black as the strongest action and type color.

Typography

  • Use a large editorial serif for the emotional headline.
  • Keep all product explanation in a clean sans.

Design.md

System Overview

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

Paper Sky Collage

A note-taking marketing language built from paper-toned surfaces, sky-blue textured stages, oversized serif headlines, black capsule actions, and torn collage imagery.

Creative, tactile, warm, and expansive.

Primary mode: lightproductivity app marketingui-rich

Theme

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

Visual atmosphere
Summary
Creative, tactile, warm, and expansive.
Density
6
Variance
7
Motion
2
Signals
sky-blue textured stage · oversized serif statement · torn collage clouds and paper edges

Colors

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

Palette colors
Paper Warmth
#FCF9F7
Sky Wash
#BFE8FF
Ink Black
#030302
Leaf Rail
#4EA060
Cloud White
#FFFFFF
Pastel Note
#F8E88A
Usage rules
Keep the base warm and papery.
Use sky blue for major scene-setting stages and green only as a top rail or accent.

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.5rem

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
20px
lg
26px
xl
32px
full
999px

Typography Families

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

Display
Untitled Serif
large editorial serif with cultural warmth
Body
Untitled Sans
clean productivity body voice
Accent
Untitled Sans
nav and rail label voice
Mono
IBM Plex Mono
rare utility support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.2rem, 7vw, 6rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.8rem)/—
H3
Body
1rem/—
Body
Label
0.92rem/—
Label

Typography Rules

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

Rules
Let the serif headlines feel generous and cultural rather than corporate. · Keep the sans voice plain and product-focused underneath.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

PropertyValue
duration180ms-240ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Treat the hero like a scenic stage rather than a plain product band.
Float a rounded nav shell above the scene.
Use one large product window anchored by colorful supporting notes or collage elements.

Component Preview

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

Rails promo strip
Base Attributes
Background
#4EA060
Text
#FFFFFF
Border
none
Radius
0px
Padding
0.75rem 1rem
Shadow
none
Rails nav shell
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.88)
Text
#030302
Border
1px solid rgba(3, 3, 2, 0.08)
Radius
26px
Padding
0.5rem 0.75rem
Shadow
0 12px 18px rgba(0, 0, 0, 0.08)
Actions black capsule
Base Attributes
Background
#030302
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.2rem
Actions light capsule
Base Attributes
Background
#FFFFFF
Text
#030302
Border
1px solid rgba(3, 3, 2, 0.08)
Radius
999px
Padding
0.8rem 1.2rem
Windows workspace window
Base Attributes
Background
#FFFFFF
Text
#030302
Border
1px solid rgba(3, 3, 2, 0.08)
Radius
20px
Padding
1rem
Shadow
0 20px 40px rgba(0, 0, 0, 0.10)

Image direction

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

Role
load-bearing
Media types
  • -
    paper tear collage
  • -
    cloud texture
  • -
    workspace window
  • -
    floating app icon
Subject patterns
  • -
    blue sky stage
  • -
    soft grain
  • -
    cut-paper edges
  • -
    rounded note cards
Composition logic
  • -
    Use one scenic stage with collage framing around a clear product window.
  • -
    Balance large serif type against tactile paper elements.
Treatment rules
  • -
    Keep texture soft and premium, not scrapbook-chaotic.
  • -
    Let black capsules provide the clearest interaction anchor.
Generation cues
  • -
    Ask for a paper-collage sky stage with torn white forms, soft grain, and one clean workspace window.
  • -
    Mention a floating rounded nav shell and black pill CTA.
Avoid
  • -
    No glossy 3D SaaS orbs.
  • -
    No sterile corporate white-box presentation without collage warmth.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not flatten the collage into plain SaaS gradients.
  • -
    Do not replace the serif voice with all-sans neutrality.
  • -
    Do not let the color system become neon or oversaturated.