Refto
Slush

Slush

Earn, swap, and explore securely on Sui—with none of the hassle.

InteractiveLarge TypeDigital ProductWeb3CryptoAnimationColorfulDarkFinance
4.0
10
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Slush Home design analysis

Sticker Rally Pop is a loud chaptered marketing system built for youth-coded financial products. Giant condensed headlines, sticker objects, and abrupt poster-color changes create the identity, while utility controls sta...

Key Takeaways

  • Primary ( 050505): heavy type and dark stage.
  • Secondary ( BFD9F6): airy sky-blue stage.
  • Tertiary ( FF5A1F): hot poster orange.
  • Display: huge, black, compressed, and impossible to ignore.
  • Body: short, practical, and clearly secondary.
  • Labels: compact and utilitarian.

Overview

Sticker Rally Pop is a loud chaptered marketing system built for youth-coded financial products. Giant condensed headlines, sticker objects, and abrupt poster-color changes create the identity, while utility controls stay small and secondary.

Image Direction

Treat stickers, slogans, and graphic tokens as the image language. Product proof can appear in cards, but the core visual identity should come from poster objects, floating icons, and bold flat-color surfaces rather than photorealistic lifestyle imagery.

Colors

This palette should feel like printed stickers and toy-store signage.

  • Primary ( 050505): heavy type and dark stage.
  • Secondary ( BFD9F6): airy sky-blue stage.
  • Tertiary ( FF5A1F): hot poster orange.

Typography

Use an ultra-condensed display face for major slogans and a neutral sans for everything else.

  • Display: huge, black, compressed, and impossible to ignore.
  • Body: short, practical, and clearly secondary.
  • Labels: compact and utilitarian.

Design.md

System Overview

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

Sticker Rally Pop

A scroll-led consumer-finance system built from giant condensed headlines, sticker objects, and high-contrast poster chapters.

Loud, playful, kinetic, and youth-coded.

Primary mode: light-dark mixedconsumer fintech marketingexperience-led

Theme

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

Visual atmosphere
Summary
Loud, playful, kinetic, and youth-coded.
Density
5
Variance
7
Motion
7
Signals
sky blue and black stage alternation · giant condensed display · sticker-object iconography · poster-strip slogans

Colors

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

Palette colors
Sky Blue
#BFD9F6
Poster Black
#050505
Poster White
#F8F6F2
Sticker Orange
#FF5A1F
Sticker Yellow
#F9D84A
Sticker Lilac
#D7B9F5
Sticker Blue
#5D9BEA
Usage rules
Use bold flat color blocks, not subtle tonal refinement.
Let black type and black stages puncture the lighter sections.
Keep multiple accent colors large and poster-like rather than tiny UI hints.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 10vw, 9rem)
group_gap
1rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
1.75rem
container
2rem

Typography Families

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

Display
Lateral
ultra-condensed display with aggressive vertical energy
Body
Aeonik
neutral body voice that balances the display drama
Mono
Aeonik
no separate mono needed

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(5rem, 16vw, 12rem)/—
Display
H2
clamp(2rem, 6vw, 4rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

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

Rules
Let condensed headlines dominate whole sections. · Keep body copy sparse and secondary. · Avoid refined editorial tension; this system should feel punchy and immediate.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-420ms
Easing
cubic-bezier(.18, .9, .22, 1)
Spring
stiffness 90, damping 15

Motion

Resolved motion token values.

PropertyValue
duration220ms-420ms
easingcubic-bezier(.18, .9, .22, 1)
springstiffness 90, damping 15

Layout Principles

Build the page as a sequence of poster chapters.
Alternate spacious hero fields with dense slogan bands.
Let stickers orbit around typography rather than sit neatly in a grid.
Keep product proof modules secondary to the brand energy.

Component Preview

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

Buttons primary
Base Attributes
Background
#050505
Text
#F8F6F2
Border
1px solid #050505
Radius
{tokens.radii.control}->999px
Padding
0.75rem 1rem
Min height
40px
Typography
caption
Buttons secondary
Base Attributes
Background
#F8F6F2
Text
#050505
Border
1px solid rgba(5,5,5,0.20)
Radius
{tokens.radii.control}->999px
Padding
0.625rem 0.875rem
Min height
36px
Typography
caption
Cards poster
Feature Card
Component preview content
Base Attributes
Background
#F8F6F2
Text
#050505
Border
2px solid #050505
Radius
{tokens.radii.container}->2rem
Padding
1.25rem
Shadow
none
Cards highlight
Feature Card
Component preview content
Base Attributes
Background
#D7B9F5
Text
#050505
Border
2px solid #050505
Radius
{tokens.radii.component}->1.75rem
Padding
1rem
Shadow
none

Scroll motion

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

Summary
Use scroll to reveal poster chapters, slogan strips, and drifting sticker objects.

Image direction

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

Summary
Treat stickers, slogan bands, and poster panels as the image system.

Responsive guidance

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

  • -
    Keep headline size aggressive on mobile, but shorten line breaks to preserve legibility.
  • -
    If motion reduces, still maintain the chaptered poster contrast in static layout.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No polished enterprise SaaS gradients.
  • -
    No quiet monochrome minimalism.
  • -
    No tiny timid display type.
  • -
    No fully serious institutional tone.
  • -
    No weak motion that leaves the page feeling static and generic.