Terrain UI

¿Qué hace Terrain UI?

Estas reglas se destilaron de la interfaz de un juego de temática industrial, conservando solo lo que resultó útil en páginas web ordinarias. El skill no contiene assets del juego ni intenta recrearlo.

Lee este archivo completo antes de comenzar. Abre assets/terrain.css para ver los colores y el marcado de componentes, usa assets/contours.js para el fondo de contornos, y consulta references/research.md para saber de dónde proviene cada regla y por qué se omitieron algunas cosas.

Ocho reglas

1. Un color de acento, dos significados: la ubicación actual y la acción primaria. Por defecto #FEEC00, muestreado de la pestaña seleccionada en el juego. Úsalo solo como relleno, con texto de color tinta sobre él; en el tema claro nunca lo uses para líneas o texto. Lo mismo aplica para hover: solo el botón primario se llena con el acento al pasar el ratón. Los enlaces, botones en píldora y filas de lista solo se aclaran o obtienen un subrayado más grueso.
2. La selección depende de la dirección:
   • Listas verticales: hover aclara la fila; la fila seleccionada se vuelve oscura con texto claro, y aparece una barra de acento a la izquierda.
   • Pestañas horizontales: la pestaña seleccionada se llena completamente con el acento. Al cambiar, el bloque anterior se colapsa y el nuevo se abre lateralmente desde su centro.
3. La forma del botón muestra la prioridad: la acción primaria es un bloque con la esquina inferior derecha cortada; las acciones secundarias son píldoras con un icono redondo en el extremo derecho. Como máximo una acción primaria por grupo de botones.
4. Coloca una ruta en la parte superior izquierda de cada página: // Proyectos / Sobre mí. Los niveles a los que se puede volver son enlaces.
5. Los números son decoración y deben ser reales: establece IDs, fechas y contadores actual / total en cifras tabulares anchas. Nunca inventes datos ni añadas texto técnico falso. Lo mismo aplica para el texto: describe un producto (características, alcance compatible, instalación) solo a partir de lo que el usuario dio o de la documentación del propio proyecto, y mantén su alcance. Cuando no haya fuente, escribe un marcador como [TODO: ...] en lugar de completarlo.
6. Muestra las teclas de acceso rápido: por ejemplo ← → junto a los botones de página. Muéstralas solo en dispositivos con un puntero preciso.
7. Fondo: líneas de contorno cerradas: un parche en cada una de dos esquinas, con opacidad del 6% al 9%, cada quinta línea más gruesa, sin animación.
8. Movimiento corto y firme: hover 90 ms, selección 110 a 120 ms, curva cubic-bezier(.2,0,0,1). Desactiva todo cuando el sistema solicite reducir el movimiento.

Elige primero un tipo de página

Decide qué tipo de página vas a construir antes de empezar. Los tres comparten los mismos colores y componentes; se diferencian en cuán audaces son. Cuando no estés seguro, elige Lectura.

Tipo	Usado para	Cómo	Equivalente en el juego
Lectura	Artículos, detalles de proyectos, ajustes, ayuda	Una columna de texto, aproximadamente 65 caracteres latinos o 38 CJK de ancho; acento solo en el elemento de navegación actual y en el botón primario; contornos opcionales	Enciclopedia, archivos
Exhibición	Páginas de inicio, portafolios, páginas de aterrizaje	Títulos grandes y anchos, se permite texto contorneado; números grandes como fondo; contornos activados; el contenido puede aparecer bloque por bloque	Menú principal, tienda
Taller	Páginas de administración, paneles, herramientas, ajustes de extensiones	Navegación de lista vertical a la izquierda, pestañas en la parte superior; principalmente tablas, números y formularios; sin títulos grandes; movimiento solo como respuesta a acciones	Inventario, equipo, lista de amigos

Componentes

Todos viven en assets/terrain.css con el prefijo tu-. examples/demo.html muestra cada uno.

Componente	Clases	Notas
Título de ruta	tu-crumb	Regla 4
Lista vertical	tu-list	Marca el elemento actual con aria-current
Pestañas horizontales	tu-tabs tu-tab	Marca la pestaña actual con aria-selected="true" o aria-current
Botón primario / secundario	tu-btn / tu-btn--pill + tu-btn__icon	Regla 3
Indicador de tecla	tu-kbd	Regla 6
Fila de campos	tu-fields tu-sep	Separa metadatos con una barra vertical │
Panel	tu-panel	Un bloque plano: sin radio, sombra ni borde
Tabla	tu-table-wrap tu-table	Etiquetas de encabezado pequeñas y anchas; alinea a la derecha las columnas numéricas con tu-right; se desplaza lateralmente en pantallas estrechas
Entrada	tu-field tu-input tu-hint	Al enfocar, el subrayado se engrosa y aparece una barra de acento a la izquierda
Error	tu-error, más aria-invalid="true" en la entrada	Un cuadrado de acento pequeño y una frase sobre cómo solucionarlo; sin texto rojo
Interruptor	tu-switch	"Activado" es un estado actual, por lo que la pista se llena con el acento
Diálogo	<dialog class="tu-dialog">	Los botones se colocan en una barra de pie: uno primario, cancelar como píldora; aparece nítido desde un desenfoque
Notificación	tu-toast	Una barra oscura con una barra de acento a la izquierda; se desliza desde la izquierda y desaparece después de 2 segundos
Estado vacío	tu-empty	Un cuadro discontinuo con una frase sobre lo que aparecerá aquí, opcionalmente un botón primario
Carga	tu-progress, más tu-progress--busy mientras espera	Una línea de 2 px; cuando se conoce el progreso, establece --tu-value y muestra el porcentaje

Sin rojo. Las advertencias, fallos y estados pendientes usan el pequeño cuadrado de acento con texto de tinta. Coloca las acciones irreversibles, como eliminar, detrás de un diálogo de confirmación.

Para cualquier cosa que no esté en esta tabla, derívala de las ocho reglas: si es "actual" o "primario" decide si puede usar el acento; si es primario o secundario decide bloque o píldora; si se puede hacer clic decide si se aclara al hacer hover.

Movimiento

Acción	Duración	Cómo
Aclarado al hover	90 ms	Transición de color de fondo
Barra de selección de lista aparece	110 ms	scaleY(0 → 1)
Cambio de pestaña	120 ms	Bloque de acento scaleX(0 → 1), abriéndose desde el centro
Hover en botón primario	280 ms	El acento se extiende desde la izquierda
Cambio de página	Salida 320 ms, entrada 480 ms	La página anterior se desenfoca y se desvanece; la nueva página aparece bloque por bloque, con 100 ms de diferencia

No uses

• Marcadores no vistos (puntos rojos, insignias NUEVO): en el juego empujan a los jugadores a recolectar recompensas; en un portafolio o sitio ordinario se sienten como una molestia.
• Vidrio esmerilado, roturas de glitch, líneas de escaneo, brillo, rellenos de acento grandes, tarjetas redondeadas con sombras.
• Elementos exclusivos del juego como menús de carrusel 3D, arte de personajes y barras de color de rareza.
• Cualquier asset oficial del juego: capturas de pantalla, logotipos, iconos, arte de personajes, texto o los archivos de fuente oficiales.

Tipografía

• Texto y números en latín: Saira (código abierto, SIL OFL). Etiquetas estiradas al 125%, mayúsculas, tracking de 0.06em. El sitio oficial no añade tracking a sus etiquetas anchas; aquí se mantiene un poco para tamaños pequeños.
• Chino: Noto Sans SC o sans del sistema. Sin serifa ni pincel para el cuerpo del texto.
• Todos los números tabulares (font-variant-numeric: tabular-nums).

Entrega de un único archivo HTML

• Usa las clases de terrain.css tal como son; no añadas anulaciones a nivel de página que cambien sus colores. Si se necesita un cambio, el componente tiene un problema y debe informarse al skill.
• Coloca terrain.css en un elemento <style> y contours.js en un elemento <script>. Antes de incluir cualquier script en línea, asegúrate de que no contenga </script> literal; si lo contiene, escríbelo como <\/script>.
• Si la página debe funcionar sin conexión, incrusta Saira como URI de datos woff2 en @font-face; de lo contrario, enlaza Google Fonts y mantén las fuentes de respaldo.

Lista de verificación antes de la entrega

• Se eligió un tipo de página y no se mezclan tamaños de encabezado de diferentes tipos en una misma página.
• El acento aparece solo en la ubicación actual y en acciones primarias; no hay rojo en la página.
• Cada grupo de botones tiene como máximo un botón primario de bloque; el resto son píldoras.
• Las listas verticales y las pestañas horizontales usan sus propios estilos de selección.
• Cada página tiene un título de ruta con //.
• Todos los números son datos reales; cada afirmación sobre un producto tiene una fuente y no exagera su alcance.
• Se verificaron tanto el tema claro como el oscuro; nada se desplaza lateralmente en el ancho de un teléfono (aproximadamente 400 px).
• El foco del teclado es visible; todo está quieto con movimiento reducido activado.
• No se utilizan assets oficiales del juego.

Archivos

Archivo	Contenido
assets/terrain.css	Tokens de color (claro y oscuro) y todos los componentes
assets/contours.js	Fondo de contornos, una línea para configurar: TerrainContours.mount(canvas)
examples/demo.html	Todos los componentes en una página, listo para abrir
examples/screenshots/	La página de componentes en claro, oscuro, ancho de teléfono y el diálogo
references/research.md	Notas de investigación: lo que se observó, lo que se conservó, lo que se omitió