Refto
Mixpanel

Mixpanel

Get a complete view of your customers with Mixpanel digital analytics. Track, analyze, and act on user behavior to drive acquisition, growth, and retention.

Scrolling AnimationSaasLarge TypeWeb AppGradientBig Background ImageLightTransitions
3.0
5
Visits
Visit

Categories

SaasWeb App

Available Pages

Home

Version History

Design Analysis

Mixpanel Home design analysis

Build the system as white space, giant dark statements, and one orderly row of signal tiles. Use lilac and violet to energize proof without changing the page shell into an accent wash. Let monochrome pills keep the inter...

Key Takeaways

  • Build the system as white space, giant dark statements, and one orderly row of signal tiles.
  • Use lilac and violet to energize proof without changing the page shell into an accent wash.
  • Let monochrome pills keep the interaction posture grounded.
  • Use tile rows, minimal analytics fragments, and one soft lavender base glow rather than illustration-heavy scenes.
  • Keep proof tidy and clearly categorized.
  • Use white and dark graphite as the base.

Overview

  • Build the system as white space, giant dark statements, and one orderly row of signal tiles.
  • Use lilac and violet to energize proof without changing the page shell into an accent wash.
  • Let monochrome pills keep the interaction posture grounded.

Image Direction

  • Use tile rows, minimal analytics fragments, and one soft lavender base glow rather than illustration-heavy scenes.
  • Keep proof tidy and clearly categorized.

Colors

  • Use white and dark graphite as the base.
  • Keep lilac inside tiles and glow planes.
  • Use violet for crisp outlines and accent lines.

Typography

  • Use a large modern grotesk for the main promise.
  • Keep everything else quieter and more functional.

Design.md

System Overview

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

Lilac Signal Ledger

An analytics marketing language built from huge dark headlines, pale lilac data tiles, fine violet outlines, monochrome pills, and a soft lavender underglow.

Analytical, modern, bright, and quietly energized.

Primary mode: lightproduct analytics marketingui-rich

Theme

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

Visual atmosphere
Summary
Analytical, modern, bright, and quietly energized.
Density
5
Variance
4
Motion
1
Signals
lilac tiles · giant dark headline · soft lavender underglow

Colors

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

Palette colors
Pure White
#FFFFFF
Graphite Ink
#232228
Lilac Tile
#EEE8FF
Violet Line
#7B61FF
Soft Gray
#6D6C75
Lavender Glow
#D9CFFF
Usage rules
Keep the page shell white and dark-inked.
Use lilac and violet only where a tile, chip, or underglow needs a signal boost.

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.25rem

Token Radii

Corner radii tokens with a live surface sample.

sm
12px
md
16px
lg
22px
xl
28px
full
999px

Typography Families

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

Display
Garnett
broad modern grotesk with assertive scale
Body
Inter
neutral analytics body voice
Accent
Inter
tile label and nav voice
Mono
IBM Plex Mono
rare technical label support

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.6rem, 8vw, 6.2rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.25rem, 2vw, 1.6rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Push the main headline very large and very dark. · Keep body copy calm so the tile system can speak clearly.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-200ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-200ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use one giant statement before any tiles or proof.
Keep proof in tidy rows rather than decorative collage.
Let a soft glow build under the tiles to keep the system energized.

Component Preview

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

Tiles signal tile
Base Attributes
Background
#EEE8FF
Text
#232228
Border
1px solid #7B61FF
Radius
16px
Padding
1rem
Shadow
none
Actions black pill
Base Attributes
Background
#232228
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Actions quiet pill
Base Attributes
Background
#F1EFEC
Text
#232228
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Glows lavender band
Base Attributes
Background
#D9CFFF
Text
#232228
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
  • -
    data tile row
  • -
    analytics UI fragment
  • -
    soft gradient band
Subject patterns
  • -
    lilac cards with dark icons
  • -
    faint chart fragments
  • -
    lavender glow under the proof
Composition logic
  • -
    Arrange proof in one tidy row before deeper content.
  • -
    Use glow as a soft base plane, not a full-bleed wash.
Treatment rules
  • -
    Keep outlines crisp and color restrained.
  • -
    Stay white-shell first.
Generation cues
  • -
    Ask for lilac analytics tiles with dark iconography and a soft lavender glow underneath.
  • -
    Describe a white canvas and very large dark headline.
Avoid
  • -
    No neon purple saturation.
  • -
    No dark dashboard shell as the default.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not make the whole page purple.
  • -
    Do not replace the tidy tile row with noisy analytics collage.
  • -
    Do not introduce heavy shadowed dashboard cards everywhere.