Refto
Pattern Breaking

Pattern Breaking

Discover the manipulative dark patterns ultra-fast fashion brands use on their websites, from fake urgency popups to spin-the-wheel tactics.

InteractiveHorizontal LayoutScrolling AnimationLarge TypeIllustrativeParallaxE CommerceGradientEducationFashionAnimationColorfulBig Background ImageSingle Page
4.0
6
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Pattern Breaking Home design analysis

Build a campaign shell that feels like an editorial poster system translated into the web. Use sharp contrast, oversized type, and loud color interrupts to create argument and momentum. Let motion guide chapter transitio...

Key Takeaways

  • Build a campaign shell that feels like an editorial poster system translated into the web.
  • Use sharp contrast, oversized type, and loud color interrupts to create argument and momentum.
  • Let motion guide chapter transitions, but keep the message readable at every stop.
  • Favor documentary imagery, collage, or stark graphic moments over polished commercial stock.
  • Use stickers, labels, and cut-paper treatments only when they feel like part of the argument.
  • Motion libraries detected in capture: gsap, ScrollTrigger, Lenis. Treat them as sequence scaffolding rather than decoration.

Overview

  • Build a campaign shell that feels like an editorial poster system translated into the web.
  • Use sharp contrast, oversized type, and loud color interrupts to create argument and momentum.
  • Let motion guide chapter transitions, but keep the message readable at every stop.

Image Direction

  • Favor documentary imagery, collage, or stark graphic moments over polished commercial stock.
  • Use stickers, labels, and cut-paper treatments only when they feel like part of the argument.

Entry & Arrival Motion

  • Motion libraries detected in capture: gsap, ScrollTrigger, Lenis. Treat them as sequence scaffolding rather than decoration.
  • Keep arrival motion purposeful and short so the shell remains legible in its resting state.

Colors

  • Base the shell on FFFFFF and keep 0A0A0A as the primary reading color.
  • Use 0A0A0A as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let FFF4A8 and 0A0A0A separate secondary surfaces without introducing noisy ornament.

Design.md

System Overview

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

Poster-Driven Editorial Campaign

A loud advocacy system that mixes stark black-and-white editorial rhythm with lilac and yellow stickers, taped cards, and scroll-led chapter transitions.

urgent, poster-like, and rhetorical

Primary mode: lightcampaign storytellingmotion-rich

Theme

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

Visual atmosphere
Summary
urgent, poster-like, and rhetorical
Density
4
Variance
4
Motion
3
Signals
primary background #FFFFFF · primary action #0A0A0A · display font Neue Montreal · body font Neue Montreal

Colors

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

Palette colors
Primary
#0A0A0A
Secondary
#FFFFFF
Neutral
#FFFFFF
Surface
#FFF4A8
On Surface
#0A0A0A
Usage rules
Keep #0A0A0A reserved for intentional emphasis.
Use #FFF4A8 and #0A0A0A to separate layers without over-framing them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
14px
card
18px
full
999px

Typography Families

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

Display
Neue Montreal
assertive display sans
Body
Neue Montreal
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Alternate black and white stages with occasional color-burst panels.
Treat each section like a poster frame with one dominant message and one supporting object.

Component Preview

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

Buttons primary
Base Attributes
Background
#FDFF6D
Text
#111111
Border
none
Radius
999px
Padding
6px 12px
Min height
30px
Shadow
none
Font family
"Neue Montreal", sans-serif
Font size
12px
Font weight
500
Specimen label
Action
Buttons secondary
Base Attributes
Background
#CA9FFF
Text
#111111
Border
none
Radius
999px
Padding
6px 12px
Min height
30px
Shadow
none
Font family
"Neue Montreal", sans-serif
Font size
12px
Font weight
500
Specimen label
Tag
Cards default
Issue Card
Component preview content
Base Attributes
Background
#CA9FFF
Text
#030507
Border
none
Radius
16px
Padding
20px
Min width
280px
Shadow
0 10px 40px rgba(0,0,0,0.3)
Specimen label
Issue Card
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Height
30px
Active text
#FFFFFF
Item padding
0.3rem 0.55rem
Item radius
999px
Specimen label
Explore
Inputs default
Base Attributes
Background
#FFFFFF
Text
#111111
Placeholder color
rgba(17,17,17,0.45)
Border
none
Radius
24px
Padding
0 16px
Min height
48px
Font family
"Neue Montreal", sans-serif
Font size
14px
Placeholder
Type here
Specimen label
Email

Motion system

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

Libraries
  • -
    gsap
  • -
    ScrollTrigger
  • -
    Lenis
Role
narrative scaffolding
Rules
  • -
    Motion should reveal sequence, not create constant distraction.
  • -
    Every animated state should still land in a clean readable resting frame.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.