forked from cardosofelipe/fast-next-template
Remove outdated documentation files
- Deleted `I18N_IMPLEMENTATION_PLAN.md` and `PROJECT_PROGRESS.md` to declutter the repository. - These documents were finalized, no longer relevant, and superseded by implemented features and external references.
This commit is contained in:
Felipe Cardoso
@@ -20,7 +20,7 @@
|
||||
|
||||
### Core Technologies
|
||||
|
||||
- **Framework**: Next.js 15 + React 19
|
||||
- **Framework**: Next.js 16 + React 19
|
||||
- **Styling**: Tailwind CSS 4 (CSS-first configuration)
|
||||
- **Components**: shadcn/ui (New York style)
|
||||
- **Color Space**: OKLCH (perceptually uniform)
|
||||
|
||||
@@ -1,528 +0,0 @@
|
||||
# Design System Documentation - Project Progress
|
||||
|
||||
**Project Goal**: Create comprehensive, state-of-the-art design system documentation with interactive demos
|
||||
|
||||
**Start Date**: November 2, 2025
|
||||
**Status**: Phase 1 Complete ✅ | Phase 2 Pending
|
||||
|
||||
---
|
||||
|
||||
## Project Overview
|
||||
|
||||
### Vision
|
||||
|
||||
Create a world-class design system documentation that:
|
||||
|
||||
- Follows Pareto principle (80% coverage with 20% content)
|
||||
- Includes AI-specific code generation guidelines
|
||||
- Provides interactive, copy-paste examples
|
||||
- Has multiple learning paths (Speedrun → Comprehensive Mastery)
|
||||
- Maintains perfect internal coherence and link integrity
|
||||
|
||||
### Key Principles
|
||||
|
||||
1. **Pareto-Efficiency** - 80/20 rule applied throughout
|
||||
2. **AI-Optimized** - Dedicated guidelines for AI code generation
|
||||
3. **Interconnected** - All docs cross-reference each other
|
||||
4. **Comprehensive** - Every pattern has examples and anti-patterns
|
||||
5. **State-of-the-Art** - Top-notch content quality
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Documentation (COMPLETE ✅)
|
||||
|
||||
### Tasks Completed (14/14)
|
||||
|
||||
#### Documentation Files Created (12/12) ✅
|
||||
|
||||
1. **✅ README.md** (305 lines)
|
||||
- Hub document with 6 learning paths
|
||||
- Quick navigation table
|
||||
- Links to all other docs and interactive demos
|
||||
- Technology stack overview
|
||||
|
||||
2. **✅ 00-quick-start.md** (459 lines)
|
||||
- 5-minute crash course
|
||||
- Essential components (Button, Card, Form, Dialog, Alert)
|
||||
- Essential layouts (Page Container, Dashboard Grid, Form Layout)
|
||||
- Color system, spacing system, responsive design, accessibility
|
||||
- 8 golden rules
|
||||
- All time estimates removed per user request
|
||||
|
||||
3. **✅ 01-foundations.md** (587 lines)
|
||||
- OKLCH color system (why + all semantic tokens)
|
||||
- Typography scale (font sizes, weights, line heights)
|
||||
- Spacing scale (multiples of 4px)
|
||||
- Shadows system
|
||||
- Border radius scale
|
||||
- Complete usage examples for each token
|
||||
|
||||
4. **✅ 02-components.md** (1374 lines)
|
||||
- Complete shadcn/ui component library guide
|
||||
- All variants documented (Button, Badge, Avatar, Card, etc.)
|
||||
- Form components (Input, Textarea, Select, Checkbox, Label)
|
||||
- Feedback components (Alert, Toast, Skeleton)
|
||||
- Overlay components (Dialog, Dropdown, Popover, Sheet)
|
||||
- Data display (Table, Tabs)
|
||||
- Composition patterns (Card + Table, Dialog + Form, etc.)
|
||||
- Component decision tree
|
||||
- Quick reference for variants
|
||||
|
||||
5. **✅ 03-layouts.md** (587 lines)
|
||||
- Grid vs Flex decision tree (flowchart)
|
||||
- 5 essential layout patterns:
|
||||
1. Page Container
|
||||
2. Dashboard Grid
|
||||
3. Form Layout
|
||||
4. Sidebar Layout
|
||||
5. Centered Content
|
||||
- Responsive strategies (mobile-first)
|
||||
- Common mistakes with before/after examples
|
||||
- Advanced patterns (asymmetric grid, auto-fit, sticky sidebar)
|
||||
|
||||
6. **✅ 04-spacing-philosophy.md** (697 lines)
|
||||
- The Golden Rules (5 core rules)
|
||||
- Parent controls children strategy
|
||||
- Decision tree: Margin vs Padding vs Gap
|
||||
- Common patterns (form fields, button groups, card grids)
|
||||
- Before/after examples showing anti-patterns
|
||||
- Anti-patterns to avoid with explanations
|
||||
|
||||
7. **✅ 05-component-creation.md** (863 lines)
|
||||
- When to create vs compose (decision tree)
|
||||
- The "3+ uses rule" (extract after 3rd use)
|
||||
- Component templates:
|
||||
- Basic custom component
|
||||
- Component with variants (CVA)
|
||||
- Composition component
|
||||
- Controlled component
|
||||
- Variant patterns with CVA
|
||||
- Prop design best practices
|
||||
- Testing checklist
|
||||
- Real-world examples (StatCard, ConfirmDialog, PageHeader)
|
||||
|
||||
8. **✅ 06-forms.md** (824 lines)
|
||||
- Form architecture (react-hook-form + Zod)
|
||||
- Basic form pattern (minimal + complete)
|
||||
- Field patterns (Input, Textarea, Select, Checkbox, Radio)
|
||||
- Validation with Zod (common patterns, full schema example)
|
||||
- Error handling (field-level, form-level, server errors)
|
||||
- Loading & submit states
|
||||
- Form layouts (centered, two-column, with sections)
|
||||
- Advanced patterns (dynamic fields, conditional fields, file upload)
|
||||
- Form checklist
|
||||
|
||||
9. **✅ 07-accessibility.md** (824 lines)
|
||||
- WCAG 2.1 Level AA standards
|
||||
- Color contrast (ratios, testing tools, color blindness)
|
||||
- Keyboard navigation (requirements, tab order, shortcuts)
|
||||
- Screen reader support (semantic HTML, alt text, ARIA)
|
||||
- ARIA attributes (roles, states, properties)
|
||||
- Focus management (visible indicators, focus trapping)
|
||||
- Testing (automated tools, manual checklist, real users)
|
||||
- Accessibility checklist
|
||||
- Quick wins
|
||||
|
||||
10. **✅ 08-ai-guidelines.md** (575 lines)
|
||||
- Core rules (ALWAYS do / NEVER do)
|
||||
- Layout patterns for AI
|
||||
- Component templates for AI
|
||||
- Form pattern template
|
||||
- Color token reference
|
||||
- Spacing reference
|
||||
- Decision trees for AI
|
||||
- Common mistakes to avoid
|
||||
- Code generation checklist
|
||||
- AI assistant configuration (Claude Code, Cursor, Copilot)
|
||||
- Examples of good AI-generated code
|
||||
|
||||
11. **✅ 99-reference.md** (586 lines)
|
||||
- Quick reference cheat sheet
|
||||
- Color tokens table
|
||||
- Typography scale table
|
||||
- Spacing scale table
|
||||
- Component variants reference
|
||||
- Layout patterns (grid columns, container widths, flex patterns)
|
||||
- Common class combinations
|
||||
- Decision trees
|
||||
- Keyboard shortcuts
|
||||
- Accessibility quick checks
|
||||
- Import cheat sheet
|
||||
- Zod validation patterns
|
||||
- Responsive breakpoints
|
||||
- Shadows & radius
|
||||
|
||||
#### Cleanup & Integration (2/2) ✅
|
||||
|
||||
12. **✅ Deleted old documentation**
|
||||
- Removed `frontend/docs/DESIGN_SYSTEM.md`
|
||||
- Removed `frontend/docs/COMPONENT_GUIDE.md`
|
||||
|
||||
13. **✅ Updated CLAUDE.md**
|
||||
- Added design system documentation reference
|
||||
- Listed all 12 documentation files with descriptions
|
||||
- Highlighted `08-ai-guidelines.md` for AI assistants
|
||||
|
||||
### Documentation Review & Fixes ✅
|
||||
|
||||
#### Issues Found During Review:
|
||||
|
||||
1. **Time estimates in section headers** - Removed all (user request)
|
||||
- Removed "⏱️ Time to productive: 5 minutes" from header
|
||||
- Removed "(3 minutes)", "(30 seconds)" from all section headers
|
||||
|
||||
2. **Broken color system link** (user found)
|
||||
- Fixed: `./01-foundations.md#color-system` → `./01-foundations.md#color-system-oklch`
|
||||
|
||||
3. **Broken data-tables cross-reference** (agent found)
|
||||
- Fixed: Removed broken link to non-existent `./06-forms.md#data-tables`
|
||||
- Changed to: "use **TanStack Table** with react-hook-form"
|
||||
|
||||
4. **Incomplete SelectGroup import** (agent found)
|
||||
- Fixed: Added missing `SelectGroup` and `SelectLabel` to import statement in 02-components.md
|
||||
|
||||
#### Comprehensive Review Results:
|
||||
|
||||
- **✅ 100+ links checked**
|
||||
- **✅ 0 broken internal doc links**
|
||||
- **✅ 0 logic inconsistencies**
|
||||
- **✅ 0 ToC accuracy issues**
|
||||
- **✅ All 11 files reviewed**
|
||||
- **✅ All cross-references verified**
|
||||
- **✅ Section numbering consistent**
|
||||
|
||||
### Metrics: Phase 1
|
||||
|
||||
- **Total Files Created**: 12 documentation files
|
||||
- **Total Lines of Documentation**: ~7,600 lines
|
||||
- **Total Links**: 100+ (all verified)
|
||||
- **Learning Paths**: 6 different paths for different use cases
|
||||
- **Time to Complete Phase 1**: ~3 hours
|
||||
- **Code Quality**: Production-ready, all issues fixed
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Interactive Demos (PENDING)
|
||||
|
||||
### Objective
|
||||
|
||||
Create live, interactive demonstration pages at `/dev/*` routes with:
|
||||
|
||||
- Copy-paste ready code snippets
|
||||
- Before/after comparisons
|
||||
- Live component examples
|
||||
- Links back to documentation
|
||||
|
||||
### Tasks Remaining (6/6)
|
||||
|
||||
#### Utility Components (1 task)
|
||||
|
||||
1. **⏳ Create utility components** (`/src/components/dev/`)
|
||||
- `BeforeAfter.tsx` - Side-by-side before/after comparisons
|
||||
- `CodeSnippet.tsx` - Copy-paste code blocks with syntax highlighting
|
||||
- `Example.tsx` - Live component example container
|
||||
- **Purpose**: Reusable components for all demo pages
|
||||
- **Estimated Lines**: ~300 lines
|
||||
|
||||
#### Demo Pages (5 tasks)
|
||||
|
||||
2. **⏳ Enhance /dev/page.tsx** (hub)
|
||||
- Landing page for all interactive demos
|
||||
- Quick navigation to all demo sections
|
||||
- Overview of what's available
|
||||
- Links to documentation
|
||||
- **Estimated Lines**: ~150 lines
|
||||
|
||||
3. **⏳ Enhance /dev/components/page.tsx**
|
||||
- Live examples of all shadcn/ui components
|
||||
- All variants demonstrated (Button, Badge, Card, etc.)
|
||||
- Copy-paste code for each variant
|
||||
- Links to 02-components.md
|
||||
- **Estimated Lines**: ~800 lines
|
||||
|
||||
4. **⏳ Create /dev/layouts/page.tsx**
|
||||
- Live examples of 5 essential layout patterns
|
||||
- Before/after comparisons showing common mistakes
|
||||
- Responsive behavior demonstrations
|
||||
- Grid vs Flex examples
|
||||
- Links to 03-layouts.md
|
||||
- **Estimated Lines**: ~600 lines
|
||||
|
||||
5. **⏳ Create /dev/spacing/page.tsx**
|
||||
- Visual spacing demonstrations
|
||||
- Parent-controlled vs child-controlled examples
|
||||
- Before/after for anti-patterns
|
||||
- Gap vs Space-y vs Margin comparisons
|
||||
- Links to 04-spacing-philosophy.md
|
||||
- **Estimated Lines**: ~500 lines
|
||||
|
||||
6. **⏳ Create /dev/forms/page.tsx**
|
||||
- Complete form examples
|
||||
- Validation demonstrations
|
||||
- Error state examples
|
||||
- Loading state examples
|
||||
- Form layout patterns
|
||||
- Links to 06-forms.md
|
||||
- **Estimated Lines**: ~700 lines
|
||||
|
||||
### Estimated Phase 2 Metrics
|
||||
|
||||
- **Total Files to Create**: 6 files
|
||||
- **Total Estimated Lines**: ~3,050 lines
|
||||
- **Estimated Time**: 2-3 hours
|
||||
- **Dependencies**: All Phase 1 documentation complete
|
||||
|
||||
---
|
||||
|
||||
## Project Status Summary
|
||||
|
||||
### Overall Progress: 100% Complete ✅
|
||||
|
||||
**Phase 1: Documentation** ✅ 100% (14/14 tasks)
|
||||
|
||||
- All documentation files created (~7,600 lines)
|
||||
- All issues fixed (4 issues resolved)
|
||||
- Comprehensive review completed (100+ links verified)
|
||||
- CLAUDE.md updated
|
||||
|
||||
**Phase 2: Interactive Demos** ✅ 100% (6/6 tasks)
|
||||
|
||||
- Utility components created (~470 lines)
|
||||
- Hub page created (~220 lines)
|
||||
- All demo pages created and enhanced (~2,388 lines)
|
||||
- Full integration with documentation
|
||||
- 50+ live demonstrations
|
||||
- 40+ copy-paste code examples
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Interactive Demos (COMPLETE ✅)
|
||||
|
||||
### Tasks Completed (6/6)
|
||||
|
||||
#### Utility Components (3/3) ✅
|
||||
|
||||
1. **✅ BeforeAfter.tsx** (~130 lines)
|
||||
- Side-by-side comparison component
|
||||
- Red (anti-pattern) vs Green (best practice) highlighting
|
||||
- Visual badges (❌ Avoid / ✅ Correct)
|
||||
- Responsive layout (vertical/horizontal modes)
|
||||
- Captions for before/after explanations
|
||||
|
||||
2. **✅ CodeSnippet.tsx** (~170 lines)
|
||||
- Syntax-highlighted code blocks
|
||||
- Copy-to-clipboard button with feedback
|
||||
- Line numbers support
|
||||
- Highlight specific lines
|
||||
- Language badges (tsx, typescript, javascript, css, bash)
|
||||
- CodeGroup wrapper for multiple snippets
|
||||
|
||||
3. **✅ Example.tsx** (~170 lines)
|
||||
- Live component demonstration container
|
||||
- Preview/Code tabs with icons
|
||||
- Compact and default variants
|
||||
- ExampleGrid for responsive layouts (1/2/3 columns)
|
||||
- ExampleSection for organized page structure
|
||||
- Centered mode for isolated demos
|
||||
|
||||
#### Demo Pages (5/5) ✅
|
||||
|
||||
4. **✅ /dev/page.tsx** (~220 lines)
|
||||
- Beautiful landing page with card grid
|
||||
- Navigation to all 4 demo sections
|
||||
- Documentation links section
|
||||
- Key features showcase (6 cards)
|
||||
- Status badges (New/Enhanced)
|
||||
- Technology stack attribution (shadcn/ui + Tailwind CSS 4)
|
||||
|
||||
5. **✅ /dev/components/page.tsx** (Enhanced from 558 → 788 lines)
|
||||
- Refactored to use Example, ExampleSection, ExampleGrid
|
||||
- Added copy-paste code for ALL components (15+ sections)
|
||||
- Preview/Code tabs for each example
|
||||
- Sections: Colors, Buttons, Form Inputs, Cards, Badges, Avatars, Alerts, Dropdown, Dialog, Tabs, Table, Skeleton, Separator
|
||||
- Back button to hub
|
||||
- Theme toggle maintained
|
||||
- Organized with IDs for deep linking
|
||||
|
||||
6. **✅ /dev/layouts/page.tsx** (~500 lines)
|
||||
- All 5 essential layout patterns demonstrated:
|
||||
1. Page Container
|
||||
2. Dashboard Grid (1→2→3 progression)
|
||||
3. Form Layout (centered)
|
||||
4. Sidebar Layout (fixed 240px sidebar)
|
||||
5. Centered Content (flexbox)
|
||||
- BeforeAfter comparisons (no max-width vs constrained, flex vs grid)
|
||||
- Grid vs Flex decision tree
|
||||
- Responsive pattern examples (4 common patterns)
|
||||
- Live interactive demonstrations
|
||||
- Copy-paste code for each pattern
|
||||
|
||||
7. **✅ /dev/spacing/page.tsx** (~580 lines)
|
||||
- Visual spacing scale (2, 4, 6, 8, 12)
|
||||
- Gap pattern demonstrations (flex/grid)
|
||||
- Space-y pattern demonstrations (stacks)
|
||||
- BeforeAfter anti-patterns:
|
||||
- Child margins vs parent spacing
|
||||
- Margin on buttons vs gap on parent
|
||||
- Decision tree (Gap vs Space-y vs Margin vs Padding)
|
||||
- Common patterns library (4 examples)
|
||||
- Parent-controlled spacing philosophy explained
|
||||
|
||||
8. **✅ /dev/forms/page.tsx** (~700 lines)
|
||||
- Complete working forms with react-hook-form + Zod
|
||||
- Login form example (email + password)
|
||||
- Contact form example (name, email, category, message)
|
||||
- Real validation with error states
|
||||
- Loading state demonstrations
|
||||
- Success/failure feedback
|
||||
- ARIA accessibility attributes
|
||||
- BeforeAfter for error state handling
|
||||
- Zod validation pattern library
|
||||
- Error handling checklist
|
||||
- Loading states (button + fieldset disabled)
|
||||
|
||||
### Metrics: Phase 2
|
||||
|
||||
- **Total Files Created**: 8 new files
|
||||
- **Total Lines of Code**: ~2,858 lines
|
||||
- **Utility Components**: 3 reusable components (~470 lines)
|
||||
- **Demo Pages**: 5 pages (~2,388 lines)
|
||||
- **Interactive Examples**: 50+ live demonstrations
|
||||
- **Code Snippets**: 40+ copy-paste examples
|
||||
- **BeforeAfter Comparisons**: 6 anti-pattern demonstrations
|
||||
- **Time to Complete Phase 2**: ~2 hours
|
||||
|
||||
### Technical Implementation
|
||||
|
||||
**Technologies Used:**
|
||||
|
||||
- Next.js 15 App Router
|
||||
- React 19 + TypeScript
|
||||
- shadcn/ui components (all)
|
||||
- Tailwind CSS 4
|
||||
- react-hook-form + Zod (forms page)
|
||||
- lucide-react icons
|
||||
- Responsive design (mobile-first)
|
||||
|
||||
**Architecture:**
|
||||
|
||||
- Server components for static pages (hub, layouts, spacing)
|
||||
- Client components for interactive pages (components, forms)
|
||||
- Reusable utility components in `/src/components/dev/`
|
||||
- Consistent styling and navigation
|
||||
- Deep linking support with section IDs
|
||||
- Back navigation to hub from all pages
|
||||
|
||||
---
|
||||
|
||||
## Key Decisions Made
|
||||
|
||||
1. **Documentation Structure**
|
||||
- Decided to create subfolder `docs/design-system/` instead of root-level files
|
||||
- Numbered files for clear progression (00-99)
|
||||
- Separate AI guidelines document (08-ai-guidelines.md)
|
||||
- Quick reference as 99-reference.md (bookmark destination)
|
||||
|
||||
2. **Learning Paths**
|
||||
- Created 6 different learning paths for different user needs
|
||||
- Speedrun (5 min) → Comprehensive Mastery (1 hour)
|
||||
- Specialized paths for component development, layouts, forms, AI setup
|
||||
|
||||
3. **Content Philosophy**
|
||||
- Pareto principle: 80% coverage with 20% content
|
||||
- 5 essential layouts cover 80% of needs
|
||||
- Decision trees for common questions
|
||||
- Before/after examples showing anti-patterns
|
||||
|
||||
4. **AI Optimization**
|
||||
- Dedicated 08-ai-guidelines.md with strict rules
|
||||
- ALWAYS/NEVER sections for clarity
|
||||
- Component templates for AI code generation
|
||||
- Integration instructions for Claude Code, Cursor, GitHub Copilot
|
||||
|
||||
5. **Link Strategy**
|
||||
- Internal doc links: Relative paths (`./02-components.md`)
|
||||
- Demo page links: Absolute routes (`/dev/components`)
|
||||
- Anchor links for specific sections (`#color-system-oklch`)
|
||||
- All links verified during review
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Immediate: Begin Phase 2
|
||||
|
||||
1. **Create utility components** (`BeforeAfter.tsx`, `CodeSnippet.tsx`, `Example.tsx`)
|
||||
- Reusable across all demo pages
|
||||
- Consistent styling
|
||||
- Copy-paste functionality
|
||||
|
||||
2. **Enhance /dev/page.tsx** (hub)
|
||||
- Landing page for all demos
|
||||
- Quick navigation
|
||||
|
||||
3. **Create demo pages in order**
|
||||
- `/dev/components/page.tsx` (most referenced)
|
||||
- `/dev/layouts/page.tsx`
|
||||
- `/dev/spacing/page.tsx`
|
||||
- `/dev/forms/page.tsx`
|
||||
|
||||
### Future Enhancements (Post-Phase 2)
|
||||
|
||||
- Add search functionality to documentation
|
||||
- Create video tutorials referencing docs
|
||||
- Add print-friendly CSS for documentation
|
||||
- Create PDF versions of key guides
|
||||
- Add contribution guidelines for design system updates
|
||||
|
||||
---
|
||||
|
||||
## Lessons Learned
|
||||
|
||||
1. **Ultrathink Required**
|
||||
- Initial plan needed refinement after user feedback
|
||||
- Comprehensive review caught issues early
|
||||
|
||||
2. **Time Estimates Removed**
|
||||
- User preference: No time estimates in section headers
|
||||
- Focus on content quality over reading speed
|
||||
|
||||
3. **Link Verification Critical**
|
||||
- Agent review caught broken cross-references
|
||||
- Incomplete imports in examples
|
||||
- Fixed before Phase 2 begins
|
||||
|
||||
4. **Documentation Coherence**
|
||||
- Cross-referencing between docs creates cohesive system
|
||||
- Multiple entry points (learning paths) serve different needs
|
||||
- Quick reference (99-reference.md) serves as bookmark destination
|
||||
|
||||
---
|
||||
|
||||
## Sign-Off
|
||||
|
||||
**Phase 1 Status**: ✅ COMPLETE - Production Ready
|
||||
**Phase 2 Status**: ✅ COMPLETE - Production Ready
|
||||
|
||||
**Project Status**: 🎉 **100% COMPLETE** - Fully Production Ready
|
||||
|
||||
**Next Action**: None - Project complete! Optional enhancements listed in "Future Enhancements" section.
|
||||
|
||||
**Completion Date**: November 2, 2025
|
||||
**Total Time**: ~5 hours (Phase 1: ~3 hours, Phase 2: ~2 hours)
|
||||
**Updated By**: Claude Code (Sonnet 4.5)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Project Achievements
|
||||
|
||||
✅ **12 comprehensive documentation files** (~7,600 lines)
|
||||
✅ **8 interactive demo components/pages** (~2,858 lines)
|
||||
✅ **50+ live demonstrations** with copy-paste code
|
||||
✅ **6 learning paths** for different user needs
|
||||
✅ **100% link integrity** (all internal references verified)
|
||||
✅ **Full accessibility** (WCAG AA compliant examples)
|
||||
✅ **Mobile-first responsive** design throughout
|
||||
✅ **Production-ready** code quality
|
||||
|
||||
**Total Deliverable**: State-of-the-art design system with documentation and interactive demos
|
||||
@@ -219,7 +219,7 @@ Our design system is built on these core principles:
|
||||
|
||||
## 🏗️ Technology Stack
|
||||
|
||||
- **Framework**: Next.js 15 + React 19
|
||||
- **Framework**: Next.js 16 + React 19
|
||||
- **Styling**: Tailwind CSS 4 (CSS-first configuration)
|
||||
- **Components**: shadcn/ui (New York style)
|
||||
- **Color Space**: OKLCH (perceptually uniform)
|
||||
|
||||
Reference in New Issue
Block a user