Tattoo · Dark

Carnation

A studio under red light in near-black: on scroll, a fine line design is literally tattooed onto a photo of skin by an ink shader, while a giant timer counts the session.

Palette

--bg#0C0A0A
main background, warm black
--bg-2#151010
panels, artist cards, form
--red#E3140C
accent: ink stains, studio light, active labels, guide lines
--red-dim#5A0D0A
reddish shadows of the photos and fine lines
--text#ECE6DF
warm off-white of the wordmark and headlines
--text-2#8A827C
mono text and descriptions
--line#2A2322
dividers and pill borders
--skin#C9A08A
mid skin tone in the photos (reference for the ink)

Typography

Display: super-expanded grotesque, black weight, UPPERCASE for section titles and lowercase for the wordmark, tracking -0.01em, line-height 0.85; wordmark at ~19vw, titles at clamp(48px, 8vw, 128px) — suggestions: Archivo (wdth 125, 900) / Unbounded 900.
Body: mono 10–11px, uppercase for labels and normal case for short paragraphs, tracking 0.04em — suggestions: JetBrains Mono / Space Mono.
Support/labels: artist names in expanded grotesque 28–36px weight 800 in normal case; specialty in red mono beside it.
Treatments: mono text that "decodes" (random characters until it resolves into text); giant timer in tabular display; huge final word in textured metallic gray; vertical 01–04 numbering on the right edge.

Sections

Nav — tiny wordmark on the left; 4 mono links in a pill (active with a border); off-white "book" pill button on the right.
Hero — full-bleed, very dark photo of a tattoo artist working under red light; 4-line mono text at the top left and a list of styles at the top right; giant wordmark at the bottom bleeding off the edge; B&W video thumbnail beside it; address in mono at the bottom.
Session (pin) — expanded title at the top left and mono caption; full-bleed diagonal forearm photo; the design appears in stages (outline → linework → shading → healing); list of 4 stages with times on the left; giant timer at the bottom right.
Artists — two columns per "page", each artist with a vertical portrait + 2 thumbnails of work, big name, specialty in red, mono description and a "see work ↗" link; vertical numbering on the right.
Gallery — expanded title; face photo under red light with thin red lines in the corner; mosaic grid of work revealed by red ink stains; horizontal scroll gallery.
Booking — giant textured gray word; pill form (artist, body part, size), idea field, preview of the composed message, "send via messenger" button; info table on the right; floating/3D red ink stain.
Footer — 4 small mono columns.

Motion and interaction

Tattoo on scroll: scroll scrub with pin → WebGL shader blends the skin photo with the design texture using an advancing noise mask (threshold 0→1), with irregular ink edges; at different stages the line gets a reddish halo (inflamed skin) and then settles (healing).
Timer: scrub → giant number counts from 00:00 to a final time and then switches to "N DAYS" at the healing stage.
Stages: the active stage in the list turns red and expands its paragraph.
Decoding text: entrance → random characters (#&%*+=) swap over 400–700ms until the text resolves.
Ink mask in the gallery: entrance/hover → image revealed by growing red stains (shader or SVG feTurbulence + feDisplacementMap) that fade away leaving the photo.
Horizontal gallery: pin + translateX.
Lenis: lerp 0.09.

Components

Link pill: 1px --line border, 9px uppercase mono; active with a --text border.
Primary button: --text pill with black 9px mono text.
Stage row: number + mono name on the left, time on the right, divider; active in red with a paragraph.
Artist card: 3:4 portrait + 2 stacked thumbnails, 32px expanded name, red mono specialty, short divider.
Form chip: 1px pill; selected with a red dot and a light border.
Message preview: --bg-2 panel with a mono label and dynamically composed text.
Info table: mono label/value rows with dividers.