Sistema de Diseño · v2.0 · Abril 2026
Brand System
AKRIBIS
Documentación viva del sistema de identidad visual, tokens de diseño y componentes de la unidad comercial ancla del ecosistema.
01 — Posicionamiento visual
Precisión Escandinava
AKRIBIS se siente como una compañía de instrumentación de alto nivel: clara, serena, precisa, profundamente confiable. La referencia es la sofisticación contenida — diseño nórdico, jerarquía impecable, luz, calma y exactitud.
Función guía forma
Cada decisión visual debe mejorar comprensión, legibilidad, confianza o velocidad de uso.
Alta gama silenciosa
La calidad se expresa con proporción, espaciado, tipografía y contraste — no con exceso de recursos.
Menos gesto, más sistema
Menos efectos, menos dramatismo. Más orden, más sistema, más coherencia.
Tecnología humana
B2B sí, fría no. La interfaz debe sentirse inteligente, estable y cercana.
Claridad antes que espectáculo
El sitio comunica autoridad técnica antes que personalidad expresiva.
Consistencia sobre ocurrencias
Un componente correcto y repetible vale más que una sección brillante pero aislada.
Checklist anti-deriva — verificar antes de cerrar cualquier tarea visual
02 — Sistema de color
Paleta de tokens
El color de marca y primario del sistema es #005e6e. Todo el sistema se construye alrededor de este valor. Se usa con disciplina — reservado para momentos de intención, no como relleno decorativo.
Primario
Primary
#005e6e
--color-primary
Primary Hover
#004f5d
--color-primary-hover
Primary Active
#004652
--color-primary-active
Primary Soft
#e7f3f5
--color-primary-soft
Primary Soft 2
#d6ebee
--color-primary-soft-2
Neutros y superficies
Canvas
#f7f8f8
--color-canvas
Surface
#ffffff
--color-surface
Surface Subtle
#f1f3f4
--color-surface-subtle
Surface Muted
#e8ecee
--color-surface-muted
Surface Tech
#eef4f5
--color-surface-tech
Line Subtle
#d8dfe3
--color-line-subtle
Line Strong
#c3ccd1
--color-line-strong
Text Strong
#162126
--color-text-strong
Text Body
#334047
--color-text-body
Text Muted
#60717a
--color-text-muted
Estados
Success
#1d6b57
Warning
#8a6a1f
Danger
#a63f3f
Info
#0f5f8f
Bordes y sombras
Hairline técnica
1px solid rgba(22,33,38,0.08) Borde de input
1px solid #d8dfe3 Borde focus
1px solid #005e6e Shadow XS
0 1px 2px rgba(16,24,28,0.04) Shadow SM
0 6px 18px rgba(16,24,28,0.06) Shadow MD
0 14px 32px rgba(16,24,28,0.08) 03 — Tipografía
Escala tipográfica
Exacta, limpia y moderna. Titulares con tensión controlada, cuerpo muy legible y neutro. Pesos medios y semibold antes que bold extremo.
Headings — Manrope
Instrumentación de precisión para la industria regulada.
UI & Body — Inter
AKRIBIS no solo provee sensores — calibra los instrumentos, cualifica los ambientes donde operan y monitorea en tiempo real los parámetros críticos de proceso.
display-xl
64/68 · Manrope 600 · −0.03em
display-lg
48/52 · Manrope 600 · −0.025em
headline-xl
36/42 · Manrope 600 · −0.02em
headline-lg
28/34 · Manrope 600 · −0.015em
headline-md
22/28 · Manrope 600 · −0.01em
title-md
18/26 · Inter 600
body-lg
18/30 · Inter 400
body-md
16/28 · Inter 400
body-sm
14/22 · Inter 400
label-md
13/18 · Inter 600
label-sm
12/16 · Inter 600 · +0.02em
meta-xs
11/14 · Inter 600 · +0.04em
04 — Logotipo
Identidad AKRIBIS
Positivo en #005e6e sobre fondos claros. Negativo en blanco sobre fondos oscuros. Nunca en gris, nunca con contorno de color ajeno al sistema.
05 — Botones
Sistema de botones
Sin gradientes como tratamiento por defecto. Radio 8px. Hover oscurece el primario, no brilla. Tres variantes: sólido, ghost y texto.
Primario — fondo sólido #005e6e
Ghost — borde primario semitransparente
Texto — underline con opacidad controlada
06 — Inputs y formularios
UI de formularios
Fondo blanco, borde sutil real, labels arriba del campo, altura 48px, focus con halo suave. La UI de formularios debe transmitir confianza operativa.
07 — Cards
Tarjetas de contenido
Cuatro variantes según el contexto: estándar, técnica, industrial y de producto. Todas respetan la jerarquía de información.
Metrología
Calibración con trazabilidad al SI
Laboratorio AKRIMET, reconocido por el OAA (RE-016). Certificados de calibración trazables.
Ver servicio →Instrumentación
Temperatura · Humedad · Presión
Más de 2.000 referencias disponibles para la industria regulada.
Explorar Productos →Temperatura
Sensor PT100 · Clase A
±0.15°C · IP68 · 4–20 mA
08 — Elementos de UI
Pills, tags, filtros, breadcrumb y selector
Lectura antes que decoración. Compactos, coherentes y escalables a cualquier sección del sitio.
Pills y badges
Filter bar
Breadcrumb
Selector de industria
10 — Hero
Hero de muestra
Textura técnica muy sutil, overlay sobrio, titular con tensión controlada, dos CTAs limpios, uso focal del teal. Sin gradientes teatrales.
12 — Motion
Tokens de movimiento
El movimiento debe reforzar precisión, no entretener. Si la animación llama más la atención que el contenido, sobra.
Duración rápida
160ms Hover, focus, microinteracciones
Duración base
220ms Transiciones de estado, paneles
Easing
cubic-bezier(0.4, 0, 0.2, 1) Aceleración estándar del sistema
Micro-lift
translateY(-1px) Solo en hover de botones primarios
Fade de panel
opacity + translateY(-4px) Megamenú y dropdowns
Reducción motion
prefers-reduced-motion Transiciones desactivadas — obligatorio
13 — Reglas visuales
Do / Don't
Reglas que protegen la coherencia del sistema y la identidad de AKRIBIS como marca de instrumentación premium con sensibilidad nórdica.