Tame Impala
Grainy full-screen photography with Times body text and orange pill buttons.
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.
- 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.
- 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.
Color roles
#000000The page ground
#f2f2f2Raised panels, bands and cards
#ffffffPrimary ink, 21.0:1 on the background
#f19d4fPrimary actions
#4d4d4dHairlines and dividers
Type
Use Tinos. Times LT Std is a paid typeface. Tinos, which matches Times metrics, is a free stand-in, not a match.
Use Inter. Helvetica Neue LT Pro is a paid typeface. Inter is a free stand-in, not a match.
Use Archivo Black. Helvetica Heavy is a paid typeface. Archivo Black is a free stand-in, not a match.
Sizes in use: 64px / 58px / 20px / 19px / 17px / 14px / 12px / 11px
Spacing
No single base unit: these are the values the page repeats.
Corners and depth
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# 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.
Tame Impala and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-05. We're not affiliated with or endorsed by Tame Impala.