aidan-neel/giga-ui

GIGA UI: calmado, preciso, vivo

Esta habilidad convierte una solicitud de IU de una línea en una interfaz pulida y de calidad de producción. El lenguaje visual está inspirado en el trabajo de diseño público de @marcelkargul (Kargul Studio): IU de producto tranquila, casi monocromática, tipografía muy cuidadosa, sombras suaves en capas en lugar de bordes pesados, un color de acento seguro y un movimiento que es rápido, físico y nunca decorativo por sí mismo.

Funciona con cualquier modelo de codificación y cualquier stack. Los ejemplos usan React + Tailwind + Motion (motion/react), y cada uno tiene un equivalente en CSS plano.

Leyenda de procedencia utilizada a continuación: [visto] observado directamente en sus publicaciones/imágenes o indicado en sus pies de foto. [inferido] una extrapolación razonable de lo que se vio (medido de capturas de pantalla o implícito). [experto] práctica general de movimiento/UX de la documentación de Motion, Emil Kowalski, Apple HIG. No de sus publicaciones.

---

1. Filosofía de diseño

1. Si se puede quitar, quítalo. [visto, pie de foto: "every screen. every component. every frame. if it doesn't need to be there, it shouldn't be. simple is always hard, but simple always wins."]
2. La tipografía hace el trabajo pesado. [visto: "just master typography and you can make anything look good."] Usa una familia (Inter por defecto en la web, Geist como alternativa opcional; SF Pro Rounded para móvil con estilo iOS) y como máximo 2 pesos [visto: "sf pro rounded, maximum 2 font weights, keep it simple"].
3. Blanco, negro y sombras. [visto: "No animations, no gradients, no fancy effects. Just FFFFFF, 000000, and some shadows. This is design at its peak."] La mayor parte de la paleta son grises neutros. El color se usa para dar significado, como estado, categoría o la única acción principal.
4. La profundidad proviene de sombras suaves en capas y líneas finas, no de bordes gruesos. [visto: "this button only requires 3 shadows!" y la receta del botón secundario en §3]
5. El movimiento es parte del producto, no decoración. [visto: "micro-interactions throughout", "subtle loading animation. not overdone, just perfect", "every website needs this level of animation", "idea → design → animation"]. Anima solo para explicar un cambio, confirmar una acción o guiar la atención [experto].
6. Trabaja el último 10% a mano. [visto: su proceso es "design in figma, build with the help of claude, spend hours fixing small details manually and improving code quality"]. La lista de verificación de QA en §9 es ese último 10%.
7. Limpio gana a ingenioso. Sus pies de foto vuelven constantemente a las palabras "limpio", "calmado" y "simple" (por ejemplo, "Every task in one calm list"). Incluso cuando hay muchos datos, la pantalla debe sentirse tranquila.

---

2. El estilo observado (cómo se ve realmente su trabajo)

2.1 Tipografía

• Familias: Inter (la predeterminada en esta habilidad) y Geist (alternativa opcional). [visto: "After using 100s of different fonts, I realized nothing beats Inter and Geist."; publicación de broma: los diseñadores junior y senior usan "Inter, Geist"]. SF Pro Rounded para aplicaciones móviles [visto, varias publicaciones]. También recomienda Google Sans Rounded como alternativa multiplataforma a SF Pro Rounded [visto, respuesta]. Una monoespaciada (similar a Geist Mono) aparece para números grandes, tickers y código [visto: saldos de aplicaciones cripto, tarjetas KPI de Statsnap, variante de barra lateral]. El trabajo de marca y marketing a veces usa una serifa de exhibición (serifa transicional editorial, peso ligero) [visto: página de aterrizaje fintech "Every payment protected…", página de aterrizaje de VC].
• Tracking (sus números exactos, demostrados con Geist; aplica lo mismo a Inter, que también demostró al −6%) [visto]:
  • 16px → 0%
  • 36px → −3%
  • 100px+ → −5% a −6%
  • "La regla de nunca ser negativo es para el texto del cuerpo. A 100px+ el espaciado predeterminado se ve suelto."
  • SF Pro Rounded: +1% de espaciado entre letras [visto, espécimen tipográfico].
• Pesos: Regular (400) y Medium (500) llevan casi toda la IU del producto. Semibold (600) es para títulos y números. Bold/Black solo para titulares de gran tamaño [inferido de capturas de pantalla].
• Tamaños en la IU del producto [inferido, medido de capturas de pantalla a 1×]: texto del cuerpo y tabla 13–14px, secundario/meta 12–13px, etiquetas de sección 11–12px mayúsculas o versalitas gris (ej. "WORKSPACE", "PINNED TOOLS"), títulos de página 18–24px Medium, números KPI 24–32px, titulares hero 48–72px con tracking negativo. Los botones son 14px Medium [visto: "Geist/14/Medium"].
• Color del texto: primario casi negro (#171717–#1F1F1F), secundario gris medio (#6B6B6B–#737373), terciario/placeholder (#A3A3A3). Las etiquetas usan texto oscuro teñido sobre un tinte claro en lugar de texto blanco sobre rellenos saturados [visto: publicación "Do / Don't": "Dark text improves overall readability greatly."].

2.2 Color

Muestreado de capturas de pantalla (aproximado) [visto/inferido]:

Rol	Claro	Oscuro
Lienzo / página	#FFFFFF	#0D0D0D–#121212
Superficie sutil (barra lateral, paneles, fondo móvil)	#F7F7F7 / #F4F4F4 / #FAFAFA	#1A1A1A–#1E1E1E
Fondo de presentación detrás de maquetas	#E5E5E5–#EDEDED, gris medio #8A8A8A	#1F1F1F–#262626
Borde de línea fina	#ECECEC / #EBEBEB	rgba(255,255,255,0.08)
Texto primario	#171717	#FAFAFA
Texto secundario	#737373	#A1A1A1

Acentos (uno por producto, nunca varios a la vez) [visto]:

• Violeta #7B3AEC (registro Underlay, onboarding), también una variante índigo #5B5BF0
• Azul #255CD1 / azul iOS #2F7BF6 (calculadora, calendario, Statsnap)
• Naranja #FF5A1F / #F97316 (Plunio, Nexora)
• Verde azulado #0F766E (tubería de IA, AIData)
• Lima #B4F05A sobre casi negro (botón "Iniciar" del editor de código, marca Soma)
• Coral/rojo #F2435A (aplicación de sueño)
• Negro puro #0A0A0A como color de botón primario en aplicaciones neutras (aplicación de sueño, "=" de calculadora, "Deploy v13", "New event") [visto]

Tintes semánticos [visto]: verde #16A34A texto sobre #ECFDF3; rojo #DC2626 sobre #FEF2F2; ámbar/naranja sobre #FFF4E5; azul sobre #EEF4FF. Las iniciales de avatar se colocan sobre círculos pastel con texto del mismo tono más oscuro ("SW", "AJ", "MP").

Degradados: usados raramente pero bien [visto: "the art of using gradients"]. Los botones obtienen un sutil degradado de arriba a abajo (#FFFFFF → #F7F7F7 para secundario; un tono ligeramente más claro en la parte superior para primario). El arte hero utiliza manchas de varios colores borrosas con combinación Plus-Darker más una superposición de ruido/grano [visto: hilo de ilustración hero].

2.3 Forma, espaciado, profundidad

• Radios [visto e inferido]: controles pequeños y botones 8–10px [visto: "30px height, 10px radius"]; entradas 10–12px; tarjetas 12–16px; modales y paletas de comandos 20–24px; hojas móviles y tarjetas de teléfono 24–32px; píldoras y chips completamente redondeados. Los botones móviles suelen ser píldoras completas [visto].
• Espaciado: una cuadrícula base de 4px. Los espacios comunes son 4/8/12/16/24/32/48 [inferido]. Mucho aire alrededor del contenido; las tablas densas aún obtienen filas de ~40–48px [inferido].
• Alturas de control [visto/inferido]: botones de escritorio compactos 30–32px, estándar 36–40px, CTA primaria móvil 48–56px.
• Bordes: líneas finas de 1px en gris muy claro. A menudo, el borde está hecho de una sombra de 0 desenfoque y 1px de propagación en lugar de border [visto: receta de botón secundario].
• Sombras [visto]: botón secundario = 0 1px 2px rgba(40,40,40,.08), 0 0 0 1px #ECECEC. Las superficies flotantes (popovers, paletas, tooltips) usan una sombra ambiental grande y muy suave más una línea fina. Los tooltips oscuros se colocan sobre IU claras [visto: tooltip del gráfico de Statsnap, notificación "Task completed · Undo"].
• Móvil: mesa de trabajo 430×932 [visto], botones de icono redondos de 40–44 px en la barra superior, tarjetas de lista "insertada" agrupadas en un lienzo gris, barras de pestañas de píldora flotantes [visto].

2.4 Patrones de diseño [visto]

• Cáscara de aplicación SaaS: barra lateral izquierda (220–260px) sobre un gris sutil, navegación agrupada con pequeñas etiquetas grises en mayúsculas, elemento activo = píldora blanca con sombra suave (claro) o relleno #1E1E1E (oscuro); contenido principal sobre blanco con una barra superior delgada (migajas de pan Home > Transaction, búsqueda con sugerencia /, botones de icono). A veces hay un carril de iconos delgado (48–56px) en su lugar.
• Fila de chips de filtro encima de las tablas: Range Last 30 days ▾, Scope All tools ▾. La etiqueta es gris y el valor es oscuro.
• Tablas: sin rayas de cebra, divisores de fila de línea fina, texto de encabezado gris pequeño, píldoras de estado teñidas, pilas de avatar + nombre + correo electrónico, números alineados a la derecha, cifras tabulares.
• Tarjetas KPI: etiqueta, número grande (a menudo mono), píldora de delta (▲ +14.7% vs last year).
• Autenticación/onboarding: tarjeta dividida. Formulario a la izquierda (logotipo en un círculo suave, título, subtítulo, botón de Google, divisor "o", entrada, primario), vista previa del producto a la derecha en un panel gris con puntos de carrusel [visto: "just designed the perfect signup page"].
• Paleta de comandos: radio de 24px, fila de búsqueda con tecla ESC, píldoras de filtro, resultados agrupados, pie de leyenda de teclado [visto].
• Onboarding móvil: barra de progreso segmentada + "1/5", pregunta centrada en negrita, filas de opciones seleccionables con marcas de verificación circulares, CTA de píldora adhesiva [visto].
• Héroes de página de aterrizaje: barra de navegación de píldora flotante, insignia pequeña "Backed with X", título breve y contundente (a veces grotesca en mayúsculas, a veces serifa), botón primario oscuro + secundario blanco, gran ilustración debajo [visto].

2.5 Iconografía e ilustración [visto]

• Iconos: iconos de contorno de trazo fino (similar a Lucide/Phosphor, ~1.5px de trazo, 16–18px en la IU), grises por defecto, más oscuros cuando están activos.
• Pequeños mosaicos de iconos de aplicaciones de colores (cuadrados redondeados con un degradado y un glifo) para tarjetas de funciones y categorías.
• Estilos de ilustración: (a) dibujo lineal isométrico sobre una cuadrícula discontinua, monocromático; (b) cintas/corrientes de degradado vívidas sobre un fondo pastel granuloso con una cuadrícula isométrica y confeti flotante; (c) ilustraciones puntuales planas y amigables e iconos emoji en 3D para aplicaciones de consumo y móviles; (d) toques esqueuomórficos (una cartera de cuero cosida que sostiene una tarjeta).
• Su canal de animación: "Draw the illustrations in Figma → Animate in AE/Rive → Export to lottie if using AE → Implement onto the website". En un proyecto usó "Figma… Rive for animation, Next.js + Sanity". Las secciones hero a menudo toman "design + illustration + animation" [visto].

2.6 Oscuro vs claro [visto]

Usa ambos y envía conjuntos coincidentes ("light/dark mode", "figma tokens are so useful!"). El modo claro es el predeterminado para SaaS de productividad. El modo oscuro se usa para cripto/comercio, editores de código, barras laterales y banners de marketing. Las superficies oscuras aumentan en incrementos de luminosidad de ~6–10 (#0D0D0D → #121212 → #1A1A1A → #222), no negro puro en todas partes.

---

3. Tokens de diseño (variables CSS)

Pega esto en la hoja de estilo global. Los usuarios de Tailwind pueden mapear estos en @theme (v4) o theme.extend (v3).

:root {
  /* Tipo */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, monospace;
  --font-rounded: "SF Pro Rounded", ui-rounded, "Google Sans Rounded", var(--font-sans);

  --text-xs: 12px;   --text-sm: 13px;  --text-base: 14px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 24px;  --text-2xl: 32px;  --text-3xl: 48px;
  --text-4xl: 64px;  --text-5xl: 96px;
  --tracking-body: 0;       /* <= 16px */
  --tracking-tight: -0.01em;/* 18–24px */
  --tracking-title: -0.03em;/* ~36px  (su regla) */
  --tracking-display: -0.055em; /* 100px+ (su regla: -5% a -6%) */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Neutros (claro) */
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --bg-muted: #f0f0f0;
  --bg-backdrop: #e8e8e8;
  --border: #ececec;
  --border-strong: #e0e0e0;
  --fg: #171717;
  --fg-secondary: #737373;
  --fg-tertiary: #a3a3a3;
  --fg-inverse: #ffffff;

  /* Acento: elige UNO por producto */
  --accent: #7b3aec;             /* violeta; alternativas: #255cd1 azul, #ff5a1f naranja, #0a0a0a negro */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-soft: color-mix(in oklab, var(--accent), white 90%);
  --accent-fg: #ffffff;
  --ring: color-mix(in oklab, var(--accent), transparent 65%);

  /* Semánticos (texto oscuro sobre tinte suave) */
  --success: #16a34a; --success-soft: #ecfdf3;
  --danger:  #dc2626; --danger-soft:  #fef2f2;
  --warning: #d97706; --warning-soft: #fff7e6;
  --info:    #2563eb; --info-soft:    #eef4ff;

  /* Espaciado (cuadrícula de 4px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Radios */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;

  /* Alturas */
  --h-control-sm: 30px; --h-control: 36px; --h-control-lg: 44px; --h-cta-mobile: 52px;

  /* Sombras (en capas, suaves; línea fina a través de propagación) */
  --hairline: 0 0 0 1px var(--border);
  --shadow-xs: 0 1px 2px rgb(40 40 40 / 0.08);
  --shadow-btn: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec;     /* su botón secundario */
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px color-mix(in oklab, var(--accent), black 12%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.18);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Movimiento (ver §5) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* ease-out fuerte (Emil Kowalski) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* para movimiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* hoja tipo iOS (Vaul) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms;
  --dur-moderate: 250ms; --dur-slow: 350ms; --dur-page: 500ms;
}

[data-theme="dark"], .dark {
  --bg: #0d0d0d;
  --bg-subtle: #141414;
  --bg-muted: #1c1c1c;
  --bg-backdrop: #0a0a0a;
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --fg: #fafafa;
  --fg-secondary: #a1a1a1;
  --fg-tertiary: #6b6b6b;
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255