Nicholai/united-tattoo
1
1
Fork 0
Code Issues 24 Pull Requests Actions 2 Packages Projects Releases Wiki Activity
united-tattoo/design-language/overhaul.md
Nicholai 74fc5891a4 Enhance design overhaul documentation with additional UI polish and animation details 
- Updated the design overhaul document to include preservation of existing animations, parallax effects, and smooth scrolling.
- Emphasized the need for UI polishing in accordance with the design.json specifications.
- Refined navigation design to focus on minimalism and aesthetics.

This commit further clarifies the objectives for the design overhaul, ensuring a cohesive and visually appealing user experience.
2025-11-24 23:18:51 -07:00

1.9 KiB
Raw Permalink Blame History

YOUR TASK

  • Restyle the website following the design.json
  • Preserve the existing layout and UI flow.
  • Keep existing animations, parallax effects and smooth scrolling effects.
  • Elevate the existing site by modifying the styles and components according to the design system and design.json
  • Remove current Hero image and replace with @UP1_00011_.png
  • Update the color palette and core components.
  • Polish the UI following the design.json

Resources

Provided and ready for implementation on the live site are a variety of new images in design-language/

There are also three comprehensive design guides that embody the ideals of the new United Tattoo branding for 2026: @design.json @DESIGN_SYSTEM_SUMMARY.md

@index.html contains an example page (not to be copied) that embodies the style we're going for.

  • design.json, which outlines our design guidelines in a technical, structured format.
  • There is also a design system summary document, which outlines our tone and reinforces the overall design language.
  • @CLAUDE.md contains useful development information which will be useful to you as you work.

Guidelines and Workflow

  • You must thoroughly lint and evaluate the code you write as you write it.
  • Use the tools at your disposal: Search the web, utilize context7, and use shadcn for components where applicable.
  • USE THE BROWSER, you have access to a web browser where you can thoroughly examine the site and test user flows. ALWAYS REFERENCE THE BROWSER VISUALLY TO EVALUATE YOUR PROGRESS.

Framework and Libraries

Libraries to be applied where applicable

  • Shadcn
  • Framer-Motion
  • Lenis (smooth scrolling)

Stack:

  • Next.js 14 (App Router) with TypeScript
  • Cloudflare D1 (SQLite) for database
  • Cloudflare R2 for file storage
  • NextAuth.js for authentication
  • Deployed via OpenNext on Cloudflare Workers
  • ShadCN UI components + Tailwind CSS
  • Vitest for testing