United Tattoo

Design Language Reference

A living style guide documenting color, typography, components, and interaction patterns.

Immersion gallery

Sunbleached walls, charcoal studies, and avian sketches.

Use this scrollable filmstrip to source tonal references. Each frame ties to a studio story — from Liberty-inspired murals to macro plaster textures.

02 • Brand Identity

Color, typography, and materiality echo sun-washed plaster.

Think plaster walls catching a diagonal slice of afternoon light—burnt oranges, desaturated greens, charcoal blacks, and off-whites that feel powdery and matte. Typography should feel like museum placards: serif statements, grotesk body copy, and micro-type metadata whispering along the edges.

Color Language

Primary palette blends burnt oranges with sage concrete. Use gradients and overlays to mimic painted walls catching slant light.

Ratio — 60 / 25 / 15

#E67E50 Burnt Orange
Hero gradients, CTA fills, warm spotlight moments.
#D87850 Terracotta
Buttons, form focus states, micro interactions.
#7A8B8B Sage Concrete
Page background, cards, filmstrip fades.
#2D2D2D Charcoal Ink
Typography, photographic overlays, line work.

Typography

Pair sculptural serif headlines with quiet grotesk paragraphs and whisper-thin uppercase metadata. Treat type like carved etchings on plaster—precise, deliberate, never shouting.

Display / Headlines Playfair Display — Use for statements, paired with tight leading.
Body / Interface Space Grotesk — Sentence case, generous tracking. Minimum size 16px to keep copy airy against textured grounds.
Accent Use uppercase micro-type for metadata, nav, and chips.

Reference imagery pairs plaster gradients with charcoal studies. Use this macro crop treatment for hero backups or transitions.

03 • Interface Components

Micro-interactions that feel tactile.

Buttons & Toasts

Primary actions carry burnt-orange fills while secondary options lean on terracotta and sand. Toasts inherit the same hues for instant recognition.

Buttons

Toasts

✓
Deposit received

We'll confirm your consultation slot within 24 hours.

!
Waitlist update

Masato's calendar just opened for February.

Interface Treatments

Forms and calendars that echo studio serenity.

Request a consultation slot in under a minute.

We reply within 24 hours to confirm consultation dates and deposit details.

Studio Calendar

February 2026

28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
booked open past

04 • Layout & Components

Structure mirrors gallery pacing: spacious, staggered, editorial.

Think in horizontal galleries: alternate full-width manifesto blocks with modular cards so the page rhythm breathes like walking past framed works.

Hero layout mock showing manifesto block beside art
Hero Canvas • Manifesto copy sits in a plaster card while artwork bleeds edge-to-edge, mimicking a gallery wall diptych.
Artist card layout reference
Artist Card • Portraits rest on color blocks with caption chips, offering the same pacing as framed studies.
Lookbook grid with staggered imagery
Lookbook Grid • Stagger rows so imagery steps across the viewport the way canvases do in a salon hang.

05 • Interaction & Motion

Every movement should feel deliberate, like brush strokes.

Baseline

  • Fade/slide reveals on scroll, 200–300ms, ease-out.
  • Buttons scale to 105% with shadow bloom; no bounce easing.
  • Link underlines draw from left to right like a painted stroke.

Accent Moments

  • Parallax on hero imagery (≤5% translateY).
  • Staggered card entrances of 50ms to mimic gallery walk-through.
  • Interactive swatches that tint background panels subtly on hover.
Example: Button Scale
Example: Link Underline Hover to see underline draw from left
Example: Staggered Cards
Card 1 (0ms)
Card 2 (50ms)
Card 3 (100ms)
Example: Interactive Swatch

Hover swatches to tint background

06 • Sticky Storytelling Example

Anchor manifesto copy while narrating evolving work.

Use sticky paired columns for case studies or process pages: the left rail sets expectations, the right column scrolls through vivid chapters.

Phase 01 — Brief Capture

Client brings mural references, sculptures, and light studies. Capture quotes and palette swatches directly in the viewport.

Phase 02 — Material Study

Use macro photography of charcoal lines and plaster chips. Pair with captions outlining needle groupings and pigment blends.

Phase 03 — Session Rhythm

Document progression with warm gradients + timestamps to show layering, wiping, and varnish moments.

Phase 04 — Aftercare

Close with archival photography and care steps so the story resolves with confidence.

07 • Tone & Messaging

Words should feel archival yet alive.

Balance poetic descriptions with precise process language. Speak to seasoned collectors, not trend chasers.

ARTISTIC BOLD SOPHISTICATED ENERGETIC AUTHENTIC PROFESSIONAL

Voice Notes

  • Use sensory analogies (“sun-baked walls”, “charcoal whisper”) to anchor visuals.
  • Keep call-to-actions confident but calm (“Begin Commission”, “Visit the Studio”).
  • Highlight collaboration and process transparency in every section.

08 • Reference + Guardrails

Borrow selectively; keep the voice distinctly United.

Sites We Admire

  • Studio Nari — Editorial typography pacing, soft gradients.
  • Acne Studios — Confident whitespace + effortless photography pairing.
  • Slowdown Studio — Product storytelling with tactile textures.

Avoid

  • Aggressive gothic motifs that feel intimidating.
  • Overly dark backgrounds that hide brush detail.
  • Cluttered galleries or confusing booking funnels.