Forum
F-01
Grid 3×3 — voces ensambladas
Brand Book · v1.0El sistema
El sistema
visual de Ágoranet.
Tokens, marca, tipografía y reglas de uso. Todo lo necesario para construir interfaces que se sientan parte de la misma red aunque vivan en tenants distintos.
Cinco variantes, una primaria.
Forum es la marca primaria — grid 3×3 que evoca voces ensambladas. El resto son variantes para contextos específicos.
Plaza
P-02
Cruce — punto de encuentro
Aperture
A-03
Acento Á — diafragma editorial
Mesh
M-04
Red multitenant — 4×4
Stack
S-05
Capas — tenants apilados
Tres lockups oficiales.
Horizontal para headers, vertical para identidades de tenant, compacto para favicons y firmas.
Ágoranet
LH-01 · horizontal · oscuroÁgoranet
LV-02 · vertical · claroÁGN
LC-03 · compacto · violetSistema OKLCH — un dominante, una rampa.
Violet 500 es el primario. La rampa Ink se usa estructuralmente: bg, surface, líneas, texto. Sin grises arbitrarios.
Primario · Sistema
Violet 500
var(--violet-500)
OKLCH0.62 0.22 285
USOCTA · Selección
WCAGAA · texto blanco
VariantesPrimarioHoverAccent
Violet 500oklch(0.62 0.22 285)
Violet 400oklch(0.72 0.18 287)
Violet 300oklch(0.82 0.12 288)
--ink-950OKLCH
Ink 950
0.09 0.012 280
BG base
--ink-900OKLCH
Ink 900
0.13 0.013 280
Surface
--ink-850OKLCH
Ink 850
0.16 0.014 280
Surface 2
--ink-700OKLCH
Ink 700
0.28 0.014 280
Avatars
--ink-400OKLCH
Ink 400
0.68 0.011 280
Text muted
--ink-100OKLCH
Ink 100
0.95 0.004 280
Text primary
SuccessConfirmaciones, online
oklch(0.72 0.16 152)ErrorFallos, datos perdidos
oklch(0.66 0.22 25)WarningAtención, advertencia
oklch(0.80 0.15 82)InfoInformativo, neutro
oklch(0.72 0.13 230)Display + Body + Mono.
Inter Tight estructura los titulares, Inter el cuerpo, JetBrains Mono las etiquetas y datos tabulares.
DisplayInter Tight
Aa Áá
Pesos 400–700. Italic 500 para acentos (la 'Á').
BodyInter
Aa Áá
Pesos 400–600. Default 14–16px, line-height 1.5.
MonoJetBrains Mono
01 / Áá
Eyebrows, etiquetas, código, números tabulares.
Display · 168/86 · -0.045emÁgoranetHero & portadas.
Display · 56/100 · -0.025emUna red, muchas empresas.Títulos de sección.
Body L · 22/1.45Aislamiento por tenant en cada query — la base lo refuerza, no tu código.Subtítulos y ledes.
Mono · 11/0.12em UPPERTENANT · AGN-04 · CAPITALEyebrows, etiquetas.
Qué hacer y qué no.
Cinco principios no negociables.
Tema oscuro por defecto.
Bg = ink-950. No existe modo claro en producto — solo en piezas impresas o lockups específicos.
OKLCH siempre.
Nuevos tokens en OKLCH. Hex y HSL solo en fallbacks o exports a tooling externo.
Bordes, no sombras.
La profundidad se construye con var(--line) y fondos escalonados (surface, surface-2).
Sin gradientes decorativos.
Salvo el hero-glow editorial, no usar gradientes morados sobre blanco. Es lo más SaaS-genérico que existe.
Sin Inter genérico.
Inter Tight es obligatorio para titulares — la italic 500 de la “Á” es parte de la identidad.