Componentes

Sistema de botones

6 variantes según la acción · 3 tamaños · 5 estados. Si algo es clickeable y ejecuta una acción, es un button. Para etiquetar sin acción, ve a Chips.

Etiquetas de estado y categoría

Pills compactos que etiquetan algo: una superficie, un estado, una categoría. No ejecutan acción, solo informan. Dos familias: structural (punto con el color de la superficie) y semantic (ícono + color del estado). Más chicos que un button.

Tags de valores técnicos

Los buttons actúan, los chips etiquetan, los code tags muestran valores técnicos literales: hex, tokens, paths, class names, comandos. Rectangulares (no pill), tipografía mono, padding compacto.

Notes inline contextuales

Notas inline al lado del contenido principal: anatomías, excepciones, tips, aclaraciones. La clave: fondo flat al 5% con el color del estado, sin gradient. Si necesitas algo más prominente, usa Tinted (tab Fondos).

Feedback efímero

5 variantes semánticas + Achievement para gamification. Auto-dismiss con pausa en hover, slide-in desde la derecha, stacking vertical. API global · window.toast.{variant}(title, opts) disponible en cualquier página.

toast.success('Misión guardada');
toast.info('Beta activa', { body: 'La vista de leaderboards está lista' });
toast.error('No pudimos guardar', {
  body: 'Revisa tu conexión',
  action: { label: 'Reintentar', onClick: () => save() }
});
toast.achievement('¡Nueva racha!', { body: 'Llevas 7 días seguidos' });

// opts: { body?, action?, duration? }
// duration: 0 = no auto-dismiss · null = default de la variante

Achievement es exclusivo de Galilei. El glow pulse al entrar + sparkle icon rotando + tint lima son el sello visual de gamification. Úsalo SOLO para unlocks, rachas, logros conseguidos · nunca para feedback genérico. Las otras 5 variantes (info/success/warning/error/neutral) son el sistema base que cualquier app de Galilei usa.

Métricas con glow

Badge circular + glow icon + número + label. El patrón que usan las pantallas de cierre de misión, perfiles, leaderboards y dashboards. Reutiliza los íconos Glow del sistema; cada uno trae su tint canónico extraído del SVG.

Anatomía

15+ Daily Streak

• 1Badge circular. 56/72/88 px (sm/md/lg). Fondo Panel 1 (var(--n01)), border-radius: 50%.
• 2Tint ring + glow. Inset 1.5px al 55% del tint + outer glow 24px al 18%. Sin border decorativo real.
• 3Glow icon. SVG de /assets/icons/glow/, 78% del badge, drop-shadow propio del SVG.
• 4Value. Radio Canada Big bold, 1.35 / 1.6 / 2 rem.
• 5Label. Body 0.85rem, --text-muted.

Layouts

layout="stack" · default

Triple inline en cierre de misión, leaderboards, perfil. 2 a 4 stats máximo por fila.

15+ Daily Streak

20/25 Heat Streak

82% Monthly Accuracy

layout="row"

Lista vertical en detalle de misión, settings, resumen del día. Sin límite de stats.

15+ Daily Streak

90% Accuracy

2:46 min Play time

27 Correct Ans.

import GlowStat from '~/components/GlowStat.astro';

<GlowStat icon="Racha" value="15+" label="Daily Streak" />
<GlowStat icon="Target" value="82%" label="Monthly Accuracy" />
<GlowStat icon="Clock" value="2:46 min" label="Play time" layout="row" />
<GlowStat icon="Check" value="27" label="Correct Ans." size="lg" />

// props:
//   icon    · glow icon basename (Racha, Target, Clock, Check, Crown...)
//   value   · string | number
//   label   · string
//   tint?   · override hex (default = canónico por icon)
//   layout? · 'stack' (default) | 'row'
//   size?   · 'sm' | 'md' (default) | 'lg'

3 sistemas, una sola jerarquía

Flat para UI funcional, Glow para plataforma y 3D para hero. Una pieza, un tipo dominante.

3D

Hero · onboarding emotivo, slides de marca, celebraciones.

Glow

Plataforma · badges, currency, racha, achievements.

Flat

UI funcional · navegación, botones, inputs, estados.

Regla de mezcla. Flat y Glow pueden convivir en una misma vista. 3D nunca se mezcla con Flat ni con Glow en la misma superficie: si entra un ícono 3D, manda 3D y los otros dos sistemas se van. Una pieza, un tipo dominante.

3D · en una celebración

Glow · en un badge de stat

Flat · en navegación

Layout de referencia

Un mini-dashboard con todo el sistema en una pieza: Base, Paneles, Tinted, Mystery, Gradient, Outline, buttons, chips, code tags y notes. Si construyes algo, parte de este patrón.

Anatomía de la composición 1 hero con Panel 2 + Gradient diagonal · 2 cards en Panel 2 (una con input Outline, otra con code well Panel 3) · 4 misiones en Panel 2 con 1 Mystery y 1 Tinted Success. Todo sobre Base. Cero bordes decorativos.

Campos e inputs

Todo campo es superficie Outline: transparente sobre Base, borde 1px rgba(255,255,255,0.10). El foco no usa ring: usa glow lima, igual que los botones. El error habla con color y texto, nunca con borde de acento.

Estados de un campo

Tipos de campo

Regla de validación el error se dice con texto bajo el campo (qué pasó y cómo resolverlo) más color en el borde del input. Nunca un borde grueso de acento ni solo color rojo sin texto.

Vacío, error y carga

Las tres pantallas que casi nunca se diseñan y siempre aparecen. Cada una con su tono: el vacío invita, el error orienta, la carga tranquiliza. Nunca en blanco ni con texto crudo.

Sistema de cards

La superficie base de contenido del portal. Se compone por clases: una superficie (.card o .card-deep), modificadores opcionales y un grid preset. Antes de escribir CSS de página, revisa si el sistema ya lo cubre · un patrón que se repite 2 veces pertenece a portal-marca.css.