# Terminal / hacker

También llamado: estética hacker, UI de CLI, web de línea de comandos, pantalla verde, estilo TUI  
Época: terminales de los 70 y 80; revival web de 2015 en adelante (portfolios de desarrolladores, herramientas de seguridad)  
Página: https://designforai.dev/es/style/terminal-hacker

## Rasgos

- tipografía monospace para todo, títulos incluidos
- fondo negro o muy oscuro con texto verde fósforo o ámbar
- caracteres de prompt ($, >, ~) como marcadores de lista y títulos
- caracteres de dibujo de cajas, logos en ASCII art, cursor de bloque parpadeante
- efecto de texto tecleado en el hero, línea a línea
- los bordes son ASCII de una línea o 1px en el color del texto
- tablas alineadas en columnas fijas como un listado de directorio

Paleta: #0c0c0c página, #33ff33 verde primario (o #ffb000 ámbar), #1f7a1f verde apagado, #c8c8c8 secundario, #ff5555 rojo de error, #ffff55 aviso

Tipografía: JetBrains Mono, IBM Plex Mono, Fira Code o Commit Mono; un solo tamaño 14-16px, títulos al mismo tamaño en negrita o encajonados, line-height 1.5

## Haz

- usa un solo tamaño de fuente y marca la jerarquía con prompts, mayúsculas y filetes de dibujo de cajas
- añade una capa de líneas de barrido (repeating-linear-gradient, 2px, opacity 0.06) y un leve resplandor en el texto
- haz que el efecto de tecleo se pueda saltar y desactívalo bajo prefers-reduced-motion

## Evita

- no metas una sans-serif por "legibilidad"; rompe la ficción
- no uses esquinas redondeadas, gradientes ni sombras
- no lo conviertas en un sistema operativo falso con ventanas falsas; quédate en un solo terminal

Conocido por: Hack The Box, Hackaday (parcial), incontables portfolios de desarrolladores, páginas de marketing de Warp y Ghostty

## Semilla CSS

```css
:root{--bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace}
```

## Prompt

Construye el sitio como un terminal. Fondo #0c0c0c, texto #33ff33, texto apagado #1f7a1f, secundario #c8c8c8, error #ff5555. Fuente JetBrains Mono 15px en todo, line-height 1.5; los títulos van al mismo tamaño en negrita, precedidos de "$ " o envueltos en caracteres de dibujo de cajas (┌─┐ │ └─┘). Ancho máximo 88 caracteres, padding 24px, alineado a la izquierda. La nav es una sola línea de rutas (~/home ~/work ~/about) con la activa en vídeo inverso (background #33ff33, texto #0c0c0c). Hero: una línea tecleada con cursor de bloque parpadeante (animación steps(), parpadeo de 1s), tecleando a 40ms por carácter, se puede saltar con un clic. Las listas usan marcadores "> "; los datos en columnas de ancho fijo. Enlaces subrayados en #33ff33, el hover invierte los colores. Añade text-shadow 0 0 6px rgba(51,255,51,0.5) y una capa de líneas de barrido de 2px a opacity 0.06. Sin radio, sin gradientes, sin imágenes salvo ASCII art. Bajo prefers-reduced-motion, muestra todo el texto al instante.