Design Tokens
A design token is a named value, such as one color or one text size, that the whole page reuses.
Type Scale
| Name | Size | Used For |
|---|
| Page TitleAnton, caps, wide spacing | 46 / 60 / 76 px | The word Concerts |
|---|
| Show NameAnton, caps | 28 px (21 in the list) | Headliner on a card |
|---|
| SectionAnton, caps | 24 px | Month and Past Shows headings |
|---|
| BodyArchivo 400 | 18 px / 1.45 | Facts, What's New lines |
|---|
| Key LineArchivo 500 | 17 px | Venue and door time on the card |
|---|
| SecondaryArchivo 400 to 500 | 16 px | Support acts, addresses, counts, pills |
|---|
| LabelArchivo 600 to 700 | 13 to 14 px | Day and month and fact labels, in caps. Also the price note inside the Tickets button |
|---|
Colors
| Color | Used For |
|---|
Page#002461 | Background (brand navy, unchanged) |
|---|
Card#0A3070 | Card surface (unchanged) |
|---|
Deep#001B4A | Date block, host pill, text on orange |
|---|
Orange#FF6200 | One solid Tickets button per card, title, rules |
|---|
Orange Text#FF731B | Small orange labels only |
|---|
Ink#DDD8D8 | Main text (brand off-white) |
|---|
Soft#C3CADC | Secondary text. New: replaces 70% see-through ink |
|---|
Line#6F88B8 | Button and pill borders. New: replaces the faint 28% line |
|---|
Contrast
Contrast is how clearly text stands out from what is behind it. AA is the accepted pass mark: 4.5 to 1 for normal text, 3 to 1 for large text and borders. AAA is the stricter mark: 7 to 1.
| Pair | Ratio | Result |
|---|
| AaInk on CardBody text | 8.92 to 1 | AAA |
|---|
| AaInk on PageHeadings, toolbar | 10.45 to 1 | AAA |
|---|
| AaSoft on CardSecondary text | 7.67 to 1 | AAA |
|---|
| AaSoft on PageCounts, footer | 8.98 to 1 | AAA |
|---|
| AaDeep on OrangeTickets button words | 5.57 to 1 | AA |
|---|
| AaOrange Text on DeepMonth in the date block | 6.15 to 1 | AA |
|---|
| AaOrange Text on CardWhat's New dates | 4.62 to 1 | AA |
|---|
| AaOrange on PagePage title (large text) | 4.91 to 1 | AA |
|---|
| AaLine on CardButton borders (needs 3:1) | 3.53 to 1 | Large text and borders only |
|---|
| AaLine on PageButton borders (needs 3:1) | 4.13 to 1 | Large text and borders only |
|---|
| AaSoft on PageA show the filter set aside. It turns quiet, it does not fade | 8.98 to 1 | AAA |
|---|
Spacing, Corners, Shadow, Motion
| Spacing Scale | 4, 8, 12, 16, 24, 32, 48, 64 px. Cards use 16 px inside and 16 px apart on a phone, 24 px apart on a desktop. |
|---|
| Corner Radius | 10 px small buttons, 12 px buttons and date block, 18 px cards, full pill for chips. |
|---|
| Shadow | One soft shadow under cards: 0 8px 24px at 28% of a near-black navy. No glow. |
|---|
| Motion | 160 ms ease-out for hover and press. 240 ms for Details and What's New opening. All motion stops when the device asks for reduced motion. |
|---|
Build Cost
S to MMostly a style-sheet change. Small markup changes for the date block, the slim header and the invite strip.
S is a few small pull requests. M is about a week of small pull requests. L is a larger project with new art and new moving parts. A pull request is one small, reviewed change to the site's code.
| File | What Changes |
|---|
sites/concerts/template/styles.css | New tokens, buttons, card, toolbar, list and overlay styles |
|---|
build/src/render.js | Date block, slim header, invite strip, one Filter button, What's New lines split one per change |
|---|
sites/concerts/template/app.js | Filter panel open and close; drop the month-header height sync |
|---|
build/test/responsive-layout.test.js | Phone-layout guard: new marked block or an approved new baseline |
|---|
build/test/a11y.test.js | Contrast and button tests updated to the new tokens |
|---|
sites/concerts/changelog.md | One What's New line per pull request |
|---|
Needs: No new data. Art slots are optional: the cards hold without them.