Design system
Estándar de diseño de SaldoSimple. El inicio (/) es la referencia viva: mismos tokens, fondos suaves y tarjetas de sección. Página no indexada.
Inicio (/) — patrones visuales
Clases y decisiones usadas en HomePage, hero, mercado (tipo de cambio), herramientas destacadas, categorías y “por qué”. Reutilizar al añadir bloques al home o páginas similares.
Fondo de página
Contenedor raíz del home: gradiente vertical muy suave (teal + gris + toque esmeralda). En oscuro se atenúa hacia fondo y primary.
min-h-screen bg-gradient-to-b from-primary/[0.07] via-muted/25 to-emerald-500/[0.06] dark:from-background dark:via-muted/20 dark:to-primary/[0.04]Muestra del gradiente (contenido real en HomePage.tsx)
Ancho y márgenes del contenido
mx-auto max-w-7xl px-4 pb-20 pt-4 sm:px-6 sm:pt-6 lg:px-8Stack vertical de secciones: gap-6 sm:gap-8 entre bloques.
Hero (cabecera + búsqueda)
- Contenedor exterior: hero-gradient hero-gradient-section (ver globals.css).
- Tarjeta interior: rounded-xl … border-border/60 bg-card/95 … ring-1 ring-primary/[0.06] backdrop-blur-sm sm:rounded-2xl y sombra tipo producto financiero.
- Título H1: text-4xl font-semibold tracking-tight sm:text-5xl; párrafo: text-base sm:text-lg text-muted-foreground leading-relaxed.
- Iconos de confianza: text-primary/80 en el pictograma, texto text-sm font-medium.
Tarjetas de sección (bloques del home)
Patrón base compartido por herramientas destacadas, categorías y “por qué”. El anillo (ring) cambia de tinte para diferenciar bloques sin romper la marca.
Primary ring
Herramientas destacadas, CTA inferior.
ring-primary/[0.05]Emerald ring
Categorías populares.
ring-emerald-500/[0.06]Sky ring
Por qué SaldoSimple.
ring-sky-500/[0.07]Envoltura común: rounded-xl border border-border/60 bg-card/95 p-8 shadow-md sm:rounded-2xl sm:p-10 lg:p-12.
Títulos de sección y badges
Herramientas más utilizadas
Subtítulo centrado con ancho máximo y jerarquía clara.
Badge sobre tarjeta de herramienta.
Mercado / tipo de cambio (bloque denso)
Contenedor: bordes más redondeados en pantallas grandes, cabecera con gradiente suave y cuerpo unificado. Enlaces externos tipo “pill”.
Tipo de cambio (ejemplo)
| Concepto | Valor |
|---|---|
| FIX Banxico (MXN/USD) | $17.2447 |
Fuente: Banco de México (SIE). Pie de datos discretos.
En sitios de bancos
- BBVA$17.2447Abrir
- Santander$17.2447Abrir
- Citibanamex$17.2447Abrir
- HSBC$17.2447Abrir
- Banorte$17.2447Abrir
- Scotiabank$17.2447Abrir
Implementación: HomeExchangeRates.tsx (home), MxLandingExchangeRates.tsx (landing tipo de cambio), datos getHomeExchangeRates.ts.
CTAs y hover de marca
Botón “Ver todas las herramientas”: borde primary suave, fondo primary/10, hover con texto naranja logo.
Pozos de icono (categorías / beneficios)
from-primary/12 to-emerald-600/10 en contenedor redondeado; icono text-primary.
Colores
Paleta del logo y variables CSS. Los acentos emerald/sky del home son complementarios (anillos y gradientes), no sustituyen al teal primary.
Marca (logo)
Semánticos (CSS variables)
Estados
Acentos contextuales (inicio)
En el home se combinan con opacidad baja (ring-emerald-500/[0.06], ring-sky-500/[0.07], gradientes to-emerald-500/[0.06]) para variar bloques sin competir con el teal de marca.
Tipografía
Fuentes y estilos de texto. En el inicio, títulos de sección usan text-3xl sm:text-4xl font-semibold tracking-tight; montos densos usan font-mono tabular-nums.
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
Dos variantes: listados generales (filas alternas) y tablas densas tipo mercado / Banxico (cabecera tipográfica, divisores finos, números en mono).
Variante listado
| Concepto | Monto | Estado |
|---|---|---|
| Item uno | $ 1,000.00 | Activo |
| Item dos | $ 2,500.00 | Pendiente |
| Item tres | $ 500.00 | Cerrado |
Variante home / datos financieros
Misma estructura que el bloque de tipo de cambio: bg-muted/10, divide-y divide-border/30, celdas de valor en font-mono font-semibold.
| Concepto | Valor |
|---|---|
| FIX Banxico (pesos por dólar) | $17.2447 |
Cards
Contenedores flexibles (shadcn Card) y envolturas de sección del home (border + ring + sombra suave).
Contenido principal. Bordes redondeados, sombra ligera y padding consistente.
Categorías usan anillo esmeralda; “Por qué” usa anillo sky — ver sección Inicio (/).
Iconos
Librería: lucide-react. Uso consistente de size-4 o size-5; en el home, Landmark y ExternalLink marcan “mercado” y enlaces externos.
Modales
Dialog (Radix). Overlay oscuro y contenido centrado.