Next Up In 9 Days
Wed, Nov 18 Doors 6:30 PM
DragonForce
with Ensiferum and Rhapsody of Fire
House of Blues
Higgsfield artpower metal mood, or House of Blues
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 |
|---|---|---|
| Page TitleAnton, caps | 86 px phone, up to 180 px desktop | The word Concerts, as a nameplate |
| Feature NameAnton, caps | 40 to 84 px, sized to its column | The next show's headliner |
| Month NameAnton, caps | 44 / 56 / 60 px | Month headings, Your Hosts, Past Shows |
| Day NumberAnton | 50 / 64 / 72 px | The date at the left of each show |
| Show NameAnton, caps | 32 / 38 / 44 px (24 in the list) | Headliner in the agenda |
| BodyArchivo 400 | 18 px / 1.45 | Facts, steps, What's New lines |
| Key LineArchivo 500 to 600 | 17 to 18 px | Venue and door time, date line |
| SecondaryArchivo 400 | 16 px | Support acts, genre, host, price, counts |
| LabelArchivo 700, caps, wide spacing | 13 to 14 px | Day of week, month, fact labels, Next Up |
Colors
| Color | Used For |
|---|---|
Page#002461 | Background (brand navy, unchanged) |
Feature#001B4A | The band behind the next show |
Panel#0A3070 | What's New panel only |
Orange#FF6200 | Title, one solid Tickets button per show, the feature's top rule |
Orange Text#FF731B | Small orange labels only |
Ink#DDD8D8 | Main text and the heavy rules (brand off-white) |
Soft#C3CADC | Secondary text. New: replaces 70% see-through ink |
Rule#6F88B8 | Button 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 PageShow names, body text | 10.45 to 1 | AAA |
| AaSoft on PageSecondary text, and text of a show the filter set aside | 8.98 to 1 | AAA |
| AaInk on FeatureThe next show's name and facts | 11.86 to 1 | AAA |
| AaSoft on FeatureSupport acts in the feature | 10.20 to 1 | AAA |
| AaOrange Text on PageMonth in the date column | 5.42 to 1 | AA |
| AaOrange Text on FeatureNext Up label | 6.15 to 1 | AA |
| AaDeep on OrangeTickets button words | 5.57 to 1 | AA |
| AaOrange on PagePage title (large text) | 4.91 to 1 | AA |
| AaRule on PageButton borders, and the large name of a show the filter set aside | 4.13 to 1 | Large text and borders only |
| AaRule on FeatureButton borders in the feature | 4.69 to 1 | AA |
| AaInk on PanelWhat's New lines | 8.92 to 1 | AAA |
Spacing, Corners, Shadow, Motion
| Spacing Scale | 4, 8, 16, 24, 40, 64, 96 px. Rows have 20 px above and below on a phone and 24 px on a desktop. Sections sit 64 px apart, 88 px on a desktop. |
|---|---|
| Corner Radius | 4 px on buttons. Square panels. Full pill only for filter chips and the round host initials. |
| Shadow | None on the page. Depth comes from rules and space. Only the What's New panel and the filter list cast a shadow. |
| Motion | 200 ms ease-out for hover, Details and What's New. Details fade in; nothing slides on the page. All motion stops when the device asks for reduced motion. |
Build Cost
MNew page structure: nameplate, a next-show feature, agenda rows, and two people strips. No new data needed for the look.
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 | Nameplate, feature, agenda rows, date column, people strips, list index, side panel |
build/src/render.js | Feature block for the next show, agenda rows in place of cards, Your Hosts from the host names already on each show, What's New one line per change |
sites/concerts/template/app.js | Filter list that drops over the page; the feature's Details button opens the row below; drop the month-header height sync |
sites/concerts/site.config.json | Words for the How It Works steps |
build/test/responsive-layout.test.js | Phone-layout guard: an approved new baseline, since the phone structure changes |
build/test/a11y.test.js | Contrast, heading and button tests updated to the new structure |
build/test/render.test.js | Markup tests updated for rows and the feature |
sites/concerts/changelog.md | One What's New line per pull request |
Needs: No new data. One image for the next show is enough, and the page holds with none. The How It Works words are samples to confirm. Host photos would need new data and each host's consent.