United Tattoo

Design Language Reference

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

01 • Immersion Gallery

Sunbleached walls & charcoal studies.

Color Language

Ratio — 60 / 25 / 15

Primary palette blends burnt oranges with sage concrete.

#E67E50
Burnt Orange
Hero Gradients
#D87850
Terracotta
Interaction
#7A8B8B
Sage Concrete
Backgrounds
#1C1915
Charcoal
Ink & Type

Typography

Display / Headlines
Playfair Display
Sculptural Statements
Body / Interface

Space Grotesk. Used for body copy and interface elements. Quiet, generous tracking, always legible on textured backgrounds.

03 • Interface Components

Micro-interactions that feel tactile.

Action Hierarchy

Toast States

✓
Deposit Received Confirmation sent to email.
!
Waitlist Update Feb 2026 books just opened.
Booking Request
Availability • Feb 2026
10
11
12
13
14
15
16
04 • Layout & Pacing

Structure mirrors gallery pacing: spacious, staggered, editorial.

Layout
Hero Canvas • Diptych Pacing
Layout
Artist Card • Chip Layout
Layout
Lookbook • Stagger Grid
05 • Motion Principles

Every movement should feel deliberate, like brush strokes.

0.8s Ease-Out

Used for reveals. Slow entrance, smooth settling.

50ms Stagger

Creates a "walking past paintings" effect.

Interaction Demo

Hover the elements below to see the "Shadow Bloom" and "Scale" effects.

Link Underline Draw Visit the Studio
Card Lift
Hover Me

Simulates lifting an object off the table.