united-tattoo/design-language/DESIGN_SYSTEM_SUMMARY.md

United Tattoo Design System - Analysis Summary

Overview

I have created a comprehensive design.json file that serves as the single source of truth for the United Tattoo design system. This document is located at /home/nicholai/Documents/dev/united-tattoo-design-language/design.json and contains complete specifications for implementing the design language consistently across projects.

Key Findings

1. Visual Design Language

The United Tattoo design system is built on a sun-washed plaster aesthetic with gallery pacing principles. The core visual identity draws inspiration from:

• Warm, desaturated color palettes (burnt oranges, sage greens, charcoal blacks)
• Plaster wall textures catching diagonal afternoon light
• Museum-quality gallery pacing (spacious, staggered, editorial)
• Macro photography of artistic materials and architectural details

2. Color Palette

Primary Colors:

• Burnt Orange (#E67E50): Hero gradients, warm spotlight moments, CTA fills
• Terracotta (#D87850): Secondary buttons, form focus states, interactive elements
• Burnt Dark (#b0471e): Primary button backgrounds, link underlines, strong accents

Secondary Colors:

• Sage Concrete (#7A8B8B): Page background gradients, cards, subtle overlays
• Sage (#a28f79): Success states, calming accent moments
• Moss (#6f5c49): Section labels, metadata, card titles

Neutral Colors:

• Charcoal (#1c1915) & Ink (#241b16): Primary text and headings
• Cream (#fff7ec) & Sand (#f2e3d0): Light backgrounds, card fills
• White (#ffffff): Button text, form inputs

All colors have been mapped with hex values, RGB equivalents, CSS variable names, usage contexts, and accessibility considerations.

3. Typography System

Font Families:

• Playfair Display (serif): Headlines, display text, statements

  • Weights: 400 (regular), 600 (semibold)
  • Usage: "Museum placards feel" - sculptural, precise statements
  • Sizing: clamp(2.5rem, 5vw, 3.8rem) for main heading

• Space Grotesk (sans-serif): Body copy, interface text, metadata

  • Weights: 400, 500, 600
  • Usage: Quiet, generous tracking for readability
  • Minimum size: 16px to maintain legibility on textured backgrounds

Typography Rules:

• Eyebrow: 0.75rem, uppercase, 0.3em letter-spacing
• Section Labels: 0.85rem, uppercase, 0.3em tracking
• Display: clamp(2.5rem, 5vw, 3.8rem) with 1.1 line height
• Lead Text: clamp(0.95rem, 2vw, 1.3rem) with 54ch max-width
• Accent: 0.9rem, uppercase, 0.25em letter-spacing

4. Spacing & Layout Systems

Base Unit: 0.5rem Responsive Container Padding: clamp(1.5rem, 4vw, 5rem)

Grid Systems:

• grid-two: Auto-fit 2-column grid (320px minimum)
• sticky-split: Sticky sidebar (0.85fr) + flexible column (1fr)
• layout-examples: 3-column gallery layout (responsive to 1fr below 720px)
• interaction-split: Interaction principles (0.85fr) + examples (1fr)

Key Layout Patterns:

• Full-bleed sections extend edge-to-edge (100vw with negative margins)
• Sticky positioning with dynamic offsets (top: 2rem to 5rem)
• Mobile-first responsive approach with breakpoint at 720px
• Generous whitespace emphasizing gallery pacing

5. Design Style Elements

Border Radius Scale:

• Buttons & Form inputs: 12px
• Cards: 18-24px (depending on card type)
• Large cards: 22-28px
• Filmstrip items: 32px
• Chips: 999px (full pill shape)

Shadow System:

• Subtle (4px, 0.08 opacity): Small card interactions
• Medium (12-14px, 0.1-0.18 opacity): Standard cards, forms
• Large (20-25px, 0.2 opacity): Hero sections, elevated content
• Filmic (40px, 0.25 opacity): Filmstrip items, largest elements

Border Treatment:

• Primary: 1px solid with rgba(122, 139, 139, 0.2) for subtle definition
• Form focused: 1px terracotta with 3px rgba(210, 106, 50, 0.2) glow
• Dashed: 1px dashed rgba(122, 139, 139, 0.3) for sample containers

Backdrop Effects:

• Hero overlay uses: blur(12px) saturate(110%)
• Creates frosted glass effect on sand/cream background

6. Component Library

Buttons:

• Primary (.demo-btn.primary): Burnt background, white text, 0.25 shadow
  • Hover: Scale 1.05, translateY(-1px), enhanced shadow
• Secondary (.demo-btn.secondary): Terracotta, white text
• Ghost (.demo-btn.ghost): Sand background, ink text, bordered

Cards:

• Data Card: Gradient background (rgba 0.95-0.9), 22px radius, 1.8rem padding
• Component Card: White background (0.88 opacity), 18px radius
• Motion Example Card: Gradient, 20px radius, 2rem padding
• Scroll Step: White (0.92 opacity), 20px radius

Form Elements:

• Container: Gradient background, 22px radius, 2.2rem padding
• Input: 12px radius, terracotta focus state, 3px glow on focus
• Label: 0.75rem, 600 weight, 0.25em tracking, uppercase

Calendar:

• Grid: 7 columns with 0.4rem gap
• Day: Square (aspect-ratio 1/1), 8px radius
• Booked State: Terracotta background, white text, shadow

Filmstrip:

• Horizontal scroll with scroll-driven animation
• Items: 32px radius, clamp(420px, 55vw, 820px) width
• Progress bar: 2px height, burnt-to-rose gradient

7. Animation & Motion Principles

Timing Standards:

• Fast: 0.2s (button hover, scale effects)
• Normal: 0.3s (card interactions, link effects)
• Slow: 0.6s (stagger sequences, section transitions)
• Slower: 0.8s (main scroll reveals, entrance animations)

Easing Functions:

• Primary: ease-out (for reveal animations, appearing elements)
• Secondary: ease-in (for exit animations)
• Linear: only for progress bars and filmstrip

Key Animation Patterns:

1. Reveal Animations (0.8s ease-out):

   • Initial: opacity 0, translateY(60px)
   • Active: opacity 1, translateY(0)
   • Trigger: Intersection Observer (threshold: 0.18)

2. 3D Type Cards (0.8s ease):

   • Initial: perspective(900px) rotateX(10deg) translateY(60px)
   • Active: perspective(900px) rotateX(0deg) translateY(0)

3. Button Hover (0.2s ease):

   • Standard: translateY(-1px)
   • Enhanced: scale(1.05) translateY(-1px)
   • Shadow bloom from 0.25 to 0.3

4. Link Underline Draw (0.3s ease-out):

   • Initial: width 0, position absolute, bottom -2px
   • Hover: width 100%
   • Creates painted stroke effect

5. Stagger Animations:

   • Cards: 50ms stagger (0s, 0.05s, 0.1s)
   • Layout cards: 150ms stagger (0s, 0.15s, 0.3s)
   • Creates gallery walk-through effect

6. Filmstrip Scroll (scroll-driven):

   • TranslateX animation follows vertical scroll
   • Distance = (filmstrip width - viewport width)
   • Progress bar scaleX matches scroll percentage

7. Parallax (subtle, 0.12 factor):

   • Hero image: window.scrollY * 0.12
   • Kept to 5% maximum for subtlety

8. Interaction Principles

Baseline Interactions:

• Fade/slide reveals on scroll (200-300ms, ease-out)
• Buttons scale to 105% with shadow bloom
• Link underlines draw left-to-right like painted strokes
• All interactions feel deliberate and brush-stroke-like

Accent Moments:

• Parallax effects on hero imagery (limited to 5% movement)
• Staggered card entrances (50ms delays) for walk-through feel
• Interactive swatches with background tinting on hover
• Color swatches that scale 1.1 on hover

User Feedback:

• Focus states: 2px rose outline with 3px offset
• Form input focus: Terracotta border, 3px rgba glow
• Hover states: Smooth elevation with shadow bloom
• No aggressive animations - subtlety maintains sophistication

9. Responsive Design Implementation

Mobile Breakpoint: 720px

Mobile Changes:

• Single-column layouts (grid-template-columns: 1fr)
• Sticky positioning becomes static (position: static)
• Reduced padding: 1.5rem instead of clamp values
• Hero height: 50vh instead of 65vh
• Container padding: 1.5rem fixed

Responsive Techniques:

• clamp() for fluid typography and spacing
• auto-fit/auto-fill grid layouts
• minmax() for flexible column sizing
• Viewport width (vw) units for responsive scaling

10. Design Tokens Extracted

CSS Variables Defined:

• Color variables: 10 primary + semantic colors
• Spacing variable: --sticky-offset
• All colors have fallback hex values
• Dynamic offset: clamp(3.5rem, 8vw, 6rem)

Opacity Scale: 23 values from 0.03 to 0.98

Gradient Definitions: 4 primary gradients documented with usage

Z-index Values:

• Background overlay: -2
• Background texture: -1
• Content: 0, 1 (relative positioning)
• Hero overlay content: 1 (positioned relative)

11. Design Principles & Voice

Visual Principles:

1. Sensory-driven design inspired by plaster walls catching afternoon light
2. Gallery pacing - spacious, staggered, editorial rhythm
3. Typography as carved etchings - precise, deliberate, never shouting
4. Micro-interactions that feel tactile and intentional
5. Fade/slide reveals with 200-300ms ease-out timing
6. Authentic, transparent process-focused messaging

Tone & Voice:

• ARTISTIC: Creative, gallery-influenced language
• BOLD: Confident statements about craft and process
• SOPHISTICATED: Elevated tone for luxury positioning
• ENERGETIC: Dynamic language paired with motion
• AUTHENTIC: Transparent about process and collaboration
• PROFESSIONAL: Polished, gallery-quality standards

Sensory Language:

• Use analogies like "sun-baked walls," "charcoal whisper"
• Keep CTAs confident but calm ("Begin Commission," "Visit the Studio")
• Highlight collaboration and process transparency
• Speak to seasoned collectors, not trend chasers
• Balance poetic descriptions with precise process language

12. Accessibility Considerations

Color Contrast:

• Burnt orange on white/cream meets WCAG AA standards
• Charcoal ink (#241b16) on sand/cream backgrounds provides full contrast
• Rose outline (#e59863) has sufficient contrast for focus indicators

Focus States:

• All interactive elements have visible focus states
• Button focus: 2px rose outline with 3px offset
• Form inputs: Terracotta border with rgba glow

Touch Targets:

• Button minimum height: 44px recommended
• Form inputs: Adequate padding for touch interaction
• Calendar day cells: ~40px minimum

Typography:

• Minimum font size: 16px for body copy on textured backgrounds
• Generous line height (1.6) for readability
• Adequate letter-spacing for metadata (0.25em minimum)
• Proper heading hierarchy (h1 to h4)

Mobile Accessibility:

• Touch-friendly spacing maintained
• Readable font sizes scale responsibly
• Stacked vertical layouts below 720px
• Sticky elements become static on mobile

File Structure

The design.json file is organized into these main sections:

1. Version & Metadata: 1.0.0, lastUpdated timestamp
2. designLanguage: Name, description, philosophy, core principles
3. colors: Complete palette with primary, secondary, neutral, semantic, opacity, gradients
4. typography: Font families, sizes, weights, line heights, letter-spacing, text transforms
5. spacing: Base unit, scale, padding, margin, gap values
6. layout: Max-width, breakpoints, responsive patterns, grid systems
7. designStyle: Border radius, shadows, borders, backdrop filters, blend modes
8. animations: Timing, easing, scroll animations, component animations, stagger effects
9. components: Complete documentation for button, card, form, toast, calendar, swatch, filmstrip
10. patterns: Interaction principles, scroll-driven animation, sticky layouts, responsive gallery
11. tonAndMessaging: Voice characteristics, messaging principles, CTAs
12. designPrinciples: Visual language, typography philosophy, spacing rhythm, motion principles
13. accessibility: Color contrast, focus states, touch targets, semantic HTML
14. implementation: CSS variables, font imports, responsive approach, animation triggers

How to Use This Design System

1. For Developers: Reference the design.json file when building UI components

   • Extract exact color values from the colors section
   • Use defined typography styles and font sizes
   • Apply spacing scales consistently
   • Implement animations using specified timing and easing values
   • Follow responsive breakpoints and grid systems

2. For Designers: Use this as a specification guide

   • Ensure new designs use the defined color palette
   • Maintain typography hierarchy as specified
   • Apply consistent spacing and grid alignment
   • Design animations with the specified timing principles
   • Consider mobile layouts at the 720px breakpoint

3. For Documentation: Share this with team members

   • Onboarding new designers/developers to the system
   • Reference for consistency checks
   • Source of truth for design decisions
   • Guidelines for extending the system

Recommendations for Consistency & Scalability

Immediate Actions

1. Add this design.json to your project documentation
2. Create a living component library (Storybook, Zeroheight, or similar) that references this system
3. Establish code standards for CSS variable usage across projects

For System Extension

1. New Colors: Add to the appropriate palette section with hex, RGB, CSS variable, and usage
2. New Components: Follow the existing documentation pattern with variations, states, and accessibility notes
3. New Animations: Document timing, easing, triggers, and use cases consistently
4. New Breakpoints: Add to the breakpoints section and update responsive patterns

For Consistency

1. Always use the defined color palette - no arbitrary hex values
2. Apply spacing from the scale (xs, sm, md, lg, xl, 2xl, etc.)
3. Use typography sizes from the defined scale with proper families
4. Implement animations with specified timing (0.2s, 0.3s, 0.6s, 0.8s)
5. Test focus states and keyboard navigation for accessibility
6. Validate color contrast ratios for any new color combinations

For Scalability

1. Keep CSS variables synchronized with design.json definitions
2. Consider a CSS preprocessor (SCSS) for variable composition
3. Implement design tokens generation from JSON for multiple platforms
4. Create component props that map to defined design tokens
5. Document any deviations from the system with justification

Notable Design Decisions

1. Color Opacity Strategy: Uses explicit opacity values in rgba() rather than color alpha channel, allowing flexible background layering

2. Responsive Typography: All text sizes use clamp() for fluid scaling between mobile and desktop without breakpoints

3. Filmstrip Animation: Scroll-driven using requestAnimationFrame for 60fps smooth horizontal scrolling triggered by vertical scroll

4. Intersection Observer Threshold: Set to 0.18 (18% visible) for reveal animations - higher than typical 0.1 to ensure animations feel intentional

5. Parallax Constraint: Limited to 0.12 factor (12% movement) for subtlety - prevents motion sickness on mobile

6. Stagger Timing Difference: Uses two stagger rates (50ms for components, 150ms for layout cards) to create different visual rhythms

7. Mobile Sticky Disengagement: Sticky positioning automatically becomes static below 720px to improve mobile scroll performance

8. Grid Full-Bleed: Uses negative margin math (calc(50% - 50vw)) instead of viewport-relative positioning for more reliable rendering

File Locations

• Design System JSON: /home/nicholai/Documents/dev/united-tattoo-design-language/design.json
• Index HTML: /home/nicholai/Documents/dev/united-tattoo-design-language/index.html
• This Summary: /home/nicholai/Documents/dev/united-tattoo-design-language/DESIGN_SYSTEM_SUMMARY.md

---

Generated: 2025-11-18 System Version: 1.0.0 Analyzed From: index.html style guide and component library