diff --git a/design-language/index.html b/design-language/index.html index bb421a8a9..6c0b7d8fa 100644 --- a/design-language/index.html +++ b/design-language/index.html @@ -4,225 +4,221 @@ - United Tattoo — Style Brief + United Tattoo — Design Language Reference + + + +
+
+
+ United Tattoo +

Design Language Reference

+

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

+
+
+
-
-
-

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.

-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ 01 • Immersion Gallery +

Sunbleached walls & charcoal studies.

-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
+
-
-

02 • Brand Identity

+
-
-
-

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

+ desaturated greens, and charcoal blacks. Typography feels like museum placards.

+ + +
+ +
+
+

Color Language

+ Ratio — 60 / 25 / 15 +
+

Primary palette blends burnt + oranges with sage concrete.

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

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. +
+
+ Display / Headlines +
+ Playfair Display
+ Sculptural Statements +
-
- 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. +
+ Body / Interface +

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

-
-

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.

-
-
-
-
+
+ +
+ +
+
+ 03 • Interface Components +

Micro-interactions that feel tactile.

+
+ +
+
+

Action Hierarchy

+
+ + +
-
-

Interface Treatments

-

Forms and calendars that echo studio serenity.

-
-
-

Request a consultation slot in - under a minute.

-
-
- - -
-
- - +

Toast States

+
+
+
+ ✓
+
+ Deposit Received + Confirmation sent to email.
-
- - +
+
+ !
+
+ Waitlist Update + Feb 2026 books just opened. +
-
We reply within 24 hours to confirm consultation dates and deposit - details.
-
- - +
+
+ +
+ + Booking Request + +
+ + +
+ +
+ + +
+ +
+ Availability • Feb 2026 +
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
-
-
-
-

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

+
+
+ 04 • Layout & Pacing

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.
-
-
+
+ +
+
+
+ Layout +
+
Hero Canvas • Diptych Pacing
+
+
+
+ Layout +
+
Artist Card • Chip Layout
+
+
+
+ Layout +
+
Lookbook • Stagger Grid
+
-
-
-

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.
    • -
-
+
+
+
+ 05 • Motion Principles +

Every movement should feel deliberate, like brush strokes.

+
+
+ 0.8s Ease-Out +

Used for reveals. Slow entrance, smooth + settling.

-
-
-
-
- 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

-
+
+ 50ms Stagger +

Creates a "walking past paintings" effect. +

-
-
-
-

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.

+
+
+

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.

+
+
+
-
-

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.
    • -
-
-
-
- -
- UNITED TATTOO • LIVING STYLE BRIEF • UPDATED QUARTERLY +
+ United Tattoo • Living Style Brief • Updated Quarterly
+
+ diff --git a/design-language/screenshots/screenshot_20251124_211124.png b/design-language/screenshots/screenshot_20251124_211124.png new file mode 100644 index 000000000..c82a97fd1 Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211124.png differ diff --git a/design-language/screenshots/screenshot_20251124_211133.png b/design-language/screenshots/screenshot_20251124_211133.png new file mode 100644 index 000000000..3e577161f Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211133.png differ diff --git a/design-language/screenshots/screenshot_20251124_211149.png b/design-language/screenshots/screenshot_20251124_211149.png new file mode 100644 index 000000000..e42f6134a Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211149.png differ diff --git a/design-language/screenshots/screenshot_20251124_211158.png b/design-language/screenshots/screenshot_20251124_211158.png new file mode 100644 index 000000000..ec9dd8de3 Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211158.png differ diff --git a/design-language/screenshots/screenshot_20251124_211209.png b/design-language/screenshots/screenshot_20251124_211209.png new file mode 100644 index 000000000..72809449a Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211209.png differ diff --git a/design-language/screenshots/screenshot_20251124_211218.png b/design-language/screenshots/screenshot_20251124_211218.png new file mode 100644 index 000000000..1b0bbd01f Binary files /dev/null and b/design-language/screenshots/screenshot_20251124_211218.png differ