Tattoo · Dark

Fineline

High-contrast black and white with heavy uppercase grotesque: a fine drawing is tattooed line by line onto a forearm that passes in front of the giant name, and the rest of the page is a zine of lists, a loose gallery and a stark form.

Palette

--bg#050505
near-black main background
--paper#EFEFEC
light block of the form, white buttons
--text#F5F5F2
headlines and text on black
--text-2#8B8B88
paragraphs, mono metadata on black (6:1)
--text-paper-2#5E5E5B
mono labels on the light block (5.6:1)
--text-3#3A3A38
not-yet-revealed text in the headline paragraph
--ghost#A4A4A4
giant hero name behind the arm
--line#2A2A28
list dividers, timeline ruler
--accent#FFFFFF
drawing line, bullets, active state (the accent is white itself)

Typography

Display: extra-black neo grotesque (800–900) in uppercase, tracking -0.03em, line-height 0.92; hero name ~24vw; section titles clamp(36px, 5vw, 72px) with a period — suggestions: Archivo Black / Inter Tight 900
Body: same family at 500 uppercase for the headline paragraph (28–34px); running text at 400, 11–13px
Support/labels: lowercase mono 9–10px for metadata (place · size · duration), live clock in the nav, captions — suggestions: JetBrains Mono / IBM Plex Mono
Treatments: giant name behind a cut-out photo; headline paragraph that lights up word by word; final name in outline with the bottom half filled; mono "01–06" list numbers; countdown in large digits

Sections

Nav — heavy logo with an underlined mono subtitle, city + live clock, 3 uppercase links, white button + square with an arrow.
Hero — B&W photo of a forearm with the tattooist's hand; giant gray name behind the arm; a fine-line drawing being drawn on the skin with a guide label; short 2-line phrase in the bottom-left corner; mono status "drawing (nn%)" and a list of steps on the right.
Aftercare — the arm rises; 3-line title about the care period.
Manifesto — giant uppercase headline paragraph that lights up word by word; below, 3 mono columns with address, hours and schedule.
Work — loose gallery of B&W photos in different sizes and heights with captions (number, name, place, size, duration, healing time).
Team — 2-line title and a list of giant names, each with a specialty, weekday chips and availability.
Booking — title, countdown on the right, list of numbered rules (uppercase title + explanation).
Waitlist — light block with a title, line inputs, practitioner chips and a black button.
Care and FAQ — horizontal timeline with 4 milestones + numbered accordion with a short mono answer on the right.
CTA + footer — title with a day count, button; 4 mono columns; giant outlined name, bottom half filled.

Motion and interaction

Tattoo on scroll: scroll scrub with pin → SVG paths of the drawing with stroke-dashoffset 100%→0; the photo of the hand with the machine follows the tip of the line; GSAP ScrollTrigger + Lenis.
Arm in front of the name: layered composition (name in lower z, cut-out PNG photo above), arm with faster parallax.
Drawing status: scroll → "nn%" counter and step list lighting up the current step.
Lighting-up paragraph: scroll scrub → words go from --text-3 to --text in sequence.
Loose gallery: scroll → photos with different parallax speeds.
Live clock: load → local time updated every minute.
Countdown: continuous → days/hours/minutes until the next opening.
Accordion: click → opens with animated height and the "+" rotates 45°.

Components

White button: #EFEFEC rectangle, 9px black uppercase text, 24px height, + separate square with a ↗ arrow.
Guide label: 9px mono text + 1px line + 4px dot pointing at the drawing.
Work caption: mono number, 11px heavy uppercase name, mono metadata line.
Day chip: 18px square with a 1px border, active one filled.
Rule item: mono number, 18px uppercase title, 11px explanation in a right-hand column, 1px divider.
Line input: no border, just a 1px bottom stroke, 9px mono label above.
Timeline milestone: 6px dot on a 1px ruler + uppercase title + 2 lines.