Tableau

Best for

• US adult-use dispensaries (state-legal, 21+), with the compliance pieces built in: the age check, licence line, required warnings, lab results and no health claims (see "Cannabis retail in the US")
• Anything with a changing list people read from across a room: taphouses and breweries (Copperline), cinemas (Rialto), coffee bars, bakeries with a daily list, food halls, departure-board brands
• Audiences: adults choosing from a list, often on a phone in a car park, who want the price, the size and what's in it

Less suited to: quiet luxury (Atelier), clinical or medical services (Remedy, Vigil, Candour), anything without a list.

Personality and voice

Straight and warm, like a good budtender or barkeep: what's on, what it costs, what's in it. Never pushy, never clever about intoxication.

• Headlines: "Today's menu, on the board." · "Price tickets, lab results attached." · "New to edibles? Start low." · "Twelve taps. One board."
• Buttons: "See the menu" · "Order for pickup" · "Add" · "Lab results (COA)"
• Microcopy: "Prices before tax · while stocks last." · "Bring your ID: we check it at the door." · "Pay in store."
• Words to avoid on a cannabis site: health or effect claims ("relaxing", "sleep", "pain", "anxiety", "calming", "energising"), "medicine" or "medical" on an adult-use site, "organic" or "craft" unless certified and allowed, "free", "BOGO", "giveaway", "candy", cartoon or kid-friendly language, and anything that glamorises getting high.

Colour

Measured contrast (WCAG): ink on paper 15.2:1 · muted on paper 5.6:1 (on well 5.0:1) · brass on paper 5.4:1, on card 5.9:1 · white on brass 6.3:1 · alert 5.8:1. Night board: ink 16.3:1 · muted 6.8:1 (on card 6.3:1) · brass 9.3:1 · text on brass 8.7:1. On the board: letters 11.4:1, prices 7.2:1, small print 7.1:1.

No neon, no bright greens, no candy colours. Several states treat bright neon and cartoonish colour as appealing to minors; the board's cream and amber read as signage, not sweets.

Typography

• Display: Big Shoulders Display 700–800, uppercase: tall signage capitals built for boards and stations.
• Body: Manrope 400–700: clear and friendly at reading size.
• Board: Spline Sans Mono 500–600: every flap, price, potency and code.

The signature move: a tall capitals headline whose last phrase is lit in brass, beside a board that never sits still for long.

Layout

• 1220px wrap, gutter max(20px, 4vw). A black notice bar on top (21+, ID, pickup only), a sticky header with a heavy ink rule.
• Hero: copy left, the board right. Then tickets beside the tray, the potency guide, a four-cell facts strip, a heavy-ruled FAQ and a board-black closing card.
• Heavy 2px ink frames for tickets, facts, tables and forms; the board is the only dark object on a light page.

Shape

• Signage-square: --r-s 4px buttons and inputs, --r-m 8px tickets, --r-l 14px the board and closing card.
• Tickets have a dashed perforation under their top line; the board has an inset frame line, like a mounted sign.
• The brand mark is two flap tiles with the initials.

Motion language

• The clatter: on a tab change each flap cycles through two to six random characters (70ms each, a small rotateX) before landing; rows start 90ms apart. While nobody has touched it, the board steps to the next tab every 7 seconds.
• The clock on the board keeps the time.
• The tray updates on every Add; the reservation number clatters onto a flap row.
• Reveals: 16px rise and fade, 600ms. The phone menu drops down as a board of destinations.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm sets the board instantly and stops the cycling.
• Night board switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The board, tickets and drawn maps carry the page. Line icons at 1.8px stroke in brass. Photography of the store, the counter and staff (all adults, clearly over 21), in warm light. On cannabis sites never show people who could look under 21, consumption, smoke clouds, leaves as decoration, cartoons, or anything that imitates candy or snack packaging.

Signature components

• .board[data-board][data-cycle] › .board-head (.board-title, [data-clock]) › .board-tabs (button[data-tab]) › table > thead > tr > th[data-w](.r)(.opt) + empty tbody › script.board-data ({"Tab": [[cells], ...]}) › .board-foot. .opt columns hide on phones; the last column is lit.
• .ticket › .t-top, h3, .t-meta > span, .t-notes, .t-lab, .t-foot (.t-price, button.add[data-item][data-name][data-meta][data-price]).
• .tray[data-tray="key"] › .tray-head ([data-count]), .tray-list, .tray-empty, .tray-sum ([data-sub]), .tray-note.
• .gate[data-age-gate][data-no-text] › .gate-card ([data-age-yes], [data-age-no], [data-age-out]).
• .potency (.potency-bar with --start, .potency-marks), .warn, .facts[style="--n:4"], .notice-bar, .licence, .faq details, .close-card.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (a board of destinations); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (a brass underline).
• Inner pages: .page-head with .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template] shows "This is a template" on submit.
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg (button[aria-pressed] with data-filter/data-value, or label > input + text). Stepper: .stepper.
• Gate: [data-gate] with button[data-show="panel-id"] (the content kind; the age check is .gate[data-age-gate]).
• Slider, switch, tables, layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean / .lean-r.
• Helpers: Tableau.flip(el, text, width, rightAlign) clatters any text onto a flap row; Tableau.refresh(root).

Cannabis retail in the US

Rules are set state by state and change often. Tableau carries the strictest common set, so a site starts compliant almost anywhere adult-use is legal, then gets the state's own wording:

• 21+ age check on entry to the site, remembered in the browser, with the page behind it inert; "No" keeps the site closed.
• Licence number and regulator in every footer; the state's required warning text in a .warn box (the template's wording is a placeholder to replace).
• No health, therapeutic or effect claims: products are described by what's on the label (category, type, potency, size, price) and aroma only, with lab results (COA) for each.
• Nothing that appeals to people under 21: no cartoons, cartoon fonts, bright neon, candy words or imitations of snack brands, and no images of anyone who could look under 21 (California, 4 CCR § 15040; New York OCM guidance).
• No free cannabis, BOGO offers, contests or giveaways (California, 4 CCR § 15040), and no presenting an adult-use store as medical.
• Public-health facts are welcome and often required: start low with edibles, onset can take two hours, don't drive, store locked away from children and pets, Poison Control 1-800-222-1222.

Ad placement rules (for example California's 71.6% adult-audience test) apply to where you advertise, not just what the site says. These notes are design guidance, not legal advice; check every page against your state's current regulations before launch.

• Cal. Code Regs. tit. 4, § 15040, Advertising placement and prohibitions (Cornell LII)
• New York's cannabis retail dispensary regulations, advertising and branding (Harris Sliwoski)

Do and don't

• Do keep the board honest: real prices, real sizes, "sample" until it's live.
• Do put lab results one click from every product.
• Do keep the notice bar: 21+, ID, how ordering works.
• Don't describe what a product does to you, or show anyone using it.
• Don't use neon, candy colours, cartoon type or snack-brand parodies.
• Don't run promotions that give cannabis away.

Accessibility

AA contrast throughout (measured above). Skip link, 3px blue focus ring (amber on the board). The board is a real table; each cell's text is in the page for screen readers while the flaps are aria-hidden. The age check is a modal dialog with focus kept inside and the page behind inert. Tickets' Add buttons use aria-pressed; the tray's steppers are labelled per product. Tables stack on phones; the board drops its optional columns. Responsive to 360px; tested with motion on and off, in Day board and Night board.

How to make it yours