Guía de estilos visuales — 67 estilos para web

Materiales y profundidad

8 estilos

CUADERNO DE CAMPO

Bitácora Roble

Lun 6 — podar el limonero del patio.

Mar 7 — llevar semillas al vivero.

Nueva entrada

Esqueuomorfismo

También: skeuomorphic, realismo digital

Interfaces que imitan materiales y objetos reales: cuero cosido, papel rayado, metal biselado y botones con brillo de barniz. Fue el lenguaje del iOS clásico y del OS X de la primera década, hasta que iOS 7 lo jubiló en 2013.

Cuándo usarlo Apps que buscan calidez táctil o nostalgia deliberada: audio, lectura, juegos, herramientas "analógicas". Como sistema completo está quemado; como acento retro bien dosificado vuelve a encantar.

gradientes multicapainset + outset shadowstexturas con repeating-gradienttext-shadow de relieveborde cosido dashed

Dribbble

23°

Guadalajara

Despejado · máx. 26°

MIÉ27°

JUE24°

VIE21°

Flat design

También: diseño plano, flat UI

Elimina todo volumen: colores sólidos, geometría simple, tipografía ligera y cero sombras o texturas. Nació con Windows Metro (2010) y se consagró con iOS 7 en 2013 como reacción directa al exceso esqueuomorfista.

Cuándo usarlo Dashboards, apps informativas y marcas que piden claridad inmediata y carga ligera. Sigue siendo la base de casi todo el diseño de producto, hoy suavizado con capas sutiles ("flat 2.0").

colores sólidoscero box-shadowretícula de bloquesSVG geométricofont-weight ligero

Dribbble

Tareas AR

HOY · 5:12 P. M.

Entregar la propuesta

Revisión final del prototipo y envío al cliente antes de las seis.

RecordármeloPOSPONER

Material Design

También: Google Material, Material 3

El sistema de Google (2014): capas de "papel digital" con elevación medida en dp, sombras coherentes con una misma luz, color estructural y movimiento con física creíble. Hoy vive su tercera versión, Material 3, con color dinámico.

Cuándo usarlo Apps Android y productos que necesitan un sistema completo, documentado y accesible sin inventar nada. Perfecto para MVPs y herramientas internas; sin personalización, eso sí, huele a plantilla.

elevación por sombras dpapp bar de colorFAB circularchips tonalesretícula de 8dp

Material 3 Dribbble

2:47restan

SONANDO

Niebla de medianoche

Vela Gris · álbum Pleamar

Neumorfismo

También: soft UI, neumorphism

Los controles parecen extruidos del propio fondo: todo vive en un solo tono suave y el volumen lo crea una doble sombra — clara arriba a la izquierda, oscura abajo a la derecha — que alterna relieves cóncavos y convexos. Explotó en Dribbble en 2020 como heredero suave del esqueuomorfismo.

Cuándo usarlo Concepts, reproductores y paneles de domótica donde el mood monocromo pesa más que la accesibilidad. El bajo contraste lo condena como sistema completo: en producción dosifícalo en controles puntuales.

doble box-shadowinset para lo cóncavofondo y elemento del mismo tonomonocromía gris-perla

Dribbble

Estudio Bruma

Diseño que respira detrás del cristal

Paneles translúcidos sobre color vivo: la jerarquía la hace el desenfoque.

Ver colección

Glassmorfismo

También: cristal esmerilado, frosted glass

Paneles translúcidos con desenfoque del fondo, borde claro sutil y sombra profunda sobre color vivo. Lo popularizaron macOS Big Sur y Windows Fluent; hoy es el estándar de "premium accesible".

Cuándo usarlo Overlays, navegación y tarjetas sobre fondos ricos; apps que quieren verse modernas sin arriesgar legibilidad. Sigue vigente si el fondo tiene suficiente color.

backdrop-filter: blur()rgba() + borde clarosombra profundafondo saturado

One Page Love Dribbble

NIVEL 1 · GRATIS

Modela tu primer mundo

Doce lecciones blanditas para aprender 3D jugando con Bolita.

Empezar a jugar

Claymorfismo

También: clay UI, plastilina, claymorphism

Volúmenes inflados como plastilina: esquinas muy redondas, sombra exterior difusa y una sombra interior clara que "infla" cada pieza, todo en pasteles vivos. Surgió hacia 2021 como el relevo amable del neumorfismo, empujado por la ilustración 3D blandita.

Cuándo usarlo Productos educativos, apps infantiles, juegos y onboardings con tono optimista. Sigue vigente y muy querido en ilustración; pide marcas con humor, no le queda a un banco.

border-radius 24px+inset claro + sombra difusapasteles saturadosblobs SVG con highlight

Dribbble

ESTUDIO FUNDENTE

FUSIÓN

Colección cromo · pieza 07

Metal líquido y chrome

También: liquid metal, chrome type

Superficies cromadas con reflejos duros: gradientes plata multi-stop, tipografía espejo con background-clip:text y destellos de cuatro puntas sobre fondo oscuro. Hereda el airbrush chrome de los 80-90 y el Metalheart del 2000, y volvió con fuerza en música y moda digital.

Cuándo usarlo Portadas, drops, eventos y branding que busca filo futurista; en pleno revival Y2K funciona muy bien como pieza hero. No es un sistema de UI: es el acento, no la base.

background-clip: textconic-gradientstops duros de reflejodrop-shadowfondo casi negro

Dribbble CARI: Metalheart

EXPO PRISMA · CDMX

Pase holograma

Invitado 0047 · Sala Norte · 21:00

SERIE HL-0204 / PUERTA 3

Holográfico e iridiscente

También: holographic foil, perlado, iridiscente

La lámina holográfica de las tarjetas coleccionables llevada a pantalla: iridiscencias rosa-cian-lila-menta que se desplazan lentamente, veladuras perladas y texto oscuro grabado encima. Creció con el revival Y2K y el gusto por los materiales "imposibles".

Cuándo usarlo Credenciales, tickets, drops y branding joven que quiere sorpresa táctil digital. Vigente como acento premium-lúdico; cansa rápido si cubre la página entera.

gradiente multicolor animadobackground-size ampliadoveladuras radiales encimatext-shadow de grabado

Dribbble

3D e ilustración dimensional

6 estilos

Estudio Pompo

Volumen suave para marcas amables

Renders gorditos, luz de estudio y colores caramelo para tu próximo lanzamiento.

Ver proyectos

3D inflado

También: big 3D, soft 3D render

Objetos gorditos y pulidos que parecen salidos de un render de Blender con luz suave: esferas, donas y cápsulas de colores caramelo con sombras de contacto difusas. Explotó con la ilustración 3D de las startups a partir de 2019 y sigue dominando los heros de producto.

Cuándo usarlo Heros de landing, empty states y branding de producto que quiere sentirse amable y premium a la vez. Vigente, aunque pide ejecución fina para no verse a plantilla.

radial-gradient como volumenhighlight especularmask para la donasombras de contactofloat lento

Dribbble Godly

Parque Vértice

Senderos facetados

Rutas de altura entre cristales y picos de baja poligonización.

Planear visita

Low poly

También: facetado, low poly art

Mallas de triángulos planos donde cada cara recibe un tono distinto de la misma familia: el volumen se sugiere escalonando la luz por faceta. Geometría heredada del videojuego indie de los 2010s y de los fondos facetados que inundaron la web de esa época.

Cuándo usarlo Ilustración de fondo para tech, gaming y marcas outdoor: mucha personalidad con muy poco peso. Ya no es novedad, pero como recurso ilustrativo envejece con dignidad.

SVG de polígonostonos escalonados por caraluz direccional simuladacielo degradado

Dribbble

Axono Maps

Tu producto, en 2.5D

Diagramas isométricos que explican sistemas completos de un vistazo.

Isométrico

También: 2.5D, isometric design

Proyección a 30 grados sin punto de fuga: los ejes nunca convergen, así que todo mide lo mismo cerca y lejos. Herencia de los manuales técnicos y de juegos como SimCity; hoy es el idioma visual de los diagramas SaaS.

Cuándo usarlo Diagramas de arquitectura, ilustración de features y mapas de producto: ideal cuando necesitas mostrar un sistema completo con orden. Plenamente vigente en B2B.

rombos 2:1tres caras, tres tonossombras proyectadasSVG o rotateX + rotateZ

Dribbble

SONDA-07 / MALLA ACTIVA

El esqueleto del espacio

NODOS 1 284 · ARISTAS 3 902
ÓRBITA SINCRÓNICA · 09:41

Wireframe 3D

También: malla alámbrica, 3D wireframe

La malla sin piel: esferas de latitud y longitud, grids que corren hacia un punto de fuga y líneas finas monocromas sobre negro. Viene del CAD ochentero y de los gráficos vectoriales de la carrera espacial.

Cuándo usarlo Marcas técnicas, aeroespacial, dev-tools y portadas editoriales que quieren rigor sin fotografía. Es nicho, pero de los que nunca se queman.

ellipses SVG hairlinegrid con punto de fugamonospace técnicostroke-dasharray animado

Dribbble

Taller Pliego

Historias en capas

Escenografías de papel recortado para cuentos y marcas con alma.

Colección otoño

Papercraft

También: paper cut-out, capas de papel

Capas de papel recortado apiladas: cada ola tapa a la anterior y le proyecta una sombra suave, creando profundidad física real. Es la traducción digital del paper cut-out artesanal de ilustración y escaparate.

Cuándo usarlo Marcas educativas, infantiles, culturales y packaging; también para vestir secciones enteras de una landing. Cálido y atemporal: difícil que se vea barato.

paths SVG superpuestosdrop-shadow por capapaleta escalonadaformas onduladas

Dribbble

Galería Nux · Pieza 04

La materia que no existe

Vidrio imposible, niebla y silencio: render cinematográfico para marcas que flotan.

Ver la pieza

3D escultórico

También: render cinematográfico, abstract 3D

Renders abstractos de agencia premium: vidrio grueso, metales imposibles y telas flotando en un vacío con niebla, acompañados de tipografía editorial finísima. Es el look de los estudios de la gama alta de Awwwards desde 2020.

Cuándo usarlo Marcas de lujo, fintech ambiciosa y portafolios de estudio: máximo impacto cuando el producto es intangible. Vigente en la gama alta, pero exige craft o se nota el truco.

gradientes especulares apiladosborder-radius orgánicorim light cromáticoniebla con radial-gradientmorph lento

Godly Awwwards

Retro digital

8 estilos

Nebulosa-2K // en línea

El futuro era cromado

Entrar al portal

Y2K y Metalheart

También: Y2K futurism, cyber Y2K, metalheart

Futurismo de cambio de milenio: cromo líquido, blobs alienígenas, destellos de lente y tipografía tech en itálica, todo en plata con azul eléctrico. Nació entre 1997 y 2003 en portadas de discos, revistas de diseño y publicidad de gadgets, y hoy vive un revival fuerte como "neo-Y2K".

Cuándo usarlo Música, moda, streetwear y campañas que quieren leerse jóvenes y nostálgicas a la vez; portadas, drops y visuales de evento. Está en pleno revival, pero quema rápido si se aplica sin oficio ni ironía.

background-clip:text cromadogradientes metálicos multi-stopborder-radius orgánicoclip-path (estrellas)itálica tech

CARI: Metalheart CARI: Neo-Y2K

Vitaliainicio · galería · clima

Respira el futuro

Aire limpio, agua clara y tecnología en armonía con tu día.

Descubre más

Frutiger Aero

También: aero glass, optimismo tecnológico 2004-2012

El optimismo tecnológico de mediados de los 2000: vidrio glossy, burbujas, agua, pasto verde y cielos azules, el look de Windows Vista y los folletos de gadgets de la época. Debe su nombre a la fuente Frutiger, omnipresente en ese periodo.

Cuándo usarlo Marcas que quieren transmitir frescura, limpieza y un futuro amable, o nostalgia dosmilera deliberada. Vive un revival serio desde 2022 empujado por la generación Z; usado con mesura ya no se siente viejo, se siente cálido.

radial-gradient (brillo glossy)capas translúcidasdegradado de cieloverdes y azules saturados

CARI: Frutiger Aero Aesthetics Wiki

reproductor.exex

ahora suena: ocaso.mid

PLAZA ETÉREA

centro comercial virtual — 1995

Vaporwave

También: aesthetic, seapunk

Nostalgia irónica de los 80s y 90s pasada por internet: bustos griegos, grids magenta-cian, palmeras, ventanas de sistemas operativos viejos y texto con espaciado extremo. Nació alrededor de 2010 como género musical y se volvió estética de collage digital.

Cuándo usarlo Música, streetwear, eventos y contenido que juegue con la ironía y la nostalgia digital; para marcas serias casi nunca. Ya no es novedad: es un clásico de nicho que su audiencia reconoce y celebra al instante.

letter-spacing extremoSVG inline (sol y columna)perspective + rotateXgradiente atardecerventana de OS retro

Aesthetics Wiki Dribbble

Grabaciones Medianoche presenta

AUTOPISTA NEÓN

cinta 86 — lado B

Synthwave

También: retrowave, outrun

El neón ochentero imaginado desde el futuro: sol de franjas sobre el horizonte, grid en perspectiva corriendo hacia el punto de fuga y magenta con cian sobre noche púrpura. Sale de las portadas outrun y retrowave de los 2010s, herederas de la cultura de arcade y VHS.

Cuándo usarlo Gaming, música electrónica, eventos nocturnos y landings con actitud; convive muy bien con interfaces oscuras. Es reconocible al instante, pero fuera de esos mundos se siente disfraz: dosifícalo como acento.

text-shadow neón multicapaperspective + rotateXbackground-position animadoSVG de sol a franjas

Dribbble

PUNTOS 004250

PULSA START

Pixel art 8-bit

También: retro gaming, bitmap, pixel art

La estética de las consolas de 8 bits: paleta limitada, bordes escalonados, tipografía bitmap y todo construido píxel a píxel. Viene de los sprites de NES y Game Boy, y sobrevive gracias al pixel art indie que los homenajea con oficio.

Cuándo usarlo Juegos, comunidades gamer, páginas 404 con personalidad, easter eggs y merch retro. Dentro del mundo gaming sigue completamente vigente; fuera de él funciona mejor como guiño puntual que como sistema completo.

box-shadow multipíxelsteps() en animaciónpaleta limitadaimage-rendering:pixelatedmonospace bitmap

Dribbble

CONSOLA ÓRBITA v4.2 — tty7

último acceso: 06 ago 2026, 03:12 UTC

op@orbita:~$ estado --red

enlace ......... ACTIVO

cifrado ........ AES-256

latencia ....... 12 ms

[aviso] certificado expira en 12 días

op@orbita:~$

Terminal CRT

También: hacker, fósforo verde, terminal green

El monitor de fósforo: verde (o ámbar) sobre negro, monospace, scanlines, viñeta en las esquinas y cursor parpadeante. Hereda de las terminales VT100 y del imaginario hacker que el cine convirtió en icono.

Cuándo usarlo Portafolios de developers, documentación técnica, páginas de status y easter eggs; con acentos ámbar gana calidez. Es un nicho eterno: nunca fue mainstream y por eso nunca se quema.

repeating-linear-gradient (scanlines)text-shadow (halo fósforo)viñeta radialcursor animadoui-monospace

Dribbble

¡¡Hola!! Ya somos 4,217 visitantes — firma mi libro de visitas — esta página se escucha mejor con MIDI de fondo — saludos desde Guadalajara

¡La Súper Página de Ramiro!

Bienvenido a mi rinconcito en la red — actualizada el 06/08/1997

Mis enlaces favoritos
Fotos de mi iguana
Mi colección de MIDIs
Libro de visitas (¡firma!)

EN CONSTRUCCIÓN

FirmarEscríbeme

Mejor visto en 800×600 con Navigator 3.0

Web 1.0

También: GeoCities, internet noventero, old web

El HTML ingenuo de los 90: fondo gris o de mosaico, Times New Roman, enlaces azules subrayados, tablas con borde, marquesinas y contador de visitas. Es la estética de GeoCities y de las páginas personales de antes del CSS, cuando cada quien construía su rincón como podía.

Cuándo usarlo Proyectos con humor, zines digitales, portafolios contraculturales y campañas nostálgicas. Como cita irónica funciona de maravilla; como sistema de diseño real solo si el cliente entiende (y disfruta) la broma.

border outset/insettabla como layoutmarquesina CSScolores de sistemacontador de visitas

Cameron's World Aesthetics Wiki

CANAL 12 — 23:59:59

SEÑAL
PERDIDA

error 0x2F — reintentando transmisión buffer 47%

Glitch art

También: datamosh, corrupción digital, glitch art

El error como estética: canales RGB desplazados, franjas horizontales fuera de lugar, ruido e interferencia. Viene del datamoshing y el circuit bending, y saltó del videoarte a portadas de discos, títulos de películas y branding de música electrónica.

Cuándo usarlo Música electrónica, gaming, editorial experimental y momentos puntuales: hovers, páginas 404, intros. Como acento es potentísimo; como sistema completo cansa rápido y compromete la legibilidad.

text-shadow RGB splitclip-path (rebanadas)attr(data-text) duplicadoanimación con reposo largo

Dribbble

Herencia impresa

8 estilos

M

Gala Meridiana

Orquesta en vivo · Baile · Medianoche

31 · XII · MCMXXV

Art deco

También: Gatsby, años 20

Geometría ornamental con disciplina: abanicos y rayos simétricos, marcos dobles, oro sobre fondos profundos y mayúsculas con muchísimo aire. Nace en los años 20 entre la arquitectura y el cartel de lujo, y quedó fijado en la memoria como "el look Gatsby".

Cuándo usarlo Hoteles boutique, coctelería, invitaciones y marcas premium con guiño vintage. Vigente como acento de identidad; una web entera en deco cansa rápido.

SVG geométrico simétricoletter-spacing ampliomarco doble con ::before/::afteroro sobre azul-negrocomposición centrada

Dribbble

taller · 1923

exposición anual

forma y
función.

sala 3 · del 12 al 30 de abril

Bauhaus

También: constructivista

Círculo, triángulo y cuadrado en rojo, amarillo y azul: la forma sigue a la función y el adorno sobra. Viene de la escuela alemana (1919-1933) que fundó el diseño moderno; sus carteles asimétricos con diagonales siguen siendo material de clase.

Cuándo usarlo Portafolios, festivales, editorial cultural y branding de estudios de diseño. Es una base eterna, pero copiar las tres formas sin sistema detrás se ve a plantilla.

formas primarias en SVGcolores primarios planoscomposición asimétricatransform: rotate en diagonalessans geométrica en minúsculas

Dribbble

Auditorio Central
Temporada de otoño
Serie de cámara

Viernes 12 sep · 20:30
Sala 1 · Entrada libre
Programa núm. 4

Música
concreta.

Estilo suizo

También: International Typographic Style

Retícula estricta y tipografía sans como único ornamento: jerarquía por escala y alineación, una sola tinta de acento y ni un elemento sin justificar. Se formalizó en Zúrich y Basilea en los años 50 y de ahí desciende medio diseño gráfico moderno.

Cuándo usarlo Agencias, congresos, cultura y corporativos con ambición editorial: es la base del diseño digital serio y no pasa de moda. Eso sí, exige disciplina, no efectos.

retícula visible sutiljerarquía por escalaun solo acento rojoletter-spacing negativoalineación al grid

Dribbble

Nuevo · Tueste espacial

Café Cometa

El sabor del futuro, servido en tu taza de hoy. Molido fino y carácter atómico.

Pruébalo hoy

Mid-century

También: años 50-60, retro publicitario, mid-century modern

Paleta mostaza-oliva-terracota sobre crema, estrellas atómicas, boomerangs y rótulos en itálica con carácter: el optimismo publicitario de la posguerra americana. Del anuncio impreso saltó al branding actual casi sin cambios.

Cuándo usarlo Cafés, cervecerías, barberías y hospitalidad que venden nostalgia cálida. Muy vigente en branding y packaging; como interfaz completa conviene dosificarlo.

paleta de época sobre cremastarburst atómico en SVGfranjas de coloritálica de rótuloformas orgánicas boomerang

Dribbble

SÁBADO 14 · PLAZA NORTE

Feria Bombón

Entrada libre · Talleres · DJ

Memphis

También: años 80, Milano design, Memphis design

La fiesta geométrica del grupo de Milán (1981): squiggles, confeti de formas, lunares y rayas en colores chillones sobre fondo claro, con sombras duras y cero solemnidad. Fue la rebelión contra el buen gusto funcionalista.

Cuándo usarlo Eventos, marcas juveniles, papelería y cultura. Las big tech lo quemaron entre 2015 y 2018, pero en dosis correctas sigue contagiando energía.

squiggles y zigzags en SVGlunares con radial-gradientsombra dura sin blurrotaciones ligerasborde negro grueso

Dribbble

Klub Sótano presenta

RuidoMotor

FORO ÓXIDO · VIE 13 · 22:00 · $80

SIN REEMBOLSO

Grunge 90s

También: distressed, fotocopia

La fotocopia sucia de los 90: ruido y manchas, tipografía desgastada y rotada, cinta adhesiva en las esquinas y rojo sangre sobre negro. Nace del cartel de conciertos hecho con fotocopiadora, tijeras y prisa.

Cuándo usarlo Música, streetwear, festivales y editorial alternativa: nicho, pero potentísimo con la audiencia correcta. No lo lleves a clientes conservadores.

ruido con feTurbulenceclip-path rasgadotransform: rotatemanchas con radial-gradientmono de máquina de escribir

Dribbble

HAZLOTÚ

fanzine autoeditado · núm. 7 · 24 páginas

Zine y collage

También: cut-out, DIY punk, ransom note

El recorte y pegue del fanzine punk: letras robadas de revistas distintas como nota de rescate, papel rasgado, cinta y olor a fotocopia. Se ve hecho a mano y con prisa, y esa es exactamente la intención.

Cuándo usarlo Campañas culturales, moda urbana y editorial con actitud; funciona muy bien como acento en titulares y stickers. Como sistema completo de UI resulta ilegible.

fondo y fuente por letrarotación por carácterclip-path de papel rasgadocinta con rgba y sombramezcla tipográfica deliberada

Dribbble

Dos tintas · Tiraje de 100

Feria del Impreso

Carteles a dos tintas, registro imperfecto a propósito y grano de máquina.

Reserva tu copia

+ +

Risografía

También: riso print, serigrafía indie, risograph

Dos tintas fluorescentes que se superponen y se desregistran un par de milímetros, con grano visible sobre papel crema. Viene de la duplicadora japonesa Risograph, adoptada por la escena gráfica indie como sello de identidad.

Cuándo usarlo Estudios creativos, carteles culturales, ilustración y editorial pequeño. Está vivísimo en el print independiente y se traduce muy bien a web con capas en multiply.

mix-blend-mode: multiplydesregistro con translate y text-shadowdos tintas fluorgrano con feTurbulencepapel crema de base

Dribbble

Brutal y crudo

5 estilos

obranegra.mx — índice general

Obra Negra

Somos un estudio de tres personas en la colonia Obrera. Hacemos sitios que pesan poco, cargan rápido y no persiguen a nadie con ventanas emergentes. Cobramos por semana, publicamos el precio y mostramos el trabajo tal cual quedó: sin retoques, sin maquetas flotando en el aire, sin palabras como sinergia ni experiencias inmersivas. Si eso te acomoda, escríbenos.

Trabajo (14) / Manifiesto / Precios / Archivo 1997–2026 / Correo

Última edición: hoy, 14:02 · Sin cookies, sin rastreadores, sin animaciones.

Brutalismo

También: web brutalism, brutalismo web

Hereda el espíritu del béton brut arquitectónico: la web mostrada en crudo, sin ornamento que la suavice. Tipografía de sistema, enlaces azules subrayados y densidad sin retícula aparente; tomó forma a mediados de los 2010 como reacción contra las plantillas intercambiables.

Cuándo usarlo Portafolios de estudios, galerías, festivales y medios culturales que quieren postura y personalidad. Sigue vivo como declaración de nicho; en producto masivo o e-commerce castiga la conversión.

tipografía defaultenlaces azules subrayadosdensidad sin retículaescala tipográfica extremacero decoración

Brutalist Websites One Page Love

Nuevo — v2

Cobra lo que vale tu trabajo

Plantillas de contrato, calculadora de tarifas y guiones para negociar sin pena. El kit del freelance que ya no regala horas.

Lo quiero — $49

Neobrutalismo

También: neubrutalism, neobrutalism

La versión pop del brutalismo: bordes negros de 2-3 px, sombras duras desplazadas sin desenfoque y planos de color saturado — amarillo, rosa, lila — sobre fondos alegres. Lo instalaron Gumroad, Figma y media ola de SaaS indie entre 2020 y 2023.

Cuándo usarlo Productos indie, cursos, herramientas creativas y marcas jóvenes que quieren energía sin sacrificar usabilidad. Todavía funciona, pero ya huele a plantilla: ejecútalo con un giro propio.

border: 3px solid #000box-shadow sin blurplanos saturadostipografía extra boldstickers y badges

Dribbble

¿?

Ruido

Blanco 12–15 marzo · bodega los boletos se venden aquí No hagas clic

Anti-diseño

También: anti-design, ugly design, caos calculado

Rompe las reglas a propósito: elementos encimados, tipografías que chocan, rotaciones arbitrarias y colores que pelean — pero con oficio detrás de cada decisión. Viene del ugly design noventero (Ray Gun, David Carson) y revivió como reacción al diseño corporativo pulido.

Cuándo usarlo Festivales, música, moda experimental y editorial joven donde incomodar es parte del mensaje. Brilla en piezas de campaña y portadas; en flujos funcionales como un checkout es veneno.

rotaciones arbitrariaselementos encimadostipografías en conflictocolor sin armoníajerarquía rota con intención

Hoverstates Dribbble

Talleres Cardal · Hoja de especificación[REF-014]

Pórtico GP-40 / Serie B

Carga nominal40 000 kg

Altura de izaje12.5 m

Ciclo de servicioClase A5

Norma aplicableNOM-MX-771

Inspeccionado07 · 2026

Hoja 1/3 · Esc. 1:50 · Dibujó R. Vega06.08.26

Industrial y utilitario

También: technical, mil-spec, utilitario, industrial design

Estética de documento técnico: monospace, códigos de referencia, marcas de registro, sellos de inspección y franjas de precaución. Toma prestado el lenguaje de planos, manuales mil-spec y etiquetas de fábrica, donde cada marca existe por función, no por adorno.

Cuándo usarlo Marcas de herramientas, moda técnica, estudios de ingeniería y portafolios que quieren precisión y seriedad material. Muy vigente en branding; cuida que los adornos técnicos no se vuelvan puro disfraz.

monospace en todocódigos y etiquetas [REF]marcas de registrofranja de precaucióntabla de especificaciones

Dribbble

Este sitio no tiene diseño

O más bien: su diseño es el que trae el navegador de fábrica. Lo publicamos así a propósito.

Carga en una décima de segundo
Se lee igual en cualquier navegador desde 1996
El contenido es la interfaz

Leer el manifiesto completo · Volver al archivo

Última actualización: 6 de agosto de 2026. Hecho a mano en HTML.

HTML crudo

También: unstyled, default web, HTML sin CSS

El navegador sin hoja de estilos como manifiesto: serif por defecto, enlaces azules y púrpura, listas con viñetas y jerarquía puramente semántica. Es la estética de la web original (1991-1995), reivindicada hoy como gesto de honestidad y velocidad.

Cuándo usarlo Blogs personales, manifiestos, documentación y páginas de una sola idea donde el contenido basta. Funciona como declaración consciente; si el proyecto necesita marca o conversión, se queda corto.

estilos default del navegadorenlaces azul y púrpuralistas con viñetasHTML semánticocero CSS decorativo

Brutalist Websites

Minimal y editorial

8 estilos

Menos, pero mejor.

Quitamos hasta que solo queda lo que trabaja. Lo demás era ruido.

Estudio Umbral 01

Minimalismo

También: less is more, minimal design

Espacio en blanco tratado como material de construcción: uno o dos colores, tipografía contenida y cada elemento con una razón de existir. Hereda del funcionalismo de Dieter Rams y del diseño suizo, filtrado por dos décadas de web.

Cuándo usarlo Portafolios, estudios y productos que venden claridad y confianza; exige contenido fuerte porque no hay decoración que lo tape. No pasa de moda, pero mal ejecutado se ve vacío en vez de intencional.

espacio negativo generosoescala tipográfica cortaun solo acento de coloralineación a retícula

Minimal Gallery

Bienal de TipografíaSala 04

PESOESCALA

Tipografía gigante

También: type-driven, big type

El texto no acompaña al diseño: es el diseño. Titulares a escala brutal que se recortan contra los bordes, pesos extremos y layouts que nacen de la forma de las letras, no de cajas. Viene del cartelismo y explotó en la web con las variable fonts.

Cuándo usarlo Marcas con voz fuerte y poco que mostrar en imagen: estudios, eventos, editoriales, lanzamientos. Muy vigente, pero pide una fuente con carácter y mensajes cortos que aguanten el tamaño.

font-size a escala del contenedorline-height menor a 1texto recortado por overflow-webkit-text-stroke (outline)letter-spacing negativo

Typewolf Godly

Crónica urbanaMARGEN · N.º 42

La ciudad que aprendió a caminar despacio

El barrio despertó sin coches una mañana de abril y nadie pidió que volvieran. Las banquetas se ensancharon, los cafés sacaron sus mesas y la calle recuperó su oficio original: ser un lugar, no un trayecto. Los vecinos lo resumen mejor que cualquier plan maestro: ahora se puede cruzar sin mirar el reloj.

Editorial

También: magazine layout, diseño de revista

La web vestida de revista impresa: serif elegante, retícula de columnas, capitulares, kickers en mayúsculas espaciadas, folios y filetes de un pixel. Traslada siglos de oficio tipográfico de la prensa al scroll.

Cuándo usarlo Medios, blogs de autor, reportes anuales y marcas que quieren leerse con seriedad y calma. Siempre vigente cuando hay texto largo de verdad; con contenido de tres líneas se siente disfrazado.

columns + column-rule::first-letter (capitular)jerarquía serif / sans / monofiletes de 1pxkicker con letter-spacing

Dribbble

Sin color, sin ruido.

Galería Contraste Obra N.º 3
Serie Umbral

Monocromo

También: black and white, blanco y negro

Blanco y negro absolutos, o un solo tono llevado al límite: sin color, la fuerza sale del contraste, la escala y la forma. Es la disciplina más vieja del diseño gráfico —fotografía, xilografía, cartel— aplicada a pantalla.

Cuándo usarlo Galerías, fotógrafos, moda y marcas que quieren proyectar rigor y atemporalidad. Nunca caduca, pero castiga la indecisión: cada peso tipográfico y cada borde quedan expuestos.

contraste 21:1bloques invertidosmix-blend-mode: differencegeometría dura (círculo, franja)

Dribbble

Maison Séral

Flor de Niebla

Extracto de perfume · 50 ml

$4,900

Lujo sereno

También: luxury, premium quiet, quiet luxury

La estética de la perfumería y la alta relojería: serif fina con muchísimo aire, dorado champán sobre marfil, mayúsculas con letter-spacing amplio y filetes de un pixel. El lujo se comunica por lo que se calla, no por lo que grita.

Cuándo usarlo Belleza, joyería, hotelería, vinos y cualquier marca con ticket alto que vende deseo, no urgencia. Plenamente vigente; el riesgo es la parodia si el producto no está a la altura del empaque.

letter-spacing .2–.4em en capshairlines de 1px doradospaleta marfil + champánmarco interior finoserif de peso ligero

Dribbble

Elogio del vacío Casa Kiro · cerámica

Minimalismo japonés

También: ma, wabi-sabi, Japanese minimalism

Diseña con el vacío (ma) como protagonista: composición asimétrica, tonos de papel y tierra, un único acento bermellón y la serenidad de lo imperfecto (wabi-sabi). Viene de la caligrafía, el sumi-e y la arquitectura tradicional japonesa.

Cuándo usarlo Cerámica, té, arquitectura, bienestar y marcas artesanales que venden pausa. Atemporal por definición; falla cuando se usa como decorado exótico sin entender que el vacío es el mensaje.

asimetría deliberadawriting-mode: vertical-rlun acento bermellón (hanko)trazo SVG con stroke-dasharraypaleta papel y tinta

Dribbble

Interiores Fjell

Luz que abriga

Madera clara, lana y sol de invierno: el orden también puede ser un lugar cálido.

Ver la colección

Escandinavo suave

También: nordic, hygge, Scandinavian design

Claridad funcional con calidez: grises cálidos, arena y salvia, madera clara, sans humanista y esquinas amables. Es el minimalismo nórdico de los interiores —orden sin frialdad— traducido a interfaz.

Cuándo usarlo Muebles, interiorismo, bienestar, apps de hogar y marcas que quieren sentirse confiables y humanas a la vez. Muy vigente en e-commerce premium accesible; se agota si todo el sector del cliente ya se ve igual.

paleta arena-salvia-cremaradios generosos y suavessombras cálidas difusasbloque-foto con arcosans humanista

Dribbble

Casa Vetra

Reserva Doce

Doce años en barrica de roble, servidos en penumbra.

Descubrir

Dark luxury

También: dark premium, dark luxury

Negro profundo como terciopelo de vitrina: serif clara sobre carbón, dorado apagado, un solo producto iluminado y botones fantasma de borde fino. Es el lenguaje visual de la joyería, el whisky y lo automotriz de gama alta.

Cuándo usarlo Destilados, relojes, autos, hoteles nocturnos y lanzamientos de edición limitada. Vigente y efectivo, pero exige fotografía o render impecable: en oscuro, cualquier descuido brilla.

negro cálido (no #000 puro)glow radial contenidobotón fantasma con borde 1pxserif dorada espaciadasombra de contacto en piso

Dribbble

Color y carácter

9 estilos

Plataforma Prisma

El color hace el trabajo pesado

Cobros, métricas y facturación en un solo flujo que se siente tan vivo como tu producto.

Empezar gratis

Gradientes vivos

También: vibrant gradients, degradados vibrantes

El degradado saturado deja de ser fondo y se vuelve la identidad completa: violeta, rosa y naranja fundiéndose en héroes, botones y hasta dentro de las letras. Lo consagraron el rebrand de Instagram en 2016 y la ola fintech que vino después.

Cuándo usarlo Marcas digitales que necesitan energía inmediata: apps de consumo, SaaS jóvenes, eventos. Sigue vigente si controlas los stops y el contraste; con colores al azar degenera rápido en ruido.

linear-gradient() multi-stopbackground-clip: textbackground-size + animaciónpaleta análoga saturada

Dribbble

Boreal · Plataforma

Tus métricas, con atmósfera

Reportes nítidos flotando sobre un cielo de datos que nunca duerme.

Ver demo

Aurora y mesh

También: gradient mesh, blurred blobs, aurora gradient

Manchas de color enormes y desenfocadas que flotan como aurora boreal detrás de contenido perfectamente nítido. Nació del gradient mesh de los editores vectoriales y hoy es el fondo favorito del SaaS premium.

Cuándo usarlo Héroes, logins y pantallas de marketing donde quieres atmósfera sin sacrificar legibilidad; funciona igual sobre fondo oscuro o pálido. Tan vigente que ya es casi estándar: diferénciate con la paleta.

filter: blur(60px+)blobs con border-radius: 50%transform animado lentísimoz-index para el contenido nítido

Dribbble Godly

Discos Antena

Vol. 02 · Sesiones

Sonido en dos tintas

Toda la temporada tramada en magenta y azul marino.

Duotono

También: duotone, bitono, dos tintas

Toda la composición resuelta con exactamente dos tintas de alto contraste: la imagen tramada en una, la tipografía en la opuesta. Herencia directa de la serigrafía, llevada al mainstream por las campañas de Spotify hacia 2015.

Cuándo usarlo Cartelería de música y cultura, campañas y portadas donde la foto normal se ve genérica; además abarata producción, porque cualquier imagen entra a la marca. Sigue funcionando si las dos tintas son valientes.

paleta de 2 tintasmix-blend-mode: multiplytrama de puntos con radial-gradientbloques de color sólido

Dribbble

Bar · Cantina

La Sirena

Abierto hasta las 3 a. m.

Neon glow

También: tubos de neón, neon sign

Tipografía y trazos que brillan como tubos de gas sobre un muro casi negro: capas de text-shadow del mismo color, bordes luminosos y reflejos en el piso. Viene del letrero físico de bares y moteles, revivido por el gaming y la gráfica nocturna.

Cuándo usarlo Bares, música electrónica, gaming y eventos de noche. Es nicho: fuera de contextos nocturnos satura rápido y exige fondos muy oscuros para que el brillo funcione.

text-shadow multicapabox-shadow interior + exteriorborder como tuboparpadeo sutil con keyframesviñeta radial oscura

Dribbble

Nubi · Rutinas

Hoy toca un día suave

Tres recordatorios amables para cerrar la jornada sin prisa.

Té sin pantalla Estirar 5 min Dormir 10:30

Pastel suave

También: kawaii soft, algodón, soft pastel UI

Paleta de algodón de azúcar — lila, menta y durazno pálidos — con esquinas muy redondas y sombras difusas del color del elemento, nunca grises. Deriva del kawaii japonés y de la ola de apps de bienestar de los 2020.

Cuándo usarlo Apps de hábitos, salud mental, productos infantiles o de cuidado personal: todo lo que deba sentirse amable y sin fricción. Vigente; su talón de Aquiles es el contraste del texto, vigílalo siempre.

pasteles desaturadosbox-shadow de colorborder-radius 24px+chips redondeados

Dribbble

Dulcería

Pompa

Caramelos que rebotan desde 1999

Pedir dulces Sorpresas

2x1

Candy y burbuja

También: bubble UI, jelly, gumdrop

Interfaz de goma de mascar: botones inflados con brillo húmedo en la parte superior, pills gorditas y colores caramelo a plena saturación. Hereda del Aqua de los 2000 y regresó con el diseño juguetón que siguió al flat.

Cuándo usarlo Juegos casuales, productos para público joven, promociones y micrositios golosos. Para software serio está quemado, pero en su nicho sigue vendiendo dulzura al instante.

highlight con gradiente blancoinset box-shadow inferiorborder-radius: 999pxsombra del color del botón

Dribbble

Equipo Órbita

Lo lograste, y el panel lo sabe

Cierra tu primer proyecto y celebra: el resto del flujo ya quedó configurado.

Seguir al tablero

Corporate Memphis

También: flat illustration, big tech 2017-2021, Alegría

Personajes planos de extremidades larguísimas y proporciones imposibles celebrando en colores amables: el idioma visual oficial de las grandes tecnológicas entre 2017 y 2021, definido por las bibliotecas de ilustración de esa era.

Cuándo usarlo Onboardings, empty states y páginas B2B que quieren verse humanas sin fotografía. Está desgastado por sobreuso — hoy comunica "startup genérica" —, así que úsalo con un giro propio o con ironía consciente.

SVG plano sin contornoextremidades como trazos curvoscabeza pequeña, cuerpo grandeblob de fondopaleta amable

Aesthetics Wiki Dribbble

[SALA 4 · 19:00]

TODO A LA VEZ

patrones, tintas y tipografías conviviendo a todo volumen — y aun así se lee

Feria Tumulto · entrada libre · Feria Tumulto · entrada libre · Feria Tumulto · entrada libre · Feria Tumulto

Maximalismo

También: more is more, horror vacui, maximalism

Cada hueco lleno a propósito: patrones sobre patrones, varias tipografías conviviendo y color a todo volumen, salvados por una jerarquía férrea. Es la reacción pendular al minimalismo que dominó la década pasada.

Cuándo usarlo Editorial, festivales, moda y marcas con mucha personalidad que puedan pagar el mantenimiento: cada pieza nueva exige diseño fino. En web vive un gran momento, pero sin un punto focal claro se derrumba en ruido.

patrones con repeating-gradientmezcla tipográfica controladarotaciones levescapas superpuestasun solo punto focal

Dribbble

Club Lava presenta

Viernes · 23:00 · Pista subterránea

Psicodélico ácido

También: acid design, rave, psychedelic

Tipografía que se derrite sobre colores ácidos — lima, lila y naranja flúor — con formas líquidas que escurren por los bordes. Mezcla los carteles de rock de los 60-70 con la gráfica rave y el acid design de los 2000.

Cuándo usarlo Música, festivales, moda urbana y lanzamientos donde el objetivo es frenar el scroll. Como sistema de producto es ilegible: resérvalo para piezas de impacto puntuales.

SVG textPath onduladopaleta ácida de choqueborder-radius animado (morph)texto eco desfasadogoteos con formas redondeadas

Dribbble

Dibujado y humano

6 estilos

Estudio Trazo Fino

Las buenas ideas empiezan en el cuaderno

Empieza a trazar por aquí

Doodle a mano

También: hand-drawn, garabato

Trazos de plumón y lápiz sobre el layout digital: subrayados imperfectos, flechas garabateadas, estrellitas de tinta y marcos que tiemblan un poco. Viene de la ilustración de cuaderno y lo adoptaron las marcas que quieren sonar cercanas y sin corbata.

Cuándo usarlo Marcas personales, educación, productos creativos y campañas que buscan calidez inmediata; funciona mejor como capa de acento sobre una base limpia que como sistema completo. Sigue muy vigente.

SVG de trazo a manoborder-radius irregularstroke-linecap: roundsubrayado con path onduladorotaciones sutiles

Dribbble

botón primario

¿el botón se alcanza a ver sin hacer scroll?

boceto v0.3 — no final

Boceto y wireframe

También: lo-fi, prototipo, sketch UI

La estética del prototipo en papel llevada a producción: cajas grises con X, barras en lugar de texto, botones punteados y notas al margen en tinta roja. Nace de los wireframes lo-fi de UX y se volvió un recurso visual para hablar de proceso, no de resultado.

Cuándo usarlo Portafolios de diseño, herramientas de producto, cursos de UX y landings que venden "proceso antes que píxel perfecto". Es de nicho, pero comunica honestidad al instante.

border: dashedplaceholder con X en SVGbarras grises como textoretícula de papel milimétricoanotaciones rotadas

Dribbble

Viñeta Nueve · núm. 12

¡Tinta fresca cada viernes, sin falta y sin filtro!

Lee el número 12

Comic y pop art

También: halftone, Lichtenstein, pop art

Herencia directa de Lichtenstein y la historieta clásica: tramas de puntos halftone (el punto Ben-Day como textura estrella), contornos negros gruesos, primarios puros y onomatopeyas en estrella. Del cartel impreso saltó a la web como inyección de energía.

Cuándo usarlo Promociones, gaming, marcas juveniles y campañas que piden humor y volumen; cansa rápido como sistema completo, brilla en héroes, anuncios y momentos puntuales.

radial-gradient repetido (halftone)bordes negros de 3pxsombra dura sin blurstarburst en SVGtexto con stroke

Dribbble

pack otoño · 12 diseños Edición 03

Stickers

También: sticker culture, calcomanías, die-cut

Elementos recortados con borde blanco grueso, pegados con rotaciones ligeras como la tapa de una laptop bien vivida. Sale de la cultura del skate y el streetwear, y de ahí saltó al branding juvenil y a las interfaces con personalidad.

Cuándo usarlo Comunidades, música, merch, campañas juveniles y estados vacíos con carácter; rinde mejor como capa lúdica sobre un layout ordenado. Vigente y muy querido.

paint-order: stroke (borde blanco)drop-shadow cortorotaciones levestextPath en arcocomposición dispersa

Dribbble

Savia Estudio

Marcas que crecen de forma orgánica

Identidad, empaque y web para proyectos que se cultivan despacio.

Ver proyectos

Orgánico y blobs

También: fluid shapes, ameba, blob design

Manchas curvas e irregulares como estructura de la página: amebas que hacen de fondo, de marco o de sustituto de foto. Fue la reacción amable a la rigidez del flat, muy asociada al wellness y a las marcas humanas de finales de los 2010s.

Cuándo usarlo Salud, bienestar, educación y productos que quieren sentirse cercanos y accesibles; un morphing lento le da vida casi gratis. Ya es común, pero con paleta propia sigue funcionando.

border-radius asimétricokeyframes de morphingcapas superpuestasgradientes suavespaleta vegetal

Dribbble

Molino Verde — Oaxaca

Jabón de avena y salvia

Saponificado en frío y secado cuarenta días al aire de la sierra.

Lote 12 · 90 g · vegano

Eco natural

También: earthy, sostenible, sustainable design

Verdes y tierras sobre papel reciclado: grano visible, ilustración botánica de línea, sellos circulares y serif humanista. Traduce el lenguaje del empaque artesanal —kraft, tinta, sello de goma— a la pantalla.

Cuándo usarlo Alimentos orgánicos, cosmética natural, café y marcas con historia de origen real; pide honestidad detrás, porque el greenwashing se nota a la primera. Vigente y en crecimiento.

feTurbulence como granotextPath circular (sello)SVG botánico de líneapaleta tierramix-blend-mode: multiply

Dribbble

Tech y futurista

9 estilos

ADVERTENCIA // RED PRIVADA

Contrato 07

OBJETIVONODO C-13 · TORRE HELIX

RIESGOALTO

PAGA12 500 CR

ACEPTAR CONTRATO

危険区域 SEC-07

Cyberpunk

También: neon noir, tech noir

Ciudad nocturna corrupta: amarillo de advertencia, cian y magenta sobre negro azulado, paneles con esquinas cortadas en diagonal, interferencia y datos en monospace. Nace en Blade Runner y Neuromancer y hoy lo mantienen vivos los videojuegos AAA y la cultura hacker.

Cuándo usarlo Lanzamientos de juegos, esports, streetwear tech y eventos nocturnos. Es un código muy cerrado: fuera del entretenimiento se percibe disfraz, y dentro exige ejecutarlo con oficio para no caer en cliché.

clip-path esquinas cortadastext-shadow RGB desplazadorepeating-linear-gradient de precauciónmono + glow cian

Dribbble

ORFEO-3 // TELEMETRÍA

ALT04 210 M

VEL862 KM/H

RUMBO214.6°

SEÑAL98.2%

ENLACE ESTABLE

HUD sci-fi

También: FUI, fictional UI, interfaces de película

Las interfaces ficticias del cine (Minority Report, los HUD de superhéroes): anillos de datos concéntricos, retículas, telemetría en mono diminuto y líneas hairline en cian sobre negro absoluto. Todo aparenta densidad de información aunque sea coreografía.

Cuándo usarlo Marcas aeroespaciales, defensa, productos de datos y portadas de agencias tech que quieren tono de misión. Como decoración de un dashboard real suele estorbar: resérvalo para momentos de marca, no para trabajar.

stroke-dasharray para ticksconic-gradient de barridohairlines rgba()mono micro + trackingSVG geométrico inline

HUDs+GUIs Dribbble

NEBLA · MODELO 2

Describe lo que imaginas

Un faro de cristal flotando sobre un mar de nubes al amanecer, luz cálida…

Generar4 variaciones · 1 crédito

Estética IA

También: gen-AI look, sparkle era

El uniforme visual del producto con IA desde 2023: gradiente profundo violeta-azul, destello de cuatro puntas como icono universal de "magia", bordes luminosos animados y auras difusas. Lo canonizaron los lanzamientos de asistentes y copilotos.

Cuándo usarlo Para señalizar features de IA dentro de un SaaS funciona al instante: el usuario ya aprendió el código. Pero es tan omnipresente que empieza a leerse genérico; diferénciate en la paleta o el detalle, no copies el violeta de todos.

gradiente border-box animadospark SVG de 4 puntasradial-gradient de aurasglow en el CTA

Dribbble

Usuarios activos 128 400 +18% este año

Envíos al instante

42 ms latencia media

+34% conversión

87%retención

Bento grid

También: cuadrícula bento, bento grid

Retícula compacta de tarjetas de tamaños mixtos con esquinas uniformes, cada celda dedicada a un dato o feature. La popularizaron los keynotes de Apple y las páginas de producto de 2022 en adelante: densidad ordenada que se escanea en segundos.

Cuándo usarlo Páginas de features, portafolios y resúmenes de producto que deben condensar mucho sin caos. Sigue plenamente vigente; el riesgo es llenar celdas por llenar — cada una debe ganarse su lugar con un dato real.

CSS grid con spansborder-radius uniformeborde 1px sutiljerarquía por escala numérica

Bento Grids Godly

Ingresos MRR

$48,250+12.4%

Cancelación

2.1%+0.4%

Ingresos semanalesúltimas 8 semanas

ClientePlanEstadoMonto

Clínica ÁureaProActivo$2,400

Constructora RivasBaseActivo$980

Dataviz y dashboard

También: analytics UI, dataviz

La estética del SaaS serio: tarjetas KPI con delta verde o rojo, sparklines, barras compactas y tablas densas, todo sostenido por jerarquía tipográfica en poco espacio. Su canon lo fijaron los productos de analytics y facturación de la última década.

Cuándo usarlo Apps B2B, paneles internos y reporting: comunica control y confianza antes de leer un solo número. Es atemporal mientras los datos sean reales; con datos inventados se nota y destruye la credibilidad.

tarjetas con sombra cortasparkline SVGchips de delta verde/rojotabular-numstabla con hairlines

Mobbin Dribbble

Salidas20:47

DestinoHoraVíaEstado

Valdemar21:0504En hora

Sierra Norte21:1207En hora

Puerto Luna21:2002Retrasado

Altavista21:3411En hora

Dot matrix y LED

También: flip-dot, tablero de estación, LED board

Texto y gráficos construidos de puntos: el tablero de salidas del aeropuerto, el letrero flip-dot del autobús, el LED ámbar o rojo sobre negro con su retícula visible. Nostalgia industrial que hoy vuelve como recurso de branding.

Cuándo usarlo Momentos de marca — drops, eventos, música, contadores en vivo — donde el guiño mecánico suma teatro. Como acento funciona de maravilla; como sistema completo de lectura larga fatiga, así que dosifícalo.

overlay radial-gradient (retícula)mono + letter-spacingtext-shadow glow ámbarparpadeo lento con opacity

Dribbble

Estudio Marea

Formas que se funden

Metaballs y transiciones líquidas: la interfaz se comporta como materia, no como cajas.

Líquido y morphing

También: gooey, metaballs

Formas que fluyen y se funden entre sí: el efecto gooey se logra desenfocando los blobs y recomprimiendo el canal alfa con un filtro SVG, de modo que al acercarse se sueldan como mercurio. Heredero digital de la lámpara de lava y del motion design orgánico.

Cuándo usarlo Heros de estudios creativos, música, cosmética y marcas que venden sensación más que especificación. Es memorable pero costoso en movimiento: úsalo en un solo momento estelar y respeta prefers-reduced-motion.

feGaussianBlur + feColorMatrixblobs con transform animadoborder-radius:50%gradientes saturados

Dribbble

Ritmo·Compás·Ritmo·Compás· Ritmo·Compás·Ritmo·Compás·

Estudio Pulso — tipografía viva

vértigo—deriva—vértigo—deriva— vértigo—deriva—vértigo—deriva—

Tipografía cinética

También: kinetic typography

El texto es el protagonista y está en movimiento: marquesinas infinitas, palabras que rotan o escalan en loop, contraste entre letra rellena y outline. Viene de los títulos de cine y del motion graphics, y la web lo adoptó como firma de energía editorial.

Cuándo usarlo Festivales, moda, música, portadas de estudios: genera ritmo inmediato con cero imágenes. Vigente y muy usado; el oficio está en la velocidad justa, la legibilidad en todo momento y una alternativa estática para reduced-motion.

translateX en loop seamlesscontenido duplicado 2x-webkit-text-stroke outlinecontraste serif/sansrecorte por el borde

Dribbble

Nuevo Runa 3.0 ya disponible

Despliega en segundos, no en horas

La plataforma de infraestructura para equipos que envían todos los días.

$ runa deploy --prod

Empezar gratisDocumentación

Dark tech

También: estilo Linear/Vercel, dev-tool premium

Negro azulado profundo, bordes de un pixel apenas visibles, un glow discreto detrás del titular y monospace para todo lo que huela a código. Lo definieron Linear, Vercel y Stripe para developers, y hoy es el uniforme del SaaS técnico serio.

Cuándo usarlo Productos para developers, APIs, infraestructura y SaaS B2B que quiere verse caro y competente. Muy vigente, pero tan común en tech que diferenciarse exige ejecutarlo con detalle obsesivo.

fondo #0a0b10borde 1px rgbaglow radial contenidoui-monospaceletter-spacing negativo

Godly Mobbin

Materiales y profundidad

Bitácora Roble

Esqueuomorfismo

Flat design

Entregar la propuesta

Material Design

Niebla de medianoche

Neumorfismo

Diseño que respira detrás del cristal

Glassmorfismo

Modela tu primer mundo

Claymorfismo

FUSIÓN

Metal líquido y chrome

Pase holograma

Holográfico e iridiscente

3D e ilustración dimensional

Volumen suave para marcas amables

3D inflado

Senderos facetados

Low poly

Tu producto, en 2.5D

Isométrico

El esqueleto del espacio

Wireframe 3D

Historias en capas

Papercraft

La materia que no existe

3D escultórico

Retro digital

El futuro era cromado

Y2K y Metalheart

Respira el futuro

Frutiger Aero

PLAZA ETÉREA

Vaporwave

AUTOPISTA NEÓN

Synthwave

Pixel art 8-bit

Terminal CRT

¡La Súper Página de Ramiro!

Web 1.0

SEÑALPERDIDA

Glitch art

Herencia impresa

Gala Meridiana

Art deco

forma yfunción.

Bauhaus

Músicaconcreta.

Estilo suizo

Café Cometa

Mid-century

Feria Bombón

Memphis

RuidoMotor

Grunge 90s

Zine y collage

Feria del Impreso

Risografía

Brutal y crudo

Obra Negra

Brutalismo

Cobra lo que vale tu trabajo

Neobrutalismo

Ruido

Anti-diseño

Pórtico GP-40 / Serie B

Industrial y utilitario

Este sitio no tiene diseño

HTML crudo

Minimal y editorial

Menos, pero mejor.

Minimalismo

Tipografía gigante

La ciudad que aprendió a caminar despacio

Editorial

Sin color, sin ruido.

Monocromo

Flor de Niebla

SEÑAL
PERDIDA

forma y
función.

Música
concreta.