Shield UI Foundation
Documentación visual de tokens, tipografía, paleta de colores y componentes interactivos para mantener coherencia e integridad en la marca.
Paleta de colores (70-20-10)
--color-brand-red
Acento / CTAs (10%)
--color-brand-red-soft
Interacciones sutiles
--color-bg
Blanco Dominante (70%)
--color-surface
Fondo contraste secundario
--color-text-primary
Texto oscuro, jerarquía principal
--color-text-secondary
Párrafos y lectura
--color-border
Divisores y lineas finas (20%)
Tipografía (Inter)
Heading 1 (H1) - Global: 3.7rem / 600 / 1.2em
Control. Precisión. Integral.
Heading 2 (H2) - 3xl
Diseñemos su esquema de seguridad
Heading 3 (H3) - xl
Vigilancia fija y Control
Cuerpo Primario (p) - lg, font-light
Implementamos servicios de vigilancia física, tecnología de monitoreo y protección estratégica para asegurar la continuidad de su operación de forma integral.
Cuerpo Menor (small) - sm
© 2026 Shield Security Services LTDA. Todos los derechos reservados.
Botones Interctivos & Etiquetas (Pills)
Variantes de Botones
Tamaños de Botones
Etiquetas "Pills" / Tags
Contenedores y Tarjetas (Cards)
Componente "Card" Base
Estructura limpia para mostrar unidades pequeñas de información. Posee sombra `shadow-sm` y sube sutilmente a `shadow-md` en hover con transición suave de bordes.
Contenedor Expandible