Refto
Backdrop

Backdrop

Add stunning live wallpapers to your Mac desktop. Thousands of 4K scenes, smooth multi-display playback, low CPU use, and Lock Screen support.

DevelopmentScrolling AnimationLarge TypeDesktop AppHorizontal ScrollingBento GridGradientTechnologyBig Background ImageDarkClean
4.0
67
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Backdrop Home design analysis

Build for a premium Mac-utility storefront with strong Apple-adjacent polish. Let the first impression come from cinematic product art and large dark product banners. Keep the voice direct and product-centered rather tha...

Key Takeaways

  • Build for a premium Mac-utility storefront with strong Apple-adjacent polish.
  • Let the first impression come from cinematic product art and large dark product banners.
  • Keep the voice direct and product-centered rather than editorial or narrative-heavy.
  • Use large, polished app screenshots, wallpapers, and glossy icon compositions.
  • Keep each major product module focused on one dominant scene.
  • Maintain dark, controlled image treatment with blue-violet energy rather than many competing color accents.

Overview

  • Build for a premium Mac-utility storefront with strong Apple-adjacent polish.
  • Let the first impression come from cinematic product art and large dark product banners.
  • Keep the voice direct and product-centered rather than editorial or narrative-heavy.

Image Direction

  • Use large, polished app screenshots, wallpapers, and glossy icon compositions.
  • Keep each major product module focused on one dominant scene.
  • Maintain dark, controlled image treatment with blue-violet energy rather than many competing color accents.

Colors

  • Use deep charcoal or black as the page field.
  • Keep primary text bright and clean against dark surfaces.
  • Use electric blue as the one clear accent for featured emphasis and key actions.

Typography

  • Use a neutral system-style grotesk for everything.
  • Keep titles large, centered, and clean.
  • Let image scale and contrast do more work than expressive typography.

Design.md

System Overview

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

Cindori Design Language

A cinematic dark storefront for polished Mac utilities, driven by large product banners, premium app imagery, and clear purchase actions.

Premium, Apple-adjacent, and cinematic.

Primary mode: darkpremium utility storefrontui-rich

Theme

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

Visual atmosphere
Summary
Premium, Apple-adjacent, and cinematic.
Density
5
Variance
3
Motion
2
Signals
dark charcoal shell · large product banners · blue action emphasis · glossy app artwork

Colors

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

Palette colors
Store Black
#111317
Panel Ink
#14181F
Frost Text
#F5F5F7
Signal Blue
#2D8CFF
Quiet Stroke
rgba(255,255,255,0.10)
Usage rules
Let dark surfaces dominate and keep bright accents focused.
Use white buttons for baseline purchase paths and blue only for promoted emphasis.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
card_padding
1.5rem
banner_padding
2rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
18px
banner
24px

Typography Families

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

Display
-apple-system
clean system grotesk
Body
-apple-system
Apple-like utility text
Mono
"SF Mono"
support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

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

Typography Rules

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

Rules
Keep typography modern, neutral, and product-direct. · Rely on large centered titles inside banner modules.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Stack large product banners vertically on the home page.
Center key product copy within oversized dark image modules.
Shift to dense comparison cards and galleries on store pages.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFFFFF
Text
#1D1D1F
Border
none
Radius
8px
Padding
0.8rem 1.25rem
Min height
40px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
linear-gradient(180deg, #3394FF 0%, #1F78E3 100%)
Text
#F5F5F7
Border
none
Radius
8px
Padding
0.8rem 1.25rem
Min height
40px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#14181F
Text
#F5F5F7
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.component}->18px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards featured
Feature Card
Component preview content
Base Attributes
Background
linear-gradient(180deg, rgba(45,140,255,0.18) 0%, rgba(20,24,31,1) 100%)
Text
#F5F5F7
Border
2px solid #2D8CFF
Radius
{tokens.radii.component}->18px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F5F5F7
Height
48px
Active text
#F5F5F7
Item padding
0.5rem 0.9rem
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
  • -
    app screenshot
  • -
    wallpaper render
  • -
    glossy icon artwork
Subject patterns
  • -
    one large scene per product block
  • -
    dark wallpaper previews in clean grids
Composition logic
  • -
    Treat product art like a cinematic feature panel, not a decorative side image.
  • -
    Use centered compositions with controlled glow and a dark edge field.
Treatment rules
  • -
    Keep product images crisp and premium.
  • -
    Use blue-violet highlights sparingly against deep black surfaces.
Generation cues
  • -
    Prompt for premium Mac utility artwork on dark cinematic panels.
  • -
    Describe app screenshots, glowing wallpapers, and centered icon compositions rather than generic tech abstractions.
Avoid
  • -
    No flat vector explainer art.
  • -
    No soft pastel marketing mood boards.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No light-mode takeover.
  • -
    No tiny low-importance imagery.
  • -
    No muted gray primary actions.