Refto
Visitors

Visitors

Privacy-friendly Google Analytics alternative for websites and products with realtime analytics and performance insights.

Saas3dAnimationBig Background ImageWebglCleanTransitions
4.0
38
Visits
Visit

Categories

Saas

Available Pages

HomeDemo

Design Analysis

Visitors Home design analysis

Build the experience as a lightweight analytics product that feels welcoming rather than technical. Keep the page mostly white, then use blue-violet energy around hero product moments. Let rounded cards and gentle shadow...

Key Takeaways

  • Build the experience as a lightweight analytics product that feels welcoming rather than technical.
  • Keep the page mostly white, then use blue-violet energy around hero product moments.
  • Let rounded cards and gentle shadows carry dense information without making it feel heavy.
  • Use dashboard mockups, map views, charts, and small data cards as the main image language.
  • Float hero product frames over soft aurora or sky-toned gradient fields.
  • Keep visuals bright, crisp, and consumer-friendly even when they represent analytics.

Overview

  • Build the experience as a lightweight analytics product that feels welcoming rather than technical.
  • Keep the page mostly white, then use blue-violet energy around hero product moments.
  • Let rounded cards and gentle shadows carry dense information without making it feel heavy.

Image Direction

  • Use dashboard mockups, map views, charts, and small data cards as the main image language.
  • Float hero product frames over soft aurora or sky-toned gradient fields.
  • Keep visuals bright, crisp, and consumer-friendly even when they represent analytics.

Colors

  • 8B82FF is the primary action color. Reserve it for the clearest CTA and active emphasis.
  • 77D2FF should support hero imagery and luminous background fields rather than core chrome.
  • FFFFFF and F8F8FC should dominate the interface and preserve the airy tone.

Typography

  • Use one clean geometric sans across the system. Hierarchy should come from scale and weight, not type mixing.
  • Make hero lines large, bold, and centered.
  • Keep body copy short, supportive, and easy to scan around product modules.

Design.md

System Overview

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

Aurora Telemetry Light

A clean analytics marketing system that combines bright white structure, periwinkle controls, and luminous blue product framing.

Bright, friendly, data-rich, and lightweight.

Primary mode: lightprivacy analytics SaaScontent-rich

Theme

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

Visual atmosphere
Summary
Bright, friendly, data-rich, and lightweight.
Density
5
Variance
5
Motion
2
Signals
soft periwinkle actions · aurora backdrops behind hero mockups · rounded white data cards with gentle shadows

Colors

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

Palette colors
Periwinkle Signal
#8B82FF
Blue Aurora
#77D2FF
Cloud White
#FFFFFF
Mist Shell
#F8F8FC
Ink Navy
#202331
Fog Border
#E4E5EF
Usage rules
Keep the layout mostly white and let violet or blue accents do the signaling.
Use the darker navy sparingly for navigation capsules, not for full-page dominance.
Treat gradients as a supportive field behind product imagery.

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, 7rem)
panel_padding
clamp(1.25rem, 3vw, 2rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
20px
lg
28px
xl
36px
full
999px

Typography Families

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

Display
Manrope
rounded geometric sans with strong clarity
Body
Manrope
clean sans for concise product explanation
Accent
Manrope
pill labels and table headers
Mono
IBM Plex Mono
rare utility metadata only

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 5.5vw, 4.5rem)/—
Display
H2
clamp(2rem, 3vw, 3rem)/—
H2
H3
clamp(1.35rem, 2vw, 1.75rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Use one sans family throughout, letting weight and spacing create hierarchy. · Keep body copy centered and compact around key product modules. · Favor crisp numbers and short labels over decorative typographic moments.

Borders

Border tokens with resolved values.

Fine
1px solid #E4E5EF
Dark
1px solid #202331

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #E4E5EF
dark1px solid #202331

Motion

Resolved motion token values.

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

Layout Principles

Start with a centered hero and one large product mockup framed by glow color.
Use rounded white modules for every dense information block.
Break long pages into calm feature bands with repeated CTA rhythm.
Let comparison tables and FAQ stacks feel soft rather than severe.

Component Preview

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

Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#202331
Text
#FFFFFF
Border
none
Radius
999px
Item padding
0.45rem 0.7rem
Typography
small sans
Buttons primary pill
Base Attributes
Background
#8B82FF
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.15rem
Buttons secondary pill
Base Attributes
Background
#FFFFFF
Text
#202331
Border
1px solid #E4E5EF
Radius
999px
Padding
0.8rem 1.15rem
Cards feature card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#202331
Border
1px solid #E4E5EF
Radius
20px
Padding
1.25rem
Shadow
0 12px 32px rgba(32, 35, 49, 0.06)
Cards comparison table
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#202331
Border
1px solid #E4E5EF
Radius
20px
Padding
1rem
Shadow
none
Mockups hero frame
Base Attributes
Background
#FFFFFF
Text
#202331
Border
none
Radius
24px
Padding
0px
Shadow
0 16px 40px rgba(32, 35, 49, 0.12)

Image direction

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

Role
supportive
Media types
  • -
    product UI screenshot
  • -
    map or chart visualization
  • -
    soft gradient field
Subject patterns
  • -
    large central mockup floating over a blue glow
  • -
    small data tiles in neat two-by-two clusters
  • -
    lightweight map and chart visuals with rounded framing
Composition logic
  • -
    Use one hero mockup as the anchor.
  • -
    Keep gradient energy behind the product, not inside every component.
  • -
    Group dense data into friendly card families.
Treatment rules
  • -
    Use soft blur, rounded corners, and white panel backgrounds.
  • -
    Keep data legible and avoid decorative noise.
  • -
    Favor airy margins over packed dashboards.
Generation cues
  • -
    Describe the glow hue, card radius, and chart density.
  • -
    Frame analytics like a polished consumer product rather than a back-office tool.
  • -
    Keep charts simplified enough to read at a glance.
Avoid
  • -
    No harsh neon-on-black treatment.
  • -
    No spreadsheet-density layouts.
  • -
    No muddy multicolor gradients.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not turn the system into a dark crypto dashboard.
  • -
    Do not remove the softness and leave only hard tables.
  • -
    Do not replace the blue-violet palette with generic brand primaries.
  • -
    Do not over-intensify the glow fields until the product becomes illegible.