CCS·UI Kit
Sistema de diseño · v1.0

Kit UI para la Cámara de Comercio de Santiago

Componentes, tokens y patrones construidos con Tailwind CSS — alineados con la identidad institucional de la CCS: claridad, solidez y modernidad.

Explorar el kit Ver componentes
Componentes
42+
Tokens
68
Breakpoints
4
CCS·Identidad
#003DA6 → #00D700
Banner Institucional
Solidez, dinamismo
y confianza.
01 · Fundamentos

Tokens del sistema

Las decisiones primitivas que sostienen todo el kit: paleta, tipografía Work Sans, iconografía con gradiente, radios y sombras institucionales.

Color

Azul institucional dominante, con acentos verdes para refuerzo y vitalidad.

Primarios
Azul CCS
#003DA6
RGB 0 / 61 / 166 · PANTONE 2728 C
Verde CCS
#3DAE2B
RGB 61 / 174 / 43 · PANTONE 361 C
Secundarios
Azul medio
#0056CA
PANTONE 285 C
Azul claro
#3A8DDE
PANTONE 2925 C
Verde brillante
#00D700
PANTONE 802 C
Neutros
Ink#0B1B3D
Slate#475569
Line#E5E9F0
Bg#F6F8FC
Paper#FFFFFF
Gradientes institucionales
Banner
linear-gradient(90deg, #00D700 → rgba(0,86,202,.93))
Icono
linear-gradient(180deg, #00D700 → #3A89DA)

Tipografía · Work Sans

Una sola familia, cinco pesos. Geométrica, contemporánea, legible en pantalla e impresión.

Estilo
Peso
Tamaño
Muestra
Display
Semibold · 600
56 / 60
La CCS
H1
Semibold · 600
40 / 48
Titular principal
H2
Semibold · 600
28 / 36
Sección
H3
Medium · 500
20 / 28
Subtítulo
Body L
Regular · 400
18 / 28
Texto destacado, intros y bajadas.
Body
Regular · 400
16 / 24
Texto corrido para párrafos generales del sitio.
Caption
Medium · 500
12 / 16
Etiqueta · Categoría
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700

Iconografía

Íconos sólidos rellenos con gradiente vertical verde → azul. Tamaños 24, 32, 48 y 64px.

institución
socios
documentos
eventos
beneficios
estadísticas
contacto
compliance
24px
32px
48px
64px

Forma y sombra

Esquinas suaves y profundidad discreta — sin estridencias.

Card estándar
radius: 15px
shadow: 1px 3px 20px -2px rgba(0,0,0,.15)
Control / Input
radius: 8px
shadow: 0 1px 4px rgba(11,27,61,.06)
Chip / Pill
02 · Acción

Botones

Guían acciones. Visibles, accesibles y coherentes con la identidad.

Primarios
Secundarios
Acentos
Tamaños
Solo ícono
Grupo segmentado

Tags & Badges

Etiquetas para categorizar contenido, estados y filtros.

Comités Sostenibilidad En revisión Urgente Borrador Activo Pendiente Cerrado Premium
04 · Contenido

Cards & superficies

Los bloques de información del sitio: noticias, eventos, beneficios, estadísticas, testimonios.

Cards de categoría

Diseño

Lineamientos visuales, tipografías, colores y maquetas para una identidad coherente.

Ver más

Desarrollo

Código fuente, estructura del proyecto y estándares técnicos para mantención.

Ver más

Componentes

Piezas reutilizables (botones, cards, módulos) para consistencia y eficiencia.

Ver más

Cards con imagen (Noticias / Eventos)

FOTO · Evento 16:10
Noticia · 12 May 2026

CCS impulsa nueva agenda digital para el comercio chileno

El gremio presentó lineamientos para acelerar la transformación digital de las pymes durante 2026.

Leer más →
FOTO · Evento 16:10
Jun
18
Evento · Auditorio CCS

Cumbre eCommerce 2026

El encuentro más importante del comercio electrónico de la región vuelve este año.

Cupos abiertos
FOTO · Estudio
Estudio · Q1 2026

Índice de confianza empresarial

Informe trimestral con la percepción del sector comercio y servicios.

Cards de estadísticas

Socios activos
3.420
+12,4% YoY
Comités
28
Sectores representados
Eventos · 2026
147
32 próximos
Asistentes
42K
acumulados al Q1

Cards especializadas

La CCS ha sido clave para articular conversaciones críticas del comercio nacional con una mirada moderna y rigurosa.

FOTO
María José Rojas
CEO, Empresa Socia
FOTO RETRATO
Directorio

Andrés Vergara

Presidente · Comité Comercio Electrónico

Comité destacado

Comité de Comercio Electrónico

28 integrantes activos · 12 sesiones anuales

+25

Listas

Bulleted, numeradas, con íconos y de definición.

Bulleted
  • Identidad institucional clara y consistente.
  • Jerarquía visual bien definida.
  • Facilidad de navegación en cualquier dispositivo.
  • Contenido al servicio del usuario.
Numerada
  1. 1Definir lineamientos visuales y de marca.
  2. 2Validar tokens con stakeholders.
  3. 3Implementar componentes en Tailwind.
  4. 4Documentar uso y casos.
Con check
  • Acceso al Portal de Socios
  • Suscripción al Boletín Comercial
  • Descuentos en eventos y cursos
  • Espacios de coworking (próximamente)
Definición
Central CCS
+56 2 2360 7000
RedNegocios
+56 2 2835 6842
Boletín Comercial
+56 2 2360 7001
Contacto
contacto@ccs.cl

Tablas

Para directorios, documentos y listados de datos.

Directorio de empresas socias

Empresa Sector Comité Ingreso Estado Acciones
LOGO
Andina Retail SpA
andinaretail.cl
 Retail eCommerce 2019 Activo
LOGO
Verdana Logística
verdana.cl
 Logística Sostenibilidad 2022 Activo
LOGO
Costa Capital
costacapital.cl
 Servicios financieros Sin asignar 2024 Pendiente
LOGO
Polar Foods
polarfoods.cl
 Alimentos Comercio 2016 Inactivo
LOGO
Norte Tecnología
nortetech.cl
 TI & Servicios Innovación 2021 Activo
5 de 117 empresas

Banners

Para destacar campañas, inscripciones y comunicaciones institucionales.

Boletín Comercial

Mantente al día con el comercio nacional.

Suscríbete y recibe semanalmente análisis, oportunidades y novedades regulatorias.

FOTO · Auditorio
Evento destacado

Asamblea Anual de Socios 2026

Encuentro anual donde la institución rinde cuenta y presenta los lineamientos del próximo periodo.

¿Aún no eres socio?
Conoce los beneficios y forma parte de la red gremial líder del país.
05 · Formularios

Inputs & controles

Controles claros, accesibles y consistentes a lo largo del sitio.

Como aparece en tu cédula.
Formato inválido: usa 76.123.456-7
Mínimo 50 caracteres.0 / 500
Intereses
Tamaño de empresa
Notificaciones
Documento (PDF)
06 · Feedback

Alertas y comunicación

Confirma acciones, comunica estados, ofrece ayuda contextual.

Mantención programada · 18 May, 02:00–04:00
El portal de socios estará temporalmente fuera de servicio.
Inscripción confirmada
Recibirás un correo con los detalles del evento.
Tu sesión expirará en 5 minutos
Guarda tus cambios antes de continuar.
No pudimos procesar la solicitud
Revisa los campos marcados e inténtalo nuevamente.

FAQ / Acordeón

Preguntas frecuentes con expansión progresiva.

¿Cómo me hago socio de la Cámara de Comercio?
Completa el formulario de inscripción en línea, adjunta los documentos requeridos y nuestro equipo de RedNegocios contactará a tu empresa dentro de 48 horas hábiles.
¿Qué beneficios incluye la membresía?
Acceso al portal, descuentos en eventos, suscripción al Boletín Comercial, participación en comités y estudios sectoriales.
¿Cómo participo de un comité de trabajo?
Las empresas socias pueden postular representantes a través del Portal de Socios; cada comité define perfil y disponibilidad.
¿Dónde se publican las memorias anuales?
En la sección Nuestra Institución › Memorias. Cada año fiscal incluye PDF descargable y resumen ejecutivo.
07 · Estado & Progreso

Progreso & loading

Indicadores de avance, espera y carga — para procesos largos, flujos por etapas y comunicación de sistema.

Barras de progreso

Lineal con valor conocido, indeterminada y radial.

Lineal · determinada
Perfil de empresa 25%
Documentos legales 62%
Inscripción a comités 100% · completado
Migración de datos 78%
Carga de archivo · contrato-anexo.pdf
2.1 / 4.8 MB
Lineal · indeterminada
Sincronizando con la base de datos…
Procesando solicitud…
Radial · determinada
25%
Perfil
62%
Docs
Listo
74%
Onboarding
Cargando…
Segmentada · multi-categoría
Distribución de socios por sector 3.420 socios
Retail 38% Servicios 24% Logística 18% TI 12% Otros 8%

Stepper · proceso por etapas

Para flujos guiados como inscripción, onboarding o postulación.

Horizontal · numerado
  1. Datos empresa
    Completado
  2. Documentos
    Completado
  3. 3
    Comités
    En curso
  4. 4
    Pago
    Pendiente
  5. 5
    Confirmación
    Pendiente
Compacto · pill
Datos 2 Documentos 3 Pago 4 Confirmación
Vertical · con descripciones
  1. Solicitud enviada
    12 May 2026 · 10:42

    Recibimos tu solicitud de incorporación y la asignamos al equipo de RedNegocios.

  2. Revisión de antecedentes
    En curso · ETA 48h

    Validamos los documentos enviados y la situación tributaria de la empresa.

  3. 3
    Reunión inicial

    Conversación con el equipo de membresía para definir áreas de interés.

  4. 4
    Activación

    Acceso al Portal de Socios y kit de bienvenida.

Spinners & loading states

Indicadores de espera para botones, contenedores y pantalla completa.

Spinners
classic · 48px
classic · 24px
gradient
dots
pulse
on dark
Botones en estado loading
Estado de panel
Cargando empresas…
Esto puede tomar unos segundos
Sin resultados

No encontramos empresas que coincidan con los filtros. Probá ajustar la búsqueda.

Overlay de pantalla completa
Generando reporte
No cierres esta ventana

Skeletons

Placeholders animados mientras se carga el contenido — preservan la jerarquía visual.