Higgsfield artpower metal mood, or House of Blues
Next Up In 9 Days
Wed, November 18. House of Blues, Doors 6:30 PM
DragonForce
with Ensiferum and Rhapsody of Fire
Phone, 390 wide. Tap Details, What's New, Filter, and Cards or List.
Desktop, 1280 wide, scaled to fit this screen.
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 |
|---|---|---|
| Hero NameAnton, caps | 44 to 88 px, sized to its column | The next show's headliner |
| Join TitleAnton, caps | 40 px phone, 48 px desktop | Live music, better with people |
| Section TitleAnton, caps | 30 px phone, 40 px desktop | Coming Up, Past Shows, What's New |
| Show NameAnton, caps | 30 px (34 on desktop, 22 in the list) | Headliner on each card and in the sheet |
| Day NumberAnton | 30 px | The date stub |
| Page NameAnton, caps | 26 px | Concerts, in the top bar |
| BodyArchivo 400 | 18 px / 1.45 | Facts, What's New lines, the join text |
| Key LineArchivo 500 to 600 | 16 to 17 px | Venue and door time, host and price in the hero, the date line in a sheet |
| SecondaryArchivo 400 to 500 | 16 px | Support acts, host, filter chips, counts |
| LabelArchivo 700, caps, wide spacing | 13 to 14 px | Next Up, month labels, the date stub, fact labels |
Colors
| Color | Used For |
|---|---|
Page#00133A | Background. Darker than the brand navy, for a night feel |
Card#062659 | Cards, sheets, the invite strip |
Raised#0B3274 | The join card's light corner, the arrow circle |
Orange#FF6200 | One solid Tickets button per show, the page name, a picked filter chip |
Orange Text#FF731B | Small orange labels only |
Ink#DDD8D8 | Main text, and the date stub (brand off-white) |
Soft#C3CADC | Secondary text. New: replaces 70% see-through ink |
Line#6F88B8 | Button and chip 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 PageThe next show's name, section titles | 12.90 to 1 | AAA |
| AaSoft on PageSupport acts, month labels | 11.09 to 1 | AAA |
| AaInk on CardShow names, facts | 10.42 to 1 | AAA |
| AaSoft on CardSecondary text on cards and sheets | 8.96 to 1 | AAA |
| AaOrange Text on PageNext Up label | 6.69 to 1 | AA |
| AaOrange Text on CardDate line in a sheet, What's New dates | 5.40 to 1 | AA |
| AaNight on OrangeTickets button words, a picked chip | 6.06 to 1 | AA |
| AaNight on InkThe date stub | 12.90 to 1 | AAA |
| AaOrange on PageThe page name in the top bar (large text) | 6.06 to 1 | AA |
| AaLine on PageChip and button borders on the page | 5.10 to 1 | AA |
| AaLine on CardButton borders on cards and sheets | 4.12 to 1 | Large text and borders only |
| AaSoft on RaisedThe join text at its lightest corner, and the date stub of a show the filter set aside | 7.43 to 1 | AAA |
Spacing, Corners, Shadow, Motion
| Spacing Scale | 4, 8, 12, 16, 24, 32, 48 px. Cards sit 18 px apart on a phone and 24 px on a desktop. Sections sit 48 to 56 px apart, 72 px on a desktop. |
|---|---|
| Corner Radius | 20 px on cards, 14 px on buttons, 24 px on sheets and the join card, 28 px on the wide banner. Full pill for chips and the round host initials. |
| Shadow | Deep and soft: 0 14 40 at 60% under cards. The orange Tickets button carries a glow: 0 8 28 orange at 38%. Sheets cast a shadow over a dark scrim. |
| Motion | 280 ms for sheets, with a soft landing. 120 ms for presses: buttons shrink to 97% while held. All motion stops when the device asks for reduced motion. |
Build Cost
LA new look and a new way to open a show. It needs art to pay off, a sheet that handles the keyboard well, and a darker page color.
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 | Night colors, top bar, image banner, poster cards, chip row, sheets, join card |
build/src/render.js | Banner for the next show, poster cards with art slots, one sheet per show, the chip row, What's New one line per change |
sites/concerts/template/app.js | Open and close sheets, keep keyboard focus inside an open sheet, lock page scroll, chip filters, drop the month-header height sync |
build/src/logos.js | Art lookup: by headliner, then by genre, then by venue |
sites/concerts/assets/art/ | New folder for the images (about 6 to 10 cover every genre) |
shared/brand/palette.json | Add the night page color and the two new text and line colors |
build/test/responsive-layout.test.js | Phone-layout guard: an approved new baseline, since the phone layout is all new |
build/test/a11y.test.js | Details and Hide details becomes Details and Close; What's New position; contrast pinned to the night colors |
build/test/render.test.js, build/test/logos.test.js | Markup tests for cards and sheets; art lookup tests |
sites/concerts/changelog.md | One What's New line per pull request |
Needs: Art: at least one image for the next show, and about 6 to 10 genre images so no card is empty. A page darker than the brand navy, which is the owner's call. No new show data.