DSPC · Manifiesto operativo
Principios.
Los 6 principios del manifiesto DSPC traducidos a decisiones concretas. Si un diseno o una decision no se puede justificar con al menos uno de estos principios, no pertenece al sistema.
01
Restriccion antes que adorno.
La marca se define mas por lo que no hace que por lo que hace. Cada elemento visual extra diluye el mensaje. Si puedes comunicar sin agregar, no agregues.
— Hace
Tipografia como unico elemento decorativo. Los titulos en Lastica reemplazan ilustraciones. Un heading bien compuesto es mas poderoso que un icono.
Paleta de 5 colores. Ink, paper, bone, silver, signal. Si un diseno necesita un sexto color, el diseno esta mal.
Bordes de 1px. Un solo grosor de borde en todo el sistema. Sin sombras, sin degradados decorativos, sin glows.
— No hace
Ilustraciones custom. DSPC no tiene un estilo de ilustracion porque no necesita uno. La fotografia de producto y la tipografia son suficientes.
Gradientes en UI. El unico gradiente permitido es el shimmer del skeleton loader (funcional, no decorativo).
Iconos como decoracion. Los iconos son funcionales (acciones, navegacion). Nunca decorativos junto a un heading.
02
Cada gramo justificado.
Como en un corte premium, nada sobra. Cada pixel, cada palabra, cada componente tiene una razon de ser documentada. Si no puedes explicar por que existe, se elimina.
— Hace
Tokens con nombres semanticos. --text-primary, --surface-elevated — el nombre explica el por que, no solo el que.
Componentes con reglas de uso. Cada componente del kit documenta cuando usarlo Y cuando no usarlo.
Copy canonico auditable. Cada boton, cada error, cada placeholder tiene un texto aprobado. No se improvisa.
— No hace
Componentes "por si acaso". No se crean componentes que no se necesitan hoy. Se crean cuando hay 3+ instancias reales que lo justifican.
Tokens de color sin uso. Si un color no aparece en ningun componente activo, no existe como token.
Seccion de "inspiracion" en el manual. El manual es operativo, no aspiracional. Moodboards van en otra parte.
03
La tipografia es la ilustracion.
Lastica a gran tamano comunica mas que cualquier imagen. La composicion tipografica es el recurso expresivo principal de DSPC. El diseno vive en las letras.
— Hace
Headings de 40px+ en Lastica. Los titulos de seccion son el elemento visual dominante. Sustituyen hero images.
Lastica sin acentos. Las tildes rompen la geometria de la fuente. Todo texto en Lastica va sin acentos (Validacion, no Validación).
Jerarquia por tamano, no por color. Los niveles de heading se distinguen por tamano y peso, no por color. El color es funcional (ink, signal), no jerarquico.
— No hace
Hero images en landing pages. En lugar de foto a full-width, el nombre del producto en Lastica a 72px sobre fondo bone.
Mas de 3 familias tipograficas. Lastica (display), Inter (body), JetBrains Mono (data/code). Nunca una cuarta fuente.
Texto sobre fotos. La fotografia es intocable. No se superpone texto, logos, ni filtros sobre las fotos de producto.
04
El blanco no esta vacio.
El espacio negativo es un material activo, no un residuo. Margins generosos, padding generoso, aire entre secciones. La densidad es el enemigo.
— Hace
Secciones con 120px de padding vertical. Cada seccion del manual respira. El espacio comunica jerarquia.
max-width en textos. Parrafos nunca superan 640px de ancho. La lectura es comoda, no un muro de texto.
Separadores de 1px con 48px de margin. El divider apenas se ve. El espacio alrededor es lo que separa, no la linea.
— No hace
Llenar cada pixel de la pantalla. Si una tabla tiene 4 filas, no estirarla para llenar la pantalla. El espacio vacio es valido.
Compact mode como default. La densidad de informacion alta es una opcion del usuario, no el estado por defecto.
Bordes dobles o separadores gruesos. Un borde de 1px o un espacio. Nunca ambos a la vez. Nunca bordes de 2px+ en layout.
05
Sobriedad no es frialdad.
DSPC es serio pero no distante. La marca tiene calidez en la precision, no en adornos. El tono es directo, respetuoso y profesional — nunca corporativo ni robotico.
— Hace
Tuteo en la App, usted en facturacion. "Tu pedido esta en camino" (App). "Estimado cliente" solo en documentos legales/fiscales.
Mensajes de error humanos. "Algo salio mal de nuestro lado" es mas calido que "Error 500: Internal Server Error".
Microtextos con personalidad. "Bienvenido a DSPC Cloud. Empieza creando tu primer pedido." — directo, no generico.
— No hace
Emojis en la UI. Nunca. Ni en toasts, ni en empty states, ni en notificaciones. Los emojis son para redes sociales.
Exclamaciones en botones. "¡Agregar al carrito!" — no. "Agregar al carrito" — si. La marca no grita.
Copy "divertido" en errores. "Oops! Algo salio mal 🙈" — nunca. El usuario tiene un problema real, no necesita que le hagan gracia.
06
Consistencia mata la creatividad (y eso es bueno).
La marca no necesita que cada pantalla sea "creativa". Necesita que cada pantalla sea identica al sistema. La repeticion construye confianza. La sorpresa la destruye.
— Hace
Un solo estilo de boton primario. Negro, Inter 600, padding 10px 20px. En toda la App y Cloud. Sin variantes "especiales" para marketing.
Tokens, no colores directos. Usar --text-primary, no #0A0A0A. Si el token cambia, todo cambia consistente.
Nomenclatura canonica del glosario. "Pedido", no "orden". En toda la UI, todo el soporte, toda la documentacion. Cero sinonimos.
— No hace
Botones con estilos ad-hoc. "Para esta landing hagamos el boton con bordes redondeados y sombra" — no. El boton del sistema o nada.
Variaciones de layout por pagina. Todas las tablas se ven igual. Todas las modales se ven igual. La consistencia es la marca.
"Solo esta vez" como justificacion. Si necesitas romper el sistema "solo una vez", el sistema necesita un nuevo componente. No una excepcion.