Refto
Cursor

Cursor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

InteractiveDevelopmentSaasAiBlack WhiteBig Background ImageDarkClean
3.0
6
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Cursor Home design analysis

Build the page as warm paper, quiet chrome, and one believable software window at a time. Let the system feel productive and premium rather than speculative or flashy. Use black pills as the clearest action voice. Use la...

Key Takeaways

  • Build the page as warm paper, quiet chrome, and one believable software window at a time.
  • Let the system feel productive and premium rather than speculative or flashy.
  • Use black pills as the clearest action voice.
  • Use large software windows, workflow surfaces, and code-adjacent panes as the main proof language.
  • Keep the backdrop warm and almost empty around them.
  • Keep the palette almost monochrome and warm.

Overview

  • Build the page as warm paper, quiet chrome, and one believable software window at a time.
  • Let the system feel productive and premium rather than speculative or flashy.
  • Use black pills as the clearest action voice.

Image Direction

  • Use large software windows, workflow surfaces, and code-adjacent panes as the main proof language.
  • Keep the backdrop warm and almost empty around them.

Colors

  • Keep the palette almost monochrome and warm.
  • Use dark ink for text and main actions, with only subtle tonal shifts elsewhere.

Typography

  • Use one restrained grotesk across the whole hierarchy.
  • Keep utility labels compact and let size, not chroma, create most of the hierarchy.

Design.md

System Overview

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

Warm Operator Canvas

A calm product-marketing language built from warm paper neutrals, black utility pills, muted software windows, and editorially restrained product proof.

Warm, operational, restrained, and premium.

Primary mode: lightAI development tooling marketingui-rich

Theme

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

Visual atmosphere
Summary
Warm, operational, restrained, and premium.
Density
4
Variance
3
Motion
1
Signals
paper-toned background · black utility pills · quiet software-window depth

Colors

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

Palette colors
Paper Sand
#F7F7F4
Warm Ink
#26251E
Quiet Surface
#F2F1ED
Calm Border
#D8D3CA
Soft Gray
#7A746B
Muted Glow
#E8DDCF
Usage rules
Keep the page warm and almost monochrome.
Use dark fill for the main action voice before reaching for any accent hue.

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
10px
md
16px
lg
24px
xl
32px
full
999px

Typography Families

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

Display
Operator Grotesk
custom grotesk with quiet authority
Body
Operator Grotesk
neutral product-marketing sans
Accent
Operator Grotesk
utility navigation voice
Mono
JetBrains Mono
technical 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.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 largest headlines soft in weight rather than heavy and tech-bro aggressive. · Use mono only when the content explicitly behaves like code or CLI.

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 generous top breathing room before the first product window.
Treat each major section as one statement plus one software surface.
Let pricing and product surfaces stay aligned to the same warm paper environment.

Component Preview

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

Actions dark pill
Base Attributes
Background
#26251E
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Actions quiet pill
Base Attributes
Background
#F7F7F4
Text
#26251E
Border
1px solid rgba(38, 37, 30, 0.14)
Radius
999px
Padding
0.8rem 1.15rem
Windows product window
Base Attributes
Background
#F2F1ED
Text
#26251E
Border
1px solid #D8D3CA
Radius
16px
Padding
1rem
Shadow
0 18px 40px rgba(0, 0, 0, 0.08)
Navigation quiet header
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#26251E
Border
none
Radius
0px
Padding
0px
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    software window
  • -
    workflow board
  • -
    editor crop
Subject patterns
  • -
    large calm application panes
  • -
    warm textured paper backdrop
  • -
    subtle shadow and chrome
Composition logic
  • -
    Show one dominant window per stage.
  • -
    Let negative space create prestige around the product object.
Treatment rules
  • -
    Keep shadows soft and sparse.
  • -
    Prefer believable UI over concept illustration.
Generation cues
  • -
    Ask for warm-paper product stages and a large software window with subtle depth.
  • -
    Describe black pills and quiet chrome.
Avoid
  • -
    No neon glows.
  • -
    No dense dashboard mosaics as the main hero.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the warm paper tone with cold white or neon dark mode.
  • -
    Do not turn the system into a gradient-heavy AI spectacle.
  • -
    Do not crowd the page with many equal-weight cards.