Busk Map design deck · design system v66
Honeycomb
The brand and design system Busk Map is built from. Enough for a studio to build the whole app from this deck alone: the brand book, the words, tokens mapped to shadcn, every component in every state, every screen, all the assets, and a code handoff.
01
Brand book
Busk Map tells street performers where and when to play, and what to play there. It is used standing on a footpath, phone in one hand, in bright sun or after dark. Honeycomb is a street poster you can plan with, built from one shape: the honeycomb cell from Qloo's taste map.
Principles
- The pitch ringAn open circle (the crowd) around one paper cell (the performer), in an orange honeycomb cell. It is the logo, the loader, every map pin and the score ring.
- One thing, one cellAnything that stands for one thing (a place, a rank, a song, a score, a step) is a pointy-top hexagon. Anything that holds things stays a square box.
- Signal orangeThe one loud colour: the next action, rank cells, the score. It is a fill;
signal-textis orange you can read. - Bluestone and paperBluestone is the ink and the night ground; warm paper is the day ground. Both themes pass AA everywhere.
- Condensed capsBig Shoulders shouts the headings. Sentences stay in Atkinson Hyperlegible Next; data and numbers in JetBrains Mono.
- Print texture2px rules instead of soft shadows, hard offsets on things that float, a halftone grain on night grounds, a stencil wordmark.
- Credit in wordsQloo's taste data is credited in plain text wherever it changes the answer: the word Qloo, never a logo, in the neutral
slate. - Honest numbersEvery number names its source. Estimates are labelled; planned work is labelled "Next · not built yet"; nothing is invented.
Voice
- Pitch, buskA pitch is one place to play. A busk is the whole outing: three pitches, their suggested sets, one link.
- Plain wordsSay what the research found, never the tool behind it.
- Honest numbersEvery number names its source. Estimates are labelled, and nothing is invented.
- Name the dataTaste data is the heart of every busk. Name Qloo, in plain text, wherever its data changed the answer.
02
The words
Use these words, in these senses, everywhere: UI, docs, video and social. No tool names in the UI.
The word list
| Word | Means |
|---|---|
| Pitch | One place to play: a spot on the street with a score. Never "spot" or "location" in the UI. |
| Busk | The whole outing: your three pitches, their setlists and the reasons, at one link. "Plan a busk", "Your busk". |
| Act | Who is playing: a name, the artists they sound like and the songs they can play. |
| Slot | The day and hours you will play: "Sun 19 Oct · 12–3 pm". |
| Setlist | The songs for one pitch, in order. "Learn these" are songs the crowd likes that you don’t play yet. |
| Hidden gem / Usual pitch | A strong taste fit off the usual busking circuit, or a well-known hotspot. Never a warning. |
| The usual crowd | Everyone near a busking hotspot, with no taste signal: what your fans are compared with. |
| The research | What the Hive checked to build the busk. Plain results, never tool names. |
| The engine | Busk Map’s scoring: plain code, no AI. The Hive can only pick among pitches it scored. |
| Honeycomb | The brand and design system. The product is always Busk Map. |
03
Foundations
Colour
- Signal orange--primary · actions, top pick
- Bluestone--bluestone · ink, night ground
- Paper--card · cards, panels
- Ground--background · the page
- Honey--honey · hidden gems
- Slate--slate · data from a named source
- Event blue--event · events
- Zone pink--zone-pink · no-busking zones
- Footfall--footfall · activity estimate
Taste ramp: --taste-1 to --taste-5, low to high Qloo affinity. Every colour has a night value.
Type
SouthbankBig Shoulders Display 800--font-display · headlines and pitch names, in capitals
Folk crowd; a matinee lets out at 2:45 pm.Atkinson Hyperlegible Next--font-sans · everything people read
SUN 19 OCT · 12–3 PMJetBrains Mono--font-mono · times, counts, sources, labels
The honeycomb
One idea per pointy-top cell: a rank, a person, a song or a score. Never a circle or a square tile. Every 0–100 value is a ScoreCell; a cell that is waiting is dashed.
Working
Iconography
One icon set, 24px grid, 2px stroke, round caps and joins. Icons come with a word beside them; they never carry meaning alone.
- pin
- clock
- calendar
- music
- users
- footfall
- rain
- sun
- cloud
- wind
- ticket
- legal
- restricted
- gem
- usual
- info
- warning
- alert-circle
- help-circle
- check
- x
- minus
- pencil
- chevron-down
- chevron-up
- chevron-right
- arrow-right
- arrow-left
- plus
- search
- share
- copy
- download
- database
- coins
- map
- list
- offline
- trending
- volume
- volume-off
- external
- play
- github
- home
- week
- trash
- loader
- spotify
- learn
- store
- train
- dots
- refresh
Space, size, shape and motion
Spacing (4px base)space-1 4px · Icon to label; badge padding block.space-2 8px · Inside chips and badges; gap between chips.space-3 12px · Between rows in a list; control padding inline.space-4 16px · Mobile page gutter; card padding on mobile.space-5 20px · Between a card heading and its body.space-6 24px · Card padding on desktop; between sections in a card.space-8 32px · Between cards and panels.space-12 48px · Between page sections on desktop.space-16 64px · Landing section rhythm.
Sizessize-tap 48px · Minimum touch target on mobile: buttons, nav items, pins' hit area.size-control 44px · Height of buttons, inputs and selects (default size).size-control-sm 36px · Compact buttons inside cards on desktop; never the only action on mobile.size-pin 40px · Top-three pitch pin diameter.size-nav 64px · Mobile bottom nav bar height (plus the safe-area inset).
Shape: square, ruledradius-sm 0px · Badges, chips, cells, tooltips: square.radius 0px · The shadcn --radius base: buttons, inputs, selects, tabs. Square.radius-lg 0px · Cards, dialogs, sheets: square, framed by a 2px
rule.radius-xl 0px · The hero panel and the app icon tile: square.radius-full 9999px · Only the pitch ring, pin pucks, the score ring and status dots.Strokesstroke-hair 1px · Row dividers inside a panel, in border.stroke-rule 2px · Panel frames, rank tiles, the score block, orange fills by day, in rule.stroke-heavy 4px · The signal-orange underline under the header, the active tab, the score block's top edge, setlist score bars.Elevation: hard offsets, no blurshadow-sm 2px 2px 0 #141c21 · Pins and the map legend over the map.shadow-md 4px 4px 0 #141c21 · The floating PitchCard over the map, toasts, tooltips.shadow-lg 6px 6px 0 #141c21 · Dialogs and sheets.focus-ring 2px solid ring · Keyboard focus: one ring, from each shadcn component's own focus-visible style. Buttons get a 2px outline in
ring with a 2px offset; fields turn their border to ring plus one ring. Never a second ring, and never a ground gap plus a ring.Motion: explains, never decoratesduration-fast 120ms · Hover, press, chip toggle.duration-base 200ms · Tabs, tooltips, the pin selecting.duration-slow 320ms · Sheets and dialogs entering; the score ring filling.Easingease-out cubic-bezier(0.2, 0.8, 0.2, 1) · Things arriving: sheets, toasts, pins.ease-in cubic-bezier(0.4, 0, 1, 1) · Things leaving.Under prefers-reduced-motion, everything drops to 0 ms except progress.
04
Tokens to shadcn
The colour names are shadcn/ui theme variables one-to-one, so every shadcn component picks up Honeycomb from globals.css alone. Busk Map's map, data and brand tokens sit on top. Every text pair passes 4.5:1 and every mark 3:1, in both themes.
Colour tokens, day and night
| Token | Layer | Day | Night | Use |
|---|---|---|---|---|
| --background | shadcn | #f2eee6 | #0f1416 | Page ground (shadcn --background). Light: warm poster paper; dark: bluestone at night. Every text token is checked on it. |
| --foreground | shadcn | #141c21 | #f2ede4 | Text, icons and the 2px poster rules (shadcn --foreground). On background, card, popover, secondary, muted and accent: 13:1 or more in both themes. |
| --card | shadcn | #fbf9f5 | #182025 | Panels: PitchCard, the plan list, sheets (shadcn --card). Always framed by a 2px rule. |
| --card-foreground | shadcn | #141c21 (foreground) | #f2ede4 (foreground) | Text on card. Alias of foreground. |
| --popover | shadcn | #ffffff | #1d262c | Tooltips' inverse, menus, dialogs, toasts (shadcn --popover). |
| --popover-foreground | shadcn | #141c21 (foreground) | #f2ede4 (foreground) | Text on popover. Alias of foreground. |
| --primary | shadcn | #ff5a1f | #ff6a2b | Signal orange (shadcn --primary): the one main action, rank tiles, the score block, the active nav item. A FILL, never text: 2.7:1 on paper, so by day every orange box also carries a 2px rule border. |
| --primary-foreground | shadcn | #141c21 | #0f1416 | Labels and icons on a primary fill (shadcn --primary-foreground): bluestone on orange, 5.5:1 by day and 6.5:1 at night. |
| --secondary | shadcn | #e6e0d4 | #232d33 | Quiet fills: secondary buttons at rest, the segmented track, chips' hover (shadcn --secondary). |
| --secondary-foreground | shadcn | #141c21 (foreground) | #f2ede4 (foreground) | Text on secondary. Alias of foreground. |
| --muted | shadcn | #e9e4da | #1f282d | Skeletons, bar tracks, the disabled field, table stripes (shadcn --muted). |
| --muted-foreground | shadcn | #56606a | #a7b0b5 | Mono uppercase metadata, captions, helper text, source lines. 4.5:1 or more on background, card, popover, secondary and muted in both themes. |
| --accent | shadcn | #ffe2d1 | #3a2519 | Selected and hover fills: the selected time slot, list-row hover, mark highlights (shadcn --accent). A pale signal tint by day, a burnt one at night. |
| --accent-foreground | shadcn | #141c21 | #ffc7a6 | Text on accent (shadcn --accent-foreground). |
| --destructive | shadcn | #b0152f | #ff8a8a | Delete actions, error text and icons (shadcn --destructive). Crimson, a step away from signal orange; always with a word or icon. |
| --destructive-foreground | shadcn | #ffffff | #0f1416 | Label on a destructive fill (shadcn --destructive-foreground). |
| --border | shadcn | #cfc7b8 | #2e3a41 | Hairlines inside panels: row dividers, table rules (shadcn --border). Decorative only. Panel frames use rule. |
| --input | shadcn | #7a7266 | #76828a | Borders of fields, selects, checkboxes and switches at rest (shadcn --input). 3:1 or more on background and card. |
| --ring | shadcn | #141c21 | #ff6a2b | Keyboard focus (shadcn --ring): one ring. Buttons get a 2px outline in ring with a 2px offset; fields turn their border to ring plus one ring. Never a second ring, and never a ground gap plus a ring. Bluestone by day, signal orange at night; 3:1 or more on every surface. |
| --chart-1 | shadcn | #dd6322 (taste-4) | #ff7a2e (taste-4) | Score factor 1, taste match (shadcn --chart-1). Alias of taste-4 so the chart and the hex map agree. |
| --chart-2 | shadcn | #7a4d00 | #f0b73d | Score factor 2, the activity estimate (shadcn --chart-2). Same hue as footfall. |
| --chart-3 | shadcn | #2f5fbf | #8fb0ff | Score factor 3, busy places open (shadcn --chart-3). |
| --chart-4 | shadcn | #a8164f | #ff7fb2 | Score factor 4, crowd leaving an event (shadcn --chart-4). |
| --chart-5 | shadcn | #4f6577 | #9db4c6 | Score factor 5, weather (shadcn --chart-5). Same hue as weather. |
| --bluestone | Honeycomb | #141c21 | #141c21 | Brand constant: the ink. Header bar, pin pucks, the app icon, the dialog scrim (at 60%). Same in both themes. |
| --honey | Honeycomb | #ffcf3a | #ffcf3a | Brand constant: hidden-gem diamonds and the gem badge fill (with bluestone text, 11.7:1). Never text on paper. |
| --honey-deep | Honeycomb | #d99a00 | #d99a00 | Brand constant: the honey dot of the mark wherever it sits on paper without its tile. |
| --slate | Honeycomb | #45596b | #a9bccb | Neutral ink for data from a named source: Qloo-sourced chips, tags and stats, the Brain page's calls and wires. Always beside the source's name in words, never a partner's colour or logo. Text-safe in both themes (6.3:1 on the day ground, 9.5:1 on the night ground). Never a Busk Map action colour. |
| --signal-text | Honeycomb | #b13a00 | #ff7f45 | Signal orange as text: the hero's last line, orange links, 'WHAT TO PLAY.'. 5.2:1 or more on background and card in both themes. |
| --zone-pink | Honeycomb | #e0337a | #ff5c9d | No-busking and unamplified zones: the map hatch and its outline, the restricted pin. A fill and hatch colour only. |
| --rule | Honeycomb | #141c21 (foreground) | #f2ede4 (foreground) | The 2px poster rule that frames cards, dialogs, rank tiles and the score block. Alias of foreground. |
| --taste-1 | Honeycomb | #fbe3d2 | #33221a | Taste affinity step 1 of 5 (weakest). Hex map cells and legend. Text on it: bluestone (light) or paper (dark). |
| --taste-2 | Honeycomb | #f9b98e | #6a3215 | Taste affinity step 2 of 5. Hex cells and legend. Text on it: bluestone (light) or paper (dark). |
| --taste-3 | Honeycomb | #f28644 | #db5e1e | Taste affinity step 3 of 5. Hex cells and legend. Text on it: bluestone (light) or paper (dark). |
| --taste-4 | Honeycomb | #dd6322 | #ff7a2e | Taste affinity step 4 of 5. Hex cells, the taste bar in ScoreBreakdown. Text on it: bluestone in both themes. |
| --taste-5 | Honeycomb | #7f2d0c | #ffc595 | Taste affinity step 5 of 5 (strongest). Affinity reads as contrast with the ground: darkest burnt orange by day, palest at night. Text on it: paper (light) or bluestone (dark). |
| --footfall | Honeycomb | #7a4d00 | #f0b73d | Activity-by-hour sparkline, the slot's activity word and its icon. As text, on background and card. |
| --pitch-legal | Honeycomb | #1f5fae | #86b4ff | Legal pitch: the 'Permit pitch' badge text and outline. Blue, never green against the pink zones. |
| --pitch-restricted | Honeycomb | #a8164f | #ff7fb2 | No-busking and unamplified as text: the 'Restricted' badge and cautions. Pairs with the zone-pink hatch and a slash icon. |
| --hidden-gem | Honeycomb | #7a5a00 | #ffcf3a | Hidden gem as text or outline on paper and card (a dark gold by day). The badge itself is a honey fill with bluestone text; the pin is a yellow diamond. |
| --usual-spot | Honeycomb | #56606a | #a7b0b5 | Usual spot: the well-known hotspot tag and small dot pins. Deliberately quiet. |
| --event | Honeycomb | #256489 | #7cc0e6 | A nearby event: the steel-blue diamond on the map, the ticket icon, badge text, the week-grid event flag. |
| --weather | Honeycomb | #4f6577 | #9db4c6 | Weather strip text and icons, the rain flag in the week grid. |
| --estimate | Honeycomb | #6d5a00 | #e6cf6b | The EstimateLabel and the dotted underline under estimated numbers. Pairs with the word 'est.'. |
05
Components
67 reusable components in the design system, grouped by where they live in the app.
Controls
Act name: use 80 characters or fewer.
Americana
Button · Input · Select · Switch · Checkbox · Tabs · Chip · DatePicker
Feedback and honesty
NeutralExample data
Qloo:LiveWeather:CachedActivity:EstimatedEvents:Unavailable· no answer
Ticketmaster didn't answer
Event crowds are left out of the scores.
Info
Planning again for The Larkspur Two.
Badge · Alert · Banner · Toast · Tooltip · Dialog · Sheet · DataStatusBadge · EstimateLabel · SourceAttribution · UnmatchedAlert
Plan your busk
Time (optional)
Busk Map finds the best hours that day: when your crowd is out, estimated activity peaks and events let out. Each pitch gets its own time.
Chips (toggles)
Plain chip
Your picks2 songs · 8:08
Fast Car
Tracy Chapman· Tracy Chapman4:56Laneway Light
The Larkspur Two3:12
CityPicker · TimeSlotPicker · PerformerPicker · PermitPicker · RepertoirePicker · ArtistPicker · SongSearch · PickedSongs · LearnItMenu
Map
Taste map
Top pitchOther pitch
TasteMap · TasteMapLegend · PitchPin · MapPlaceholder · PlanMap
The busk
- Southbank PromenadeHidden gem
- Degraves StreetUsual pitchBoth agree
Weather
Dry through your slot
°C · rain · wind km/hOpen-Meteo forecast (CC BY 4.0)
- Age 25–34+41
- Age 55+−30
PitchRow · PitchCard · DiscoveryBadge · BothAgreeBadge · ScoreBreakdown · WeightsPanel · CrowdPanel · MeterBar · LeanBar · SetlistPanel · WeatherStrip · FootfallSparkline · CopyLinkButton · SlotPassed
Research
- 412taste cells mapped
- 1crowd read
- 4busy places
- 1event
- 2activity estimates
- 37rules checks
- 36pitches scored
- 3songs ordered
- 496data points
- 3pitches
ResearchFunnel · AgentStepStream · AgentVsEngine · ComparePanel
States and app shell
Logo · Icon · HexCell · ScoreCell · ScoreRing · ScoreBlock · RankTile · Loader · Skeleton · Card · EmptyState · ErrorState · PlanNotFound · AppHeader · MobileNav · BrandHoneycomb
Plan states, research and the shell
PlanAlert · limit
Plan limit reached
You've started 30 plans this hour. Try again in about 20 minutes.
PlanAlert · Qloo unavailable
Qloo is unavailable
Busk Map needs Qloo's taste data to plan. Please try again in a few minutes.
PlanAlert · from the data alone
Planned from the data alone
The research ran out of time, so this is Busk Map's plan from the scores, without our notes.
PlanAlert · no legal pitch
No pitch to recommend
No legal pitch fits this slot and permit. Try another time or permit. Read the council's busking rules
AgentStatusLine ×3
The Hive is asking Qloo and the council's rules. Your busk replaces this in about half a minute.
Shown as the Hive researched it. Nothing new was asked.
No new plan was started.
FormMessage ×3
Loading your songs from Spotify…
Pick today or a later date.
Link copied: paste it anywhere.
StatStrip · Qloo
- 18kinds of Qloo call
- 28–37Qloo calls for a new busk
- 0on a rerun
ExampleActCard · NoteCard next
Folk duoFiddle and guitar, Sunday afternoonSounds like
Watch Busk Map plan this act- Gillian Welch
Loader · Numbers
BrainMap, StatusCard, PageHeader and SiteFooter render full size on their own pages. Every state of every component is in the design system: Busk Map · Honeycomb.
06
Screens
Every screen of the app, with the route it lives at.
The screens
| Screen | Route | 390 | 768 | 1440 | What it shows |
|---|---|---|---|---|---|
| Landing | / | Main explains the product: hero, try an act, guesswork, what you get back, beyond buskers, Thanks to (the Qloo taste data credit in plain text, then built with), the Brain and Honeycomb teasers, closing call. | |||
| Busks: plan your busk | /busks | The form for your own act | |||
| Repertoire | /repertoire | Your songs: search, pick and suggested fill | |||
| Busks: plan again | /busks?again=<id> | Pre-filled from an earlier busk, date and hours left | |||
| Busks: a form error | /busks | Each error names its field | |||
| Plan: researching | /plan | The research feed is the page | |||
| Plan: busk ready | /p/<id> | The busk first; on phones and tablets the research folds below it | |||
| Plan: replay | /p/<id> | A stored run reopened: "Replay of an earlier run (no new model call)" | |||
| Plan: from the data alone | /plan | The agent didn't finish: Busk Map's own plan | |||
| Plan: limit reached | /plan | "Plan limit reached": no new plan started | |||
| Plan: Qloo unavailable | /plan | "Qloo is unavailable" | |||
| Plan: a source down | /plan | A source didn't answer (Ticketmaster); the rest works | |||
| Plan: no artist matched | /plan | "Qloo couldn't match …" | |||
| Plan: no legal pitch | /plan | "No pitch to recommend" | |||
| Plan: slot passed | /p/<id> | "This slot has passed", above the stored busk or alone | |||
| Plan: link not found | /p/<id> | "Plan not found" | |||
| The brain of Busk Map | /brain | Every Qloo call and what it decides, with the trace | |||
| Terms | /terms | Not yet drawn at 390 | Not yet drawn at 768 | Not yet drawn at 1440 | A plain page: the legal line moved out of the footer. "Busk Map never confirms a pitch is legal: check your permit conditions." |
| Privacy | /privacy | Not yet drawn at 390 | Not yet drawn at 768 | Not yet drawn at 1440 | A plain page: what stays in this browser, what the server keeps, and for how long |
| Not found | any unknown URL | "No pitch here" | |||
| Route error | error.tsx | "Something went wrong", with its reference | |||
| Global error | global-error.tsx | No layout and no brand fonts | |||
| This deck | /brand | Honeycomb, the brand and design deck |
07
Assets
The logo is the hex mark beside the Busk Map wordmark, one file for light grounds and one for dark. The mark alone is only for icon sizes: the pitch ring around one paper-coloured cell, inside a signal-orange cell, with a quarter of the tile as clear space; the logo is never under 24 px high. Every file below is in public/brand.
Other brand files (not logos)
busk-map-mark-light.svgDownloadMark only: the icon files are cut from it. Not a logo.
busk-map-mark-dark.svgDownloadMark only: the icon files are cut from it. Not a logo.
busk-map-wordmark-light.svgDownloadThe lockup's lettering on its own. Not a logo.
busk-map-wordmark-dark.svgDownloadThe lockup's lettering on its own. Not a logo.
Favicon and app icons
Social and Devpost
Video kit
Submission and video kit
The pictures for the repository, the Devpost page and the video. Each uses the logo as drawn here and names Qloo in plain text only; the screenshots are real captures of the app at 1440 and 390.
| Asset | Size | File |
|---|---|---|
| GitHub social preview | 1280 × 640 | github-social-preview-1280x640.png |
| README hero | 1600 × 640 | readme-hero-1600x640.png |
| Screenshot, desktop (1440) | 1500 × 1000 | screenshot-desktop-1500x1000.png |
| Screenshot, phone (390) | 1500 × 1000 | screenshot-phone-1500x1000.png |
| Video title card | 1920 × 1080 | video-title-1920x1080.png |
| Video end card | 1920 × 1080 | video-end-1920x1080.png |
| Video lower third | 1920 × 1080 | video-lower-third-1920x1080.png |
| Devpost thumbnail | 512 × 512 | devpost-thumbnail-512.png |
Busk Map is open source (MIT). The brand files are in the repository under public/brand.
Handoff
Everything a team needs to apply Honeycomb to the app, in the design team's handoff folder (design-handoff/), which is not part of this repository. It contains:
globals.css: every token, day and night, mapped to shadcn.fonts.md: the three typefaces and how to load them.logos/ favicon/ social/ kit/: every file on this page.restyle-notes.md: the order of work, the rules, and the copy.