---
version: alpha
name: Signal Pop
description: Neo-brutalist consumer pop. Cream, hot orange, electric blue, 2px black outlines and hard offset shadows.
meta:
  id: "theme-signal-pop"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Loud, friendly, physical — buttons you can almost press with a thumb
  bestFor: Consumer apps, launch pages, community products, youth brands, playful tools
  avoidFor: Enterprise software, regulated industries, dense data, anything sober
  defaultMode: light
  surfaceStyle: hard-shadow
  accentUse: fill
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: punch
  motion:
    intensity: 8
    duration: 180ms
    ease: "cubic-bezier(0.34, 1.56, 0.64, 1)"
    signature: "Press into the hard shadow — translate 2px toward it as it shrinks to 2px."
  displayFont: Archivo Black
  displayKind: sans
  bodyFont: Archivo
  monoFont: Space Mono
colors:
  background: "#FFFBEF"
  foreground: "#14110B"
  card: "#FFFFFF"
  card-foreground: "#14110B"
  popover: "#FFFFFF"
  popover-foreground: "#14110B"
  primary: "#FF4D2E"
  primary-foreground: "#1A0A04"
  secondary: "#FFE066"
  secondary-foreground: "#241D00"
  muted: "#F2EBD8"
  muted-foreground: "#635B45"
  accent: "#2D5BFF"
  accent-foreground: "#FFFFFF"
  destructive: "#D91E2A"
  destructive-foreground: "#FFFFFF"
  border: "#14110B"
  input: "#14110B"
  ring: "#2D5BFF"
  chart-1: "#FF4D2E"
  chart-2: "#2D5BFF"
  chart-3: "#FFC53D"
  chart-4: "#0E9E6A"
  chart-5: "#9B3DD8"
colorsDark:
  background: "#12101A"
  foreground: "#FAF7EC"
  card: "#1A1726"
  card-foreground: "#FAF7EC"
  popover: "#1A1726"
  popover-foreground: "#FAF7EC"
  primary: "#FF6B45"
  primary-foreground: "#200600"
  secondary: "#FFD84D"
  secondary-foreground: "#241B00"
  muted: "#262238"
  muted-foreground: "#A8A2BE"
  accent: "#6E8BFF"
  accent-foreground: "#050C2A"
  destructive: "#FF6165"
  destructive-foreground: "#2A0508"
  border: "#6B6390"
  input: "#6B6390"
  ring: "#6E8BFF"
  chart-1: "#FF6B45"
  chart-2: "#6E8BFF"
  chart-3: "#FFD84D"
  chart-4: "#3DDC97"
  chart-5: "#C77DFF"
typography:
  display-lg:
    fontFamily: Archivo Black
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Archivo Black
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Archivo Black
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-lg:
    fontFamily: Archivo
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.55
  body-md:
    fontFamily: Archivo
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: Archivo
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
  label-caps:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.06em
  label-mono:
    fontFamily: Space Mono
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
  numeral-xl:
    fontFamily: Archivo Black
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 10px
  md: 14px
  lg: 18px
  xl: 26px
  full: 9999px
spacing:
  base: 16px
  xs: 6px
  sm: 12px
  md: 20px
  lg: 36px
  xl: 72px
  gutter: 20px
  margin: 24px
  shadowOffset: 4px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 14px
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    rounded: "{rounded.md}"
    padding: 14px
  card-tile:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  badge-shout:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
  stat-tile:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
---

# Signal Pop

## Overview

Signal Pop is loud on purpose. Thick black outlines, hard offset shadows, chunky
display type and saturated fills give every element a physical, pressable
quality — like sticker sheets and arcade buttons. It is friendly rather than
aggressive, and it never pretends to be serious.

Use it for consumer products, launch pages, community tools and youth-facing
brands where energy and memorability beat restraint. It works best with few,
large elements: three big things, not thirty small ones.

Personality: bold, playful, tactile, extroverted.

## Colors

Cream page, hot orange, electric blue, canary yellow, black outlines.

- **Primary (#FF4D2E):** Hot orange. The main action and the brand's shout.
  Because it is light, its text is near-black, not white — never place white
  text on this orange.
- **Accent (#2D5BFF):** Electric blue. The second action and the focus ring.
  Blue and orange never touch without a black outline between them.
- **Secondary (#FFE066):** Canary. Highlight tiles, stat blocks, badges.
- **Border (#14110B):** The outline colour is *ink*, not a grey. This is the
  defining decision of the theme: everything is drawn with a 2px black line.

Dark mode keeps the shouting but drops the black outline — outlines become
`#6B6390` so they stay visible on a dark ground.

## Typography

Archivo Black for anything loud, Archivo Medium for everything else.

- **Display / headlines:** Archivo Black, uppercase, tracking `-0.03em`, line
  height under 1.0. Headings are uppercase in this system.
- **Body:** Archivo 500 at 15–17px. Body weight is medium, not regular — regular
  looks weak next to Archivo Black.
- **Labels:** Archivo 700, 12px, `0.06em`.
- **Mono:** Space Mono 700 for counts, timers and prices.

## Layout

Big blocks in a bento arrangement. A 12-column grid with 20px gutters, but tiles
are allowed to span 4, 6 or 8 columns and to differ in height — a perfectly
regular grid kills the energy.

Sections are 72px apart. Page margin is 24px, tight on purpose so the tiles feel
like they are pressing against the edges.

Elements may overlap slightly (a badge hanging off a card corner, a tile
overlapping a section rule). Rotation is allowed up to ±2deg on badges and
stickers, never on text blocks.

## Elevation & Depth

**Hard offset shadow.** Every raised element gets `4px 4px 0 0` in the border
colour — no blur, no alpha. On hover the element translates by 2px toward the
shadow and the shadow shrinks to 2px, so it reads as physically pressed. On
active it goes to 0 and the element sits flush.

Never use a soft blurred shadow anywhere in this theme.

## Shapes

Chunky and rounded: 18px on tiles, 14px on buttons and inputs, full pill on
badges. Every shape carries a 2px border in `border`. A shape without an outline
is invisible in this system — it reads as a mistake.

## Components

- **Buttons:** 2px outline, 14px radius, 14px/24px padding, uppercase label,
  `4px 4px 0` hard shadow, press animation on hover/active as described above.
- **Tile:** white fill, 2px outline, 18px radius, hard shadow, 20px padding.
  Stat tiles use the canary fill and set the number in Archivo Black at 48px.
- **Badge:** canary pill, 2px outline, uppercase 12px label, optionally rotated
  ±2deg and hung over the corner of a tile.
- **Input:** 2px outline, 14px radius, no inner shadow; on focus the outline
  turns electric blue and the hard shadow appears.
- **Nav:** a single outlined bar with a hard shadow, floating 12px from the top,
  not a full-bleed sticky header.
- **Progress / meters:** outlined track with a solid fill — no gradients.

## Do's and Don'ts

- Do outline everything in 2px ink; that outline is the brand.
- Do use hard offset shadows with zero blur.
- Do vary tile sizes — a uniform grid drains the energy out of this theme.
- Don't put white text on the orange; use near-black.
- Don't use soft or blurred shadows anywhere.
- Don't rotate text blocks; only badges and stickers may tilt.
- Don't cram — this system needs a small number of large elements.