Inicio/Design System
Design System

El equilibrio que buscas.

Tokens, patrones y componentes reutilizables que dan consistencia a la web Crillón.

Tokens · Color

Azul carga identidad.

El gris stone carga la estructura. El amarillo solo enfatiza — nunca como fondo de sección.

Brand · Azul

blue-50#F2F6F9
blue-100#E3ECF2
blue-500#1B5480
blue-600#0F4671
blue-700#0A3A5C
blue-800#073049

Stone (warm gray)

gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

Yellow · solo emphasis

yellow-100
yellow-400
yellow-500
yellow-700

Status

Entrega inmediata Venta en verde Venta en blanco Próximamente
Tokens · Tipografía

Strawford + General Sans.

Strawford Light 300 carga títulos editoriales. General Sans humanista carga UI y body. DM Mono se reserva para metadata.

display · 84px

El equilibrio que buscas.

hero · 60px

Vivir en el parque.

h1 · 44px

Edificio Los Cipreses.

h2 · 32px

Tenemos un depto. para ti.

lead · 20px

Desarrollo inmobiliario pensado como ciudad: viviendas a escala humana, áreas verdes reales y una comunidad de más de 2.700 familias.

body · 16px

Texto base. General Sans regular 400, con feature settings 'ss01' y 'cv11' para una experiencia humanista neutra que deja respirar al titular.

eyebrow · 11px mono Por qué Crillón
price · tabular-nums

UF 6.750

Componentes · Button

Variantes del botón.

<Button variant="primary | secondary | yellow | light | ghost" arrow href="..." />

primary
secondary
yellow
light
ghost
Componentes · StatusBadge

Estados de proyecto.

Pill mono uppercase. Solo se usa en cards de proyecto.

Entrega inmediata Venta en verde Venta en blanco Próximamente
Componentes · ProjectCard

Card de proyecto.

Variantes lg, md, sm para grids asimétricos de 12 columnas.

Entrega inmediata Edificio Los Cipreses
Peñalolén, RM

Edificio Los Cipreses

3 dorm 104–147 m²
Desde UF6.750
Entrega inmediata Edificio Los Olmos
Peñalolén, RM

Edificio Los Olmos

3 dorm 131–271 m²
Desde UF7.300
2.700+

Familias

Confían en Crillón desde 1995.

1995

Trayectoria

Visión de ciudad y largo plazo.

+30

Proyectos

Foco exclusivo en Peñalolén.

¿Por qué Crillón?

Cuatro principios que aplicamos en cada proyecto desde 1995.

01

Equilibrio urbano

La ciudad como sistema.

02

Escala humana

Proporción entre construido y abierto.

03

Construidos para perdurar

Valor que se ve 10 años después.

04

Trayectoria con propósito

Tres décadas priorizando bienestar.

Editorial split

Componente EditorialSplit.

Patrón de dos columnas (5fr 7fr o invertido). Texto a un lado, figura al otro. Eyebrow + título + párrafo + link son los elementos típicos.

Ver otros patrones →
Parque Cousiño desde el aire
Parque Cousiño Macul −33.4891 · −70.5437
Componente

CTAStrip cierra con un primario azul.

Acción primaria → Acción secundaria
¿Tienes dudas?

Conversa con nosotros.

Nuestra agente virtual puede contarte todo sobre nuestros proyectos, opciones de financiamiento y los beneficios que tenemos para ti — cuando quieras y a tu ritmo.

Habla con Carolina IA → Conversa con un ejecutivo →
Page-scale primitives

Componentes de página completa.

Patrones que ocupan secciones enteras. Cada uno encapsula su markup + CSS y se importa desde '@/components/ds'. Click en el link para ver en contexto.

  • HomeHero — video bg + h1 + lead + CTA. Ver en /
  • HomeProjects — header + filter pills + slot para ProjectCards. Ver en /#proyectos
  • WhyCrillon — sección oscura blue-700 con grid de PillarCards. Ver en /#porque
  • EditorialSplit — 5fr/7fr con texto + figura. Ver en /
  • DualBanner / Banner — dos banners con bg image. Ver en /
  • StatsBand / StatCard — banda de stats 3-col (variant home) o 4-col (variant barrio). / · /el-barrio
  • CTAStrip — cierre de página con primary + secondary buttons. /
  • CarolinaCTA — sección oscura azul con CTA WhatsApp Carolina IA. /proyectos/*
  • ProjectHero — hero de página de proyecto con badges + specs card. Ver en /proyectos/*
  • ProjectSubNav — sticky tabs + actions con scroll spy. /proyectos/*
  • ProjectIntro — 5fr/7fr eyebrow + sec-title + sec-lead. /proyectos/*#proyecto
  • TipIntro — media bg + body + trio de subitems. /proyectos/*
  • PillarsNum — pillars numerados alternando lado de imagen. /proyectos/*
  • BienestarSection — fondo blue-800. Soporta amenities (stage interactivo), addons (cards 2x2 con partner logos) y community tabs. Branchea por props. Ver con amenities · Ver con addons
  • PlantasSection — wrapper con header + slot para el cotizador React (Mobysuite). /proyectos/*#tipologias
  • UbicacionSection — 5fr/7fr con cobranding Parque Cousiño + map image + pc-badge overlay. /proyectos/*#ubicacion
  • BarrioHero — hero PC-cobranded con overlay verde. Ver en /el-barrio
  • BarrioIntro — 5fr/7fr con sticky col + pc-card. /el-barrio
  • BarrioStats — 4-col stats con accent verde Parque Cousiño. /el-barrio
  • CareList — 5fr/7fr lista numerada con dots verdes. /el-barrio
  • BarrioCTAFinal — CTA dark con botón amarillo + PC strip. /el-barrio
Tokens (typed)

Importa desde '@/components/ds': { blue, gray, yellow, status, surface, fg, border, fontFamily, fontWeight, fontSize, lineHeight, tracking, space, radius, shadow, motion, layout, accents }. Espejo TS de las CSS custom properties de global.css :root.