Sistema de diseño
La base visual de CuadernitoApp: cálida, analógica y de alto contraste. Construida sobre shadcn/ui y Tailwind CSS v4, con tokens semánticos para mantener todo coherente. Reutilizá estos tokens y componentes en cada pantalla nueva.
Colores
Paleta cálida en OKLCH. Nunca usamos colores directos (bg-white, text-black): todo pasa por tokens semánticos, así un cambio en globals.css se propaga a toda la app.
--background
Fondo crema de la app
oklch(0.96 0.018 83)
--foreground
Tinta oscura, texto principal
oklch(0.26 0.02 55)
--card
Superficie de tarjetas
oklch(0.985 0.012 85)
--primary
Verde de confirmación / marca
oklch(0.56 0.13 148)
--primary-foreground
Texto sobre primary
oklch(0.98 0.015 120)
--secondary
Superficie secundaria cálida
oklch(0.92 0.025 82)
--muted
Fondos apagados
oklch(0.92 0.02 82)
--muted-foreground
Texto secundario / apoyo
oklch(0.5 0.02 60)
--accent
Acento cálido (arena)
oklch(0.9 0.05 70)
--destructive
Errores y acciones peligrosas
oklch(0.55 0.19 27)
--border
Bordes e inputs
oklch(0.87 0.025 78)
Colores de gráficos
--chart-1
--chart-2
--chart-3
--chart-4
--chart-5
Tipografía
Dos familias: Fraunces (serif) para títulos grandes y de alto contraste, e Inter (sans) para el cuerpo. Se aplican con las clases font-serif y font-sans.
font-serif · Fraunces
Cuaderno de ventas
Más rápido, más simple
Para títulos y números destacados
font-sans · Inter
El cuerpo de texto usa Inter con line-height relajado. Si sabés usar el posnet, sabés usar esto.
Texto de apoyo en muted-foreground para jerarquía sin agregar colores nuevos.
Texto chico: nunca por debajo de 14px.
Radios de esquina
Escala derivada del token --radius (0.75rem). Usá las clases rounded-* según la jerarquía del elemento.
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
Espaciado
Usamos siempre la escala de Tailwind (nunca valores arbitrarios) y clases gap-* para separar elementos, no márgenes ni space-*.
gap-1
4px
gap-2
8px
gap-4
16px
gap-6
24px
gap-8
32px
gap-12
48px
Botones
Variantes del componente Button (shadcn/ui + base-ui). El verde primary se reserva para la acción principal, como confirmar una venta.
Variantes
Tamaños
Cómo usarlo
Reglas rápidas para mantener la coherencia en pantallas nuevas.
- Usá tokens semánticos (bg-background, text-foreground, bg-primary), nunca colores directos como bg-white.
- Si cambiás un fondo, cambiá también su color de texto para mantener el contraste.
- Máximo dos familias tipográficas: font-serif para títulos, font-sans para cuerpo.
- Reservá el verde primary para la acción principal de cada pantalla.
- Espaciá con clases gap-* y la escala de Tailwind; evitá valores arbitrarios como p-[16px].
Documentación completa para el equipo en docs/design-system.md.