Refto
CleanShot

CleanShot

CleanShot X is the best screenshot and screen recording app for Mac with a built-in annotation tool, Cloud uploading, scrolling capture, and a lot more.

Desktop AppLightCleanTransitions
3.0
3
Visits
Visit

Categories

Desktop App

Available Pages

Home

Version History

Design Analysis

CleanShot Home design analysis

This system should feel like a polished desktop utility page that trusts clarity over theatrics. Use wide white breathing room, large black headlines, and one or two obvious blue calls to action. Product mockups should c...

Overview

This system should feel like a polished desktop utility page that trusts clarity over theatrics. Use wide white breathing room, large black headlines, and one or two obvious blue calls to action. Product mockups should carry most of the storytelling weight, while the surrounding interface stays calm. The page should read as practical and platform-native. Soft-gray stages can gather groups of features or tool palettes, but they should never overpower the product itself. The strongest emphasis move is still the blue action pill.

Image Direction

Use believable desktop-product mockups with realistic window chrome, overlays, and tool palettes. Let one large mockup own each feature section, with only small supporting accents nearby. Backgrounds should stay quiet so the product state remains crisp and readable.

Colors

Base the system on white, black, and one bright platform-blue accent. Soft gray can support panels, secondary buttons, and grouped features. A dark footer or closing stage is acceptable, but it should be a deliberate exception rather than the main operating mode. Keep blue for primary intent. When everything turns blue, the system loses its clarity.

Typography

Use a bold contemporary grotesk for headlines and a calm matching body style for copy. Headings should feel energetic but still product-focused, not editorial or luxurious. Supporting text should stay readable, open, and lightly spaced. Do not complicate the type system. The design works because it stays unified.

Design.md

System Overview

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

Mac Utility Showcase

A desktop-product marketing system built from wide white space, vivid blue pill actions, and oversized mockups on soft gray stages.

Clean, confident, platform-native, and friendly.

Primary mode: lightdesktop utility softwareui-rich

Theme

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

Visual atmosphere
Summary
Clean, confident, platform-native, and friendly.
Density
3
Variance
3
Motion
2
Signals
wide white breathing room · blue primary pill actions · soft gray support stages · large desktop mockups

Colors

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

Palette colors
White
#FFFFFF
Ink
#111111
Platform Blue
#0669FF
Soft Panel
#F6F6F6
Rule Gray
#E8E8E8
Dark Stage
#050505
Usage rules
Keep most surfaces white or soft gray; use blue only for primary intent.
Use black chapters sparingly as a closing emphasis move, not as a default layout mode.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 8rem)
card_padding
2rem
media_gap
2rem

Token Radii

Corner radii tokens with a live surface sample.

control
28px
panel
32px
media
20px

Typography Families

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

Display
Inter
clear product grotesk
Body
Inter
friendly platform UI voice
Label
Inter
bold CTA and utility label

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 5vw, 4rem)/—
Display
H2
clamp(2rem, 3.6vw, 3rem)/—
H2
Body
1rem/—
Body
Label
1rem/—
Label

Typography Rules

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

Rules
Use boldness and space for emphasis instead of ornate type contrast. · Keep supporting copy calm and moderately wide, never cramped.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.2, .8, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.2, .8, .2, 1)

Layout Principles

Alternate a text column with one dominant mockup rather than splitting attention across many small assets.
Use broad white margins and clear row spacing.
Group multiple feature icons or bullets inside soft panels instead of giving every detail its own card.

Component Preview

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

Buttons primary
Base Attributes
Background
#0669FF
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->28px
Padding
0 2.5rem
Min height
56px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#F6F6F6
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.control}->28px
Padding
0 2.5rem
Min height
56px
Typography
label
Panels feature
Base Attributes
Background
#F6F6F6
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.panel}->32px
Padding
{tokens.spacing.card_padding}->2rem
Shadow
none
Panels dark cta
Base Attributes
Background
#050505
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.panel}->32px
Padding
2.5rem
Shadow
none
Mockups default
Base Attributes
Background
#FFFFFF
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.media}->20px
Padding
0
Shadow
0 20px 48px rgba(0, 0, 0, 0.08)
Inputs subscribe
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E8E8E8
Radius
{tokens.radii.control}->28px
Padding
0 1rem
Min height
56px
Placeholder
rgba(17, 17, 17, 0.35)

Hero stage

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

Summary
A left-right hero pairs a short product promise with a single oversized desktop video or screenshot object.

Image direction

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

Role
supportive
Media types
  • -
    product mockup
  • -
    desktop window composite
Subject patterns
  • -
    one large application window
  • -
    floating utility overlay or tool palette
Composition logic
  • -
    Let the mockup own at least half the row.
  • -
    Keep product media crisp, platform-native, and lightly shadowed against a quiet background.
Treatment rules
  • -
    Preserve realistic window chrome and interaction detail.
  • -
    Use blue accents inside the mockup sparingly so the CTA still leads.
Generation cues
  • -
    Describe the desktop surface, mockup scale, and overlay behavior before styling backgrounds.
  • -
    Favor believable product states over empty placeholder chrome.
Avoid
  • -
    No fake 3D render metaphors.
  • -
    No overcrowded dashboard density.

Responsive guidance

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

  • -
    Stack text above mockup on small screens while keeping the CTA pill large and obvious.
  • -
    Let soft-gray stages become one-column panels rather than shrinking the mockups into thumbnails.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark UI overload.
  • -
    No glass or neon treatment.
  • -
    Do not replace mockups with abstract placeholder rectangles.