🎨 Frontend & Design Playbook Alignment¶
This document ensures that frontend development faithfully implements the guidelines defined in the LOGYCA Design Playbook.
Design and development are not separate disciplines. They are parts of the same system.
🔑 Key Principle¶
Everything that is designed must be implementable
Everything that is implemented must be designed
🔗 Design → Code Mapping¶
| Design Playbook | Frontend Implementation |
|---|---|
| Color system | Global SCSS variables |
| Typography | Globally loaded fonts |
| UI components | Reusable components |
| States | Controlled logic and classes |
| Grid system | Consistent layouts |
🎨 Colors¶
- Playbook-defined colors are the single source of truth
- No new colors are created in code
- No manual color adjustments
📌 All colors must come from SCSS variables.
🔤 Typography¶
- Official fonts must be loaded globally
font-familymust not be defined per component- Font weights and hierarchy must follow the Playbook
🧩 UI Components¶
Every designed component must: - Have a clear purpose - Define all states - Be reusable
📌 Components created for a single screen are not allowed.
🎛 Visual States¶
All components must support:
- Default
- Hover
- Focus
- Disabled
- Error
- Loading (if applicable)
✅ Validation Rule¶
Any implementation that: - Deviates from the Playbook - Introduces undefined variations - Breaks visual consistency
Must be corrected before approval.