RAWSTUDIO — Sistema de Diseño Brutalista v1.0

01

Intención de Diseño

Propósito del sistema

RAWSTUDIO usa el brutalismo no como ornamento, sino como lenguaje de honestidad funcional: cada elemento debe ser legible, reconocible y eficiente bajo uso intensivo de 6-8h/día. El diseño no compite con el contenido; lo sirve.

Principios de diseño

01

Función sobre forma

Los bordes, sombras y tipografía pesada comunican jerarquía, no decoración.

02

Crudo y honesto

Sin gradientes, sin border-radius decorativos, sin sombras difuminadas.

03

Keyboard-first

Todos los estados interactivos son visibles sin puntero. Focus rings obligatorios.

02 — Tokens

Paleta de Color

Primary --color-primary #DD614C

Secondary --color-secondary #DAA144

Text --color-text #111827

Success --color-success #16A34A

Warning --color-warning #D97706

Danger --color-danger #DC2626

Surface --color-surface-raised #F5F5F0

Ratios de contraste WCAG 2.2 AA

Combinación	Ratio	Nivel	Uso
#fff sobre #111827	16.8:1	AAA	Texto principal sobre fondo oscuro
#fff sobre #DD614C	3.9:1	AA (texto grande)	Solo en botones ≥18px/700 o ≥14px/700
#111827 sobre #fff	16.8:1	AAA	Texto body, labels, inputs
#111827 sobre #DAA144	5.9:1	AA	Badges warning, botón secondary
#fff sobre #16A34A	4.6:1	AA	Badges success

03 — Tokens

Escala Tipográfica

Familias tipográficas

Rol	Familia	Uso
Primary	Darker Grotesque	UI, headings, labels, botones
Mono	JetBrains Mono	Código, tokens, timestamps, IDs

Pesos disponibles

400 Body text regular

600 Semibold labels

700 Bold botones/nav

800 Extrabold headings

900 Black display titles

Escala de tamaños

--text-6xl / 60px
Weight 900 / Display RAWSTUDIO

--text-4xl / 36px
Weight 900 / H1 Gestión de Proyectos

--text-3xl / 30px
Weight 800 / H2 Dashboard de Producción

--text-2xl / 24px
Weight 800 / H3 Estado de Proyectos

--text-xl / 20px
Weight 700 / H4 Equipo de producción asignado

--text-base / 16px
Weight 400 / Body Texto de cuerpo para descripciones y contenido extendido de la plataforma.

--text-sm / 14px
Weight 500 / UI Etiquetas de interfaz, celdas de tabla, texto de navegación

--text-xs / 12px
Weight 700 / Micro LABELS • CATEGORÍAS • METADATOS DE PROYECTO

04 — Tokens

Escala de Espaciado

--space-1 / 4px

Gaps mínimos, separadores inline

--space-2 / 8px

Padding xs, gap entre badge e icono

--space-3 / 12px

Padding botón sm, celda tabla compacta

--space-4 / 16px

Padding botón base, padding celda tabla

--space-6 / 24px

Padding card, gap entre secciones

--space-8 / 32px

Margen secciones, padding contenedor

05 — Componentes

Botones

Intención: Los botones en RAWSTUDIO deben comunicar acción inequívocamente mediante peso visual (borde 2px + sombra offset). El estado active simula pulsación física desplazando la sombra. Solo se admiten 0px de border-radius.

Variantes de botón

Tamaños

Estados del botón primario

Default Acción

Hover Acción

Focus visible Acción

Active Acción

Disabled Acción

Propiedad	Token / Valor	Estado
padding	`--space-3 --space-6` (12px 24px)	Default
font-weight	700	Todos
font-size	`--text-sm` (14px)	Default
letter-spacing	0.08em	Todos
border	2px solid `--color-black`	Todos
box-shadow	`--shadow-sm` (3px 3px 0 #111827)	Default
box-shadow	`--shadow-md` (4px 4px 0 #111827)	Hover
box-shadow	none	Active
transform	translate(-1px, -1px)	Hover
transform	translate(2px, 2px)	Active
opacity	0.45	Disabled
outline	3px solid `--color-primary`	Focus-visible
outline-offset	2px	Focus-visible

06 — Componentes

Inputs y Formularios

Intención: Los inputs deben ser inconfundiblemente editables. El borde negro 2px delimita el área de entrada; el estado focus revela el color primario + sombra offset. Los labels en mayúsculas tiny-caps identifican los campos sin ambigüedad para usuarios de power-user.

Estados de input

Nombre del proyecto * Nombre único visible en el dashboard.

Directora de producción Usuario asignado al proyecto.

Presupuesto (€) * ⚠ Introduce un número válido.

Select y textarea

Estado del proyecto

Notas de producción

07 — Componentes

Tarjetas

Proyectos activos

14

En producción este mes

▲ +3 vs. mes anterior Jun 2026

Nike — Spot TV Q3

Estado En edición

Directora Sara Gómez

Presupuesto €124,000

Entrega 18 Jul 2026

Resumen presupuestario

€832K

Facturación total Q2 2026

Producción€540K

Post-producción€292K

08 — Componentes

Badges y Etiquetas

Variantes de badge

Borrador En producción Entregado Revisión Bloqueado

Uso en contexto — lista de proyectos

Mahou — Serie documental En producción

Samsung — Lanzamiento Galaxy Revisión cliente

BBVA — Spots digitales Q2 Entregado

Inditex — Campaña FW26 Bloqueado

09 — Componentes

Tablas de datos

Intención: Las tablas son el corazón del dashboard de RAWSTUDIO. Cabecera negra con tipografía blanca en mayúsculas, borde 2px exterior, bordes 1px interiores. Hover sobre filas debe ser sutil (surface-raised), nunca colorido.

Proyecto / Cliente	Directora	Presupuesto	Estado	Entrega
Nike — Spot TV Q3 2026 Ref. PRJ-2026-041	Sara Gómez	€124,000	En edición	18 Jul 2026
Mahou — Documental Craft Ref. PRJ-2026-038	Luis Herrera	€67,500	En producción	02 Ago 2026
Samsung — Galaxy Launch Ref. PRJ-2026-035	Ana Prieto	€210,000	Revisión cliente	10 Jul 2026
BBVA — Spots Digitales Q2 Ref. PRJ-2026-029	Sara Gómez	€89,200	Entregado	30 Jun 2026
Inditex — Campaña FW26 Ref. PRJ-2026-044	Marc Torres	€340,000	Bloqueado	15 Sep 2026

10 — Implementación

Tokens CSS (implementación)

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RAWSTUDIO DESIGN SYSTEM — tokens.css
   React 18 + CSS Custom Properties · v1.0.0
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Color */
  --color-primary:        #DD614C;
  --color-primary-hover:  #C4503C;
  --color-primary-active: #AB3F2C;
  --color-secondary:      #DAA144;
  --color-success:        #16A34A;
  --color-warning:        #D97706;
  --color-danger:         #DC2626;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F5F5F0;
  --color-text:           #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-border:         #111827;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* Typography */
  --font-primary: 'Darker Grotesque', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Shadows — offset nulo blur, identidad brutalista */
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-md: 4px 4px 0 var(--color-border);
  --shadow-lg: 6px 6px 0 var(--color-border);

  /* Focus — accesibilidad WCAG 2.2 AA */
  --focus-ring:        3px solid var(--color-primary);
  --focus-ring-offset: 2px;
}
    

11 — Calidad

Anti-Patrones y Reglas Prohibidas

Color y contraste

Usar --color-primary (#DD614C) como color de texto en body normal (<18px regular) sobre fondo blanco — ratio 3.9:1, no cumple AA para texto pequeño.

Usar --color-primary solo en texto grande (≥18px) o en negrita (≥14px/700), o sobre fondo oscuro. Para texto de body, usar siempre --color-text (#111827).

Añadir gradientes (background: linear-gradient(...)) en botones, cards o fondos. Rompe la estética brutalista y puede reducir el contraste.

Usar únicamente colores planos de los tokens definidos. La jerarquía visual se construye con bordes, peso tipográfico y sombras offset — no con gradientes.

Tipografía y espaciado

Usar border-radius mayor de 0px en botones, inputs, cards o badges. El sistema brutalista prohibe esquinas redondeadas en todos los elementos de UI.

Mantener border-radius: 0 en todos los componentes. Si se necesita diferenciar visualmente un chip informativo, hacerlo con borde o color, no con radio.

Usar sombras con blur (box-shadow: 0 4px 12px rgba(0,0,0,0.15)). Las sombras difuminadas no corresponden al vocabulario visual brutalista.

Usar exclusivamente sombras offset sin blur: --shadow-sm, --shadow-md, --shadow-lg. Simulan profundidad física, no luminosa.

Omitir :focus-visible styles en elementos interactivos. En un dashboard keyboard-first, la ausencia de focus ring hace la interfaz inutilizable sin ratón.

Todo elemento interactivo (botón, input, link, select) debe tener outline: var(--focus-ring) en :focus-visible. Testeable con Tab key en QA.

12 — QA

Checklist de QA para Code Review

Este checklist debe ser ejecutado por el reviewer en cada PR que afecte a componentes de UI. Cada item es testeable mecánicamente, sin ambiguedad subjetiva.

Tokens y estructura visual

Tokens Ningún valor de color hardcodeado (hex/rgb) fuera de tokens.css. Grep: color: # y background: # deben ser 0 resultados.
Sombras Todas las sombras usan --shadow-sm/md/lg/xl. No existe blur en ningún box-shadow del componente.
Border-radius border-radius es 0 o no está declarado. Grep: border-radius: [^0] debe ser 0 resultados.
Tipografía Font-family usa solo --font-primary o --font-mono. No se usa ninguna fuente externa no definida en el sistema.
Espaciado Padding y margin usan tokens de espaciado (--space-*). Se admiten valores derivados de tokens (ej. calc(var(--space-4) * 2)).

Accesibilidad y interacción

Focus-visible Tabular por todos los elementos interactivos: el focus ring (3px solid --color-primary) es visible en todos. No se usa outline: none sin alternativa.
ARIA Inputs con error tienen aria-invalid="true" y aria-describedby apuntando al mensaje de error. Verificar con axe DevTools.
Contraste Ejecutar axe-core o Lighthouse Accessibility. Ratio mínimo 4.5:1 para texto ≤18px regular; 3:1 para texto ≥18px o ≥14px/700.
Disabled Botones deshabilitados tienen disabled nativo O aria-disabled="true" + pointer-events: none. Nunca solo estilos visuales.
Teclado Flujo de acciones principales (crear/editar/eliminar proyecto) completable 100% con teclado. Tab, Enter, Escape deben funcionar sin ratón.

10 checks · 2 categorías

RAWSTUDIO DS v1.0.0 · Brutalismo · WCAG 2.2 AA · React 18 + CSS Custom Properties

WCAG 2.2 AA MIT License v1.0

RAW STUDIO