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 d0579590bb feat(design): introduce comprehensive design overhaul documentation and guidelines 
- Added a new document outlining the tasks and resources for the website's design overhaul, including style modifications, component refactoring, and updated color palettes.
- Included detailed guidelines for the development workflow, emphasizing the use of tools and thorough code evaluation.
- Documented the technology stack and libraries to be utilized in the migration process, ensuring alignment with the new design system.
- Provided a phased migration strategy to facilitate a smooth transition to the new design language.

This commit establishes a clear framework for implementing the new design system, enhancing both developer experience and user interface consistency.
2025-11-24 22:39:33 -07:00

1.8 KiB
Raw Blame History

YOUR TASK

  • Restyle the website following the design.json
  • Preserve the existing layout and UI flow.
  • 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
  • Refactor current navigation and create something more minimal and beautiful.
  • Update the color palette and core components.

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