Los treinta patrones

Mezclar tonos muy saturados puede ocultar una paleta sin definir. Asigna una función a cada color.

Alternativas: One solid base and one accent, decided on purpose, Tonal wash: a single hue, lightness shifted at most ~15%, Grain or paper texture instead of a colour blend

Un matiz ligero ayuda a definir una superficie y su relación con las tarjetas y el texto.

Alternativas: Off-white with a hue cast (warm, cool, green, grey) chosen to fit the brand, In dark mode, a coloured near-black rather than #000

Si cada función tiene un tono diferente, el color pierde significado. Reserva los acentos para roles claros.

Alternativas: One dominant hue, one accent, neutrals doing the rest, Analogous scheme, or monochrome plus a single complement

Una paleta repetida sin relación con la marca hace que productos distintos resulten intercambiables.

Alternativas: A brand hue chosen from the subject's own world (materials, place, era), Warm or tinted neutrals instead of pure black

Los colores eléctricos sobre negro pueden dominar el contenido. Ajusta la saturación según el papel de cada color.

Alternativas: Desaturate: pull chroma down and let value contrast carry hierarchy, Derive the accent from the brand, not from the colour picker

Varios tonos muy claros necesitan un ancla oscura que sostenga la jerarquía y el contraste.

Alternativas: A palette with a full value range and one saturated anchor

La tipografía define la voz de una página. Elige una familia adecuada al contenido en lugar de aceptar la configuración inicial.

Alternativas: Archivo (wide display) + Newsreader (text) + JetBrains Mono, Bricolage Grotesque (display) + Public Sans (text), Fraunces (display) + Hanken Grotesk (text), Schibsted Grotesk (display) + Source Serif 4 (text), Big Shoulders (display) + IBM Plex Sans (text) + IBM Plex Mono, Always pair a display face with a text face; never one family for everything

Repetir icono, título y texto tres veces puede imponer una plantilla ajena al contenido del producto.

Alternativas: Alternating one- and two-column rows that follow the content, A single detailed feature with real screenshots, then a compact list for the rest, A comparison table when the features are genuinely comparable

Cambiar el fondo de cada sección sin una razón de contenido introduce un ritmo mecánico.

Alternativas: Change background only at a genuine change of subject, Use spacing and type rhythm to separate sections

Una cuadrícula de tarjetas de tamaños distintos puede ocultar que el contenido no tiene prioridades claras.

Alternativas: Editorial layout: one lead element, supporting rows beneath, A modular grid whose spans follow content priority, not decoration, A table when the content is actually tabular

La estructura de precios debe reflejar cómo se vende el producto y las decisiones reales del cliente.

Alternativas: One clear price with a usage note, or two plans, A calculator when price depends on usage

Una etiqueta redondeada sobre el título debe comunicar una novedad concreta y verificable.

Alternativas: Lead with the headline; put news in a dated note or the changelog, An eyebrow line in condensed caps that says what the page is, not that it is new

Elige los iconos según su peso, forma y relación con el producto. Aceptar el conjunto inicial sin revisión hace que interfaces distintas se parezcan.

Alternativas: Phosphor (pick one weight), Tabler Icons, Radix Icons, Iconoir, Match stroke weight to the typeface weight; use one set only

Los emojis cambian según la plataforma y aportan un tono de chat. Define un sistema visual coherente.

Alternativas: One SVG icon set, or no icon at all, Numerals or short labels when the marker carries information

El destello genérico comunica IA pero no explica qué hace una función. Describe la acción concreta.

Alternativas: Name the capability plainly and use a concrete icon, or none

Las sombras grandes en cada tarjeta simulan una profundidad que la composición puede no necesitar.

Alternativas: Hairline borders and tonal surface steps, One reserved elevation for things that actually float (menus, dialogs)

Un panel translúcido necesita un fondo que justifique el desenfoque. Sobre fondos planos puede ser un efecto innecesario.

Alternativas: Opaque, matte surfaces with a real layering order, If translucency is deliberate (a brand choice), keep it to one component and mark it intentional

Usar el mismo radio en botones, tarjetas y campos aplana la jerarquía. El radio puede expresar el rol.

Alternativas: A radius scale by role: sharp for containers, small for controls, pill only for chips, Zero radius as a deliberate choice for editorial or technical products

Los círculos difuminados detrás de una cabecera pueden sustituir una decisión visual por decoración.

Alternativas: Real imagery of the subject, Negative space and one geometric accent, Texture (grain, paper, halftone) over blur

Una textura de puntos repetida puede añadir ambiente sin relación con el contenido.

Alternativas: A brand-specific graphic device, or none, Fine grain at low opacity if a texture is needed

Los bloques de carga animados pueden añadir espera aparente a contenido que podría mostrarse desde el servidor.

Alternativas: Render on the server; stream only what is genuinely slow, Meaningful progress or a plain loading line

Mover una flecha al pasar el cursor añade movimiento que una etiqueta clara puede hacer innecesario.

Alternativas: A static affordance with a clear label

Si todos los elementos se elevan al pasar el cursor, el movimiento deja de identificar la interacción.

Alternativas: Motion only on elements that do something; colour or underline change is enough, Honour prefers-reduced-motion

La repetición de rayas para unir frases es una señal editorial débil por sí sola. Revisa la claridad de cada oración.

Alternativas: Full stops, commas, shorter sentences

Negar una afirmación que nadie hizo añade texto sin información. Describe directamente lo que ofrece el producto.

Alternativas: Direct, specific claims with a number or an example

Una marca de verificación comunica inclusión. Úsala cuando el lector deba distinguir lo incluido.

Alternativas: Plain or numbered lists; prose when the items are arguments, Reserve ticks for comparison tables

Las citas inventadas y los nombres no verificables son un fallo crítico de confianza.

Alternativas: Real, attributed quotes with a link, or none, Case studies with numbers you can defend

Las páginas que recogen datos necesitan explicar su tratamiento y las condiciones de uso. Su ausencia es un fallo crítico.

Alternativas: Real privacy and terms pages written for this product, linked in the footer

Una terminal falsa aporta decoración. Muestra código real o una demostración del producto cuando sea útil.

Alternativas: Real screenshots or an embedded live demo, Plain syntax-highlighted code without fake chrome

Una página de producto necesita mostrar el producto real. Las formas abstractas no prueban su funcionamiento.

Alternativas: A live embed or sandbox, Real screenshots, annotated, A short screen recording