+ {/* Hero Section */}
+
+
+
+ United Tattoo
+ Design Language Reference
+
+ A living style guide documenting color, typography, components, and interaction patterns.
+
+
+
+
+
+ {/* Filmstrip Gallery */}
+
+
+ {/* Brand Identity Section */}
+
+
+ Brand Identity
+ Color, typography, and materiality echo sun-washed plaster.
+
+ Think plaster walls catching a diagonal slice of afternoon light—burnt oranges, desaturated greens, and
+ charcoal blacks. Typography feels like museum placards.
+
+
+ }
+ >
+
+
+
+
+ Color Language
+ Ratio — 60 / 25 / 15
+
+
+
+ Primary palette blends burnt oranges with sage concrete.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+ {/* Interface Components Section */}
+
+
+ Interface Components
+ Micro-interactions that feel tactile.
+
+
+
+
+
+
+ Action Hierarchy
+
+
+
+
+
+
+
+
+ Toast States
+
+
+
+
+
+
+
+
+
+ Booking Request
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Layout & Pacing Section */}
+
+
+ Layout & Pacing
+ Structure mirrors gallery pacing: spacious, staggered, editorial.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Motion Principles Section */}
+
+
+ Motion Principles
+ Every movement should feel deliberate, like brush strokes.
+
+
+
+
+
+ }
+ >
+
+
+ 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.
+
+
+
+
+ {/* Footer */}
+
+