Refto
Paper

Paper

Paper is a modern and powerful design tool that helps you create, share, and ship your best work.

Web AppDesignGradientAiClean
3.0
2
Visits
Visit

Categories

Web AppDesignAi

Available Pages

HomeRoadmap

Design Analysis

Paper Home design analysis

Drafting Paper Workspace is a tactile light system that feels measured, warm, and anti-generic. The page should behave like a drafting board translated into software marketing: warm paper tone, subtle texture, ruled marg...

Key Takeaways

  • Primary ( 151515): Ink text and the main CTA fill.
  • Secondary ( F0EBDD): Grouped surface and soft panel tone.
  • Tertiary ( 8FB0FF): Sparse signal accent for emphasis or tiny brand notes.
  • Display: Large, calm, and slightly dense, with conversational lowercase rhythm.
  • Body: Plain and evenly spaced.
  • Utility: Mono only for sparse drafting cues, measurement marks, or technical annotation.

Overview

Drafting Paper Workspace is a tactile light system that feels measured, warm, and anti-generic. The page should behave like a drafting board translated into software marketing: warm paper tone, subtle texture, ruled margins, deliberate lowercase statements, and one large connected-canvas proof object.

Image Direction

Use light software-window imagery and canvas crops as the main proof. Images should feel like working surfaces placed on a drafting table, not like glossy billboard renders.

Colors

The palette stays warm, quiet, and almost monochrome.

  • Primary ( 151515): Ink text and the main CTA fill.
  • Secondary ( F0EBDD): Grouped surface and soft panel tone.
  • Tertiary ( 8FB0FF): Sparse signal accent for emphasis or tiny brand notes.

Typography

Use one grounded grotesk across the system and let lowercase posture do the emotional work.

  • Display: Large, calm, and slightly dense, with conversational lowercase rhythm.
  • Body: Plain and evenly spaced.
  • Utility: Mono only for sparse drafting cues, measurement marks, or technical annotation.

Design.md

System Overview

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

Drafting Paper Workspace

A tactile light product system that fuses warm paper texture, ruled drafting cues, and flat low-radius controls into a calm connected-canvas interface language.

Warm, methodical, anti-slop, and quietly handcrafted.

Primary mode: lightdesign software marketingui-rich

Theme

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

Visual atmosphere
Summary
Warm, methodical, anti-slop, and quietly handcrafted.
Density
4
Variance
3
Motion
1
Signals
paper texture · ruler and drafting marks · lowercase grotesk typography · flat black CTA block

Colors

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

Palette colors
Draft Paper
#F6F2E8
Warm Surface
#F0EBDD
Ink
#151515
Pencil Gray
#8A857E
Rule Line
#D9D0BE
Signal Blue
#8FB0FF
Usage rules
Let warm paper dominate the shell instead of pure white.
Use dark ink for primary action before using blue.
Treat blue as a note or small signal, not as a full-shell brand flood.
Keep linework visible but quiet.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
group_gap
1rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
4px
panel
12px
chip
4px

Typography Families

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

Display
Matter
calm grotesk with clean lowercase personality
Body
Matter
plain-spoken UI voice that stays out of the way
Mono
IBM Plex Mono
technical annotation and measurement support

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.8rem, 8vw, 5.4rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8rem/—
Caption

Typography Rules

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

Rules
Favor lowercase conversational display over loud uppercase claims. · Keep weight modest and let spacing carry hierarchy. · Use mono only for sparse drafting or technical notes.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
120ms-180ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
avoid springy behavior

Motion

Resolved motion token values.

PropertyValue
duration120ms-180ms
easingcubic-bezier(.2, .8, .2, 1)
springavoid springy behavior

Layout Principles

Build the page like a drafting board, not a glossy dashboard.
Allow diagonal cuts, ruled backgrounds, and measurement margins to shape the shell.
Use one large software canvas as proof rather than many equal feature cards.
Keep modules flat and methodical.
Preserve editorial negative space around the headline.

Component Preview

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

Buttons primary
Base Attributes
Background
#151515
Text
#F6F2E8
Border
0px none transparent
Radius
{tokens.radii.control}->4px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#151515
Border
0px none transparent
Radius
{tokens.radii.control}->4px
Padding
0.75rem 0.875rem
Min height
40px
Typography
body
Cards workspace window
Feature Card
Component preview content
Base Attributes
Background
#F8F6F0
Text
#151515
Border
1px solid #D9D0BE
Radius
{tokens.radii.panel}->12px
Padding
0px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F0EBDD
Text
#151515
Border
1px solid #D9D0BE
Radius
8px
Padding
{tokens.spacing.card_padding}->1.25rem
Shadow
none
Inputs default
Base Attributes
Background
#F8F6F0
Text
#151515
Border
1px solid #D9D0BE
Radius
4px
Padding
0.75rem 0.875rem
Min height
40px
Placeholder
rgba(21, 21, 21, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(21, 21, 21, 0.82)
Height
44px
Active text
#151515
Item padding
0px
Item radius
0px

Hero stage

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

Summary
An editorial paper field with measured markings and one connected-canvas window.
Guidance
  • -
    Keep the texture subtle enough to feel tactile rather than dirty.
  • -
    Use ruled marks as structure, not as decoration sprayed everywhere.

Image direction

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

Summary
Light interface screenshots framed as real working surfaces inside a drafting environment.

Responsive guidance

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

  • -
    Keep the drafting-line logic visible on mobile, even if some decorative extent is trimmed.
  • -
    Allow the software window to stack under the headline instead of shrinking beyond legibility.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No glossy dark-tech shell.
  • -
    No pill buttons or overly soft SaaS geometry.
  • -
    No neon accent gradients.
  • -
    No cold blue-gray paper substitute.
  • -
    No overanimated hero effects that break the drafting-board calm.