Axiom Observability Matrix
Sistema dark-first técnico/glass: casi-negro cálido, ámbar como acción, coral como énfasis y monospace para jerarquía. Densidad de información clara y ritmo de interfaz.
FUENTE: Axiom-Observability-Matrix-DESIGN.md
Typography
Martian Mono + Atkinson Hyperlegible
Heading system
Martian Mono
Specimen · 300 · 48px · ls −0.03em
Body system
Atkinson Hyperlegible
400 · 15.2px / 25px
This is how body text feels at 18px when applied to a real paragraph block.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%
Colors
Light accent system
Background #FFB454 · Surface #14110B · Text #9C937F / #F2EDE2 · Border #F2EDE2 · Accent #FFB454
Overview
Grid
LayoutGrid
Content widthFull Bleed
FramingGlassy
GridStrong
Buttons
3 styles
Primary#FFB454 · text #161006 · 999px
Radius / pad999px · 14.72px
Components
Reconstruidos · glass
// signal · uptime
99.98%
window 30d · p95 latency 42ms
Spacing
4px base
Eyebrow
Title block
La copy de descripción refleja la medida de línea, el offset del icono y el espaciado del CTA.
Scale
4px5.6px8.8px12.8px14.72px
Gaps · Card padding
8.8px12px16pxcard 15.6–18.2px
Elevation & Depth
Glass
La profundidad se comunica con glass, contraste de borde y recetas de sombra o blur. Mantén esas recetas consistentes en paneles, cards y controles para que la página lea como un solo material.
Técnica · Gradient border shell
Borde de gradiente fino alrededor de la card. Shell exterior con 28px de padding y radio 18px, gradiente linear de rgba(20,17,11,0.85) a rgba(12,10,7,0.7), con la superficie real inset a radio menor para que el gradiente quede como hairline.
Surfacergba(20,17,11,.55)
Border1px rgba(242,237,226,.09)
Shadowrgba(255,180,84,.55) 0 6px 28px -8px
Blur8px · 14px
Shapes
Radius family
Sistema de radio ajustado anclado en 12px y escalado en cards, botones y superficies. La geometría de icono se mantiene compatible con esa silueta de suave a controlada.
12px18px999px
Primary radius12px
Icon treatmentLinear
Do's and Don'ts
Guardrails
Do
Usa la paleta primaria como acento principal para énfasis y estados de acción.
Mantén el espaciado alineado al ritmo de 4px.
Reutiliza el tratamiento glass de forma consistente en cards y controles.
Conserva los radios dentro de la familia 12 / 18 / 999px.
Don't
No introduzcas colores de acento fuera de los roles del core salvo un nuevo estado semántico.
No mezcles recetas de sombra o blur ajenas que rompan el sistema de profundidad.
No excedas la intensidad de motion moderada sin una razón deliberada.
Motion
Moderate
El movimiento se siente controlado y dirigido por la interfaz en texto, layout y transiciones de sección. El timing se agrupa en 300–350ms. Easing favorece ease y cubic-bezier(0.19, 1, 0.22, 1). La coreografía de scroll usa parallax.
Motion levelModerate
Durations300ms · 350ms
Easingcubic-bezier(.19,1,.22,1)
ScrollParallax