Chucao, el sistema de diseño de devsChile

Colores

Un fondo oscuro con gradiente sutil, un solo acento vibrante (teal) usado con disciplina, y una paleta de marca separada para uso oficial/impreso.

Sistema web

#100a1c

Fondo base

surface

rgba(32,30,64,.6)

Tarjetas, inputs (con blur)

surface-hover

rgba(45,212,191,.08)

Fondo en hover

border

rgba(255,255,255,.08)

Borde en reposo

border-hover

rgba(45,212,191,.3)

Borde en hover

accent

#2dd4bf

Acento — texto, bordes, botones. Intercambiable por proyecto.

accent-hover

#5ee8d4

positive

#4ade80

Estados positivos / badges "disponible"

text

#ffffff

text-muted

rgba(255,255,255,.55)

Marca oficial (2018)

Huemul — oscuro

#85422b

Pantone 7601 C · RGB 133,66,43

Huemul — claro

#b45b38

Pantone 7585 C · RGB 180,91,56

Trazo / texto

#1d1d1b

Tipografía

Headings en monoespaciada (refuerza el tono "hecho por developers"), body en sans-serif legible. Nunca todo el texto en monoespaciada.

Headings — Inconsolata, 700

Aa Bb Cc 123

<devschile/> Semanario Pegas

Body — Fira Sans

Cada semana pasan cientos de links por los canales de la comunidad y se pierden en el scroll. Nosotros los juntamos, los ordenamos y te los mandamos por correo.

Regular 400 Medium 500 Semibold 600 Bold 700

Logotipo de marca — Fira Mono, medium

<devschile/>

Marca

El huemul con astas de { } y el logotipo <devschile/>. Variantes por fondo: color, contorno blanco, monocromo blanco, y un extra solo-trazo.

Icono — full color SVG

assets/brand/huemul-icono.svg

Sobre fondo claro, sin contorno.

Icono — contorno blanco SVG

assets/brand/huemul-icono-contorno.svg

Sobre fondo oscuro, mantiene los colores con trazo blanco de separación.

Icono — monocromo blanco placeholder

assets/brand/huemul-icono-blanco.svg

Blanco sólido sobre fondo oscuro u oscuro/foto. Este .svg es PNG embebido, no vector.

Icono — solo trazo SVG

assets/brand/huemul-icono-trazo.svg

Extra — no es una de las 3 variantes oficiales de DESIGN.md.

Logotipo SVG

assets/brand/devschile-logotipo.svg

Casi nunca se usa solo — el icono sirve como favicon/avatar.

Favicon

Set completo generado desde el icono, con relleno transparente para no recortar ni deformar el huemul.

favicon-16x16

16 × 16

favicon-32x32

32 × 32

favicon-48x48

48 × 48

apple-touch-icon

180 × 180

android-chrome

192 × 192

android-chrome

512 × 512

favicon.svg

vectorial

favicon.ico

16/32/48 multi-res

site.webmanifest incluye nombre, íconos y colores de tema para instalación como app.

Componentes de referencia

Patrones reusables: tarjeta con acento lateral en hover, botón pill, badge, input con foco en el acento.

Chucao — el sistema de diseño de devsChile

Colores

Sistema web

Marca oficial (2018)

Tipografía

Marca

Favicon

Componentes de referencia

Botón primario

Tarjeta (hover con acento lateral)

🔗 Links de la semana

Input

Badge / pill