Refto
Popcorn

Popcorn

The next-gen telco. One global plan, no roaming fees or headaches for $69/mo.

CommunicationGradientTechnologyMinimalLightClean
4.0
7
Visits
Visit

Design Analysis

Popcorn Home design analysis

Build the page as a pale field with one giant serif promise and almost no noise around it. Let one dark capsule CTA and one tiny pearlescent tag do the UI punctuation. Use the hardware object as a quiet lower-stage proof...

Key Takeaways

  • Build the page as a pale field with one giant serif promise and almost no noise around it.
  • Let one dark capsule CTA and one tiny pearlescent tag do the UI punctuation.
  • Use the hardware object as a quiet lower-stage proof rather than a dominant hero spectacle.
  • Use clean phone hardware, soft blue atmospheric blur, and one tiny pearl-like tag as the only flourish.
  • Keep the product object emerging softly from below the text.
  • Keep the shell nearly colorless and pale.

Overview

  • Build the page as a pale field with one giant serif promise and almost no noise around it.
  • Let one dark capsule CTA and one tiny pearlescent tag do the UI punctuation.
  • Use the hardware object as a quiet lower-stage proof rather than a dominant hero spectacle.

Image Direction

  • Use clean phone hardware, soft blue atmospheric blur, and one tiny pearl-like tag as the only flourish.
  • Keep the product object emerging softly from below the text.

Colors

  • Keep the shell nearly colorless and pale.
  • Use charcoal for type and buttons.
  • Let blush or sky tints remain whisper-light support colors only.

Typography

  • Use oversized serif display type for the main promise.
  • Keep supporting sans copy narrow and low-contrast.

Design.md

System Overview

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

Global Serif Calm

A global-plan marketing language built from pale gray-white space, oversized charcoal serif headlines, dark capsule CTAs, pearlescent tags, and clean hardware product imagery.

Quiet, consumer-premium, typographic, and composed.

Primary mode: lightconsumer connectivity marketingcontent-rich

Theme

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

Visual atmosphere
Summary
Quiet, consumer-premium, typographic, and composed.
Density
3
Variance
4
Motion
1
Signals
oversized serif display · dark pill CTA · tiny pearlescent status tag

Colors

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

Palette colors
Soft White
#F7F7F7
Graphite Serif
#393737
Fog Gray
#888787
Pill Carbon
#3A3535
Pearl Blush
#F5EEFF
Sky Mist
#D9E9FF
Usage rules
Keep the field very pale and quiet.
Use dark charcoal and carbon for the voice and actions rather than introducing many accent fills.

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
20px
xl
26px
full
999px

Typography Families

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

Display
Untitled Serif
oversized calm serif
Body
Messina Sans
soft consumer-supporting sans
Accent
Messina Sans
nav and utility voice
Mono
IBM Plex Mono
rare utility support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.4rem, 7vw, 6.4rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.8rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Let the serif run large and calm with generous line breaks. · Keep body text lighter and narrower beneath it.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-180ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Center one oversized serif promise above a quiet hardware entrance.
Keep the nav thin and text-led with one dark pill on the far edge.
Use plenty of empty field around the main message.

Component Preview

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

Micro tags pearl tag
Base Attributes
Background
rgba(245,238,255,0.72)
Text
#393737
Border
1px solid rgba(57,55,55,0.04)
Radius
999px
Padding
0.55rem 0.9rem
Shadow
0 8px 24px rgba(0,0,0,0.04)
Actions dark pill
Base Attributes
Background
#3A3535
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.2rem
Surfaces quiet field
Base Attributes
Background
#F7F7F7
Text
#393737
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
  • -
    phone hardware render
  • -
    soft atmospheric blur
  • -
    tiny pearl tag
Subject patterns
  • -
    clean device crop
  • -
    quiet blue mist
  • -
    minimal hardware silhouette
Composition logic
  • -
    Let the device emerge softly from the lower stage.
  • -
    Keep the upper field mostly typographic.
Treatment rules
  • -
    Stay soft and premium.
  • -
    Use only one tiny decorative tag.
Generation cues
  • -
    Ask for a pale field with an oversized serif message and a clean phone object rising from below.
  • -
    Mention one tiny pearl-like badge and dark pill CTA.
Avoid
  • -
    No loud telecom gradients.
  • -
    No feature-card overload.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the serif calm with generic app-store sans-only hierarchy.
  • -
    Do not introduce bright promo colors as major interface fills.
  • -
    Do not clutter the field with many cards or badges.