Design and improve UI/UX for the application. Use when asked to design interfaces, improve visual design, fix styling issues, ensure consistency, or enhance user experience. Applies design best practices for colors, typography, spacing, and interactions.
Create and maintain exceptional UI/UX for the personal_assistant (Cimplur) project, ensuring visual consistency, accessibility, and delightful user experiences.
The full style guide lives at docs/FRONTEND_STYLE_GUIDE.md. Always read that file before making design decisions. Key highlights below for quick reference.
#56c596All primary UI elements (buttons, links, active states, logo) use this color. It is applied via Bootstrap's $primary Sass variable override.
| Token | Hex | Usage |
|---|---|---|
--fyli-primary | #56c596 | Primary actions, links, logo |
--fyli-primary-hover | #45a67e | Hover/active states |
--fyli-primary-light |
#e8f7f0 |
| Tinted backgrounds |
--fyli-primary-dark | #3b8a69 | High-emphasis text |
| Role | Hex |
|---|---|
| Success | #198754 |
| Danger | #dc3545 |
| Warning | #ffc107 |
| Info | #0dcaf0 |
var(--fyli-*).main.css is the only global stylesheet besides framework imports.docs/FRONTEND_STYLE_GUIDE.md for the full palette, typography, spacing, component patterns, and accessibility requirements.Primary CTA: Use btn btn-primary (renders in #56c596).
Secondary CTA: Use btn btn-outline-secondary.
Destructive CTA: Use btn btn-outline-danger.
Always implement these states:
Use Bootstrap form-control class. Focus ring color inherits from $primary (#56c596).
.card {
background: var(--bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--spacing-xl);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
Success: