Sistema de diseño · Fase A

Una sola base para que nada vuelva a salir feo.

Tokens, tipografía y componentes del sello digital. Todo lo que se construya en AddStudio sale de aquí — no de la improvisación de cada página.

01

Color

Paleta oficial del imperio (La Hidra). El oro está excluido por orden permanente.

Navy#1E1B4B
Bolt#38BDF8
Violet#7C3AED
Imperial#4F46E5
Node#C4B5FD
Oro#D4AF37
02

Tipografía

Una sola familia (Inter) con escala fija. Máximo dos familias en todo el sistema.

4xl / 48px / 700Música sin fricción
3xl / 36px / 700Mercado de bloques
2xl / 28px / 600Productores verificados
xl / 22px / 500Un bloque, un precio, una entrega
base / 16px / 400El productor se registra, llena su perfil y la plataforma lanza el trabajo con precio fijado. Cuerpo de texto a 16px con línea de 1.6.
sm / 14px / 400Texto secundario y metadatos de bloques.
xs / 12px / 600 · wideEtiqueta en mayúsculas
03

Componentes

Estados completos: normal, hover, foco, deshabilitado, error. No solo el camino feliz.

Botones

Estados

Aprobado En revisión Pendiente Rechazado

Formulario

Así te verán los compradores.
Debe ser un número.
$180

Beat + mezcla · Trap

Bloque B-1042 · entrega 5 días · 2 revisiones

Comprador
Cliente piloto
Licencia
Sello + % vitalicio

Estado: cargando

04

Movimiento

150–420ms. Todo movimiento comunica jerarquía o estado. Si es decorativo, se elimina.

Hover

Elevación −2px + sombra. 150ms.

Entrada

Fade + rise 12px. 420ms, easing out.

Foco

Anillo bolt de 2px, offset 2px.

05

Reglas duras

Lo que separa "funciona" de "se ve profesional".

✓Escala tipográfica fija. Nada de tamaños inventados.
✕Cinco tamaños distintos de letra en una misma tarjeta.
✓Espaciado en múltiplos de 8px.
✕Márgenes "a ojo" que cambian de sección en sección.
✓Contraste AA: 4.5:1 en texto normal.
✕Texto gris sobre gris que no se lee en móvil.
✓Cada componente con sus estados: vacío, cargando, error, éxito.
✕Solo el camino feliz y al usuario se le rompe todo después.
✓Imágenes en webp/avif y carga útil bajo 2s en 4G.
✕PNG de 4 MB y 12 librerías para un hero.
✓Accesible por teclado con foco visible.
✕div clicables que no se pueden alcanzar con Tab.