Catálogo Visual de Estilos CSS
Compatible con Claude Code, OpenCode, Cursor, Antigravity y más.
El minimalismo web reduce cada elemento a su esencia funcional. Amplios espacios en blanco, tipografía limpia y una paleta restringida crean una experiencia donde el contenido respira. Cada pixel tiene un propósito; nada es decorativo. La jerarquía visual se logra con tamaño tipográfico y peso, no con adornos. Ideal para marcas que transmiten sofisticación a través de la simplicidad.
El minimalismo web reduce cada elemento a su esencia funcional. Amplios espacios en blanco, tipografía limpia y una paleta restringida crean una experiencia donde el contenido respira. Cada pixel tiene un propósito; nada es decorativo. La jerarquía visual se logra con tamaño tipográfico y peso, no con adornos. Ideal para marcas que transmiten sofisticación a través de la simplicidad.
El diseño plano elimina sombras, degradados y texturas en favor de colores sólidos y vibrantes, formas geométricas simples e iconografía bidimensional. Nacido como respuesta al skeuomorfismo, prioriza la funcionalidad y la velocidad de carga. Los elementos interactivos se distinguen por color y posición, no por simulación de profundidad.
El diseño plano elimina sombras, degradados y texturas en favor de colores sólidos y vibrantes, formas geométricas simples e iconografía bidimensional. Nacido como respuesta al skeuomorfismo, prioriza la funcionalidad y la velocidad de carga. Los elementos interactivos se distinguen por color y posición, no por simulación de profundidad.
Heredero directo del Estilo Tipográfico Internacional de los años 50. Grillas matemáticas rigurosas, tipografía sans-serif (Helvetica, Akzidenz), alineación asimétrica y jerarquía visual implacable. El contenido se organiza con precisión milimétrica. Los colores son funcionales, no decorativos. Perfecto para instituciones que necesitan comunicar autoridad y neutralidad.
Heredero directo del Estilo Tipográfico Internacional de los años 50. Grillas matemáticas rigurosas, tipografía sans-serif (Helvetica, Akzidenz), alineación asimétrica y jerarquía visual implacable. El contenido se organiza con precisión milimétrica. Los colores son funcionales, no decorativos. Perfecto para instituciones que necesitan comunicar autoridad y neutralidad.
The International Typographic Style, also known as the Swiss Style, is a graphic design style that emerged in Russia, Germany, and Netherlands in the 1920s and was further developed by designers in Switzerland during the 1950s.
It emphasizes cleanliness, readability, and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Akzidenz-Grotesk, and flush-left, ragged-right text.
Lleva el minimalismo al extremo utilitario. Cada componente existe porque cumple una función medible. Las interfaces son densas en información pero visualmente limpias. Tipografía monoespaciada, contrastes altos y feedback inmediato. No hay decoración; la estética emerge de la función pura. El usuario profesional lo agradece.
El espacio vacío no es ausencia, es el protagonista. Márgenes generosos, interlineado amplio y secciones que flotan en un océano de blanco. Las imágenes son grandes y aisladas. La tipografía es delgada y refinada. Crea una experiencia contemplativa donde cada elemento recibe atención total. Transmite exclusividad y cuidado artesanal.
El espacio vacío no es ausencia, es el protagonista. Márgenes generosos, interlineado amplio y secciones que flotan en un océano de blanco. Las imágenes son grandes y aisladas. La tipografía es delgada y refinada. Crea una experiencia contemplativa donde cada elemento recibe atención total. Transmite exclusividad y cuidado artesanal.
Más es más. Capas de textura, tipografía expresiva en múltiples tamaños, paletas vibrantes que colisionan intencionalmente, y una densidad visual que abruma los sentidos (en el buen sentido). Cada scroll revela nuevas sorpresas. Las imágenes se superponen, los textos se entrelazan con gráficos. Es un festín visual que celebra el exceso creativo.
Maximalismo — Colección 2026
Dirección de arte
Branding
La estética del desorden organizado. Elementos dispersos que parecen colocados al azar pero siguen un ritmo interno. Texturas de papel, manchas de tinta, fotografías polaroid y tipografía manuscrita coexisten en un collage digital que evoca lo táctil y lo humano. Abraza la imperfección como filosofía de diseño.
La estética del desorden organizado. Elementos dispersos que parecen colocados al azar pero siguen un ritmo interno. Texturas de papel, manchas de tinta, fotografías polaroid y tipografía manuscrita coexisten en un collage digital que evoca lo táctil y lo humano. Abraza la imperfección como filosofía de diseño.
Nacido en Milán en 1981, el Memphis desafía toda regla del buen gusto. Patrones geométricos frenéticos (zigzags, puntos, ondas), colores primarios contra pasteles inesperados, y formas que parecen diseñadas por un niño con un doctorado en arquitectura. Es caótico, divertido e imposible de ignorar.
Nacido en Milán en 1981, el Memphis desafía toda regla del buen gusto. Patrones geométricos frenéticos (zigzags, puntos, ondas), colores primarios contra pasteles inesperados, y formas que parecen diseñadas por un niño con un doctorado en arquitectura. Es caótico, divertido e imposible de ignorar.
Herencia directa del arte psicodélico de los 60. Degradados líquidos que se funden entre tonos neón, tipografía que se derrite y ondula, patrones fractales y efectos ópticos que marean. Los fondos vibran, las formas mutan. Es una experiencia visual inmersiva que busca alterar la percepción del usuario.
Herencia directa del arte psicodélico de los 60. Degradados líquidos que se funden entre tonos neón, tipografía que se derrite y ondula, patrones fractales y efectos ópticos que marean. Los fondos vibran, las formas mutan. Es una experiencia visual inmersiva que busca alterar la percepción del usuario.
La web como publicación impresa de alta gama. Columnas cuidadosamente proporcionadas, capitulares decorativas, pull quotes destacados y una jerarquía tipográfica que guía la lectura. Cada página es una composición editorial pensada. El whitespace es rítmico, las imágenes están integradas con el texto. Transmite credibilidad y profundidad intelectual.
La web como publicación impresa de alta gama. Columnas cuidadosamente proporcionadas, capitulares decorativas, pull quotes destacados y una jerarquía tipográfica que guía la lectura. Cada página es una composición editorial pensada. El whitespace es rítmico, las imágenes están integradas con el texto. Transmite credibilidad y profundidad intelectual.
Exploring the nuances of Autoridad intelectual through the lens of modern typography and asymmetrical grids. The design language speaks volumes without making a sound.
Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
La tipografía no acompaña al contenido: ES el contenido. Letras a escala monumental, juegos de peso y contraste, kerning artesanal y composiciones donde cada carácter es tratado como una pieza escultórica. Los colores son secundarios; el drama viene del negro contra el blanco y las variaciones de escala. Es diseño tipográfico puro.
La tipografía no acompaña al contenido: ES el contenido. Letras a escala monumental, juegos de peso y contraste, kerning artesanal y composiciones donde cada carácter es tratado como una pieza escultórica. Los colores son secundarios; el drama viene del negro contra el blanco y las variaciones de escala. Es diseño tipográfico puro.
Exploring the nuances of Precisión, sofisticación through the lens of modern typography and asymmetrical grids. The design language speaks volumes without making a sound.
Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
Tipografía como arma visual. Tamaños extremos que rompen la grilla, superposición de textos que desafían la legibilidad, mezclas violentas de serif y sans-serif. Las letras gritan, se amontonan, invaden el espacio. No busca ser bonito; busca ser imposible de ignorar. Es el punk del diseño tipográfico.
Tipografía Brutalista — Colección 2026
Dirección de arte
Branding
Composiciones dinámicas que emulan las mejores revistas de moda. Imágenes a sangre completa, textos que fluyen alrededor de formas orgánicas, columnas asimétricas y una cadencia visual que convierte el scroll en una experiencia narrativa. Cada sección es un spread editorial. La fotografía es protagonista absoluta.
Composiciones dinámicas que emulan las mejores revistas de moda. Imágenes a sangre completa, textos que fluyen alrededor de formas orgánicas, columnas asimétricas y una cadencia visual que convierte el scroll en una experiencia narrativa. Cada sección es un spread editorial. La fotografía es protagonista absoluta.
Exploring the nuances of Deseo, aspiración through the lens of modern typography and asymmetrical grids. The design language speaks volumes without making a sound.
Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
Fondos en negro profundo (#0a0a0a) o gris carbón que eliminan distracciones y reducen fatiga visual. Los acentos de color brillan como neón en la oscuridad: cian, violeta, verde esmeralda. La tipografía es nítida en alto contraste. Las sombras se convierten en resplandores sutiles. Es la interfaz preferida por desarrolladores, gamers y noctámbulos digitales.
Your workspace is optimized for maximum focus.
Terciopelo negro, ornamentos victorianos y una atmósfera que evoca catedrales medievales iluminadas por velas. Tipografía blackletter combinada con serif elegante. Texturas de encaje, filigrana dorada sobre fondos abisales y una paleta de carmesí, púrpura profundo y plata envejecida. Cada elemento destila una belleza siniestra y refinada.
Under the velvet shroud of night, the cathedral whispers secrets of aged silver and crimson blood. Every archway is a prayer in stone, every shadow a memory of candlelight flicker.
Mathematical perfection meets spiritual transcendence.
The life force that flows through the dark corridors.
A single light in the vast medieval abyss.
Inspirado en el cine negro de los 40. Alto contraste entre luces y sombras, composiciones diagonales que generan tensión, y una paleta monocromática con un único acento dramático (rojo sangre o dorado). Tipografía condensada que evoca carteles de cine clásico. Todo se ve a través de un filtro de peligrosa sofisticación.
10:45 PM. The rain hasn't stopped since Tuesday. The city looks like a wet grave. They call it "dangerous elegance", but down here in the gutter, it's just survival. The neon bleeds into the puddles like a wound that won't close.
Distorsión visual como recurso narrativo. Tipografía que se corrompe y parpadea, fondos con texturas de óxido y deterioro, paletas de rojo visceral contra negro absoluto. Elementos que se mueven de forma inesperada, glitch effects y una sensación constante de que algo acecha tras la interfaz. No es para todos, y eso es exactamente el punto.
SYSTEM CORRUPTION DETECTED. ENTITY CONTAINMENT FAILURE. DO NOT LOOK DIRECTLY AT THE ANOMALY.
"The walls are breathing again. The color red is louder than it was yesterday. I keep finding my own handwriting in places I've never been. If you are reading this, do not trust the light."
Neón sobre hormigón digital. Gradientes que van del magenta al cian eléctrico, tipografía glitcheada, interfaces que parecen terminales hackeadas y fondos urbanos distópicos. Los elementos parpadean, se distorsionan y vibran con energía frenética. Líneas de escaneo CRT, ruido visual y una estética que dice 'el futuro ya llegó y es hermosamente caótico'.
"Neón sobre hormigón digital. Gradientes que van del magenta al cian eléctrico, tipografía glitcheada, interfaces que parecen terminales hackeadas y fondos urbanos distópicos. Los elementos parpadean, se distorsionan y vibran con energía frenética. Líneas de escaneo CRT, ruido visual y una estética que dice 'el futuro ya llegó y es hermosamente caótico'."
Interfaces que parecen extraídas de la cabina de una nave espacial. Elementos HUD translúcidos, indicadores radiales, rejillas de datos y una paleta dominada por azules profundos, blancos fríos y acentos de alerta en ámbar. La tipografía es monoespaciada y técnica. Todo transmite precisión instrumental y la vastedad del cosmos.
"Interfaces que parecen extraídas de la cabina de una nave espacial. Elementos HUD translúcidos, indicadores radiales, rejillas de datos y una paleta dominada por azules profundos, blancos fríos y acentos de alerta en ámbar. La tipografía es monoespaciada y técnica. Todo transmite precisión instrumental y la vastedad del cosmos."
La estética de las startups que conquistan el mundo. Gradientes suaves de azul a púrpura, ilustraciones 3D flotantes, tarjetas con glassmorphism sutil y una tipografía geométrica y limpia. Amplios espacios, CTAs claros y una sensación de producto pulido y confiable. Es el lenguaje visual de la innovación corporativa moderna.
La estética de las startups que conquistan el mundo. Gradientes suaves de azul a púrpura, ilustraciones 3D flotantes, tarjetas con glassmorphism sutil y una tipografía geométrica y limpia. Amplios espacios, CTAs claros y una sensación de producto pulido y confiable. Es el lenguaje visual de la innovación corporativa moderna.
Tarjetas translúcidas sobre fondos abstractos.
Respiración visual que transmite confianza.
Tipografía sana y componentes precisos.
Formas que imitan la naturaleza: curvas amébicas, bordes ondulados, blobs que fluyen y mutan. La paleta va de verdes salvia a azules agua, pasando por terracota y arena. Las secciones no tienen esquinas; todo es suave y orgánico. Las animaciones son lentas y fluidas como el agua. Transmite conexión con lo vivo y lo cambiante.
Formas que imitan la naturaleza: curvas amébicas, bordes ondulados, blobs que fluyen y mutan. La paleta va de verdes salvia a azules agua, pasando por terracota y arena. Las secciones no tienen esquinas; todo es suave y orgánico. Las animaciones son lentas y fluidas como el agua. Transmite conexión con lo vivo y lo cambiante.. Sustituye la dureza del píxel por la suavidad de la gota.
Rechazo absoluto del ángulo recto. Todo fluye como el agua.
Transiciones largas (4-8 segundos) que respiran y mutan.
Tonos agua, salvia y corales pastel que alivian la vista.
Tonos que vienen directamente de la tierra: ocre, siena, verde musgo, marrón cacao y un blanco hueso cálido. Texturas de papel kraft, lino y madera. Tipografía con personalidad artesanal pero legible. Fotografía con luz natural cálida. Todo evoca una conexión honesta con la tierra, la tradición y lo hecho a mano.
Tonos que vienen directamente de la tierra: ocre, siena, verde musgo, marrón cacao y un blanco hueso cálido. Texturas de papel kraft, lino y madera. Tipografía con personalidad artesanal pero legible. Fotografía con luz natural cálida. Todo evoca una conexión honesta con la tierra, la tradición y lo hecho a mano.. Reconectando con la arcilla húmeda, la calidez del sol y el paso del tiempo.
Fondos cálidos, sin blanquear.
Acentos cálidos de barro horneado.
Tonos naturales para anclar la vista.
Tipografía pesada, nunca negro puro.
"La perfección es plástica; la belleza real reside en la textura rugosa de lo que ha sido tocado por manos humanas."
Ilustraciones botánicas detalladas, marcos de hojas y flores, y una paleta que va del verde esmeralda al rosa empolvado pasando por el dorado suave. Tipografía serif elegante con ornamentos florales. Los fondos pueden tener texturas de acuarela. Es refinado sin ser frío, natural sin ser rústico. Evoca jardines secretos y invernaderos victorianos.
Ilustraciones botánicas detalladas, marcos de hojas y flores, y una paleta que va del verde esmeralda al rosa empolvado pasando por el dorado suave. Tipografía serif elegante con ornamentos florales. Los fondos pueden tener texturas de acuarela. Es refinado sin ser frío, natural sin ser rústico. Evoca jardines secretos y invernaderos victorianos.. Descubre la elegancia de los invernaderos de cristal, donde la ciencia y el arte se entrelazan en cada pétalo grabado a mano.
La filosofía japonesa de encontrar belleza en la imperfección. Texturas ásperas, paletas terrosas apagadas, asimetría intencional y espacios vacíos que invitan a la contemplación. Los bordes no son perfectos, las imágenes tienen grano. La tipografía es mínima y ubicada con cuidado asimétrico. Todo respira wabi (austeridad) y sabi (paso del tiempo).
La filosofía japonesa de encontrar belleza en la imperfección. Texturas ásperas, paletas terrosas apagadas, asimetría intencional y espacios vacíos que invitan a la contemplación. Los bordes no son perfectos, las imágenes tienen grano. La tipografía es mínima y ubicada con cuidado asimétrico. Todo respira wabi (austeridad) y sabi (paso del tiempo).
Nada dura.
Nada está terminado.
Nada es perfecto.
Todo construido con bloques de píxeles visibles. Paletas de 16 colores, tipografía bitmap, bordes duros sin anti-aliasing y animaciones sprite sheet. Los fondos son tiles repetidos, los botones parecen controles de NES. La estética evoca la era dorada de los videojuegos y genera un sentimiento cálido de nostalgia en quienes crecieron con esos píxeles.
> Pixel Art / 8-bit INIT...
Todo construido con bloques de píxeles visibles. Paletas de 16 colores, tipografía bitmap, bordes duros sin anti-aliasing y animaciones sprite sheet. Los fondos son tiles repetidos, los botones parecen controles de NES. La estética evoca la era dorada de los videojuegos y genera un sentimiento cálido de nostalgia en quienes crecieron con esos píxeles.
Rejillas de perspectiva infinita bañadas en púrpura y magenta, soles geométricos en el horizonte, tipografía chrome con reflejos y una paleta de neones que brillan contra fondos oscuros. Todo parece sacado de un VHS de 1985. Las animaciones son líneas de escaneo, destellos y transiciones retro-futuristas. Es la nostalgia de un futuro que nunca llegó.
Rejillas de perspectiva infinita bañadas en púrpura y magenta, soles geométricos en el horizonte, tipografía chrome con reflejos y una paleta de neones que brillan contra fondos oscuros. Todo parece sacado de un VHS de 1985. Las animaciones son líneas de escaneo, destellos y transiciones retro-futuristas. Es la nostalgia de un futuro que nunca llegó.
El internet del año 2000 revisitado con ironía afectuosa. Degradados metálicos (plata, cromo), formas infladas y burbujeantes, estrellas y destellos, tipografía futurista-retro y colores que van del lila al plateado pasando por el celeste iridiscente. Es kitsch elevado a arte, la estética de los primeros teléfonos flip y las carátulas de CD.
El internet del año 2000 revisitado con ironía afectuosa. Degradados metálicos (plata, cromo), formas infladas y burbujeantes, estrellas y destellos, tipografía futurista-retro y colores que van del lila al plateado pasando por el celeste iridiscente. Es kitsch elevado a arte, la estética de los primeros teléfonos flip y las carátulas de CD.
Texturas sucias: papel rasgado, manchas de tinta, cinta adhesiva y fotocopias de baja resolución. Tipografía typewriter desalineada, collages analógicos escaneados y una paleta de negros, grises y un acento sucio (amarillo mostaza, rojo oxidado). Todo parece hecho en un fanzine a las 3 AM. Es auténticamente imperfecto y orgullosamente amateur.
Texturas sucias: papel rasgado, manchas de tinta, cinta adhesiva y fotocopias de baja resolución. Tipografía typewriter desalineada, collages analógicos escaneados y una paleta de negros, grises y un acento sucio (amarillo mostaza, rojo oxidado). Todo parece hecho en un fanzine a las 3 AM. Es auténticamente imperfecto y orgullosamente amateur.
Cada detalle comunica que el precio no es un problema. Paletas de negro, dorado y blanco marfil. Tipografía serif de trazo fino con tracking amplio. Animaciones lentas y elegantes. Imágenes de alta resolución con tratamiento cinematográfico. Los espacios son amplios, los elementos pocos y cada uno es exquisitamente renderizado. Menos elementos, más impacto.
Cada detalle comunica que el precio no es un problema. Paletas de negro, dorado y blanco marfil. Tipografía serif de trazo fino con tracking amplio. Animaciones lentas y elegantes. Imágenes de alta resolución con tratamiento cinematográfico. Los espacios son amplios, los elementos pocos y cada uno es exquisitamente renderizado. Menos elementos, más impacto.
DISCOVER EXCELLENCELa web como pasarela de moda. Tipografía display monumental, fotografía en blanco y negro de alto contraste, layouts que desafían las convenciones y una presencial visual que domina la pantalla. Los textos son mínimos y crípticos. La navegación es experimental. Cada página es una declaración artística más que una interfaz funcional.
/ 01 // La web como pasarela de moda. Tipografía display monumental, fotografía en blanco y negro de alto contraste, layouts que desafían las convenciones y una presencial visual que domina la pantalla. Los textos son mínimos y crípticos. La navegación es experimental. Cada página es una declaración artística más que una interfaz funcional.
EXPLORE →Colores profundos de piedras preciosas: esmeralda, rubí, zafiro, amatista, sobre fondos de terciopelo negro. Degradados que simulan el brillo de gemas pulidas. Tipografía con detalles dorados. Bordes finos y ornamentados. Las imágenes tienen un tratamiento de iluminación dramática que hace que cada producto brille como bajo un foco de joyería.
Colores profundos de piedras preciosas: esmeralda, rubí, zafiro, amatista, sobre fondos de terciopelo negro. Degradados que simulan el brillo de gemas pulidas. Tipografía con detalles dorados. Bordes finos y ornamentados. Las imágenes tienen un tratamiento de iluminación dramática que hace que cada producto brille como bajo un foco de joyería.
El diseño que usan las firmas que mueven el mundo. Paleta sobria de azul navy, gris antracita y blanco. Tipografía serif clásica (Georgia, Garamond) que evoca contratos y documentos oficiales. Layouts estructurados con precisión militar. Fotografía corporativa profesional. Todo comunica que esta institución ha existido por siglos y existirá por siglos más.
El diseño que usan las firmas que mueven el mundo. Paleta sobria de azul navy, gris antracita y blanco. Tipografía serif clásica (Georgia, Garamond) que evoca contratos y documentos oficiales. Layouts estructurados con precisión militar. Fotografía corporativa profesional. Todo comunica que esta institución ha existido por siglos y existirá por siglos más.
Paneles translúcidos con blur de fondo que crean capas de profundidad. Bordes finos semi-transparentes, sombras sutiles y fondos con gradientes vibrantes que se ven a través del cristal esmerilado. Es el lenguaje visual de macOS y iOS moderno llevado a la web. Crea interfaces que parecen flotar sobre el contenido.
Elementos que parecen extruidos del fondo mismo. Sombras dobles (una clara y una oscura) sobre fondos monocromáticos crean un efecto de relieve suave y táctil. Los botones parecen poder presionarse físicamente. La paleta es monocromática con variaciones mínimas de luminosidad. Es minimalista pero con una dimensión física que invita al tacto.
Elementos que parecen extruidos del fondo mismo. Sombras dobles (una clara y una oscura) sobre fondos monocromáticos crean un efecto de relieve suave y táctil. Los botones parecen poder presionarse físicamente. La paleta es monocromática con variaciones mínimas de luminosidad. Es minimalista pero con una dimensión física que invita al tacto.
Elementos que parecen hechos de arcilla o plastilina. Bordes redondeados suaves, sombras internas y externas que crean volumen, y una paleta de colores pastel vibrante. Los componentes parecen juguetes 3D amigables. Tipografía redondeada que combina con la estética moldeable. Es el diseño que te hace sonreír mientras haces una transferencia bancaria.
Elementos que parecen hechos de arcilla o plastilina. Bordes redondeados suaves, sombras internas y externas que crean volumen, y una paleta de colores pastel vibrante. Los componentes parecen juguetes 3D amigables. Tipografía redondeada que combina con la estética moldeable. Es el diseño que te hace sonreír mientras haces una transferencia bancaria.
Simulación digital de materiales reales: cuero con costuras, metal cepillado, madera con veta, perillas que giran. Cada elemento imita su contraparte física con texturas fotorrealistas. Las sombras son exactas, los reflejos siguen la fuente de luz. Es la estética del iPhone original y sigue siendo perfecta para interfaces que emulan herramientas físicas.
El sistema de diseño de Google. Superficies de papel digital con elevaciones definidas, sombras que comunican jerarquía, y un sistema de componentes exhaustivamente documentado. Colores con propósito semántico, tipografía Roboto en una escala armónica y animaciones que siguen las leyes de la física. Es el framework más pragmático y accesible.
Papel Digital & Tinta
El sistema de diseño de Google. Superficies de papel digital con elevaciones definidas, sombras que comunican jerarquía, y un sistema de componentes exhaustivamente documentado. Colores con propósito semántico, tipografía Roboto en una escala armónica y animaciones que siguen las leyes de la física. Es el framework más pragmático y accesible.
Las sombras estandarizadas (1dp a 24dp) comunican la jerarquía. La luz proyecta sombras direccionales y ambientales exactas para guiar la atención del usuario.
Inputs, switches y botones. La tinta digital responde a la interacción del usuario de manera predecible.
El sistema de diseño de Microsoft. Acrílico (blur translúcido), reveal highlights que siguen el cursor, profundidad con sombras y capas, y movimientos conectados entre vistas. La luz es un material de diseño: los elementos responden al hover con iluminación reveladora. Combina la funcionalidad de Office con la elegancia de un sistema operativo moderno.
Blur, Light, Depth, Material, Scale
El sistema de diseño de Microsoft. Acrílico (blur translúcido), reveal highlights que siguen el cursor, profundidad con sombras y capas, y movimientos conectados entre vistas. La luz es un material de diseño: los elementos responden al hover con iluminación reveladora. Combina la funcionalidad de Office con la elegancia de un sistema operativo moderno.
Hover over these controls to see the light follow your cursor.
In Fluent Design, shadows are not just drop shadows. They have specialized directional components and ambient components to create realistic elevation (e.g. Dialogue shadow, Flyout shadow).
HTML crudo expuesto sin pretensiones. Tipografía por defecto del sistema (Times New Roman, Courier), fondos blancos agresivos, bordes negros de 3px, layouts que ignoran toda convención de UX. Los links son azules y subrayados. No hay hover effects elegantes. Es la antítesis del diseño polido, y en esa honestidad radical encuentra su propia belleza.
WARNING:
THIS SITE IS BEST VIEWED
HTML crudo expuesto sin pretensiones. Tipografía por defecto del sistema (Times New Roman, Courier), fondos blancos agresivos, bordes negros de 3px, layouts que ignoran toda convención de UX. Los links son azules y subrayados. No hay hover effects elegantes. Es la antítesis del diseño polido, y en esa honestidad radical encuentra su propia belleza.
This is an unstyled paragraph trying to communicate raw data. Click here to go nowhere. Do not expect hover animations.
| FEATURE | STATUS |
|---|---|
| Border-radius | FALSE |
| Box-shadow | FALSE |
| Gradients | FALSE |
Rompe todas las reglas deliberadamente. Textos superpuestos e ilegibles, colores que chocan violentamente, cursores custom que confunden, y una navegación intencionalmente hostil. No es mal diseño por accidente; es destrucción artística de las convenciones. Funciona como statement cultural, no como interfaz funcional. Fascinante de ver, frustrante de usar.
Rompe todas las reglas deliberadamente. Textos superpuestos e ilegibles, colores que chocan violentamente, cursores custom que confunden, y una navegación intencionalmente hostil. No es mal diseño por accidente; es destrucción artística de las convenciones. Funciona como statement cultural, no como interfaz funcional. Fascinante de ver, frustrante de usar.
WHY ARE YOU STILL HERE? GO AWAY.
La escuela que definió el diseño moderno en 1919. Formas geométricas primarias (círculo, triángulo, cuadrado), colores primarios puros contra negro y blanco, y una grilla que trata cada pixel como parte de una composición arquitectónica. Tipografía sans-serif geométrica, layouts asimétricos pero equilibrados. Función y forma son inseparables.
La escuela que definió el diseño moderno en 1919. Formas geométricas primarias (círculo, triángulo, cuadrado), colores primarios puros contra negro y blanco, y una grilla que trata cada pixel como parte de una composición arquitectónica. Tipografía sans-serif geométrica, layouts asimétricos pero equilibrados. Función y forma son inseparables.
Jedes Element existiert nur wenn es eine messbare Funktion erfüllt.
Kreis, Dreieck und Quadrat sind die Bausteine jeder Komposition.
Eine neue Einheit — die Verschmelzung von Handwerk und Industrie.
El arte al servicio de la revolución. Composiciones diagonales dinámicas, paleta roja y negra sobre blanco, tipografía en ángulos dramáticos y fotomontajes propagandísticos. Los elementos parecen en movimiento constante, como carteles soviéticos de los años 20 reimaginados en formato digital. Es agresivo, es político, es imposible de ignorar.
El arte al servicio de la revolución. Composiciones diagonales dinámicas, paleta roja y negra sobre blanco, tipografía en ángulos dramáticos y fotomontajes propagandísticos. Los elementos parecen en movimiento constante, como carteles soviéticos de los años 20 reimaginados en formato digital. Es agresivo, es político, es imposible de ignorar.
La composición diagonal fuerza el movimiento ocular. Nada descansa en la horizontalidad pasiva.
La tipografía es material de construcción. Las letras se apilan como vigas de acero industrial.
Energía revolucionaria
La lógica de los sueños aplicada al diseño web. Yuxtaposiciones imposibles, escalas distorsionadas, elementos que desafían la gravedad y composiciones que parecen salidas del subconsciente. Los fondos mutan suavemente, los objetos flotan sin razón. La tipografía puede ser perfectamente normal como contraste al caos visual. Es Dalí y Magritte en formato responsive.
La lógica de los sueños aplicada al diseño web. Yuxtaposiciones imposibles, escalas distorsionadas, elementos que desafían la gravedad y composiciones que parecen salidas del subconsciente. Los fondos mutan suavemente, los objetos flotan sin razón. La tipografía puede ser perfectamente normal como contraste al caos visual. Es Dalí y Magritte en formato responsive.
Los relojes se derriten sobre los elementos de la interfaz. La gravedad es opcional. El scroll mueve las cosas lateral e inesperadamente.
Las cosas no son lo que parecen. Un botón puede ser una puerta, una puerta una ventana al subconsciente digital.
Galerías de arte, agencias creativas
Puntos Ben-Day, colores sólidos en bloques imposiblemente saturados, contornos negros gruesos y composiciones que celebran la cultura de masas. Tipografía en bocadillos de cómic (BOOM!, POW!), iconos de cultura pop y una energía que convierte cualquier producto en un icono. Es Warhol y Lichtenstein diseñando tu landing page.
Puntos Ben-Day, colores sólidos en bloques imposiblemente saturados, contornos negros gruesos y composiciones que celebran la cultura de masas. Tipografía en bocadillos de cómic (BOOM!, POW!), iconos de cultura pop y una energía que convierte cualquier producto en un icono. Es Warhol y Lichtenstein diseñando tu landing page.
Diversión audaz, atractivo masivo
Bienes de consumo, entretenimiento
Colores CMYK puros, puntos Ben-Day y contornos negros gruesos.
Pinceladas expresivas como texturas de fondo, campos de color que evocan emociones sin representar nada concreto, y una escala monumental que abruma. La paleta es profunda y emocional. La tipografía es mínima y casi apologética ante la fuerza del color. Los layouts son amplios para dejar que la expresión visual domine.
Pinceladas expresivas como texturas de fondo, campos de color que evocan emociones sin representar nada concreto, y una escala monumental que abruma. La paleta es profunda y emocional. La tipografía es mínima y casi apologética ante la fuerza del color. Los layouts son amplios para dejar que la expresión visual domine.
La pantalla como lienzo de acción. El gesto humano traducido en textura digital, salpicaduras de color industrial y la energía visceral del dripping.
Bloques inmensos de color profundo con bordes difuminados. El color ES el contenido. La vibración luminosa de una pintura de Rothko pulsando en la pantalla.
Arte fino, alta cultura
Ma (間): el espacio vacío como elemento activo de diseño. Una asimetría deliberada que evoca el ikebana, paletas de grises cálidos con un único acento (rojo bermellón o azul índigo), y una reducción extrema de elementos. Todo lo innecesario ha sido removido dos veces. La tipografía es fina y ubicada con la precisión de una ceremonia del té.
Ma (間): el espacio vacío como elemento activo de diseño. Una asimetría deliberada que evoca el ikebana, paletas de grises cálidos con un único acento (rojo bermellón o azul índigo), y una reducción extrema de elementos. Todo lo innecesario ha sido removido dos veces. La tipografía es fina y ubicada con la precisión de una ceremonia del té.
El espacio vacío no es ausencia. Es una presencia sustancial que invita a la contemplación.
Calma zen, vacío
Líneas sinuosas inspiradas en la naturaleza: tallos ondulantes, flores estilizadas, formas de libélula y pavo real. Marcos ornamentales con curvas art nouveau envuelven el contenido. Paleta de verdes jade, dorados y violetas profundos. Tipografía con remates orgánicos que fluyen como enredaderas. Es la estética de Mucha y Gaudí llevada al navegador.
Líneas sinuosas inspiradas en la naturaleza: tallos ondulantes, flores estilizadas, formas de libélula y pavo real. Marcos ornamentales con curvas art nouveau envuelven el contenido. Paleta de verdes jade, dorados y violetas profundos. Tipografía con remates orgánicos que fluyen como enredaderas. Es la estética de Mucha y Gaudí llevada al navegador.
Tallos ondulantes y curvas orgánicas que fluyen como enredaderas por toda la composición.
Inspirado en la naturaleza: libélulas, pavos reales y flores estilizadas como motivos decorativos.
Patrimonio, cosméticos de lujo
Geometría lujosa de los años 20. Líneas de abanico, patrones sunburst, triángulos escalonados y simetría bilateral que evoca los rascacielos de Manhattan y los interiores de los transatlánticos. Dorado sobre negro, tipografía display con remates geométricos y ornamentos que combinan maquinaria con opulencia. Es el jazz visual del diseño.
Geometría lujosa de los años 20. Líneas de abanico, patrones sunburst, triángulos escalonados y simetría bilateral que evoca los rascacielos de Manhattan y los interiores de los transatlánticos. Dorado sobre negro, tipografía display con remates geométricos y ornamentos que combinan maquinaria con opulencia. Es el jazz visual del diseño.
Sunbursts, abanicos y triángulos escalonados que evocan los rascacielos de Manhattan.
Glamour geométrico — Dorado sobre negro, la combinación del jazz y el glamour.
Hoteles, coctelerías, moda — Composiciones bilaterales que evocan las puertas de los transatlánticos.
Contornos gruesos de cómic, colores primarios y secundarios vibrantes, personajes ilustrados y animaciones exageradas con principios de animación clásica (squash & stretch). Los botones rebotan, los iconos tienen personalidad propia. La tipografía es redondeada y amigable. Es imposible visitar este sitio sin sonreír. Está diseñado para que cada interacción sea un momento de alegría.
Diversión, energía – Marcas infantiles, gaming, comida
Diviértete con colores vivos, trazos gruesos y personajes alegres.
La estética de lo tierno llevada al extremo. Paleta de pasteles suaves (rosa bebé, lavanda, menta), esquinas ultra-redondeadas, iconos con ojos enormes y expresivos, y patrones de nubes, estrellas y corazones. La tipografía es redondeada y burbujosa. Cada elemento tiene una personalidad adorable. Es Hello Kitty diseñando una interfaz de usuario.
Ternura, afecto – J-fashion, papelería, apps
Personajes tiernos, pastel y vibrante energía.
Todo parece dibujado a mano con marcador. Bordes irregulares, ilustraciones estilo cuaderno de apuntes, flechas dibujadas, subrayados orgánicos y una tipografía que simula escritura manual. Las texturas de papel son omnipresentes. Los errores son intencionales y encantadores. Transmite humanidad, cercanía y una ausencia total de pretensión corporativa.
Autenticidad, artesanía – Educación, marcas indie
¡No olvidar!
Líneas sueltas, garabatos y energía espontánea.
(Aquí no usamos reglas ni compás)
Todo comienza con lápiz y papel.
Manchas de marcador para resaltar.
Nuestra letra (casi) siempre es legible.
La estética de una laptop cubierta de stickers. Elementos superpuestos con bordes blancos recortados, rotaciones aleatorias, sombras que simulan pegatinas levantadas y una mezcla ecléctica de fotografía, ilustración y tipografía. Es el scrapbook digital de una generación que creció con Tumblr y Pinterest.
Diversión ecléctica, DIY – Redes sociales, marcas juveniles
Recortes, pegatinas y una explosión de creatividad.
Capas de papel virtuales que crean profundidad mediante sombras suaves y superposición. Cada sección parece cortada y elevada sobre la anterior. Los bordes pueden ser rectos o artesanalmente irregulares. La paleta suele ser de tonos complementarios que se oscurecen capa a capa. Es la técnica del kirigami aplicada al diseño web con un efecto 3D sorprendentemente elegante.
Profundidad, artesanía – Invitaciones, eventos culturales
Capas recortadas, sombras delicadas y una estética artesanal.
Descarga el CSS Style Guide Skill y úsalo con tus herramientas de inteligencia artificial favoritas. Genera aplicaciones web con estilos profesionales predefinidos directamente desde tu asistente de código.
css-style-guide.skill..zip si es necesario y descomprímelo..agent/skills/ (o la ruta de skills que defina tu agente) de tu proyecto..agent/skills/css-style-guide/SKILL.md.Compatible con agentes que soportan el formato de Skills en Markdown