Colors
Color Palette
The palette leverages the energetic "Spotify Green" as the primary brand signifier, balanced by a deep, high-contrast dark mode and a clean, utility-focused light mode.
Surface Colors
| Token |
Light |
Usage |
surface |
#f4fcef |
Background |
surface-dim |
#d4dcd0 |
Dimmed surface |
surface-bright |
#f4fcef |
Bright surface |
surface-container-lowest |
#ffffff |
Cards, elevated |
surface-container-low |
#eef6e9 |
Containers |
surface-container |
#e8f0e4 |
Higher containers |
surface-container-high |
#e2ebde |
High containers |
surface-container-highest |
#dde5d9 |
Highest containers |
On Surface Colors
| Token |
Light |
Usage |
on-surface |
#161d16 |
Primary text |
on-surface-variant |
#3d4a3d |
Secondary text |
inverse-surface |
#2b322a |
Dark surface |
inverse-on-surface |
#ebf3e7 |
Text on dark |
outline |
#6d7b6c |
Borders |
outline-variant |
#bccbb9 |
Subtle borders |
Primary Colors
| Token |
Light |
Usage |
primary |
#006e2d |
Primary actions |
on-primary |
#ffffff |
Text on primary |
primary-container |
#1db954 |
Primary container |
on-primary-container |
#004118 |
Text on primary container |
inverse-primary |
#53e076 |
Primary on dark |
Secondary Colors
| Token |
Light |
Usage |
secondary |
#006e2d |
Secondary actions |
on-secondary |
#ffffff |
Text on secondary |
secondary-container |
#7df994 |
Secondary container |
on-secondary-container |
#00722f |
Text on container |
Tertiary Colors
| Token |
Light |
Usage |
tertiary |
#a8353e |
Accent tertiary |
on-tertiary |
#ffffff |
Text on tertiary |
tertiary-container |
#ff767b |
Tertiary container |
on-tertiary-container |
#730a1b |
Text on container |
Error Colors
| Token |
Light |
Usage |
error |
#ba1a1a |
Error states |
on-error |
#ffffff |
Text on error |
error-container |
#ffdad6 |
Error background |
on-error-container |
#93000a |
Text on error bg |
Usage Guidelines
Primary Actions
Use Primary Green for primary buttons and key interactions. Hover/pressed states transition to Primary Dark.
Backgrounds
Keep backgrounds neutral to allow package status colors to serve as the primary functional indicators:
- Success: Green tones
- In Transit: Blue/cyan tones
- Error: Red tones
Text Hierarchy
Use On Surface Variant for secondary text to maintain clear visual hierarchy between titles and metadata.
Status Colors
| Status |
Color |
Usage |
| Delivered |
#8BC34A |
Success states |
| In Transit |
#00BCD4 |
Shipments in transit |
| Delayed |
#FF5722 |
Attention needed |
| Error |
#F44336 |
Failed states |
UX Requirements
Dark/Light Mode
- Toggle en la interfaz
- Detectar tema del dispositivo por defecto
- Preferencia almacenada en
ft.Storage
Mobile
- Toda la app envuelta en
SafeArea
- Touch targets mínimo 48dp
Visual Feedback
- Skeleton loaders mientras carga
- Snackbar/toast para confirmaciones y errores
- Pull-to-refresh en listas
Animations
- Sutiles: micro-interacciones en botones, cards, hover
- Transiciones suaves entre páginas
Navigation
- BottomNavBar en mobile
- Sidebar colapsable en web/tablet
- Breadcrumbs en vistas anidadas
Client Theme System
Concept
Funcionalidad común, UI/UX personalizable por cliente (tenant).
Structure
core/client/
├── domain/entities/client_config.py # ClientConfig entity
├── data/datasources/client_local_datasource.py
├── presentation/controllers/client_controller.py
└── di.py
Environment Variables
CLIENT_SLUG=roundaway_express
CLIENT_NAME=RoundAway Express
API_BASE_URL=http://localhost:8000
DEEP_LINK_SCHEME=https
DEEP_LINK_HOST=roundawayexpress.com
BYPASS_CLIENT_VALIDATION=true
Usage
client_ctrl = get_client_controller()
client_ctrl.initialize(client_slug)
brand_name = client_ctrl.get_client_name()
api_url = client_ctrl.get_api_base_url()
Ver también: Global AppBar · Flet Best Practices · Components