name: playful-flat-design
version: alpha
description: >
  A bright, friendly "playful-flat" (rounded neo-brutalist) language-app canvas
  on warm cream (#FFFDD0) with onyx ink (#111111). The brand voltage is a blaze
  orange (#FF5800) for primary CTAs and highlights, with sky-aqua (#00CCFF) as a
  cheerful secondary block color and white for cards. Everything wears chunky 3px
  onyx borders and hard offset shadows (8px 8px 0) — but with big rounded corners
  (10–40px), making it bouncy rather than harsh. Type pairs a rounded Fredoka
  display with Nunito Sans body. Signatures: a tactile press-down button, a
  bento feature grid, masonry testimonials, a colored stat bar and a giant ghost
  background letter.
colors:
  # Brand
  primary: '#FF5800'         # blaze orange — CTAs, highlights, icon tiles
  on-primary: '#FFFFFF'
  secondary: '#00CCFF'       # sky aqua — accent blocks, badges, bento cells
  ink: '#111111'             # onyx — borders + text
  on-ink: '#FFFFFF'
  # Surface
  surface: '#FFFDD0'         # warm cream canvas
  surface-card: '#FFFFFF'    # cards
  surface-invert: '#111111'  # stat-bar divider band
  # Text
  on-surface: '#111111'
  on-surface-secondary: 'rgba(17,17,17,0.8)'
  on-surface-muted: 'rgba(17,17,17,0.6)'
typography:
  display:
    fontFamily: '"Fredoka", sans-serif'
    fontSize: clamp(72px, 9vw, 96px)   # hero (text-7xl→8xl)
    fontWeight: 700
    lineHeight: 0.95
  headline:
    fontFamily: '"Fredoka", sans-serif'
    fontSize: 60px           # section h2 (text-5xl/6xl)
    fontWeight: 700
  title:
    fontFamily: '"Fredoka", sans-serif'
    fontSize: 30px           # card/bento h3
    fontWeight: 700
  body:
    fontFamily: '"Nunito Sans", sans-serif'
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.6
  label:
    fontFamily: '"Fredoka", sans-serif'
    fontSize: 14px           # badge / nav (semibold–bold)
    fontWeight: 600
    letterSpacing: 0.1em     # uppercase tracking-widest on stat labels
rounded:
  btn: 10px                  # buttons (hard-offset-btn)
  card: 16px                 # nav pill (rounded-2xl)
  bento: 20px                # bento cells / inner media
  xl: 40px                   # hero image frame (rounded-[40px])
  full: 9999px               # badge pills, dots
spacing:
  # base unit = 4px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 96px
components:
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    border: '3px solid {colors.ink}'
    boxShadow: '4px 4px 0px 0px {colors.ink}'
    rounded: '{rounded.btn}'
    typography: '{typography.title}'   # Fredoka bold
    hover: 'translate(2px,2px), shadow 2px'
    active: 'translate(4px,4px), shadow 0'   # tactile press
  button-secondary:
    background: '{colors.surface-card}'
    border: '3px solid {colors.ink}'
    boxShadow: '4px 4px 0px 0px {colors.ink}'
    rounded: '{rounded.btn}'
  card-hard-offset:
    background: '{colors.surface-card}'
    border: '3px solid {colors.ink}'
    boxShadow: '8px 8px 0px 0px {colors.ink}'
    rounded: '{rounded.card}'
  bento-cell:
    border: '3px solid {colors.ink}'
    rounded: '{rounded.bento}'
    padding: '32px'
    variants: 'white / orange / aqua / cream(dashed) — hover bg or lift'
  badge:
    background: '{colors.secondary}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    boxShadow: '4px 4px 0 {colors.ink}'    # "#1 Language App of 2024"
  stat-band:
    background: '{colors.ink}'             # 4-cell colored stat strip (orange/aqua/white/cream)
    border: '4px {colors.ink} top+bottom'
  icon-tile:
    size: '64px'
    border: '3px {colors.ink} (when on light)'
    rounded: '12px'
    variants: 'onyx / white / orange / aqua fills'
motion:
  easing: 'transform/box-shadow 0.1s (button press)'
  hover: 'card lift -translate-y-1, icon rotate-6, play-button scale-110'
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont + game-icons   # ti-globe/mic/flame/headphones/star-filled
  style: line + filled (tabler), decorative svg (game-icons)
  colorRule: 'white/onyx inside colored icon tiles; orange for stars'

Playful Flat — "LingoPop"

Design spec — version alpha. Source: static HTML (playful-flat.html); tokens read from :root and component CSS. Fictional language-learning app; described factually.

Overview

A bright, friendly "playful-flat" look — neo-brutalist structure softened into something bouncy and approachable for a language app. The canvas is warm cream {colors.surface} #FFFDD0 with onyx ink {colors.ink} #111111. The brand voltage is blaze orange {colors.primary} #FF5800 (primary CTAs, highlighted words, icon tiles), with sky-aqua {colors.secondary} #00CCFF as a cheerful secondary block color and white for cards. Everything wears chunky 3px onyx borders and hard offset shadows (8px 8px 0), but with big rounded corners (10–40px) — so it reads as energetic and tactile rather than harsh. Type pairs a rounded Fredoka display with Nunito Sans body. Signatures: a press-down button (slides into its shadow on click), a bento feature grid, masonry testimonials, a 4-cell colored stat band, and a giant low-opacity ghost letter behind the hero.

Colors

Brand. Blaze orange {colors.primary} #FF5800 is the voltage — primary buttons, the "Local" highlight word, the streaks bento and icon tiles, and the footer band. Sky-aqua {colors.secondary} #00CCFF is the friendly secondary — badge, bento cells, stat cell. Onyx {colors.ink} #111111 is used for all borders, shadows and text.

Surfaces. Cream {colors.surface} canvas, white cards {colors.surface-card}, and one inverted onyx band behind the stat strip.

Text. Onyx {colors.on-surface} with 80%/60% alphas for secondary/muted copy.

Typography

Fredoka (rounded, 600–700) for all display, headings, titles and labels; Nunito Sans (600–800) for body.

Token	Family	Size	Weight	Usage
display	Fredoka	clamp 72–96px	700	Hero ("Speak Like a Local")
headline	Fredoka	60px	700	Section titles
title	Fredoka	30px	700	Card/bento titles, buttons
body	Nunito Sans	20px	600	Body copy
label	Fredoka	14px	600	Badges, nav, stat labels

Layout

Base 4px, max-w-7xl content. A floating bordered nav pill; a 2-col hero (headline + CTAs left, a tilted aqua-backed framed image right with an orange circular badge) over a giant ghost "L"; a full-bleed 4-cell stat band (orange/aqua/white/cream); a bento feature grid (mixed-size cells in white/orange/aqua/dashed-cream); a masonry testimonial section; and an orange footer with a white newsletter card, link columns and social tiles.

Elevation & Depth

Hard offset shadows (8px 8px 0 #111 on cards, 4px 4px 0 on buttons/badges) with no blur — but on rounded shapes, giving a soft, toy-like bounce. Cards lift on hover (-translate-y), and buttons press tactilely into their shadow on click. No gradients.

Shapes

Rounded-but-bordered: {rounded.btn} 10px (buttons), {rounded.card} 16px (nav/cards), {rounded.bento} 20px (bento cells/media), {rounded.xl} 40px (hero image frame), {rounded.full} (badges, dots). The philosophy is playful-flat — brutalist borders + shadows on generously rounded corners.

Components

• button-primary — orange fill, 3px onyx border, 4px shadow, 10px radius, Fredoka label; hover nudges, click presses fully into the shadow.
• button-secondary — white variant, same border/shadow.
• card-hard-offset — white, 3px border, 8px shadow, 16px radius.
• bento-cell — 3px-bordered 20px-radius cell in white/orange/aqua/dashed-cream; hovers shift bg or lift.
• badge — aqua pill, 2px border, 4px shadow ("#1 Language App of 2024").
• stat-band — onyx-bordered 4-cell strip of solid color blocks with big Fredoka numbers.
• icon-tile — 64px rounded tile (onyx/white/orange/aqua) holding a Tabler glyph.

Motion

Light and tactile: buttons transition transform/box-shadow over 0.1s and press into their shadow on active; cards lift on hover; icon tiles rotate-6; the audio play-button scales 1.1. (Transitions are globally disabled in the capture source, so timings are authored intent.)

Iconography

Tabler icons, line + filled (ti-globe, ti-mic, ti-flame, ti-headphones, ti-star-filled, brand socials) inside colored icon tiles (white/onyx glyphs); rating stars use orange {colors.primary}; plus a decorative game-icons burst behind the streaks bento. ~24–40px.

Do's and Don'ts

• Do keep the warm cream canvas with onyx ink and 3px onyx borders.
• Do use blaze orange as the CTA/highlight voltage and sky-aqua as the friendly secondary block.
• Do apply hard offset shadows on rounded corners (10–40px) for the playful-flat feel.
• Do set type in rounded Fredoka over Nunito Sans; keep the tactile press-into-shadow buttons.
• Don't sharpen corners to 0 — the rounding is what makes it playful, not severe.
• Don't use soft/blurred shadows or gradients.
• Don't spread the palette beyond orange + aqua + cream/white/onyx.

Known Gaps

• Values read from the implementation's resolved :root. Copy/imagery are sample content; the source disables transitions globally so timings reflect authored CSS intent.