Design system
Estándar de diseño de la web SaldoSimple. Colores del logo (naranja y teal), componentes reutilizables y patrones de interfaz. Página no indexada.
Colores
Paleta basada en el logo. Uso consistente en toda la web.
Marca (logo)
Semánticos (CSS variables)
Estados
Tipografía
Fuentes y estilos de texto usados en el proyecto.
Fuente principal: variable del layout (Questrial para secundaria). Títulos y cuerpo usan las clases de Tailwind.
Título H1 — The quick brown fox
Título H2 — The quick brown fox
Título H3 — The quick brown fox
Título H4 — The quick brown fox
Título H5 — The quick brown fox
Título H6 — The quick brown fox
Cuerpo (text-base). Peso normal para párrafos y contenido largo.
Texto secundario (text-sm text-muted-foreground).
Código / tokens: font-mono — #F18858, var(--primary)
Enlace con hover naranjaCita o bloque destacado (blockquote).
Botones
Estilos reutilizables. Hover naranja en acciones secundarias (outline/secondary).
Primarios
Secundarios (hover texto naranja)
Destructive
Estados y tamaños
Formularios
Input, Select, Label, Checkbox, Radio y Switch.
Alertas
Mensajes de feedback. En la web se usa también sonner (toast) para notificaciones.
Success
Operación completada correctamente.
Info
Información adicional para el usuario.
Warning
Revisa los datos antes de continuar.
Danger
Ha ocurrido un error. Intenta de nuevo.
Tablas
Datos en formato tabular. Filas alternas para legibilidad.
| Concepto | Monto | Estado |
|---|---|---|
| Item uno | $ 1,000.00 | Activo |
| Item dos | $ 2,500.00 | Pendiente |
| Item tres | $ 500.00 | Cerrado |
Cards
Contenedores flexibles. Card, CardHeader, CardTitle, CardDescription, CardContent.
Contenido principal. Bordes redondeados, sombra ligera y padding consistente.
Iconos
Librería: lucide-react. Uso consistente de size-4 o size-5.
Modales
Dialog (Radix). Overlay oscuro y contenido centrado.