Flash

Best for

• Tattoo studios: flash and custom work, artists with their own books, consults and deposits in plain words, 18+ with photo ID, aftercare, and in NSW the licence numbers the Tattoo Industry Act asks for (see "Tattoo studios: what we build in")
• Anyone who sells from a sheet of designs and quotes by size: custom patch makers (Loose Thread, a patch sheet and stitch time), signwriters (Gilt & Brush, lettering samples and days on site), piercing studios, engravers, sticker and pin makers, custom jewellers
• Audiences: people who want to see the work, know what it'll cost and how long, and find out who's free

Less suited to: clinical services (Lucent, Remedy); quiet professional firms (Strata, Charter); anything that should whisper (Blush).

Personality and voice

Bold and honest, like a good artist at the consult: here's what works, here's what it costs, here's what I won't do. Warm, never slick.

• Headlines: "Good ink, made to last." · "How big, how long." · "Consult, deposit, chair." · "Day by day, healed."
• Buttons: "Book a consult" · "Estimate" · "Book with Jade" · "Request a consult"
• Microcopy: "An estimate, not a quote: your artist confirms at the consult." · "Claimed is claimed." · "18 and over, with photo ID, every time."

Colour

Measured contrast (WCAG): ink on paper 14.8:1 · muted on paper 5.5:1 (on well 4.9:1) · flash on paper 6.0:1 (on well 5.3:1, on its soft fill 5.4:1) · white on flash 7.5:1 · green 5.8:1 · amber 5.4:1 · ink on the sheet 15.4:1. Back room: ink 15.8:1 · muted 7.0:1 (on card 6.6:1) · flash 7.5:1 · text on flash 7.1:1 · flash on its soft fill 6.1:1 · green 9.6:1 · amber 9.8:1. Example accents on paper: thread blue (Loose Thread) 6.6:1, bottle green (Gilt & Brush) 6.2:1, kingfisher teal (Kingfisher) 6.0:1.

Typography

• Display: Pirata One 400: a blackletter with a hand-lettered edge, for headlines, names and big numbers only.
• Body: Chivo 400–700: sturdy and plain; buttons in 700 caps.
• Labels, sizes and prices: Chivo Mono 400–500.

The signature move: the plain promise at the end of every headline is in flash red with a hard black drop, like a lettered banner. Blackletter is for headlines only; everything you read is Chivo.

Layout

• 1220px wrap, gutter max(20px, 4vw). A black top line for books and walk-ins; a sticky header ruled off in ink with a sweeping red underline.
• Hero: copy left, the flash sheet right, tilted and pinned. Then the estimator, the artists over the books, the consult-deposit-chair steps beside the deposit slip, the healing timeline, visit facts and FAQ, and a black closing card with a slow-turning star.

Shape

• Hard-edged: --r-s 4px, --r-m 10px, --r-l 16px. Buttons, cards and the estimator carry a 2px ink outline and a solid offset shadow (4px, 8px on the estimator); buttons press into it.
• The sheet is aged paper with stains, a red and a black pin, and a ruled heading. Designs are bold-outlined with flat traditional colour. Claimed one-offs get a red rubber stamp.
• The brand mark and the list marks are a five-point flash star.

Motion language

• Inking in: when the sheet comes into view each design's line draws (1.1s), then its colour packs in (0.5s), one design after another 140ms apart.
• The sheet wobbles a design on hover; the chosen one gets a red ring.
• The estimator: the design on the ruler grows to size with a little overshoot; numbers bump when they change.
• The closing card's star turns, very slowly. Buttons press into their shadow. Reveals: 16px rise and fade, 650ms. The phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm shows the sheet already inked and holds the star.
• Back room switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The flash is the picture: original designs, drawn to the style's rules (bold outline, flat colour, a little shading line). A studio swaps in its artists' own flash as SVG or scans. Healed-work photos are welcome; fresh, bloody or swollen ones aren't. Never use another artist's work without permission.

Signature components

• .flash[data-flash]#id › .sheet (.sheet-head › b + span) › .designs › button.design[data-name][data-note][data-size][data-price][data-hours][data-taken][aria-pressed] › svg (every shape with pathLength="1"; fills f-red, f-green, f-yellow, f-black, f-skin, f-steel, f-blue, f-paper, f-ink; .thin lines) + figcaption.flash-out ([data-flash-name], [data-flash-note], [data-flash-size], [data-flash-price], [data-flash-hours]).
• .sizer[data-sizer][data-rate][data-min][data-deposit][data-scale][data-flash="#id"] (--px) › input.range[data-cm], .seg[data-place] > button[data-x], .seg[data-colour] > button[data-x], [data-cm-out], .ruler > .art, [data-art-name], .est ([data-est-hours], [data-est-sessions], [data-est-price], [data-est-deposit]).
• .books[data-books] › .books-head + .book-row[data-months="o,w,c,…"] > div > b + small + .books-key.
• .heal[data-heal] › .heal-track, input.range[data-heal-day], .heal-days, .heal-panel[data-from][data-to] (.day > [data-heal-n], h3, p, ul > li / li.no).
• .artist (.mark with a design, .role, .books-state.open|wait|closed), .deposit (.deposit-main, .deposit-stub), .card, .facts (.stack), .notice, .topline, .faq, .licence, .close-card (--close-em), .grid-4.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (links with data-no); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (the red underline stays).
• Inner pages: .page-head, .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg (filters work on [data-tags], including designs on a sheet).
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables, layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean.
• Events and helpers: flash (detail.name, taken, svg), estimate (detail.hours, sessions, low, high, deposit); Flash.estimate(sizer), Flash.refresh(root).

Tattoo studios: what we build in

What we checked for New South Wales, October 2026:

• Licence numbers in every ad, website included. Under the Tattoo Industry Act 2012 (NSW) s 8A, an advertisement for a body art tattooing business must include the master licence number, and tattooists advertising their own work include their tattooist licence or permit number; social media posts that work as ads count. Kingfisher puts the master licence number in every page's footer and each artist's licence number on their card.
• The licence displayed at the premises (s 24 and the regulation): the website says where to find it, not a copy of it.
• 18 and over with photo ID, every time, no parental consent and no one who's been drinking. Check your own state's rules on minors before launch.
• Deposits in plain words: what it holds, that it comes off the price, how to move it, and when it's kept.
• Aftercare that knows its limits: what's normal day by day, and to see a doctor for signs of infection.

These notes are design guidance, not legal advice. Other states license and regulate tattooists differently; check yours.

• Tattoo Industry Act 2012 (NSW)
• Tattoo industry legislative amendments, fact sheet (NSW Police)

Do and don't

• Do show the size, the time and a price range on every design.
• Do keep claimed one-offs on the sheet, stamped: it shows the flash is real.
• Do say what the deposit is for and when it's kept.
• Don't set body copy, prices or form labels in blackletter.
• Don't use the fill colours for text.
• Don't show another artist's designs, or fresh tattoos that look sore.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. Each design is a real button with a name and aria-pressed, claimed ones say so in their label, and the caption is announced politely. The estimator uses a labelled slider and segmented buttons, its results are announced politely and each number carries its unit. The books say Open, Waitlist or Closed in words beside the dot, with the month for screen readers; on phones the month is printed above each cell. The healing slider names the day and shows one panel at a time. Forms label every field, mark errors with aria-invalid and say what's missing in an alert. Responsive to 360px; tested with motion on and off, in Parchment and Back room.

How to make it yours