Design System

BRUTAL studios

Página de referencia del sistema de diseño. Todos los componentes, tokens y patrones que se usan en el resto del tema. Tokens extraídos directamente de Figma.

Colores

Sistema oficial extraído del sistema de Figma.

Primary

Primary 01 — bs-blue

#5A65E7

Primary 02 — bs-yellow

#FFE700

Secondary — Azul

100

#DEE0FA

200

#BDC1F5

300

#9CA3F1

400

#7B84EC

500

#4851B9

600

#363D8B

700

#24283C

800

#12142E

Secondary — Amarillo

100

#FFFECC

200

#FFFBC5

300

#FFF4A1

400

#FFEC66

Neutral

#FFFFFF

#F2F2F2

#E6E6E6

#CDCDCD

#9A9A9A

#686868

100

#1A1A1A

Backgrounds

Background 01 — bs-bg-dark

#0B0B0B

Background 02 — bs-bg-light

#FFFFFF

Tipografía

Dos familias: Mickon para titulares display, Bricolage Grotesque para cuerpo y UI. Cada clase escala con el viewport mediante clamp().

.text-display

Mickon Bold · 160/158 @ 1920

Brutal display

.text-h1

Mickon Bold · 160/140 @ 1920

No hacemos publicidad

.text-h2

Mickon Bold · 100/96 @ 1920

Servicios brutales

.text-h3

Bricolage Bold · 100/80 +4 @ 1920

Creamos historias

.text-h4

Bricolage Bold · 50/60 @ 1920

Producción de contenido que la gente quiere ver

.text-lead

Bricolage ExtraBold · 45/45 @ 1920

Especialistas en hacer brutalidades.

.text-body-lg

Bricolage ExtraBold · 33/45 @ 1920

Contenido diseñado para entretener, conectar y generar impacto real para las marcas.

.text-body-md

Bricolage ExtraBold · 30/60 @ 1920

Creamos formatos, campañas y proyectos junto a los creadores más relevantes de internet.

.text-body

Bricolage Regular · 20/20 @ 1920

Brutal Studios es un estudio creativo que produce contenido pensado para internet. Combinamos producción premium, creatividad y colaboración con creadores para construir formatos relevantes.

.text-caption

Bricolage Regular · 20/19.5 @ 1920

Caption / etiqueta de soporte

Botones

Tres variantes: primary (azul), secondary (amarillo), ghost.

.btn .btn--primary

Más proyectos

.btn .btn--primary (con flecha arriba)

Hablemos

.btn .btn--secondary

Conócenos

.btn .btn--secondary (con flecha arriba)

Más info

.btn .btn--ghost

Conócenos

Sombras

Tres niveles. Offset-y = 0 intencional — efecto "sticker desplazado" lateral.

.shadow-bs-soft

2px 0 2px rgba(0,0,0,.15)

.shadow-bs-medium

8px 0 4px rgba(0,0,0,.15)

.shadow-bs-strong

16px 0 8px rgba(0,0,0,.20)

Elementos decorativos

Patrones brutalistas: rotaciones, stickers y polaroids.

.sticker

No hacemos publicidad

.rotate-tilt + .sticker

Brutal!

.rotate-tilt-r + .sticker

Conócenos →

.polaroid (con rotación opcional)

Escala responsive

Todos los tamaños se calculan con la fórmula clamp(MIN, calc(SIZE * 100vw / 1920), MAX). Cambia el tamaño de la ventana para verlo en acción — los textos mantienen proporciones del diseño 1920.

Actual viewport size

— px

.text-h2 a este viewport renderiza al tamaño de abajo:

Ejemplo H2