Teenage Engineering — Graphic Campaign and Product Gallery

---
version: alpha
name: Teenage Engineering — Graphic Campaign and Product Gallery
description: A stark hardware storefront combines an oversized black-and-white comic
  campaign, pictographic navigation, cinematic dark product photography and edge-to-edge
  three-column accessory grids. Tiny blue purchase links and a restrained neutral
  canvas keep attention on the objects; mobile switches to a compact rounded category
  gallery.
colors:
  primary: '#0071BB'
  surface: '#F6F8F7'
  on-surface: '#0F0E12'
  inverse-surface: '#000000'
  on-inverse-surface: '#E5E5E5'
  mobile-hero: '#F1F2F2'
typography:
  label:
    fontFamily: te-20, Unicode, sans-serif
    fontSize: 13.2245px
    fontWeight: '300'
    lineHeight: 14.6939px
  navigation:
    fontFamily: te-20, Unicode, sans-serif
    fontSize: 19.5px
    fontWeight: '100'
    lineHeight: 29.25px
  display-link:
    fontFamily: te-40, Unicode, sans-serif
    fontSize: 39.6735px
    fontWeight: '300'
    lineHeight: 44.0816px
  mobile-section:
    fontFamily: te-40, Unicode, sans-serif
    fontSize: 21.4898px
    fontWeight: '300'
    lineHeight: 23.8776px
---

# Teenage Engineering — Graphic Campaign and Product Gallery

## Overview

Observed 2026-09-21T06:05:04.120195+00:00 at desktop 1440 × 1000 CSS pixels and device scale factor 1; mobile reviewed at 390 × 844. This is an independent visual reference based on measured CSS and inspected captures.

A hardware catalogue treats products as exhibition pieces. The opening campaign, “Daily Life of Mr. Update,” combines huge tightly packed black lettering with a detailed comic drawing of a desk buried in papers. It is followed by extremely large photographs, not explanatory feature cards. An unusually dense pictographic masthead and tiny captions make the composition feel like a designed object in its own right. This is the observed campaign state, not a permanent brand manual.

## Colors

The interface's measured neutral palette is #F6F8F7 for accessory-grid surfaces, #0F0E12 for dark foregrounds and footer surfaces, and #000000 for the black product stages. Pale #E5E5E5 labels sit over dark imagery. Purchase-link spans measure #0071BB. At the sampled mobile width, the illustrated opening rests on #F1F2F2. The desktop opening looks white; this is a visual observation of the artwork/canvas, not a sampled universal surface token.

Orange marks in the comic and hardware, green in the Riddim collage, and the red speaker variant belong to the artwork and photographed objects. Keep these accents local to their product stories. Do not turn the entire interface orange or replace the carefully lit dark imagery with a uniform gray placeholder.

## Typography

The declared text stacks are te-20 and te-40 followed by Unicode and sans-serif. These are lightweight proportional sans-serif faces, not a measured monospaced UI. Small desktop product labels and blue buy-now spans measure 13.2245px/14.6939px at weight 300. The visible “products” SVG tspan measures 19.5px with a 29.25px declared line height at weight 100; its rendered bounding box is about 108px wide because the SVG presentation scales it. Treat that as an SVG sample, not the pixel size of every navigation item.

The lower “explore all products” link measures 39.6735px/44.0816px, weight 300. On mobile, section/display links reduce to 21.4898px/23.8776px and product labels sample at 10.7449px/11.9388px. Footer copy is approximately 19.1px desktop and 10.35px mobile. These are individual computed samples, not a universal scale. The huge campaign lettering is embedded artwork; its exact typeface and live CSS heading metrics were not established. Preserve its artwork proportions instead of assigning the navigation font to it.

## Layout

At 1440px, the homepage is a long 15,233px scroll. The top masthead groups the wordmark, products, store, latest and finder into a horizontal line of labels, micro-links and bold black geometric icons. The comic campaign has generous outer white space and occupies nearly the first screen. A small green store icon appears near the lower right of that chapter.

Below, alternate full-width product stories with tight accessory grids: APC–2, a record release, K.O. II, K.O.–SIDEKICK, Riddim, field system, OB–4 and pocket operators. Photography is edge-to-edge and mostly dark, with tiny captions placed near the bottom-left. Three-column product rows have adjacent pale cells separated by fine vertical rules, not gutters. Sampled buy-link x positions are 29.375, 508.391 and 987.406px: roughly 479px between columns and 29px text insets. The sidekick bundle row includes a wider composition for multiple objects. The pocket-operator grid repeats three columns across several rows. Finish with one broad dark catalogue link and a compact footer.

Mobile is a distinct composition, not merely stacked desktop sections. At 390px the page is about 2,993px tall: the comic campaign sits in a pale field, followed by a centered “explore products” label and four rounded category images, then a full-width catalogue link and utility-rich dark footer. Content insets measure about 17.9px, with approximately 354px available width. The footer stacks shipping text, a newsletter control and divider-separated utility links. Both sampled document widths equal their viewports, with no horizontal overflow. The narrow static capture did not visibly paint a top masthead even though menu/cart controls were present in the DOM; do not infer the menu's open state or recommend an invisible navigation pattern. Intermediate breakpoints were not tested.

## Elevation & Depth

The depth is photographic: spotlights, reflections and physical cast shadows sculpt the equipment against black stages. The interface itself is flat. Sampled label spans have no box shadow. The product grid uses hairline separation and scale instead of floating cards. Do not add soft drop shadows to every cell or wash out the dark images; their broad negative space is intentional.

## Shapes

Desktop imagery and grid cells are square-edged. The masthead mixes a pinwheel, block store icon, outline square and radial finder symbol. The mobile category panels have visibly rounded corners, unlike the desktop grid; their exact radius was not sampled. The measured mobile newsletter control radius is 7.9592px with 7.9592px 21.4898px padding. Avoid transferring that single control radius to all desktop components.

## Components

Use a pictographic masthead, campaign artwork panel, cinematic product stage, minimal accessory tile, broad catalogue link and dark utility footer. A product tile places its short model name above a small blue text purchase link, with most of its area reserved for photography. Names and model codes need not compete with the object image. The mobile page prioritizes category discovery rather than displaying every desktop accessory card.

Cookie preferences were opened and declined through the actual site controls before capture. The triangular consent panel is not part of the reference composition. No product detail, checkout, newsletter submission or menu-open flow was exercised. Static captures show one visual state; animation, hover and loading transitions are not specified.

## Do's and Don'ts

- Do alternate dramatic full-width imagery with precise, quiet product grids.
- Do preserve generous negative space around isolated hardware.
- Do keep the small blue purchase links subordinate to imagery.
- Don't describe the campaign's embedded lettering as measured live heading typography.
- Don't assume the desktop catalogue order or density survives on mobile.
- Don't replace the physical lighting with generic raised-card effects.