# Tame Impala design system

> Captured from https://www.tameimpala.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/tame-impala/). An independent analysis for reference: Tame Impala and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

A black #000000 page under a full-bleed grainy photo, with white text and a soft #f19d4f orange. The surprise is the type: almost all of it is Times at 17px, set uppercase, with a heavy Helvetica only for the 64px name and the button labels. Navigation is a row of 50px tall orange pills.

- Theme: dark
- Mood: dark, photography, serif, psychedelic, grain
- Category: Band

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#f2f2f2` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 21.0:1 on the background |
| Accent | `#f19d4f` | Primary actions |
| Border | `#4d4d4d` | Hairlines and dividers |

Full palette, most used first: `#000000`, `#f2f2f2`, `#f19d4f`, `#ffffff`.

## Typography

- **TimesLTS**: body, 91.8% of the text. Use Tinos. Times LT Std is a paid typeface. Tinos, which matches Times metrics, is a free stand-in, not a match.
- **helvetica-neue-lt-pro**: display and body, 4.9% of the text. Use Inter. Helvetica Neue LT Pro is a paid typeface. Inter is a free stand-in, not a match.
- **HelveticaHeavy**: display, 3.1% of the text. Use Archivo Black. Helvetica Heavy is a paid typeface. Archivo Black is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | HelveticaHeavy | 63.9px | 700 | 1.35 | 0 |
| Heading | HelveticaHeavy | 57.6px | 400 | normal | 0 |
| Subheading | TimesLTS | 17px | 400 | normal | 0 |
| Body | TimesLTS | 17px | 400 | normal | 0 |
| Small | TimesLTS | 12px | 400 | normal | 0 |

Sizes in use, largest first: 64px, 58px, 20px, 19px, 17px, 14px, 12px, 11px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 6px, 10px, 12px, 20px, 30px.

## Shape

Corner radii, smallest first: pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`

## Components

### Primary button ("SHOP")

- Fill: #f19d4f
- Text: #000000, 18.7px at weight 400
- Border: none
- Corner: pill (9999px)
- Height: 50px, padding 13px 8px

## Do

- Let one textured, full-screen photo set the mood and keep everything else small.
- Set running text in an uppercase serif for a printed, archival feel.
- Make navigation big orange pills that read as buttons, not links.

## Don't

- Put the orange behind long text: keep it to short pill labels.
- Add cards or boxes over the photo: the page has almost no chrome.
- Use a light theme: the orange and grain need the black ground.

## CSS variables

```css
:root {
  --color-background: #000000;
  --color-surface: #f2f2f2;
  --color-text: #ffffff;
  --color-accent: #f19d4f;
  --color-border: #4d4d4d;
  --font-display: "HelveticaHeavy", system-ui, sans-serif;
  --text-display: 63.9px;
  --weight-display: 700;
  --font-heading: "HelveticaHeavy", system-ui, sans-serif;
  --text-heading: 57.6px;
  --weight-heading: 400;
  --font-subheading: "TimesLTS", system-ui, sans-serif;
  --text-subheading: 17px;
  --weight-subheading: 400;
  --font-body: "TimesLTS", system-ui, sans-serif;
  --text-body: 17px;
  --weight-body: 400;
  --font-small: "TimesLTS", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 20px;
  --space-6: 30px;
  --radius-1: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.