Refto
Superhuman

Superhuman

Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactful.

Light ShadowSaasWeb AppGradientAiColorfulBig Background ImageLightClean
3.0
4
Visits
Visit

Categories

SaasWeb AppAi

Available Pages

Home

Version History

Design Analysis

Superhuman Home design analysis

Lilac Productivity Aura is a premium productivity system that mixes clarity with atmosphere. It should feel fast and polished: large easy headlines, soft aura backgrounds, frosted or clean utility cards, and a lavender a...

Key Takeaways

  • Primary is a lavender action solid.
  • Secondary is a lighter lavender support fill.
  • Tertiary is a blue atmospheric accent.
  • Use one modern sans throughout.
  • Keep display large, calm, and easy to parse.
  • Let color and surface treatment provide the extra personality.

Overview

Lilac Productivity Aura is a premium productivity system that mixes clarity with atmosphere. It should feel fast and polished: large easy headlines, soft aura backgrounds, frosted or clean utility cards, and a lavender action system that remains consistent even when the product shifts into darker premium variants.

Image Direction

Use floating interface cards, softly lit utility surfaces, and atmospheric gradient fields. Product proof should remain interface-led rather than photography-led.

Colors

Dark plum can appear in premium sub-product surfaces, but the suite should still read as part of the same lavender-led family.

  • Primary is a lavender action solid.
  • Secondary is a lighter lavender support fill.
  • Tertiary is a blue atmospheric accent.

Typography

  • Use one modern sans throughout.
  • Keep display large, calm, and easy to parse.
  • Let color and surface treatment provide the extra personality.

Design.md

System Overview

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

Lilac Productivity Aura

A productivity-suite system built from misty blue-lilac gradients, lavender action accents, frosted utility cards, and compact premium rounded rectangles.

Elevated, fast, atmospheric, and premium.

Primary mode: lightproductivity suiteui-rich

Theme

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

Visual atmosphere
Summary
Elevated, fast, atmospheric, and premium.
Density
3
Variance
4
Motion
2
Signals
blue-lilac aura fields · lavender action accents · frosted productivity cards · dark premium variant surfaces

Colors

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

Palette colors
Cloud White
#FFFFFF
Ink Gray
#292827
Aura Blue
#9DBEFF
Lavender Solid
#714CB6
Lavender Light
#D4C7FF
Dusk Plum
#42203E
Quiet Border
#D7D2E8
Usage rules
Let color arrive through atmosphere and action rather than heavy UI fills.
Keep lavender as the main signal color.
Use dark plum only for premium variant surfaces.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
8px
panel
16px
hero
12px

Typography Families

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

Display
Super Sans
clean productivity sans with premium softness
Body
Super Sans
neutral and polished

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 9vw, 6rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Use one modern sans throughout. · Keep display large and easy rather than dense.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Build first folds around atmosphere plus floating product cards.
Allow light and dark variants of the same suite language.
Keep layouts clean and legible enough that the aura never muddies the UI.

Component Preview

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

Buttons primary
Base Attributes
Background
#714CB6
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.125rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#D4C7FF
Text
#292827
Border
0px none transparent
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.125rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
rgba(255,255,255,0.22)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.18)
Radius
{tokens.radii.panel}->16px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
0 12px 30px rgba(20,20,40,0.12)
Cards light
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#292827
Border
1px solid #D7D2E8
Radius
{tokens.radii.panel}->16px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#292827
Border
1px solid #D7D2E8
Radius
12px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(41,40,39,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Height
40px
Active text
#FFFFFF
Item padding
0px
Item radius
0px

Image direction

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

Role
supportive
Media types
  • -
    frosted UI montage
  • -
    dark premium UI crop
Subject patterns
  • -
    floating productivity cards
  • -
    soft aura background
  • -
    lavender-lit controls
Composition logic
  • -
    Keep UI artifacts large, legible, and softly suspended in atmosphere.
Avoid
  • -
    No stock photography replacing interface-led proof.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No sharp enterprise severity.
  • -
    No pill-heavy consumer softness.
  • -
    No saturated rainbow gradient shell.