CTA Signature
#FECE00 --color-brand-yellow
Brand Yellow
Uso exclusivo para la accion principal, la firma de marca y puntos de decision de alto valor.
Design Engineering
Sistema visual real.
Sin elementos heredados.
Esta referencia se alinea con la home actual y documenta solo tokens, superficies y patrones que existen hoy en el producto.
Que cambio
Se depuro la pagina para reflejar el sistema que realmente usa la home.
Se reescribieron secciones que documentaban una capa obsoleta, especialmente donde la pagina hablaba de utilidades o patrones que ya no son la fuente principal del diseno.
Principios
01. Principios de actualizacion
Antes esta pagina mezclaba documentacion util con decisiones visuales heredadas. Ahora sirve como referencia viva del sistema vigente.
Sistema real, no mock visual
Esta pagina documenta componentes y tokens activos del sitio. La referencia principal vive en la home y servicios; global.css centraliza los patrones reutilizables.
Glassmorphism 2.0 oscuro luminoso
El contraste nace de profundidad oscura, glass controlado, bordes luminosos y glows amarillos, cian y violeta sin saturar la interfaz.
El acento guia la accion
El amarillo de marca se reserva para CTAs, bordes activos, highlights y senales de foco. Puede brillar mas, pero nunca competir con el contenido.
Sin estilos inline
Las decisiones visuales transversales se expresan como clases semanticas. No se usan style attributes para tamanos, paddings, colores, opacidades o custom properties visuales.
Cromatica
02. Sistema cromatico
Los fondos construyen profundidad. El amarillo firma intencion. Los tonos de atmosfera solo viven en glows y niebla visual.
Base Depth
#0A0A0B --color-primary
Primary
Fondo absoluto del producto. Crea la capa mas profunda del sistema visual.
Surface Base
#111214 --color-secondary
Secondary
Superficie principal para cards, bloques de contenido y contenedores estructurales.
Elevated Layer
#17191D --color-elevated
Elevated
Capa para elementos que necesitan mas separacion visual: inputs, paneles y cards elevadas.
--color-content
Content
#F5F7FA Headings, cifras y puntos de maxima legibilidad.
--color-content-secondary
Content Secondary
#B8C0CC Subtitulos, parrafos principales y copy descriptivo.
--color-content-muted
Content Muted
#7E8794 Metadatos, ayudas contextuales y senales de baja prioridad.
Atmosphere only
Mist Blue
#7DD3FC Atmosphere only
Deep Indigo
#312E81 Atmosphere only
Violet Glow
#6D28D9 Atmosphere only
Cyan Trace
#22D3EE Tipografia
03. Tipografia activa
Inter Tight concentra el peso visual. Open Sans sostiene la lectura. La pagina evita pesos innecesarios en copy de cuerpo.
Display family
Inter Tight
Titulares, bloques de autoridad y navegacion jerarquica. El sistema prioriza pesos 700 y 900 con tracking negativo controlado.
H1 / Hero
Arquitectura visual con intencion.
H2 / Section
Diseno, sistema y ejecucion.
Body family
Open Sans
El cuerpo del sitio se mantiene ligero y aireado. El objetivo es que el texto acompane, no compita con la jerarquia principal.
El cuerpo del sitio respira en pesos ligeros y mantiene una lectura controlada. La sensacion debe ser precisa, sobria y directa.
Copy descriptivo y lectura extendida con prioridad en claridad.
Espaciado
04. Ritmo y geometria
El sistema usa tokens de espacio y radios predefinidos. La meta es evitar ajustes arbitrarios y mantener un ritmo reconocible entre paginas.
Spacing scale
--space-2 separaciones inline y micro gaps
8px
--space-4 padding interno corto y detalle de componentes
16px
--space-6 padding mobile y separacion de bloques
24px
--space-8 espaciado base entre componentes
32px
--space-12 secciones internas y pares de contenido
48px
--space-24 respiracion vertical de seccion
96px
--space-32 respiro amplio en piezas hero o cierres
128px
Radius scale
--radius-full 9999px botones, badges y tags
--radius-card-sm 24px cards elevadas y FAQ shell
--radius-card 36px cards estandar
--radius-card-lg 52px MistCard wrapper
--radius-card-xl 55px contenedores hero especiales
Acciones
05. Botones y decisiones
El patron actual evita CTAs inflados. La accion principal tiene una unica voz visual; las secundarias acompanan sin competir.
Principal
Conversion directa
Fondo brand yellow, texto oscuro y hover hacia blanco. Debe existir uno por vista principal.
Iniciar proyecto Secundario
Exploracion guiada
Borde visible, fondo transparente y respuesta suave. Ideal para navegacion de apoyo.
Ver portafolio Ghost
Utilidad silenciosa
Superficie elevada translucida para acciones contextuales o acompanamiento de contenido.
Superficies
06. Superficies y profundidad
La jerarquia nace de bordes, blur y radios consistentes. La MistCard sigue siendo la pieza premium; las cards elevadas resuelven contenido estructural.
MistCard
Superficie premium con borde atmosferico
Wrapper grande, inner oscuro y glow sutil en hover. Este patron es parte activa del lenguaje visual de la home.
Card Elevated
Contenedor operativo
Ideal para listas, bloques de soporte y modulos donde la claridad pesa mas que el dramatismo visual.
Fondo `--color-elevated`
Radio `--radius-card-sm`
Hover minimo y borde controlado
Feedback
07. Estados y comunicacion
La UI evita ornamento excesivo. Los estados informan con claridad y se apoyan en contraste, no en saturacion visual gratuita.
Warning
Accion requerida
El amarillo informa prioridad, pero no sustituye al CTA principal.
Success
Confirmacion silenciosa
El verde aparece de forma puntual y nunca domina la composicion general.
Error
Bloqueo o fallo
El rojo se reserva para errores reales y mensajes de ruptura de flujo.
Que se elimino de esta version del design system?
Se retiraron estilos inline y referencias a patrones locales como fuente primaria. La documentacion ahora prioriza clases semanticas de global.css consumidas por la home y servicios.
Que debe usarse primero al construir nuevas paginas?
SectionTag, Button, Heading, MistCard, FaqAccordion y las primitivas section, container-wide, section-heading, surface, btn modifiers, stack-* y row-*. Solo despues conviene anadir estilos locales si la composicion es unica.
Que patron visual ya no deberia duplicarse?
content-heading, cta-heading, service-card--glass, svc-title y svc-body como patrones de pagina. La direccion actual usa section-heading, surface y modificadores de boton globales.
Movimiento
08. Movimiento premium
La animacion acompana la lectura. Se privilegian fades suaves, transforms minimos y respeto completo por `prefers-reduced-motion`.
Reveal
Entradas con `y: 20px -> 0` y `opacity: 0 -> 1` como patron base.
power4.out · 0.6s-0.9s Mist
Glows lentos en background, con blur alto y movimiento casi imperceptible.
sine.inOut · fondo solamente Interaccion
Hover de 1px, bordes mas visibles y ligera elevacion. Sin rebotes agresivos.
transition-base / slow Layout
09. Composicion y contenedores
Se elimino la referencia a "Tailwind como sistema responsive". La composicion actual se apoya en primitivas semanticas de `global.css`.
Primitivas activas
.section Primitiva base de espaciado vertical y horizontal responsive.
.container-wide Contenedor estandar para paginas de alto ancho visual.
.grid-cols-2 / 3 / 4 Grids predefinidos para composicion sin utilidades ad hoc.
.stack-* / .row-* Primitivas de ritmo vertical y horizontal usadas en la home.
Comportamiento
El sistema escala por breakpoint dentro de las propias primitivas. Esto reduce CSS ad hoc y mantiene una huella visual consistente entre paginas.
Branding
10. Firma visual
El logotipo convive con el sistema, no lo sobrecarga. La marca se siente por el control visual general y por un uso medido del amarillo.
Version sobre fondo oscuro 
Uso principal en navegacion, hero y bloques de alto contraste.
Activos complementarios 
Versiones para fondos claros y aplicacion compacta de marca.
Tokens
11. Tokens y patrones activos
Esta seleccion resume la base util para nuevas pantallas. Son tokens y clases que ya estan en produccion dentro del sitio.
Colors
9 entradasTypography
5 entradasSpacing & Radius
8 entradasComponents
7 entradas Copiado al portapapeles