Refto
Ghost Designer

Ghost Designer

SaasLarge TypeFunDesignBlack WhiteSingle PageLightClean
3.0
3
Visits
Visit

Categories

SaasDesign

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Ghost Designer Home design analysis

Lead with one giant statement, one simple CTA, and one playful mascot cue. Use white chips and dark slabs to keep the commercial structure obvious. Keep the personality soft rather than hyper-illustrated. Use soft mascot...

Key Takeaways

  • Lead with one giant statement, one simple CTA, and one playful mascot cue.
  • Use white chips and dark slabs to keep the commercial structure obvious.
  • Keep the personality soft rather than hyper-illustrated.
  • Use soft mascot blobs, cropped portfolio proof, and very simple collage strips.
  • Treat imagery as punctuation around the sales story, not as a separate art direction.
  • Keep the shell pale gray rather than stark white.

Overview

  • Lead with one giant statement, one simple CTA, and one playful mascot cue.
  • Use white chips and dark slabs to keep the commercial structure obvious.
  • Keep the personality soft rather than hyper-illustrated.

Image Direction

  • Use soft mascot blobs, cropped portfolio proof, and very simple collage strips.
  • Treat imagery as punctuation around the sales story, not as a separate art direction.

Colors

  • Keep the shell pale gray rather than stark white.
  • Use graphite-plum as the big anchor tone and white as the chip surface.
  • Let color intensity come mainly from contrast, not from rainbow accents.

Typography

  • Use one heavy grotesk with tight spacing for the main promise.
  • Keep the body copy short and secondary.

Design.md

System Overview

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

Soft Mascot Subscription

A playful subscription-sales language built from pale gray space, massive dark grotesk headlines, midnight pricing slabs, white service pills, and soft mascot blobs hovering through the layout.

Friendly, bold, and commercially direct.

Primary mode: lightdesign subscription marketingui-rich

Theme

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

Visual atmosphere
Summary
Friendly, bold, and commercially direct.
Density
5
Variance
6
Motion
2
Signals
graphite headline wall · white service chips · soft mascot blobs

Colors

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

Palette colors
Fog Gray
#ECEAEE
Graphite Plum
#2D2A32
Cloud White
#FFFFFF
Soft Concrete
#D9D7DB
Usage rules
Keep the page pale and roomy.
Use the dark graphite-plum tone in large anchored slabs, not in thin accents everywhere.

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
12px
md
18px
lg
32px
xl
40px
full
999px

Typography Families

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

Display
Arial
dense bold grotesk
Body
Arial
direct service-copy voice
Accent
Arial
chip and nav label voice
Mono
IBM Plex Mono
rare utility support

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.2rem, 7vw, 6rem)/—
Display
H2
clamp(2rem, 4vw, 3.1rem)/—
H2
H3
1.15rem/—
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 display enormous and compact. · Use short body statements so the huge headline remains the main event.

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

Open with a giant one-line promise and a simple start button.
Use collage proof between the hero and the benefits cards.
Keep the chip-based sections airy and easy to scan.

Component Preview

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

Actions dark button
Base Attributes
Background
#2D2A32
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.85rem 1.2rem
Actions white chip
Base Attributes
Background
#FFFFFF
Text
#2D2A32
Border
none
Radius
999px
Padding
0.75rem 1rem
Cards midnight slab
Feature Card
Component preview content
Base Attributes
Background
#2D2A32
Text
#FFFFFF
Border
none
Radius
32px
Padding
1.5rem
Shadow
none
Cards pale card
Feature Card
Component preview content
Base Attributes
Background
#D9D7DB
Text
#2D2A32
Border
none
Radius
24px
Padding
1.5rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    soft mascot
  • -
    portfolio collage
  • -
    pricing slab
Subject patterns
  • -
    rounded ghosts
  • -
    cropped work mosaics
  • -
    white chips on pale gray
Composition logic
  • -
    Float a few mascot shapes around the large text moments.
  • -
    Keep the proof collage broad and slightly irregular.
Treatment rules
  • -
    Use pale gray as the dominant field.
  • -
    Keep the dark slabs dense and simple.
Generation cues
  • -
    Ask for a pale gray subscription page with giant graphite headlines, white chips, dark pricing slabs, and soft mascot blobs.
  • -
    Mention collage proof and a very simple CTA structure.
Avoid
  • -
    No neon mascot art.
  • -
    No glossy dark cards with big shadows.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not remove the mascot layer entirely.
  • -
    Do not switch the page to a sterile white SaaS shell.
  • -
    Do not make every surface dark and heavy.