Componentes

Skills
/galilei-brand
Descargar .md
02Buttons

Sistema de botones

7 variantes según la acción · 2 tamaños · 5 estados. Set canónico del Galiverso (Figma, 2026-07-01). Si algo es clickeable y ejecuta una acción, es un button. Para etiquetar sin acción, ve a Chips.

Variantes

Primary · acción principal

La acción principal de la pantalla. La que quieres que hagan. Una sola por vista.

Secondary · acción alterna

La segunda acción en importancia. Acompaña a la primaria sin robarle peso.

Tertiary · acción de apoyo

Acción de apoyo, discreta. Encaja en el fondo sin llamar la atención. Compartir, cerrar, copiar URL, toolbar actions.

Soft · la más liviana

Casi solo texto: white tint 12% + hairline blanco. Para opcionales o salidas: cancelar, ver más, continuar.

Info · acción informativa

Acción informativa o neutral, en azul. Para ayuda, detalles o saber más.

Destructive soft · peligrosa reversible

Acción peligrosa pero suave. Para borrar o quitar algo reversible.

Destructive solid · irreversible

Acción peligrosa y definitiva. La confirmación final de lo que no se deshace.

Tamaños

Large · 40px alto · 16px text · radius 12 · default

CTAs standard, forms, modales, hero.

Small · 28px alto · 12px text · radius 8

Tablas, filtros e inline en cards densas.

Ancho

Hug · se ajusta al contenido · default

Barras de acción, toolbars, cualquier fila con varios botones.

Block · .btn-block · ocupa el contenedor

CTA del juego apilados (Decision Stack), formularios y modales de una columna.

Ancho es ortogonal a variante y tamaño: cualquier color, en lg o sm, puede ir hug o block. El contenido queda centrado en ambos. En Figma es la propiedad Width del set (Hug / Full).

Estados

Default Hover Active Focus Disabled primary secondary tertiary soft info destructive-soft destructive-solid

Cada variante en sus 5 estados. Hover: oscurece un paso (nunca aclara), tints suben a12→a20. Active: scale(0.98) + un paso más oscuro (tints a30). Focus: ring 1.5px con offset 2px, del color de la variante; usa outline, no ocupa layout ni cambia la altura. Disabled: mismo fill al 40% de opacidad, el color se conserva. En el doc los estados se fuerzan con .is-hover/.is-active/.is-focus (agrupadas en las mismas reglas del sistema); en uso real salen solos. El ícono es ortogonal (ver Variantes).

Specs técnicastoken level · click para expandir
Variante Background Border Text Hover
Primary --g-brand none --n01 · 500 bg --g-600 · active --g-700
Secondary --white none --n01 · 500 bg --neutral-08 · active --neutral-07
Tertiary --n03 none --text-primary · 500 bg --neutral-04 · active --n02
Soft --white-a12 0.5px --white inset --white · 500 bg --white-a20 · active --white-a30
Info --info-a12 none --info-vivid · 500 bg --info-a20 · active --info-a30
Destructive soft --error-a12 none --error-vivid · 500 bg --error-a20 · active --error-a30
Destructive solid --error-vivid none --n01 · 500 mix 12% → active 22% hacia --n00

Cuándo SÍ vs cuándo NO

Sí usa button
  • CTA principal de la vista. Uno solo, en Primary, para avanzar el flujo.
  • Acción alterna junto al Primary. Secondary cuando hay segunda opción legítima.
  • Acciones neutrales sin marca. Tertiary para compartir, cancelar, cerrar, toolbar.
  • Opcionales y salidas. Soft para "cancelar", "ver más", "continuar" en contexto.
  • Acciones destructivas. Destructive-soft para lo reversible; destructive-solid, con confirmación, para lo irreversible.
  • Inline compacto con ícono en cards. Soft tamaño small para acciones secundarias en callouts.
No usa button
  • 2 Primary en la misma vista. Solo uno: el CTA que avanza el flujo. Si hay dos acciones iguales, una pasa a Secondary.
  • Destructive sin confirmación. Nunca borres al primer click. Siempre con modal o "deshacer" inline.
  • Soft para acciones críticas. Soft es la salida liviana. Si la acción importa, usa Primary o Secondary.
  • Botón sin label para acciones complejas. Solo ícono sirve para acciones obvias. Si hay duda, agrega texto.
  • 5 estados sin definir disabled. Si puede estar inactivo, define disabled. No lo dejes en "default + opacidad".
03Chips

Etiquetas de estado y categoría

Pills compactos que etiquetan un estado. No ejecutan acción, solo informan. Receta canónica de la molécula Figma (realineado 2026-07-01): fondo = dark de la familia al 50%, texto = light/vivid de la familia, sentence case, sin dot. Sin ícono va en micro (9); con ícono (.snc-chip-icon, Phosphor 12) el texto sube a 12 regular. Sobre superficie clara: .snc-chip-on-light se invierte a tinte light de la familia + texto dark (contraste AA sobre blanco). 7 tonos: success, warning, alert, error, info, accent, neutral.

Variantes

Semantic · estado y categoría

Comunican estado: completado, pendiente, error, beta, nuevo. Van con ícono Phosphor porque el ícono se lee más rápido que un color solo. El fondo lleva un tint sutil del color y el texto va en el color del estado.

Completado Pendiente Atención Falló Beta Nuevo Borrador

Casos: badges en tablas, indicadores beta/new en cards, prioridad de tareas, validación inline de forms. La anatomía del chip semántico admite además un ícono Phosphor líder como leading opcional (el texto sube a 12 regular) · reusa snc-chip + token semántico + snc-chip-icon, mismo color, sin gradiente ni glow.

Validado Bloqueado En revisión Acción requerida Beta Borrador

Anchor · navegación intra-página

Otra familia. A diferencia de los semantic (que solo etiquetan), los anchor chips son clickeables: llevan a un ancla de la misma página. Tienen estado hover y activo (scroll-spy). Se usan en el TOC interno de Superficies y como nav de sub-secciones largas. Badge de letra o número opcional al inicio.

Salta a AActivo BDefault CHover

Las familias: semantic usa ícono + tint del estado (no clickeable) · anchor usa badge de letra/número (clickeable + scroll-spy). Mismo pill 100px, mismo body 500 12-13px, sentence case.

Anatomía

Chip vs Button

A primera vista se parecen (ambos son pills). La diferencia es la función: un chip etiqueta, un button actúa. Eso cambia su escala, peso y comportamiento.

Completado
Chip
  • Micro 9 · SG Medium · sentence case
  • Height 20px · padding 0 8px · pill
  • Bg = dark de la familia al 50%
  • Texto = light/vivid de la familia
  • Sin dot · ícono líder opcional (sube a 12)
  • Sobre claro: wash al 90% (on-light)
  • No estados interactivos · nunca ejecuta acción
Button
  • 16px text · SG Medium · lh 100%
  • Padding 0 24px · height 40px (lg default)
  • Radius 12 · rectangular, ya no pill
  • Bg sólido o tint según variante
  • Hover oscurece un paso · active + scale .98
  • Focus ring 1.5px del color de la variante
  • 5 estados (default → disabled 40%)

Regla del texto

Máximo 2 palabras por chip. El chip vive en 1 línea, sin wrap. Si una palabra sola es larga (10+ chars), busca un sinónimo más corto. Si necesitas explicar más, ya no es chip · es una nota aparte. Válidos: Completado, Beta, En progreso. Inválidos: Falló por error de red, Pendiente de revisión.

Specs técnicastoken level · click para expandir
Propiedad Valor
FontSpace Grotesk · --fs-micro 9 · weight 500 · sentence case
Con ícono--fs-xs 12 · weight 400 · ícono Phosphor 12 líder
Padding0 8px · gap 4px
Border-radius--radius-pill
Height20px · single line, sin wrap
Bg default--familia-dark-a50 · sobre claro -a90 (on-light)
Color defaultlight o vivid de la familia (success usa light)
HTML<span> con .snc-chip + token (.snc-chip-success, .snc-chip-neutral, etc.)
EstadosEstático · el chip nunca ejecuta acción

Cuándo SÍ vs cuándo NO

Sí usa chip
  • Para el estado de algo: "Completado", "Pendiente", "Falló".
  • Para una categoría corta: "Beta", "Nuevo", "Premium".
  • Para una etiqueta neutra sin estado: usa el tono neutral.
  • Para la prioridad en tablas o cards de tareas.
  • Para señalar filtros activos en una lista (sin click).
No usa chip
  • Como botón clickeable. Si ejecuta acción, usa button.
  • Con texto largo. Máximo 1-2 palabras, si no, es una nota más larga.
  • Mezclando colores semánticos sin razón. Solo si comunican estados reales del mismo objeto.
  • Inventando un dot. El chip no lleva punto: el indicador es su color de familia o un ícono líder opcional.
  • Color fuera del sistema. Usa solo los 7 tonos semánticos, nunca un color suelto.
02bTabs

Sistema de tabs · dos niveles

Espejo de las moléculas del Galiverso. Tab primaria (underline): siempre el primer nivel de una vista, texto 12, activa en g-600 con subrayado de 1px, inactivas y baseline en neutral-04. Tab secundaria (pill): SOLO anidada bajo un primario visible, contenedor n03 radius 12, activa con fondo n01 y texto blanco. Nunca pill como primer nivel, nunca dos del mismo nivel anidadas.

Tab primaria · underline · primer nivel
Tab secundaria · pill · solo anidada

Clases primaria: .tab-bar + .tab-btn (página completa: .pg-tabs) · secundaria: .tab-nav + .tab. Estado activo por aria-selected o .active; el JS es de cada página.

03bNombrar y utilidades

Chips para nombrar + utilidades

Un solo sistema de chips (consolidado 2026-07-01): el mismo chip que etiqueta estado también nombra (categorías, pesos, formatos, metadata) usando los tonos neutral y accent, y muestra números con .snc-chip-mono. El sistema .tag se eliminó por redundante.

Categoría Destacado +12% -8% 740 KB A 04

Utilidades hermanas .num-badge y .num-eyebrow (numeración) · .meter (barra de proporción) · .acc-toggle (disclosure). Pendientes de dibujar en Figma.

04Code tags

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.

Variantes

#B3F131 Default · hex, paths, class names, comandos, props y versiones
--g-brand Accent · tokens del brand, valores de marca destacados

Hex inline: usar #0E1012 como Panel 1 (estructura del app).

Token CSS: el accent vive en --g-brand · siempre via token.

Class name: la card de doc usa .snc-r2 internamente.

Path: ver ejemplo completo en /identidad-visual/color/.

Comando: instalar con npm install @galilei/sdk.

Prop name: el componente acepta size=24 y weight="fill".

Versión: requiere @phosphor-icons/core ^2.0.

Env var: configura GALILEI_API_KEY antes de correr.

Specs técnicastoken level · click para expandir
Propiedad Valor
FontSpace Grotesk · font-mono · weight 400
Font size11px (default) · 0.82em dentro de párrafo
Padding3px 7px compacto inline
Border-radius4px rect (no pill, diferencia de chip)
Bg defaultrgba(255,255,255,0.05) neutral 5%
Bg accentrgba(179,241,49,0.08) lima 8%
Color defaultvar(--text-secondary)
Color accent#B3F131 lima brand
HTML<code> con clases .code-tag o .code-tag-accent
EstadosEstático · sin hover, focus, active

Cuándo SÍ vs cuándo NO

Sí usa code tag
  • Hex inline. #0E1012 dentro de un párrafo de docs.
  • Tokens CSS. var(--g-brand) con la variante accent.
  • Paths y URLs. /identidad-visual/color/.
  • Class names. .snc-r2, .btn-primary.
  • Comandos shell. npm install, git status.
  • Props de componentes. size=24, weight="fill".
  • Versiones de paquete. @phosphor-icons/core ^2.0.
  • Env vars. GALILEI_API_KEY.
No usa code tag
  • Como chip. Si etiqueta estado ("Completado", "Falló"), usa chip.
  • Dentro de un heading. Solo viven inline en párrafos, nunca en títulos.
  • Como oración completa. Es valor literal corto, no frase entera.
  • Envolviendo paths largos. Si no cabe en línea, ya no es code tag.
06Toasts

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 vs Notificación el toast es la app RESPONDIENDO a tu acción de hace un segundo: efímero, sin timestamp, máximo una acción inline. La notificación es la app BUSCÁNDOTE con algo que pasó sin que lo pidieras (misión nueva, recompensa): lleva timestamp, persiste y puede pedir tap · son las 3 moléculas del juego (glow · icon-box · frosted). Los momentos grandes del juego no usan ninguno: usan la Celebration Screen (plantillas).

Variantes

Info

Tips contextuales, nuevas features, "beta activa".

Success

Confirmaciones de acción, "guardado", sync ok.

Warning

"Revisa esto antes de seguir". Dura más (6s).

Error

Validación rota, fallo de red. Soporta acción "Reintentar".

Neutral

Sin emoción · sync, status sistémico.

Achievement

Único de Galilei · gamification. Glow pulse + sparkle rotando para unlocks.

Specs técnicastoken level · click para expandir
Propiedad Valor
Posiciónfixed top: 24px · right: 24px · stack vertical, gap 8px
Min / Max width320px a 480px · full-width bajo 640px
Padding14px 16px 14px 14px
Border-radius12px
BackgroundPanel 2 + tint 6% del color semántico (color-mix oklab)
Shadow0 8px 24px rgba(0,0,0,0.40) · depth para flotar
EntertranslateX(110% → 0) + fade · 240ms ease-out-quart
Exitfade + drift 20px · 180ms ease-in
Duracióninfo/success/neutral 4.5s · warning/error 6s · achievement 5s
Hoverpausa el timer · reanuda 2s al salir
ARIAerror/warning → role="alert" + assertive · resto status + polite

API

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

Cuándo SÍ vs cuándo NO

Sí usa toast
  • Feedback efímero (4-6s) de una acción del usuario.
  • Confirmaciones positivas: "guardado", "completado", "sincronizado".
  • Unlocks de gamification con la variante achievement.
  • Notificaciones del sistema: "pago procesado", "sync terminado".
  • Errores recuperables con acción de "Reintentar".
No usa toast
  • Información que el usuario necesita revisar después · usa un banner.
  • Errores que bloquean el flujo · usa modal con CTA.
  • Contenido extenso (más de 2 líneas) · usa modal o sub-página.
  • Validación inline de un campo · usa form error helper debajo del input.
  • Mensajes persistentes sin tiempo definido · usa banner top-of-page.

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.