Wimp Decaf

Wimp Decaf

Welcome to Wimp, a very chill revolution. No pitchforks or storming the castle — just decaf, the underdog of coffee, coming to play with the big kids.

4.0
7
Visits
Visit

Available Pages

Version History

Design Analysis

Wimp Decaf Home design analysis

Cream Pop Pantry is a warm, funny retail system that wins through contrast: giant compressed headlines, tactile pack shots, and a cheerful orange signal inside otherwise calm cream surfaces. It should feel more like an a...

Key Takeaways

  • Primary ( 2A292B): Headline ink and core interface text.
  • Secondary ( EFE5DA): Navigation shell and grouped support surfaces.
  • Tertiary ( FF5C00): CTA fill and flavor label signal.
  • Let the display face do the personality work through compression and scale.
  • Keep body copy straightforward and readable to anchor the joke.
  • Avoid mixing in extra decorative type families.

Overview

Cream Pop Pantry is a warm, funny retail system that wins through contrast: giant compressed headlines, tactile pack shots, and a cheerful orange signal inside otherwise calm cream surfaces. It should feel more like an art-directed pantry zine than a polished SaaS storefront.

Image Direction

Use close, tactile photography and keep the product silhouette unmistakable. Collage layouts can be a little messy, but the palette should stay tightly controlled around cream, black, and orange.

Colors

  • Primary ( 2A292B): Headline ink and core interface text.
  • Secondary ( EFE5DA): Navigation shell and grouped support surfaces.
  • Tertiary ( FF5C00): CTA fill and flavor label signal.

Typography

  • Let the display face do the personality work through compression and scale.
  • Keep body copy straightforward and readable to anchor the joke.
  • Avoid mixing in extra decorative type families.

Design.md

System Overview

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

Cream Pop Pantry

A playful pantry-commerce system with cream surfaces, huge compressed headlines, and punchy orange product accents.

Playful, cozy, and slightly irreverent.

Primary mode: lightconsumer packaged goods ecommerceui-rich

Theme

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

Visual atmosphere
Summary
Playful, cozy, and slightly irreverent.
Density
4
Variance
4
Motion
3
Signals
cream shell surfaces · compressed black headlines · orange retail callouts · tactile close-up photography

Colors

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

Palette colors
Milk Cream
#F7F0E8
Soft Ink
#2A292B
Roast Orange
#FF5C00
Warm Shadow
#514D4B
Quiet Shell
#EFE5DA
Usage rules
Default to cream and black before reaching for orange.
Use orange for urgency and retail emphasis only.
Keep photography warmer than the UI shell.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
88px
card_padding
28px

Token Radii

Corner radii tokens with a live surface sample.

control
12px
card
24px
shell
28px

Typography Families

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

Display
Obviously Variable
compressed playful headline
Body
Elza Text
friendly retail body

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
9rem/—
Display
H2
4rem/—
H2
Body
1rem/—
Body
Label
1rem/—
Label

Typography Rules

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

Rules
Use scale and compression to create humor. · Keep body copy calm enough to balance the headline aggression.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-240ms
Easing
cubic-bezier(.2,.8,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-240ms
easingcubic-bezier(.2,.8,.2,1)

Layout Principles

Treat the header as a chunky branded shelf.
Pair one giant headline with one dominant product-photo block.
Let product grids feel irregular and editorial instead of perfectly merchandised.

Component Preview

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

Buttons primary
Base Attributes
Background
#FF5C00
Text
#FFFFFF
Border
1px solid #FF5C00
Radius
{tokens.radii.control}->12px
Padding
14px 20px
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#F7F0E8
Text
#2A292B
Border
1px solid #EFE5DA
Radius
{tokens.radii.control}->12px
Padding
14px 20px
Min height
48px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F7F0E8
Text
#2A292B
Border
1px solid #EFE5DA
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.card_padding}->28px
Shadow
none
Cards accordion
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#2A292B
Border
1px solid #F0E6DB
Radius
{tokens.radii.card}->24px
Padding
24px 28px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#F1EADF
Text
#2A292B
Height
76px
Active text
#000000
Item padding
8px 12px
Item radius
{tokens.radii.shell}->28px

Image direction

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

Role
supportive
Media types
  • -
    pack shot
  • -
    lifestyle portrait
  • -
    ingredient close-up
Subject patterns
  • -
    oversized product bags
  • -
    close crops with one warm background plane
  • -
    small mascot or doodle cameo
Composition logic
  • -
    Keep one dominant image block per section.
  • -
    Use rounded frames and asymmetric collage pairings.
Treatment rules
  • -
    Preserve the warm bean-and-paper palette.
  • -
    Let white packaging stay bright against cream surroundings.
Generation cues
  • -
    Describe tactile coffee packaging, soft daylight, and a playful black mascot line.
  • -
    Use orange labels as the single loud accent.
Avoid
  • -
    No glossy luxury-black coffee branding.
  • -
    No slick startup gradients.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No sterile ecommerce blue.
  • -
    No tiny timid headlines.
  • -
    No perfectly even corporate card grids that erase the food-brand attitude.