Ir al contenido

@archeblack/ui

Fundamentos

Las decisiones que comparten todos los productos Arche: el vacío y la luz, la tipografía, el espaciado, la forma, el brillo y el movimiento. Cada valor de esta página se lee de los tokens generados; si cambia un token, cambia la página.

Pares de contraste
1040
Fallas
0
Productos
5
Formato
DTCG 2025.10

Color

Dos primitivos y nada más: el vacío y la luz. Cada capa, borde y nivel de texto es la luz mezclada con el vacío en una proporción fija. Los estados son los únicos colores con tono propio.

Primitivos

--arche-color-void #07080d · el fondo de todo Primitivo: el fondo más oscuro.
--arche-color-light #ffffff · la marca de Arche Primitivo: la luz. Es la marca y el acento de Arche.

Capas

El fondo es el vacío. Cada capa que sube suma un poco de luz, mezclada en OKLab. La capa flotante suma además borde y brillo.

--arche-color-bg #07080d · el vacío Fondo de la página.

--arche-color-surface #0e0f14 · luz 4 % en OKLab Capa base: tarjetas, paneles, campos.

--arche-color-surface-raised #14151a · luz 7 % en OKLab Capa elevada: controles secundarios, bloques destacados.

--arche-color-surface-overlay #1a1b20 · luz 10 % en OKLab Capa flotante: diálogos, menús, avisos.

  • Abrir
  • Duplicar hover
  • Archivar press: el fondo más exigente para el texto

Bordes

  • --arche-color-border-subtle #18191e · luz 9 % en OKLab Separadores y bordes de tarjetas.
  • --arche-color-border #24252a · luz 15 % en OKLab Borde de controles.
  • --arche-color-border-strong #3c3d42 · luz 26 % en OKLab Borde en hover y de casillas.
  • --arche-color-border-control #66686c · luz 44 % en OKLab · mínimo 3,08:1 (surface-overlay) Límite de todo control: la línea de los campos y el borde de casillas, radios y el riel del switch. Llega a 3:1 contra el fondo y las tres capas.
  • --arche-color-border-control-hover #858689 · luz 56 % en OKLab · mínimo 4,72:1 (surface-overlay) Límite de un control en hover.

Velos

  • --arche-color-hover rgb(255 255 255 / 0.06) · luz 6 % sobre transparente Velo de hover; se compone sobre la capa de abajo.
  • --arche-color-press rgb(255 255 255 / 0.1) · luz 10 % sobre transparente Velo de press; se compone sobre la capa de abajo.
  • --arche-color-scrim rgb(7 8 13 / 0.55) · vacío 55 % sobre transparente Velo detrás de un diálogo o una hoja modal: el vacío al 55 % (el del demo).

Niveles de texto

El texto baja de intensidad por nivel, mezclando la luz con el vacío en sRGB. Todo nivel cumple AA contra el fondo, las tres capas y los velos de hover y press. El deshabilitado está exento.

  • --arche-color-text-strong #ffffff · luz 100 % Proyecto sincronizado hace dos minutos Fondo 20,01:1 Overlay 17,19:1 Mínimo 12,79:1 (press sobre surface-overlay) AAA
  • --arche-color-text #dcdcdd · luz 86 % en sRGB Proyecto sincronizado hace dos minutos Fondo 14,60:1 Overlay 12,55:1 Mínimo 9,33:1 (press sobre surface-overlay) AAA
  • --arche-color-text-muted #a6a6a8 · luz 64 % en sRGB Proyecto sincronizado hace dos minutos Fondo 8,23:1 Overlay 7,07:1 Mínimo 5,26:1 (press sobre surface-overlay) AA
  • --arche-color-text-subtle #999a9c · luz 59 % en sRGB Proyecto sincronizado hace dos minutos Fondo 7,10:1 Overlay 6,10:1 Mínimo 4,54:1 (press sobre surface-overlay) AA
  • --arche-color-text-disabled #515256 · luz 30 % en sRGB Proyecto sincronizado hace dos minutos Deshabilitado: exento de contraste

Estados

Definidos en OKLCH con luminosidad parecida, para que ninguno pese más que otro. Siempre van con ícono o texto: el color solo nunca alcanza. El texto sobre un estado sólido es el vacío, así que su contraste es el mismo que el del estado sobre el fondo. Cada estado se mide también contra el fondo más exigente, press sobre surface-overlay, y contra su fondo suave.

Danger

No se pudo guardar el proyecto.

--arche-color-danger
oklch(0.71 0.19 24) · #ff6a67
Sobre el fondo
7,15:1
Más exigente
4,57:1
Sobre soft
5,83:1
Soft
#2b1c1f14 % sobre surface
Borde
#69353642 % sobre surface
Warning

Quedan tres días de prueba.

--arche-color-warning
oklch(0.82 0.15 78) · #f9b73f
Sobre el fondo
11,31:1
Más exigente
7,23:1
Sobre soft
9,11:1
Soft
#25201d12 % sobre surface
Borde
#5c492c38 % sobre surface
Success

Cambios guardados.

--arche-color-success
oklch(0.76 0.15 152) · #5bcc80
Sobre el fondo
9,90:1
Más exigente
6,33:1
Sobre soft
8,07:1
Soft
#18222012 % sobre surface
Borde
#2c4f3b38 % sobre surface
Info

Hay una versión nueva disponible.

--arche-color-info
oklch(0.74 0.12 240) · #5cb4ef
Sobre el fondo
8,79:1
Más exigente
5,62:1
Sobre soft
7,06:1
Soft
#19222d14 % sobre surface
Borde
#2f4d6642 % sobre surface

Acento y roles

Cada producto aporta un acento y el build lo normaliza para que siempre se lea sobre el vacío. Los componentes nunca leen el acento: usan roles. El color de marca (el favicon y la versión de color del sigilo), los links, la selección, el foco y las citas siguen al acento; la marca de la cabecera y la acción principal siguen blancas en todos los productos.

Producto de la muestra

Acento naranja de producto. Este contenedor tiene data-product="example" y la página importa products/example.css.

Normalización

Semilla #d4763c
Normalizado #e98950
OKLCH
L 0,7219 C 0,1378 h 49,88°
Resultado
Se ajustaron la luminosidad o el croma.

Reglas: la luminosidad queda entre 0,72 y 0,84, y el croma no pasa de 0,2. El build avisa si el tono queda a menos de 28° de un estado.

Choque con danger. El tono está a 25,88° de danger (mínimo 28°). Un link o una selección podrían leerse como un estado.

Familia del acento

  • --arche-color-accent #e98950
  • --arche-color-accent-hover #ee9d6e
  • --arche-color-accent-soft #2b211f
  • --arche-color-accent-border #674231
  • --arche-color-accent-tint rgb(233 137 80 / 0.07)

Roles

  • Consola

    --arche-color-brand → accent

    El color de marca: el sigilo en su versión de color, en el favicon y los íconos de app. En la cabecera la marca va en blanco.

    #e98950 Sobre el fondo 7,77:1Mínimo (press sobre surface-overlay) 4,97:1

  • Ver la paleta completa

    --arche-color-link → accent

    Links dentro del texto y botones de tipo link.

    #e98950 Sobre el fondo 7,77:1Mínimo (press sobre surface-overlay) 4,97:1

  • --arche-color-selected → accent

    Casillas, pestañas, switches y paginación marcados. Su fondo suave, selected-soft, es el tinte del acento: la fila elegida de una tabla.

    #e98950 Texto encima 7,77:1No textual, mínimo (surface-overlay) 6,68:1Texto sobre selected-soft, mínimo (hover sobre accent-tint sobre surface) 5,31:1

  • --arche-color-focus → accent

    Anillo de foco de todos los controles.

    #e98950 No textual, mínimo (surface-overlay) 6,68:1

  • --arche-color-quote → accent

    La regla de las citas en la prosa (Prose). Es decorativa, pero el build la mide como el foco: 3:1 contra el fondo y las tres capas.

    #e98950 No textual, mínimo (surface-overlay) 6,68:1

  • --arche-color-primary → light

    Acción principal. Blanca siempre, también en los productos.

    #ffffff Texto encima 20,01:1

Pares no textuales · mínimo 3:1

El foco y la selección no son texto, pero tienen que distinguirse de lo que los rodea. La regla de las citas es decorativa y se mide igual, para que un acento nuevo no la apague sin aviso. El chequeo falla si alguno baja de 3:1 contra el fondo o una capa. Lo mismo vale para el límite de los controles (border-control), que no depende del producto y está con los bordes.

Rolbgsurfacesurface-raisedsurface-overlay
focus7,77:17,44:17,08:16,68:1
selected7,77:17,44:17,08:16,68:1
quote7,77:17,44:17,08:16,68:1

Tipografía

Tres familias con trabajos distintos. La interfaz usa Archivo a 15 px; los títulos, Archivo condensada en mayúsculas; la lectura larga, Piazzolla; los datos y las etiquetas, IBM Plex Mono.

Familias

  • Archivo

    Interfaz y títulos. Eje de ancho de 62 a 125 y pesos de 400 a 900.

    Crear proyecto, invitar al equipo y revisar la facturación del mes.

    • 400regular
    • 500medium
    • 600semibold
    • 700bold
    • 800extrabold
    • Proyectosextra-condensed · 62 %
    • Proyectoscondensed · 75 %

    --arche-font-family-sans Archivo Variable, Archivo, Arial Narrow, Arial, sans-serif

  • Piazzolla

    Lectura larga: artículos, documentación y textos con voz propia.

    Un sistema oscuro no es un sistema apagado: la luz se reserva para lo que importa y todo lo demás descansa en el vacío.

    La itálica acompaña citas, notas y énfasis dentro de un párrafo.

    --arche-font-family-serif Piazzolla Variable, Piazzolla, Georgia, Times New Roman, serif

  • IBM Plex Mono

    Datos, cifras, código y etiquetas en mayúsculas.

    #07080d · 4,54:1 · 160 ms · 0123456789

    --arche-font-family-mono IBM Plex Mono, ui-monospace, Menlo, Consolas, monospace

Escala

Nueve tamaños. El más chico, 12 px, es solo para etiquetas mono en mayúsculas. El tamaño menu, 40 px, es solo para los links del menú a pantalla completa (typography.menu). 4xl es fluido: 44 px con 320 px de ancho o menos y 88 px desde 1280 px. El token guarda el máximo y el CSS es un clamp().

  • --arche-font-size-2xs 12 px · 0,75 rem Etiqueta de sección
  • --arche-font-size-xs 13 px · 0,8125 rem Proyectos activos
  • --arche-font-size-sm 15 px · 0,9375 rem Proyectos activos
  • --arche-font-size-md 17 px · 1,0625 rem Proyectos activos
  • --arche-font-size-lg 22 px · 1,375 rem Proyectos activos
  • --arche-font-size-xl 28 px · 1,75 rem Proyectos activos
  • --arche-font-size-menu 40 px · 2,5 rem Publicaciones
  • --arche-font-size-2xl 44 px · 2,75 rem Proyectos activos
  • --arche-font-size-4xl 44 → 88 px · 2,75 → 5,5 rem · fluido

    Mínimo · 44 px Titular

    Máximo · 88 px Titular

    Ahora · … Titular

    clamp(2.75rem, 1.8333rem + 4.5833vw, 5.5rem) En el medio, 1,8333 rem + 4,5833 vw: crece 4,58 px por cada 100 px de ancho. El intercepto en rem hace que el zoom del navegador la siga agrandando. Con 200 % de zoom, a 1280 px, crece 1,33 veces: el zoom achica la pantalla y la medida baja hacia su mínimo. Llega al doble desde 400 % de zoom. Cumple WCAG 1.4.4 porque los navegadores llegan a 500 % y el máximo es como mucho 2,5 veces el mínimo.

Estilos compuestos

Cada estilo da cuatro variables: --arche-typography-<n> para la propiedad font, y sus -letter-spacing, -font-width y -text-transform.

  • --arche-typography-display Archivo · 800 · 44 → 88 px (fluido) · interlineado 0,94 · ancho 62 % · tracking 0,02 em · mayúsculas Titular de página: Archivo extracondensada, en mayúsculas, fluido de 44 a 88 px (font.size.4xl).

    El alma pide locura

  • --arche-typography-menu Archivo · 800 · 40 px · interlineado 0,94 · ancho 62 % · tracking 0,02 em · mayúsculas Los links del menú a pantalla completa: la voz display (Archivo 800 extracondensada al 62 %, en mayúsculas, con el tracking y el interlineado de los titulares) a 40 px (font.size.menu).

    Publicaciones

  • --arche-typography-heading Archivo · 700 · 22 px · interlineado 1,2 · ancho 75 % · tracking 0,03 em · mayúsculas Título de sección: Archivo condensada, en mayúsculas.

    Superficies y texto

  • --arche-typography-body Archivo · 400 · 15 px · interlineado 1,5 Texto de interfaz.

    La interfaz usa 15 px: botones, campos, tablas y menús.

  • --arche-typography-reading Piazzolla · 400 · 17 px · interlineado 1,6 Lectura larga.

    La lectura larga pide una letra con ritmo propio. Piazzolla aguanta párrafos enteros sin cansar la vista sobre el vacío.

  • --arche-typography-lead Piazzolla · 400 · 22 px · interlineado 1,5 Bajada o introducción: Piazzolla a 22 px, con el interlineado de la interfaz.

    Hay caminos fuera del jardín. Sobre la sed que el saber no calma, y la disposición que el alma estaba pidiendo.

  • --arche-typography-label IBM Plex Mono · 400 · 12 px · interlineado 1,5 · tracking 0,12 em · mayúsculas Etiqueta mono en mayúsculas.

    Acento del producto

  • --arche-typography-code IBM Plex Mono · 400 · 13 px · interlineado 1,5 Código y datos.

    npm run tokens:check

Espaciado

Escala de espaciado con base de 4 px (0,25 rem). El nombre es la cantidad de pasos.

  • 0 --arche-spacing-0 0 rem · 0 px
  • 1 --arche-spacing-1 0,25 rem · 4 px
  • 2 --arche-spacing-2 0,5 rem · 8 px
  • 3 --arche-spacing-3 0,75 rem · 12 px
  • 4 --arche-spacing-4 1 rem · 16 px
  • 5 --arche-spacing-5 1,25 rem · 20 px
  • 6 --arche-spacing-6 1,5 rem · 24 px
  • 8 --arche-spacing-8 2 rem · 32 px
  • 10 --arche-spacing-10 2,5 rem · 40 px
  • 12 --arche-spacing-12 3 rem · 48 px
  • 16 --arche-spacing-16 4 rem · 64 px
  • 20 --arche-spacing-20 5 rem · 80 px
  • 24 --arche-spacing-24 6 rem · 96 px

Maquetación

Medidas de texto, anchos de página y de columna y margen lateral. Las medidas (measure) van en el elemento de texto; los anchos (width), en contenedores y grillas. Las medidas acotan el ancho del texto; el margen lateral es fluido, como el titular.

  • --arche-layout-measure-reading 55 ch · max-w-reading 55ch, la medida del texto de lectura: con Piazzolla a 17 px son unos 578 px, alrededor de 75 caracteres de texto (el ch es el ancho del «0», más ancho que el promedio de las letras). En ch, se resuelve con la fuente del elemento que la lleva: va en el elemento de texto, no en un contenedor (para eso está width.reading).
  • --arche-layout-measure-narrow 40 rem · 640 px · max-w-narrow 640 px: texto corto, como una bajada o una introducción (unos 66 caracteres a 22 px en Piazzolla). En rem y no en ch porque no depende de la fuente del elemento. No acota titulares: un titular va al ancho de su columna.
  • --arche-layout-width-page 80 rem · 1280 px · max-w-page 1280 px: ancho máximo del contenido de una página, sin los márgenes laterales.
  • --arche-layout-width-reading 36,125 rem · 578 px · max-w-reading-column 578 px: la columna de lectura, para contenedores y grillas. Equivale a measure.reading (55ch) con Piazzolla a 17 px, medido, pero en rem: no depende de la fuente del contenedor.
  • --arche-layout-gutter 1 → 2,5 rem · 16 → 40 px · fluido · px-gutter Margen lateral de la página, fluido: 16 px en pantallas de 320 px o menos y 40 px desde 1280 px. clamp(1rem, 0.5rem + 2.5vw, 2.5rem) En el medio, 0,5 rem + 2,5 vw: crece 2,5 px por cada 100 px de ancho. El intercepto en rem hace que el zoom del navegador la siga agrandando.
    • 16 px · mínimo
    • … · ahora
    • 40 px · máximo

Una bajada presenta el texto sin repetirlo. La medida angosta la deja en dos o tres renglones, a la vista junto al titular.

--arche-layout-measure-narrow

Esta es la medida de lectura: Piazzolla a 17 px en 55ch, unos 578 px, que dan alrededor de 75 caracteres por línea (el ch es el ancho del «0», más ancho que el promedio de las letras). Un renglón más largo obliga a buscar el comienzo del siguiente; uno más corto corta la frase antes de tiempo. Con este ancho, el ojo vuelve al margen sin perderse y el párrafo respira sobre el vacío.

--arche-layout-measure-reading

Radios

Esquinas casi rectas. Los controles usan 2 px y las tarjetas y diálogos el doble, 4 px. Los radios grandes no son parte del sistema.

  • --arche-radius-none 0 px

    Tablas, separadores y bordes que tocan otro borde.

  • --arche-radius-md 2 px

    Controles: botones, campos, casillas, badges.

  • --arche-radius-lg 4 px · md × 2

    Tarjetas, diálogos, menús y avisos.

  • --arche-radius-full 9999 px

    Píldoras, avatares, puntos y switches.

Brillo y elevación

En el vacío la sombra sola no alcanza: lo que sube se aclara, gana borde y emite un brillo tenue. La intensidad va de 0 a 3 y Arche usa 1. Cambiarla en un contenedor con data-glow recalcula todos los brillos dentro de él.

1 Tenue
  • --arche-glow-focus

    Anillo de foco completo para box-shadow: separación del fondo, aro y halo.

  • --arche-glow-focus-halo

    Solo el halo del foco. base.css lo usa junto al outline, que dibuja el aro.

  • --arche-glow-focus-field

    Foco de un campo de solo línea: una línea de 1 px del foco bajo el borde inferior (que también toma el color del foco, así la línea queda de 2 px) y un halo que cae hacia abajo.

  • --arche-glow-danger-field

    Foco de un campo inválido: el borde inferior toma el color del foco y esta sombra suma debajo la línea de 1 px y el halo de glow.focus-field, en danger.

  • --arche-glow-hover

    Halo de hover de controles secundarios.

  • --arche-glow-primary

    Halo de la acción principal en hover.

  • --arche-glow-selected

    Halo de una selección.

  • --arche-glow-text

    Brillo de titulares (text-shadow).

Capa flotante

Diálogos, menús y avisos: surface-overlay, borde border y un halo de luz que crece con la intensidad.

--arche-elevation-overlay

Capa flotante: borde, sombra y un brillo tenue. En el vacío la sombra sola no alcanza.

El anillo de foco también está vivo: recorre la página con Tab. La luz de fondo usa la intensidad de la raíz, así que no cambia con este control.

Movimiento

Transiciones cortas con una sola curva, y una luz de fondo que respira en un ciclo de 12 segundos. Con movimiento reducido las duraciones pasan a 0,01 ms (instantáneas, pero los eventos de fin de transición se siguen disparando) y la luz se queda quieta.

Duraciones

  • --arche-duration-fast 120 ms

    Hover, cambios de color y de borde.

  • --arche-duration-base 160 ms

    Foco, casillas, switches y pestañas.

  • --arche-duration-slow 240 ms

    Paneles, menús y avisos que entran o salen.

  • --arche-duration-breathe 12.000 ms

    Ciclo de la luz de fondo, de ida y vuelta. Corre siempre, salvo con movimiento reducido.

Curvas

  • --arche-easing-standard cubic-bezier(0.2, 0.7, 0.2, 1)

    Entra rápido y se asienta despacio: la curva de todas las transiciones.

  • --arche-easing-breathe cubic-bezier(0.45, 0, 0.55, 1)

    Ida y vuelta suave de la luz de fondo.

Capas de apilamiento

Una escala fija de z-index con saltos de 100 entre capas flotantes, para que nada compita por el número más alto.

CapaVariableValorUso
base--arche-z-index-base0Contenido normal del documento.
raised--arche-z-index-raised10Lo que se superpone dentro del flujo: una fila arrastrada, una cabecera de tabla fija.
dropdown--arche-z-index-dropdown1000Listas desplegables dentro del flujo, sin portal.
sticky--arche-z-index-sticky1100Barras que quedan fijas al hacer scroll.
overlay--arche-z-index-overlay1200Velo detrás de un diálogo o de un panel lateral.
modal--arche-z-index-modal1300Diálogos y paneles laterales.
popover--arche-z-index-popover1400Popovers, menús, listas de combobox y calendarios, también cuando se abren desde un diálogo o una cabecera fija.
toast--arche-z-index-toast1500Avisos temporales.
tooltip--arche-z-index-tooltip1600Tooltips: siempre por encima de todo.

Fuente: src/lib/tokens/tokens.json. Valores por producto y contrastes: src/lib/tokens/resolved.json. CSS por producto: src/lib/styles/products/<producto>.css. Todo se genera con npm run tokens.