Treasury unified UI component library for Registry and Discovery projects
npm install @treasuryspatial/ui-nextThis repository contains comprehensive documentation and specifications for unifying the UI across all Treasury applications.
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.
```
/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
- ✅ 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
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
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
1. Review the UI_UNIFICATION_PLAN.md file to understand the overall approachdocumentation/
2. Explore the existing documentation in to see the current stateunified-system/` for implementation guidance
3. Check the unified system specifications in
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
- Aeonik Font
- Tailwind CSS Documentation
- Bootstrap Documentation
- CSS Variables Guide
- 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
For questions or suggestions regarding the UI unification project, please contact the project maintainers.