01

Tokens Foundation

CSS custom properties derivadas del manual de identidad visual.

Colores de Marca

Paleta oficial: primarios, acentos del isotipo y neutros industriales.

--brand-primary

#93BB3C · Verde VALTA

--brand-secondary

#050B07 · Negro Estructural

--brand-accent

#A7242A · Rojo Fortaleza

--brand-warning

#F2EA0C · Amarillo Solar

--brand-olive

#686F56 · Verde Olivo

--brand-concrete

#C5C7C9 · Concreto Fresco

--concrete-dark

#848C8C · Concreto Curado

--brand-off-white

#F4F5F2 · Blanco Cal

--brand-primary:   #93BB3C;
--brand-secondary: #050B07;
--brand-accent:    #A7242A;
--brand-warning:   #F2EA0C;
--brand-olive:     #686F56;
--brand-concrete:  #C5C7C9;

Estados de Dominio

Estados utiles para cotizaciones, entregas y certificaciones de obra.

--status-quoted

Cotizado

--status-scheduled

Programado

--status-delivered

Entregado

--status-delayed

Retrasado

--status-certified

Certificado

--status-quoted:    #686F56;
--status-scheduled: #F2EA0C;
--status-delivered: #93BB3C;
--status-delayed:   #A7242A;
--status-certified: #050B07;

Escala de Espaciado

Base 4px, pensada para layouts respirados y componentes tactiles.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

--space-16 · 64px

--space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem;
--space-8: 2rem;    --space-12: 3rem;  --space-16: 4rem;

Elevacion y Radios

Sombras tintadas con Negro Estructural y radios sobrios.

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
--shadow-lg: 0 10px 15px rgba(5, 11, 7, 0.08);
--focus-ring: 0 0 0 3px rgba(147, 187, 60, 0.5);

02

Tipografia

Playfair Display para voz editorial; Inter para precision tecnica y UI.

Escala de Titulares

H1 · 2.8rem · 900

Concretos con proposito.

H2 · 2rem · 700

Aliado tecnico de cada obra.

H3 · 1.3rem · 600

Ficha tecnica de producto

Body · 1rem · 400

Concreto estructural formulado bajo norma vigente para proyectos de edificacion e infraestructura.

Caption · .82rem · 300

Revenimiento 10 +/- 3.5 cm · Agregado 10 y 20 mm

<h1>Concretos con proposito.</h1>
<h2>Aliado tecnico de cada obra.</h2>
<p class="body-md">Texto tecnico en Inter.</p>

Utilidades de Texto

Body Large — Para descripciones principales y entradas de seccion.

Body Regular — Texto base de interfaces, fichas y documentos.

Body Small — Notas, metadatos y ayuda secundaria.

Label — Etiqueta de campo o dato tecnico.

Overline — Capitulo o categoria

.overline { font: Inter 700 12px; letter-spacing: .18em; }
.label { font-weight: 700; }
.caption { color: var(--gray-600); }

03

Botones

5 variantes, 3 tamanos y estados de carga/deshabilitado.

Variantes

<button class="btn btn-primary">Solicitar cotizacion</button>
<button class="btn btn-secondary">Programar entrega</button>
<button class="btn btn-outline">Descargar ficha</button>

Tamanos y Estados

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-secondary btn-loading">Guardando</button>
<button class="btn btn-outline btn-icon" aria-label="Editar">...</button>

04

Formularios

Inputs, selectores, textarea, busqueda, moneda y controles.

Estados de Input

Nombre de obra

Resistencia

Error * Indica el volumen requerido

Disabled

<div class="form-group">
  <label class="form-label">Nombre de obra</label>
  <input type="text" placeholder="Residencial Los Encinos" />
</div>

Inputs Especiales

Busqueda

Importe estimado

Contrasena

Notas tecnicas

<div class="input-wrapper input-search-wrapper">
  <span class="input-icon-left">...</span>
  <input type="search" placeholder="Buscar..." />
</div>

Controles

Incluye bombeo Requiere aditivo Normal Rapido fraguado Certificado requerido

<label class="switch-row">
  <span class="switch"><input type="checkbox" /><span></span></span>
  Certificado requerido
</label>

05

Badges, Tags y Avatares

Estados semanticos y etiquetas de filtrado.

Badges Semanticos

Exito Advertencia Riesgo Info Neutral

<span class="badge badge-success">Exito</span>
<span class="badge badge-danger">Riesgo</span>

Status de Obra

Cotizado Programado Entregado Retrasado Certificado

<span class="status-badge status-delivered">Entregado</span>
<span class="status-badge status-certified">Certificado</span>

Tags y Avatar

Concreto 250 Bombeo Zona norte VA

<span class="tag">Concreto 250 <button aria-label="Quitar">...</button></span>
<span class="avatar">VA</span>

06

Navegacion

Topbar, nav items, breadcrumbs y tabs.

Topbar

<header class="topbar">
  <img src="Valta_Isotipo.png" alt="VALTA" />
  <nav>...</nav>
</header>

Breadcrumb y Tabs

Resumen de obra

Vista ejecutiva con cliente, ubicacion, volumen contratado, resistencia solicitada y siguiente accion recomendada.

Ficha tecnica

Especificaciones de mezcla: resistencia, revenimiento, tamano de agregado, aditivos y notas de control de calidad.

Entregas programadas

Calendario operativo con ventanas de entrega, volumen por viaje, unidad asignada y estado de cada revolvedora.

Documentos

Cotizacion, orden de compra, remisiones, certificados de calidad y archivos necesarios para cerrar el expediente.

<nav class="breadcrumb" aria-label="Breadcrumb">...</nav>
<div class="tabs" role="tablist">
  <button class="tab active" role="tab" aria-selected="true">Resumen</button>
</div>
<div class="tab-panel active" role="tabpanel">...</div>

07

Cards

Tarjetas editoriales, KPI, estados vacios y bloques tecnicos.

Variantes de Card

Default

Uso general para modulos, listas y contenido de soporte.

Highlighted

Borde superior verde para informacion clave o recomendada.

Dark

Comunicación premium, hero cards o campañas de alto impacto.

<article class="card card-highlighted card-interactive" tabindex="0">
  <h4>Highlighted</h4>
  <p>Contenido clave.</p>
</article>

KPI Card y Empty State

128 m3

Volumen programado esta semana

+18% contra semana anterior

Sin entregas pendientes

Cuando exista una programacion de concreto, aparecera aqui.

<article class="card card-concrete card-interactive kpi-card" tabindex="0">
  <div class="kpi-value">128 m3</div>
  <div class="kpi-label">Volumen programado</div>
</article>

08

Tablas

Busqueda, ordenamiento, acciones por fila y estados de entrega.

Data Table

Folio	Cliente	Obra	Volumen	Estado
#VT-1024	Constructora Norte	Hospital Regional	42 m3	Entregado
#VT-1025	Grupo Alba	Plaza Oriente	28 m3	Programado
#VT-1026	Inmobiliaria Sierra	Torre A	64 m3	Retrasado
#VT-1027	Obra Publica	Puente Sur	96 m3	Certificado

<table>
  <thead><tr><th>Folio</th><th>Estado</th></tr></thead>
  <tbody><tr><td>#VT-1024</td><td>Entregado</td></tr></tbody>
</table>

09

Modales

Dialogos accesibles para formularios, confirmaciones y fichas tecnicas.

Variantes de Modal

Tres tamanos base: confirmacion pequena, formulario medio y ficha tecnica amplia.

<div class="modal-backdrop open">
  <div class="modal-dialog" role="dialog" aria-modal="true">
    <header class="modal-header">...</header>
    <div class="modal-body">...</div>
    <footer class="modal-footer">...</footer>
  </div>
</div>

Reglas de Uso

Modal Formulario

Para capturar datos sin abandonar el contexto: cotizacion rapida, programacion o datos de contacto.

Confirm Dialog

Para acciones irreversibles. El boton destructivo siempre queda como segunda decision visual.

Ficha Amplia

Para presentar datos tecnicos, documentos o resumen de mezcla sin comprimir la informacion.

Escape cierra el modal.
El foco regresa al boton que lo abrio.
Las acciones destructivas explican la consecuencia antes de confirmar.

10

Feedback

Toasts, alert banners, loaders, skeletons y estados de sistema.

Toasts

showToast('success'); // Pedido programado
showToast('danger');  // No se pudo cancelar

Alert y Skeleton

Entrega confirmada
La revolvedora saldra a las 08:30.

Acceso restringido
Confirma maniobras antes de programar.

<div class="alert">Entrega confirmada</div>
<span class="skeleton" aria-hidden="true"></span>

11

Page Layout

Composicion mobile-first para portales, dashboards y paginas comerciales.

Portal / Dashboard

Dashboard operativo

Resumen de concreto programado

<aside class="sidebar">...</aside>
<main class="page">
  <section class="dashboard-grid">...</section>
</main>

Hero Comercial

Concreto premezclado

La mezcla correcta, en el momento correcto.

Sistema editorial para paginas publicas: titulares Playfair, fondo oscuro, acento verde y CTA fuerte.

<section class="hero hero-dark">
  <h1>La mezcla correcta.</h1>
  <button class="btn btn-secondary">Cotizar</button>
</section>

VALTA. Design System