PopChoice

PopChoice

Design System

The visual language for a cinema-grade recommendation engine. Gold as signal, Oswald for authority, Manrope for warmth. Two equal themes. One rule: flat at rest, depth by state.

Brand Voice

Cinematic

Evokes the feeling of a real cinema without copying its aesthetics. The typography is a film title; the palette is a marquee at night. Not streaming service dark blue. Not film-festival pretension.

Confident

The product has opinions. Copy says "The right film is in there" not "We think you might enjoy." Oswald announces; it does not hedge. One CTA, clearly gold, on a surface that does not compete.

Playful

Delight lives in details: the confetti burst, the morphing progress dots, the loading tips. Personality is earned through specificity, not loud decoration or emoji at scale.

Mascot

The Popcorn

A striped cinema bucket, instantly recognizable and genuinely enthusiastic. Not a logo. A character. The Cinematic Concierge made physical: confident shape, warm gold kernels, stripe pattern borrowed from the classic movie-house bucket.

Click it.

Stripe colorsRed #f20000 and white — the classic cinema bucket, no second-guessing.
Kernel fillGold #F7B017 — directly mapped to the brand accent. Same hue, same signal.
InteractionClick fires a burst of gold confetti. Delight that is earned, not decorative — it only fires when you choose it.
UsageHero, CTA section, loading state, empty states. Always at rest until invited.
01

Gold as Signal

Gold appears on 10% or less of any screen: CTAs, active states, the logo wordmark. Its rarity is what makes it read as intent. When gold appears, something matters.

02

Oswald Announces, Manrope Converses

Condensed uppercase authority for headlines, warm humanist readability for everything conversational. The pairing is the Cinematic Concierge in typographic form: confident heading, warm voice.

03

Two Equal Themes

Warm parchment and cool midnight: both intentional, both given equal visual care. Neither is a dark-mode toggle bolted on after the fact.

04

Flat at Rest, Depth by State

Surfaces are flat. The card shadow is a quiet hint. Only the CTA carries an expressive gold glow. No decorative depth. Only depth that earns its place.

Brand Palette

Gold--pc-gold#F5C518
Amber--pc-amber#FF9F1C
Purplepalette.purple#8B5CF6
Purple Lightpalette.purplelight#A78BFA
Tealpalette.teal#14B8A6
Redpalette.red#EF4444
Pinkpalette.pink#EC4899
Graypalette.gray#6B7280
Greenpalette.green#10B981
Bluepalette.blue#60A5FA

Backgrounds

--pc-bgPage background
--pc-surfaceCard / surface
--pc-surface-hoverHovered surface
--pc-surface-deepDeep / nested surface
--pc-ghostSubtle interactive fill

Text Colors

Primary text--pc-t1
Secondary text--pc-t2
Tertiary text--pc-t3
Muted text--pc-t4
Gold text (accessible)--pc-gold-text
Amber text (accessible)--pc-amber-text

Brand Colors

Gold

--pc-gold

Amber

--pc-amber

Gold Subtle

--pc-gold-subtle

Gold Wash

--pc-gold-wash

Gradients

--pc-cta

CTA

--pc-cta-h

CTA Horizontal

--pc-progress

Progress

Typography

Oswald — Display / Headings

Find Your Filmtext-5xl font-bold
Group Modetext-4xl font-bold
How It Workstext-3xl font-semibold
Taste Profiletext-2xl font-medium

Manrope — Body / UI

Five questions. One film worth watching.text-xl font-normal
Your answers become a taste profile matched by tone, pacing, and style.text-base font-normal
No sign-up required. Takes about 60 seconds.text-sm font-normal
AI-Powered Matchtext-sm font-bold
400+ pre-analyzed filmstext-xs font-normal

Buttons

variant="cta"

variant="default"

variant="ghost"

variant="cta" disabled

variant="default" disabled

variant="ghost" disabled

Age Rating Chips

AgeRatingChip — semantic color per rating band (G=green, PG=teal, R=red, etc.). Used in the MoviesTable and movie detail views where the rating carries meaning. For a neutral, unstyled pill use AgeRatingPill (see Components page).

Sizes

PG-13

sm

PG-13

md

PG-13

lg

All Ratings

G

G

PG

PG

PG-13

PG-13

R

R

12+

12+

15

15

16+

16+

18+

18+

NR

NR

Progress Dots

Step 1 of 5
Step 3 of 5
Step 5 of 5

Borders

--pc-bd1

bd1 — subtle

--pc-bd2

bd2 — default

--pc-bd3

bd3 — medium

--pc-bd4

bd4 — strong

Shadows

--pc-card-shadow

Card Shadow

--pc-cta-shadow

CTA Shadow

--pc-cta-shadow-hover

CTA Shadow Hover

Gold Accent States

gold-subtle

--pc-gold-subtle

gold-tint

--pc-gold-tint

gold-wash

--pc-gold-wash

gold-focus

--pc-gold-focus

gold-bd-subtle

--pc-gold-bd-subtle

gold-bd

--pc-gold-bd

gold-bd-strong

--pc-gold-bd-strong

ai-bg

--pc-ai-bg

Spacing Scale

4pxp-1 / gap-1
8pxp-2 / gap-2
12pxp-3 / gap-3
16pxp-4 / gap-4
24pxp-6 / gap-6
32pxp-8 / gap-8
48pxp-12 / gap-12
64pxp-16 / gap-16

Border Radius

sm

0.125rem

md

0.375rem

lg

0.5rem

xl

0.75rem

2xl

1rem

full

9999px

PopChoice Design System: design tokens and componentsComponents →