Guías de estilo · hoja de estilo · terminal

Terminal de neón

Negro tintado del color del acento, todo en monoespaciada, titulares gruesos en mayúsculas y un solo neón para lo que se puede tocar.

Para: Herramientas para desarrolladores, ciberseguridad, infraestructura, datos, lanzamientos técnicos. Sale de: CIPHERGRID (/demo/th-ciphergrid), MYCEL (/demo/th-mycel), Kernel Log (/sitios/kernel-log).

Herramientas para desarrolladores
Terminal
Negro tintado del color del acento, todo en monoespaciada, titulares gruesos en mayúsculas y un solo neón para lo que se puede tocar.
Usar la guíaVer ejemplos

Color

--bg#08020f

--fg#f4ecff

--mut#a78bc7

--acc#ff2fd0

--acc2#67e38a

--card#120a1c

Contraste (WCAG)
texto sobre fondo	17.8 : 1	AAA
secundario sobre fondo	7.0 : 1	AA
acento sobre fondo	6.4 : 1	AA
texto sobre tarjeta	16.8 : 1	AAA

Colores de las obras de su familia en el cuaderno:

Tipografía

marca · 13 vw
Aa Terminal
titular · 4.4 vw · 800 · 1 · -0.02em · mayúsculas
El oficio se nota
sección · 2.4 vw
Lo que hacemos y cómo
texto · 0.875rem / 1.6
Cada guía fija su par tipográfico, la escala en dos escalones y el aire entre líneas con valores medidos. Este párrafo usa la medida de la guía (34em).

Titulares: Jetbrains Mono
Texto: Jetbrains Mono
Acento: Jetbrains Mono
Medido en su página: titular JetBrains Mono a 4.4 vw, peso 800, interlineado 1, -2 % · texto 14 px / 1.6

Espacio y superficie

Margen: max(24px, calc((100vw - 1100px) / 2))
Rejilla: 12 columnas · separación 16px
Aire entre secciones: clamp(80px, 9vw, 128px)
Cabecera: 56px
Radio: 4 px · sin sombra
Medido en su página: margen 170 px · radios 4

tarjeta
Fondo --card, línea --ln, radio de la guía.
BotónSecundario

Movimiento

Duraciones: rápido 0.15 s · revelado 0.6 s · cambio de página 0.4 s · escalonado 0.03 s
Curvas: steps(4, end) · revelado cubic-bezier(0.4, 0, 0.2, 1)
Medido en su página: steps(4)

Pasa el ratón:Texto que ruedaTexto que ruedaTexto que ruedaTerminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · Terminal de neón · 

Componentes del kit con la guía

Cualquier pieza del kit lee los tokens de la guía. Variante sugerida: variant="outline".

Terminal
NuevoÚltimas plazas
Correo
PlanesBÁSICO
39 €/ mes
Lo esencial · Sin permanencia
COMPLETO
59 €/ mes
Todo lo anterior · Sesión de prueba
“Me sentí en buenas manos desde el primer día.”Lucía MarClienta“Lo recomiendo sin dudar: cercanos y serios.”Jon IbarraCliente
PreguntasSí, la primera es gratis.
Cuando quieras, sin coste.

Familia y patrones

1 obras del cuaderno del laboratorio son de esta familia. Lo que se repite entre ellas es la base de la guía:

Patrones
Tono
Paleta
Piezas más usadas: GuideFrame

Las guías de estilo sacadas del repo · concepto · /guias

Composiciones de portada recomendadas: Foto oscura con datos, Producto centrado · relatos: Producto en escena, Línea de tiempo. Ver una página entera con la guía ↗

Receta

Sin receta de sector todavía: usa las composiciones y relatos recomendados de la guía.

Inspiraciones y páginas del repo

Inspiraciones: webs premiadas estudiadas en el laboratorio y rehechas con Trama siguiendo esta guía, con su marca, sus textos y sus imágenes (docs/55).

Ninguna inspiración sigue esta guía todavía.

Páginas del repo cuya guía más afín es esta, medidas con refs:probe --repo: afinidad de 0 a 1 al comparar fondo, acento, letra y escala del titular, texto y superficies.

Página	Tipo	Afinidad	Titular medido	Paleta
CIPHERGRID · producto ciberpunk	landing	0.45	JetBrains Mono · 4.4 vw · 800
MYCEL · red micelar orgánica	landing	0.40	JetBrains Mono · 4.4 vw · 800

Reglas medidas

npm run refs:probe -- --guides <base> mide la guía en el navegador con las once reglas de las webs premiadas (docs/16 §2).

familias ≤ 3
titular 3–8 vw, marca 12–18 vw o de borde a borde ≤ 50 vw
interlineado del titular 0,8–1
peso del titular 300–500 (o condensada/lúdica) · excepción medida: CIPHERGRID y MYCEL: JetBrains Mono a 800; la mono fina no se lee como titular
tracking del titular 0 a −5 %
texto 14–20 px
interlineado del texto 1,3–1,6
margen lateral 10–80 px o contenido centrado (escritorio)
margen lateral 8–29 px (móvil)
titular móvil 8–16 vw (marca hasta 50)
sombras ≤ 2 (salvo lúdico o sombra dura)

Código

tsx

1import GuideFrame from "@/components/ui/GuideFrame";2 3export default function Page() {4  return (5    <GuideFrame guide="terminal" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="outline" */}9    </GuideFrame>10  );11}

css

1/* la guía «Terminal de neón» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #08020f;4  --fg: #f4ecff;5  --mut: #a78bc7;6  --acc: #ff2fd0;7  --acc2: #67e38a;8  --card: #120a1c;9  --ln: rgba(244,236,255,0.14);10  --r: 4px;11  --display: var(--font-jetbrains-mono), ui-monospace, Consolas, monospace;12  --font-accent: var(--font-jetbrains-mono), ui-monospace, Consolas, monospace;13  --glow: 1;14  --g-font-display: var(--font-jetbrains-mono), ui-monospace, Consolas, monospace;15  --g-font-body: var(--font-jetbrains-mono), ui-monospace, Consolas, monospace;16  --g-font-mono: var(--font-jetbrains-mono), ui-monospace, Consolas, monospace;17  --g-fs-brand: clamp(3rem, 13vw, 12rem);18  --g-fs-h1: clamp(2.25rem, 4.4vw, 4.25rem);19  --g-fs-h2: clamp(1.5rem, 2.4vw, 2.25rem);20  --g-fs-body: 0.875rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 800;23  --g-lh-display: 1;24  --g-ls-display: -0.02em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.08em;28  --g-lh-body: 1.6;29  --g-margin: max(24px, calc((100vw - 1100px) / 2));30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 9vw, 128px);33  --g-header: 56px;34  --g-measure: 34em;35  --g-radius: 4px;36  --g-radius-btn: 4px;37  --g-shadow: none;38  --g-dur-fast: 0.15s;39  --g-dur-reveal: 0.6s;40  --g-dur-page: 0.4s;41  --g-stagger: 0.03s;42  --g-ease: steps(4, end);43  --g-ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);44}