Skip to content
whatthemovie.com logo

Discover Movies another Way | WTM

whatthemovie.com

“The brand presents a functional, game-focused aesthetic with a clean, utilitarian interface. It balances a playful core concept with a straightforward, accessible design language that prioritizes clarity and ease of use over decorative flair.”

utilitarian
game-focused
clean
accessible
direct
minimalist
functional

Color Palette

Colors

#ffffff

primary

#efefef

background

#333333

text

#666666

secondaryText

#666666

link

#666666

muted

#cc0000

accent

Typography

Fonts

Open Sans

body
400
700
self-hosted

Arial, sans-serif

Open Sans

heading
700
self-hosted

Arial, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

Components

Design System

Start Guessing (Feature Films)
outline
4px
#000000
go
secondary
3px
#ffffff#cc0000
button
box-shadow

rgb(232, 232, 232) 0px 2px 3px 0px

Voice & Tone

Personality

Visual Energy

4/10

Design Era

flat-2.0

Emotional Tone

approachable-competitive

Target Audience

Casual movie enthusiasts and trivia players seeking quick, low-friction entertainment.

Comparable Brands

Duolingo
Kahoot!
Quizlet

Brand Rules

Dos & Don'ts

Do

  • Use Open Sans for all typography: weight 700 for headings (Title Case) and weight 400 for body text.
  • Apply primary accent color #cc0000 exclusively for secondary actions, links, and key highlights; use #333333 for all primary text.
  • Style primary CTA buttons as outlines with #9f9f9f borders, #000000 text, 4px border-radius, and a subtle shadow: rgb(232, 232, 232) 0px 2px 3px 0px.
  • Style secondary buttons with #ffffff background, #cc0000 text, 3px border-radius, and #d5d5d5 borders.
  • Maintain a flat design aesthetic by avoiding gradients entirely; rely on solid colors (#ffffff, #efefef, #cc0000) for backgrounds and elements.
  • Use a base spacing unit of 2px for padding and margins to ensure consistent, compact layout density.
  • Keep copy simple and direct, utilizing imperative verbs for CTAs (e.g., 'Start Guessing') and avoiding jargon.
  • Apply 4px border-radius to standard interactive elements and buttons to maintain a soft but defined geometric feel.

Don't

  • Do not use title case for body text; reserve Title Case strictly for headings.
  • Avoid using emojis in any marketing copy or UI labels.
  • Do not use serif fonts; the brand is strictly sans-serif (Open Sans).
  • Avoid multi-layer or heavy drop shadows; keep shadows subtle and uniform (rgb(232, 232, 232) 0px 2px 3px 0px) only on primary buttons.
  • Do not use gradients for buttons, backgrounds, or text highlights.
  • Avoid excessive whitespace or large border radii (e.g., >5px); the brand prefers compact, tight spacing and small radii.
  • Do not use bright or neon colors outside the defined palette (#cc0000, #ffffff, #efefef, #333333, #000000).
  • Avoid complex animations or transitions; the interface should feel static and immediate.

Design Assets

Visual Elements

Demo dvd children
png70×100
Demo dvd bladerunner
png78×100
Demo dvd ratatouille
png75×100
Wtm gremlin
png80×48
Additional pages
png311×279

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/whatthemovie.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free