Fundamentos, tokens, componentes y UI Kit del sistema de diseño de Extera. Selecciona una tarjeta para abrirla.
Marca principal Extera: construcción, márgenes de seguridad y variantes monocromas.
→Bloques tipográficos de producto junto a la marca maestra.
→Sistema de iconografía (Phosphor Bold): estilo, tamaños y uso de color.
→Las tres familias: DM Sans, DM Serif Display y Courier Prime.
→Jerarquía tipográfica base con tokens de tamaño y line-height.
→Tratamientos display para headlines, covers y la firma serif italic.
→Párrafo, listas y enlaces a 16px / 1.6 con max-width 60ch.
→Paleta core: paper, ink, accent navy y gold.
→Superficies y promociones tonales en modo oscuro (DEC-03bis).
→Acentos navy y dorado, con sus usos puntuales en la composición.
→Comply, Access y Source: colores firma y tints por producto.
→Los 8 estados documentales con triada fg / bg / bd tokenizada.
→Señales semánticas y los 5 niveles de confianza IA.
→Escala no lineal: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 56 / 64 / 80.
→Radios pequeños (0–8px) y sombras restringidas (sm / md).
→Primary, secondary, ghost y destructive, con los 6 estados (idle → pressed).
→Campos, etiquetas, estados focus y mensajes de error.
→Tiles de producto con dot de color y rail inferior de 3px.
→Filas de tabla de contratas con KPI inline.
→Caja navy de highlight y fila de scope «sí / no».
→Tabla de precios con fila de totales en Courier Prime.
→Barra lateral de 240px sticky con marcador activo dorado.
→Fases de proyecto en rail horizontal con cards por fase.
→Franja de certificaciones (ISO 27001, SOC 2, SLA, hosting UE, GDPR) sobre paper-warm.
→Tarjeta de caso anonimizado con eyebrow de sector, problema, métrica y rail de producto.
→Vocabulary hint compacto por sector para la home, sin páginas individuales.
→Duraciones, easings e interacciones; prefers-reduced-motion respetado.
→Fundamentos de dataviz y paleta para gráficos.
→