Referencia interna
Design system
Corporativo premium sobre la paleta de la marca. Todo lo de esta página sale de src/styles/global.css y src/components/ui/.
01 · Color
Rampas de marca
La materia prima. Los componentes no deberían tomar un escalón numerado directamente: para eso están los tokens semánticos de abajo.
brand
50
#fff5ed
100
#ffe8d5
200
#ffcdaa
300
#ffab74
400
#ff8c44
500
#fd6a17
600
#ee500d
700
#c53a0d
800
#9c3013
900
#7e2a13
ink
50
#f7f7f8
100
#eeeef0
200
#d9dade
300
#b8b9c0
400
#90929c
500
#72747f
600
#5b5d67
700
#4a4b54
800
#3f4047
900
#1c1d21
02 · Color
Tokens semánticos
Lo que usan los componentes. Nombran la función, no el color, para que el sistema pueda cambiar de paleta sin reescribir las pantallas.
| Token | Uso | Valor |
|---|---|---|
| surface | Fondo por defecto | #ffffff |
| surface-muted | Banda alterna, celdas de datos | ink-50 |
| surface-inverse | Banda oscura de contraste | ink-900 |
| line | Borde hairline por defecto | ink-100 |
| line-strong | Borde de control / hover | ink-200 |
| heading | Títulos | ink-900 |
| copy | Texto de cuerpo | ink-600 |
| muted | Texto secundario, metadatos | ink-500 |
| accent | Rellenos naranjas (texto oscuro encima) | brand-500 |
| accent-ink | Texto naranja sobre fondo claro | brand-700 |
| accent-on-dark | Naranja sobre banda oscura | brand-400 |
| accent-subtle | Fondo de badge / destacado suave | brand-50 |
03 · Accesibilidad
Contraste verificado
Medido, no estimado. Las tres combinaciones marcadas en rojo son las que el sitio usa hoy y el sistema reemplaza.
ink-900 sobre blanco
16.84✓ Pasa AA para texto normal
ink-600 sobre blanco (cuerpo)
6.55✓ Pasa AA para texto normal
ink-500 sobre blanco (mínimo)
4.65✓ Pasa AA para texto normal
brand-700 sobre blanco
5.27✓ Pasa AA para texto normal
brand-600 sobre blanco
3.63✗ No usar — falla AA
ink-900 sobre brand-500
5.81✓ Pasa AA para texto normal
blanco sobre brand-500
2.90✗ No usar — falla AA
ink-900 sobre verde WhatsApp
8.50✓ Pasa AA para texto normal
blanco sobre verde WhatsApp
1.98✗ No usar — falla AA
brand-400 sobre ink-900
7.29✓ Pasa AA para texto normal
ink-300 sobre ink-900 (cuerpo inverso)
8.61✓ Pasa AA para texto normal
04 · Tipografía
Escala por roles
Roboto en 400 / 600 / 700. Los tamaños son fluidos: crecen con el viewport sin escalones por breakpoint, y los titulares llevan tracking negativo progresivo.
text-display
40 → 64 px
Titular de landing. Uno por página, como mucho.
Merchandising personalizado
text-h1
32 → 48 px
Título de página.
Merchandising personalizado
text-h2
26 → 36 px
Título de sección.
Merchandising personalizado
text-h3
20 → 24 px
Subsección, título de tarjeta grande.
Merchandising personalizado
text-h4
18 px
Título de tarjeta, encabezado de lista.
Merchandising personalizado
text-lead
17 → 20 px
Bajada de sección.
Merchandising personalizado
text-body
16 px
Texto corrido.
Merchandising personalizado
text-body-sm
15 px
UI densa, texto de tarjeta.
Merchandising personalizado
text-caption
13 px
Metadatos, notas al pie.
Merchandising personalizado
text-eyebrow
12 px
Volanta y badges. Siempre en versalita.
Merchandising personalizado
05 · Forma
Radios, elevación y ritmo
Tres pasos en cada eje. La restricción es el punto: cuantas menos opciones haya, más consistente sale la página sin esfuerzo.
Radios
rounded-control
0.625rem — inputs, botones rectos
rounded-card
0.875rem — tarjetas
rounded-panel
1.25rem — bloques grandes
rounded-full
pill — botones y badges
Elevación
Sombras amplias, de baja opacidad y teñidas con el neutro de marca. Nunca para dibujar bordes.
shadow-raised
reposo de tarjeta o botón
shadow-lifted
hover, elemento levantado
Ritmo vertical
Reemplaza los seis py-* distintos que conviven hoy. Se aplica solo con la proprhythm de <Section>.
py-section-sm
40 → 56 px — bandas densas, breadcrumbs
py-section
56 → 96 px — default de sección
py-section-lg
80 → 128 px — momentos de respiro
px-gutter
16 → 32 px. Un solo margen lateral fluido en lugar de px-4 sm:px-6 lg:px-8.
06 · Componentes
Botones
Cinco variantes, tres tamaños. Los rellenos brillantes llevan texto oscuro por contraste, y eso además es lo que les da el registro premium.
primary
Acción principal. ink-900 / blanco — 16.84.
accent
Señal de marca. brand-500 / ink-900 — 5.81.
Verde exacto de WhatsApp con texto oscuro — 8.50.
outline
Acción secundaria dentro de una sección.
ghost
Terciaria. brand-700 sobre claro — 5.27.
sobre banda oscura
La prop `inverse` ajusta outline y ghost.
07 · Componentes
Superficies y etiquetas
El borde define la caja; la sombra aparece solo cuando algo se levanta de verdad.
flat
Default. Solo borde hairline.
raised
Reposo con presencia.
lifted
Estado elevado.
interactive
Pasá el mouse: sube la elevación.
08 · Uso
Reglas
Las decisiones que hacen que el sistema se sostenga cuando lo toca otra persona.
Usar accent (brand-500) como relleno con texto ink-900 encima.
Poner texto blanco sobre naranja o sobre verde: falla WCAG AA.
Usar accent-ink (brand-700) cuando el naranja es texto.
Usar brand-600 como color de texto sobre blanco (3.63).
Definir la caja con el borde hairline line.
Dibujar contornos con sombra. La sombra es elevación, no borde.
Alternar surface / surface-muted / surface-inverse para estructurar.
Inventar un cuarto fondo o degradados decorativos de fondo.
Envolver cada banda en para heredar ritmo y ancho.
Repetir mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 a mano.
Pedir un rol tipográfico (text-h2) según jerarquía.
Elegir text-3xl por cómo se ve en esa pantalla puntual.
Reservar el naranja para la acción y la señal.
Repartirlo en iconos, bordes y fondos a la vez: deja de significar.
09 · Arquitectura
Al día con la plataforma
Tres decisiones técnicas detrás del sistema, tomadas después de revisar el estado real de CSS, Tailwind y Astro — no supuestos de hace dos años.
Paleta en OKLCH
Los tokens de brand e inkestán declarados en oklch(), el mismo espacio que usa Tailwind v4 para su paleta y para color-mix() en modificadores de opacidad. Es una conversión exacta de los hex anteriores (round-trip verificado) — el mismo color, un espacio perceptualmente uniforme para extenderlo.
View Transitions nativas
<ClientRouter /> de Astro reemplaza el corte seco entre páginas por un fundido, sin JS de terceros. La foto de un producto en el listado vuela hasta la foto de su ficha con transition:name — cero animación escrita a mano. Se apaga sola con prefers-reduced-motion.
:has() en vez de JS
Las pestañas del megamenú ("Por producto" / "Por ocasión") cambian de panel con.mega-panel:has(#tab:checked): cero JavaScript, con soporte universal en los motores actuales. Es la referencia a seguir antes de escribir undata-active a mano.