Panic — Cinematic Hero and Icon Gallery

---
version: alpha
name: Panic — Cinematic Hero and Icon Gallery
colors:
  primary: '#8400ff'
  surface: '#EBEBEB'
  support-surface: '#171717'
  body-surface: '#1C1C1C'
  support-text: '#808080'
  social: '#00c2d4'
  support-heading: '#ffc900'
  control-surface: '#000000'
  control-text: '#DDDDDD'
typography:
  category:
    fontFamily: Booton, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif
    fontSize: 42px
    fontWeight: '300'
    lineHeight: 45px
  support-select:
    fontFamily: Arial
    fontSize: 24px
    fontWeight: '400'
    lineHeight: 24px
  mobile-category:
    fontFamily: Booton, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif
    fontSize: 16.38px
    fontWeight: '300'
    lineHeight: 17.55px
rounded:
  control: 4px
spacing:
  support-top: 30px
  social-bottom: 35px
components:
  category-heading:
    textColor: '{colors.primary}'
    typography: '{typography.category}'
  support-section:
    backgroundColor: '{colors.support-surface}'
    textColor: '{colors.support-text}'
  support-select:
    backgroundColor: '{colors.control-surface}'
    textColor: '{colors.control-text}'
    typography: '{typography.support-select}'
    rounded: '{rounded.control}'
---

# Panic — Cinematic Hero and Icon Gallery

## Overview

Panic presents a publisher and software maker through the things it makes. A near-full-viewport night scene for Big Walk opens the page, with a large blue scalloped Panic badge and the game's illustrated logo centered above the scene. A diagonal cut reveals a pale-gray gallery: three Mac-app icons, an eleven-game mosaic, and a yellow Playdate device. A second sloping boundary introduces a dark, practical support area. It is an image-led portfolio, not a conventional text-heavy SaaS funnel.

Desktop was captured at 1440 × 1000 CSS pixels, device scale factor 1. Mobile was measured and inspected at 390 × 844. Captured 2026-09-25T06:07:08.065606+00:00. Numeric tokens are measured CSS; estimates are explicitly identified. Only the visible Big Walk hero state and default gallery were visually reviewed. Other hero panels and popover content exist in the DOM but are not established visible states.

## Colors

The gallery surface is #EBEBEB and the support section #171717, with the outer body #1C1C1C. Category headings use the measured wide-gamut violet color(display-p3 0.47 0 1). Social copy switches to cyan color(display-p3 0.27 0.75 0.82); support heading switches to yellow color(display-p3 1 0.8 0.25). The frontmatter supplies sRGB fallbacks #8400FF, #00C2D4 and #FFC900 respectively, converted from these measured P3 colors with channel clipping using ColorAide. These are bounded-gamut fallbacks, not identical wide-gamut colors or screenshot guesses; retain the original P3 values above when the implementation supports them. Support prose inherits #808080 and native controls use black backgrounds with #DDDDDD text.

The hero's navy, blue badge and orange firelight are artwork colors, not a single uniform surface token. App icons carry their own rich palettes. Keep the surrounding gallery neutral so the violet headings and product silhouettes organize the variety. The source's footer text looks faint, especially on mobile; improve contrast when adapting instead of treating it as an accessibility recommendation.

## Typography

Visible category, social and support headings use Booton with a system sans-serif fallback at 42px, weight 300 and 45px line height. Their light, open shapes deliberately contrast with the weight of the icon illustrations. Do not reproduce the measured transparent H1 text as a visible 80px headline: the hero's painted title is logo artwork, not ordinary Booton typography.

The support select is Arial 24px/24px on desktop. At 390px, headings measure 16.38px/17.55px and the select 9.36px/9.36px; the email field reaches 6.24px. These are observed proportional scaling values, not recommended mobile text sizes. Hidden product descriptions have additional small CSS values, but should not define the default page's body typography. Preserve the lightweight heading character while enforcing readable minimum sizes in a new implementation.

## Layout

Use a full-bleed cinematic opening with a vertically arranged brand badge and game mark. The captured first diagonal boundary sits roughly around y=1000px (visual estimate). Center the gallery underneath. Mac apps form a three-icon row; games form two four-icon rows and a final three-icon row; the handheld device stands alone below. Section headings precede each icon group, with generous breathing room and no individual card outlines or visible descriptive paragraphs in the default state.

Measured desktop category section heights are 285px for apps, 725px for games and 285px for the handheld device. The social section is 80px high, including 35px bottom padding. The support area begins at y=2675px and is 478px high, with 30px top padding. These are reference measurements, not a universal spacing scale.

At 390px, the source largely scales the composition rather than replacing the gallery with a vertical card list: apps stay three across and games four across. Mobile document width equals its 390px viewport with no measured horizontal overflow. The entire page is about 1251px tall, versus 3153px at desktop. The hero crops the scene, the diagonal boundaries remain, and footer controls become very small. Retain the icon-led grouping, but improve minimum target sizes and support readability when adapting.

## Elevation & Depth

Depth primarily comes from the artwork: glossy native-app icons, irregular illustrated silhouettes, the dimensional yellow device, and night-scene lighting. Subtle icon shadows are visible; their exact CSS shadow was not measured. The large gallery plane is flat and unbordered. Do not wrap every icon in another elevated card. DOM popovers have a measured 10px radius and 0 5px 20px rgba(0,0,0,0.2) shadow, but their activation and rendered state were not tested, so they are not the default visual pattern.

## Shapes

Use straight diagonal cuts for the major section transitions, contrasted with a scalloped brand badge, rounded-square Mac icons and deliberately varied game outlines: circular, irregular, shield-like and triangular. Avoid forcing the catalogue into identical containers. Native support controls have measured 4px corners on desktop, while most page sections have no radius. Decorative angles should not tilt the actual text or inputs.

## Components

- Hero: full-bleed game artwork with centered brand badge and game-specific logo. The Big Walk composition is the documented state; do not infer carousel timing or controls from the static capture.
- App row: three large, recognizable icon links under a thin violet category line with a small computer symbol. Product labels are not visibly printed below the icons in the default capture; supply accessible names in an adaptation.
- Game gallery: an ordered mosaic of strong silhouettes. Preserve the rhythm of varied shapes while keeping comparable visual sizes and even row spacing.
- Hardware spotlight: a single yellow Playdate product render below a matching violet heading and handheld symbol.
- Social transition: centered cyan text with an underlined follow link, framed by substantial gray whitespace.
- Support footer: yellow heading; a compact vertical list with small colored utility icons; product selector and Go control; serial-retrieval email field; legacy download and sync links; muted address/legal information. No form was submitted and no success state was tested.

## Do's and Don'ts

Do let real product artwork do the selling. Do separate the cinematic opening, neutral gallery and dark support area with bold angled boundaries. Do keep the three business categories easy to scan. Do preserve illustration variety and lightweight category typography. Do improve small-screen text and controls without discarding the gallery's identity.

Don't replace every product with a generic card and paragraph. Don't turn image-based logos or transparent DOM headings into fabricated font measurements. Don't claim hidden popovers or unseen hero states were inspected. Don't copy the source's tiny mobile support controls or muted footer contrast as best practice. Don't publish claims about the games or product availability beyond what this visual reference establishes.