Treasury UI Unification Project

This repository contains comprehensive documentation and specifications for unifying the UI across all Treasury applications.

Project Overview

Treasury currently has multiple applications with different UI implementations:

- Index-New: Next.js application with React and Tailwind CSS
- Index-Old-Frontend: Express/Pug application with Bootstrap
- Discovery: Next.js application with custom styling
- Registry: Rails application with its own styling

This project aims to analyze all UI elements across these applications and establish a unified design system that can be implemented consistently across the entire portfolio.

Repository Structure

``
/UI/
├── README.md # This file
├── UI_UNIFICATION_PLAN.md # Detailed project plan
│
├── documentation/ # Analysis documentation
│ ├── page-analysis/ # Page-by-page detailed analysis
│ │ ├── index-new/ # Index-New pages analysis
│ │ ├── index-old/ # Index-Old pages analysis
│ │ ├── discovery/ # Discovery pages analysis
│ │ └── registry/ # Registry pages analysis
│ │
│ └── summaries/ # Cross-application analysis
│ ├── index-comparison.md # Comparison of Index implementations
│ ├── type-system.md # Typography analysis
│ ├── color-system.md # Color usage analysis
│ ├── layout-system.md # Layout patterns analysis
│ └── component-inventory.md # Component comparison
│
├── unified-system/ # Unified design system specifications
│ ├── typography.md # Typography system
│ ├── colors.md # Color system
│ ├── spacing-layout.md # Spacing and layout system
│ └── components/ # Component specifications
│ ├── navbar.md # Navbar component
│ ├── button.md # Button component
│ ├── card.md # Card component
│ └── ... # Additional components
│
└── test-pages/ # Example implementations
├── index.html # HTML/CSS implementation
├── react/ # React implementation
├── bootstrap/ # Bootstrap implementation
└── ... # Additional framework implementations
`

Current Progress

- ✅ Initial plan created
- ✅ Index-New frontend analysis
- ✅ Index-Old frontend analysis
- ✅ Comparison of Index implementations
- ✅ Unified Typography System
- ✅ Unified Color System
- ✅ Unified Spacing & Layout System
- ✅ Navbar Component Specification
- ⬜ Discovery frontend analysis
- ⬜ Registry frontend analysis
- ⬜ Component Inventory
- ⬜ Additional Component Specifications
- ⬜ Test Page Implementations

Key Design Decisions

1. Typography: Standardizing on Aeonik as the primary font family
2. Colors: Using a consistent color palette with Treasury green as primary
3. Layout: Implementing a standard spacing scale and container system
4. Components: Creating reusable components with consistent styling across frameworks

Implementation Approach

1. CSS Variables: Core design tokens implemented as CSS variables
2. Framework-Specific: Component implementations for React, Bootstrap, and Rails
3. Progressive Enhancement: Gradually enhancing existing applications
4. Documentation-First: Thorough documentation of all design decisions

Getting Started

1. Review the UI_UNIFICATION_PLAN.md file to understand the overall approach
2. Explore the existing documentation in documentation/ to see the current state
3. Check the unified system specifications in unified-system/` for implementation guidance

Next Steps

1. Complete analysis of Discovery and Registry applications
2. Develop more component specifications
3. Create test page implementations
4. Document implementation guidelines for each framework
5. Establish a migration plan for each application

Resources

- Aeonik Font
- Tailwind CSS Documentation
- Bootstrap Documentation
- CSS Variables Guide

Contributing

- Follow the structure in existing documentation
- Update this README with any new components or sections
- Use consistent formatting in all markdown files
- Link related documents where appropriate

Contact

For questions or suggestions regarding the UI unification project, please contact the project maintainers.