Design TokenDesign Token
Un Design Token le da nombre a una decisión de diseño. Por ejemplo: un color, un espacio, una fuente o la velocidad de una animación.
Abrir guíaEstilos de diseño de UI explicados con ejemplos
Ver cómo se ve cada estilo, cuándo ayuda y cuándo estorba.
VarianteVariant
Un Variant es una versión aprobada de un componente para un tamaño, fuerza o configuración diferente.
Abrir guíaJerarquía VisualVisual Hierarchy
La Jerarquía Visual guía lo que las personas notan primero, después y al final mediante tamaño, contraste, posición y espacio.
Abrir guíaContraste de colorColor Contrast
El contraste de color es la diferencia de luz medida entre el contenido y el fondo cercano. Muestra si los textos y bordes importantes son fáciles de ver.
Abrir guíaTipografíaTypography
La tipografía es cómo se eligen y organizan los estilos de texto para que las palabras sean legibles, ordenadas y coherentes con la marca.
Abrir guíaEscriba EscalaType Scale
Un Type Scale es un pequeño conjunto planeado de tamaños de texto y alturas de línea.
Abrir guíaPaleta de coloresColor Palette
Una paleta de colores es un conjunto de colores planificado. Cada color tiene un rol, estado o superficie claros.
Abrir guíaEscala de espaciadoSpacing Scale
Una Spacing Scale es un conjunto pequeño de tamaños de separación. Agrupa cosas y mantiene un ritmo visual constante.
Abrir guíaIconografíaIconography
La iconografía es un conjunto de símbolos compartido con apariencia uniforme y significados claros para acciones e ideas.
Abrir guíaModo oscuroDark Mode
El Modo oscuro cambia superficies, texto, bordes, medios y estados para un entorno oscuro.
Abrir guíaDiseño AdaptableResponsive Design
El Diseño Adaptable permite que la disposición, el contenido y los controles cambien para adaptarse al espacio y dispositivo disponibles.
Abrir guíaRedScrim
Un scrim es una capa oscura traslúcida detrás de una ventana emergente. Separa la ventana y muestra que la página de abajo está bloqueada.
Abrir guíaEspaciadoSpacing
El espaciado es espacio vacío colocado intencionalmente. Agrupa elementos relacionados, separa ideas y da ritmo a la página.
Abrir guíaMargenMargin
El margen es el espacio fuera del borde de un elemento. Mantiene ese elemento alejado de los elementos de diseño cercanos.
Abrir guíaRellenoPadding
El relleno es el espacio dentro del borde de un elemento, entre su contenido y su borde.
Abrir guíaEspacioGap
El espacio es el que un contenedor coloca entre sus hijos de Flexbox o Grid. La misma regla se aplica a cada par.
Abrir guíaColumna centradaCentered Column
Una columna centrada tiene un ancho máximo legible y un espacio que parece igual a ambos lados.
Abrir guíaCuadrícula BentoBento Grid
Una cuadrícula tipo bento junta bloques de diferentes tamaños en un solo diseño. Los espacios más grandes muestran qué contenido es el más importante.
Abrir guíaTruncamiento de TextoText Truncation
El truncamiento de texto corta el texto para ahorrar espacio. Una elipsis muestra que falta una o más líneas.
Abrir guíaRelación de aspectoAspect Ratio
La relación de aspecto dice qué tan ancho es un elemento comparado con qué tan alto es.
Abrir guíaDesenfoque de fondoBackdrop Blur
El desenfoque de fondo suaviza lo que está detrás de una capa transparente. No desenfoca el contenido de esa capa.
Abrir guíaGlassmorfismoGlassmorphism
El glassmorfismo es un estilo visual con superficies claras en capas. Utiliza desenfoque, bordes claros y una pequeña sensación de profundidad.
Abrir guíaVidrio LíquidoLiquid Glass
Vidrio Líquido es un estilo de material claro y en movimiento. Utiliza flexión similar a una lente, reflejos y formas que parecen unirse o flexionarse.
Abrir guíaSkeuomorfismoSkeuomorphism
El skeuomorfismo copia objetos reales familiares para explicar un control digital. También puede copiar sus materiales.
Abrir guíaNeumorfismoNeumorphism
El neumorfismo es un estilo suave y de bajo contraste. Las sombras claras y oscuras hacen que los controles parezcan elevados o presionados sobre una superficie de un solo color.
Abrir guíaNeobrutalismoNeobrutalism
El neobrutalismo es un estilo digital audaz y de alto contraste. Utiliza formas simples, bordes gruesos, colores directos y un diseño mecánico claro.
Abrir guíaMinimalismoMinimalism
El minimalismo elimina lo que un diseño no necesita. Aun así mantiene el producto claro, útil y distinto.
Abrir guíaDiseño PlanoFlat Design
El diseño plano usa formas simples, colores sólidos y áreas planas claras, con poca profundidad falsa.
Abrir guíaClaymorphismClaymorphism
Claymorphism es un estilo divertido con formas hinchadas y esquinas redondas. Las sombras suaves y los colores pastel hacen que parezca arcilla.
Abrir guíaEstética Digital Y2KY2K Digital Aesthetic
Esta estética digital es un estilo retro-futuro de finales de los años 1990 y principios de los 2000 de la cultura digital. A menudo utiliza cromo, píxeles, degradados brillantes y detalles de computadora juguetones.
Abrir guíaFrutiger AeroFrutiger Aero
Frutiger Aero es un estilo esperanzador de mediados de los 2000. Mezcla interfaces brillantes con cielos azules, agua, plantas verdes, burbujas y tecnología de aspecto amigable.
Abrir guíaBrutalismo WebWeb Brutalism
El brutalismo web es un estilo web crudo. Muestra la estructura, los valores predeterminados del navegador, la tipografía simple y la aspereza planeada en lugar del pulido habitual.
Abrir guíaWeb vernáculaVernacular Web
Web vernácula copia los sitios cotidianos que crean las comunidades. Se diferencia de los sistemas pulidos fabricados por grandes grupos.
Abrir guíaAquaAqua
Aqua es un estilo de interfaz brillante de los primeros macOS. Usa controles que brillan, profundidad como de gel, rayas finas y detalles en azul brillante.
Abrir guíaWindows AeroWindows Aero
Windows Aero es un estilo de escritorio de finales de la década de 2000. Usa marcos de ventana transparentes, vidrio difuminado, brillo suave y bordes en capas.
Abrir guíaEstilo suizoSwiss Style
El estilo suizo utiliza rejillas claras y diseños desequilibrados pero balanceados. También usa tipografía sans-serif, fotos y un orden visual estricto.
Abrir guíaDiseño editorialEditorial Design
El diseño editorial organiza una historia a través del ritmo de lectura, tipografía, imágenes, subtítulos y patrones de página que se repiten.
Abrir guíaDiseño MaterialMaterial Design
Diseño Material es un sistema para componentes e interacciones. Utiliza superficies en capas, movimiento con propósito, diseños flexibles y tokens de diseño compartidos.
Abrir guíaGradienteGradient
Un degradado es un cambio suave entre colores o transparencia. Puede seguir una línea, un círculo, un ángulo o una malla.
Abrir guíaSombra y ElevaciónShadow & Elevation
Una sombra es un efecto visual. La elevación es la relación de profundidad entre superficies que la sombra ayuda a explicar.
Abrir guíaBorder Radius & Squircle — Paquete de aprendizajeBorder Radius & Squircle — Learning Bundle
Esta guía separa tres ideas. Son el border-radius estándar de CSS, la forma de esquina en borrador: squircle, y otras formas similares a squircles o máscaras de plataforma. El paquete no es un término de diseño estándar único.
Abrir guíaOpacidadOpacity
La opacidad indica cuán sólido se ve un elemento y sus hijos. Puede variar de transparente a sólido.
Abrir guíaDirectrices de Interfaz Humana de AppleApple Human Interface Guidelines
Las Directrices de Interfaz Humana de Apple explican el diseño para sus plataformas. Cubren acciones, visuales, controles, entrada, accesibilidad y las diferencias entre plataformas.
Abrir guíaEspacio de trabajo estilo NotionNotion-style Workspace
Un Workspace estilo Notion usa un aspecto de documento tranquilo. Favorece el texto legible, los bloques de contenido, controles discretos y espacio abierto.
Abrir guíaSitio de Marketing de SaaSSaaS Marketing Site
Un SaaS Marketing Site explica un problema y un servicio de software a una audiencia. Ayuda a los visitantes a juzgar si encaja y a elegir el siguiente paso.
Abrir guíaSitio corporativo B2BB2B Corporate Site
Un sitio corporativo B2B ayuda a las empresas a evaluar las habilidades, reglas, confianza y compatibilidad de otra empresa. También facilita la compra o las alianzas.
Abrir guíaVenta directa al consumidor (E-commerce)DTC E-commerce
El E-commerce DTC permite a una marca vender directamente al consumidor. Abarca el descubrimiento, las opciones de producto, el pago, la entrega y el soporte postventa.
Abrir guíaIlustración JuguetonaPlayful Illustration
La Ilustración Juguetona usa personajes, formas, colores y bromas visuales animadas. Puede añadir calidez, significado o carácter de marca.
Abrir guíaDiseño OrgánicoOrganic Design
El Diseño Orgánico sigue formas encontradas en la naturaleza. Usa curvas irregulares, texturas táctiles, colores naturales y distribuciones menos mecánicas.
Abrir guíaEstilo MemphisMemphis Style
El estilo Memphis es un aspecto postmoderno audaz. Utiliza formas fuertes, colores que chocan, patrones, equilibrio desigual y energía juguetona.
Abrir guíaEstética del terminalTerminal Aesthetic
La estética de terminal toma prestado de las pantallas de línea de comandos. Utiliza texto monoespaciado, jerarquía ajustada, marcas de aviso, pocos colores y estado claro.
Abrir guíaWabi-sabiWabi-sabi
Wabi-sabi es una visión japonesa de la belleza. Valora los límites, el cambio, la forma irregular, la edad y los materiales honestos por encima del pulido perfecto.
Abrir guíaPropiedades Lógicas de CSSCSS Logical Properties
Las propiedades lógicas de CSS describen los lados según el flujo de escritura, como bloque y línea. Reemplazan direcciones fijas como arriba, derecha, abajo y izquierda. Esto ayuda a que los diseños sigan la dirección de escritura del idioma.
Abrir guíaSubcuadrículaSubgrid
Una subrejilla es una cuadrícula dentro de otra cuadrícula que comparte los tamaños de fila o columna de su elemento superior. Puede compartir una dirección o ambas.
Abrir guíadimensionamiento intrínsecoIntrinsic Sizing
El dimensionamiento intrínseco permite que el contenido de un elemento ayude a decidir su tamaño en lugar de usar solo un tamaño fijo externo.
Abrir guíamínimo de contenidomin-content
`min-content` es el tamaño más pequeño que el contenido puede usar después de envolverse en todos los puntos de quiebre permitidos.
Abrir guíacontenido máximomax-content
`max-content` es el tamaño que el contenido desearía si no se dividiera en puntos de quiebre normales.
Abrir guíaminmax()minmax()
`minmax()` es una función de CSS Grid que da a una fila o columna tanto un tamaño mínimo como máximo.
Abrir guíaclamp()clamp()
`clamp()` elige un valor CSS preferido pero lo mantiene entre un mínimo y un máximo.
Abrir guíaajuste de objetoobject-fit
`object-fit` controla cómo se ajusta una imagen, video o elemento similar dentro de su caja.
Abrir guíaUnidades de viewportViewport Units
Las unidades de viewport son longitudes CSS basadas en el área visible del navegador. Las versiones pequeña, grande y dinámica manejan las barras del navegador que aparecen o desaparecen.
Abrir guíaPseudo-clasePseudo-class
Una pseudo-clase es parte de un selector CSS. Encuentra un elemento mediante una condición, como el estado, lugar, idioma o acción del usuario.
Abrir guíaPseudo-elementoPseudo-element
Un pseudo-elemento permite que CSS estilice una parte o caja que no tiene un elemento normal en el HTML de origen. Ejemplos incluyen la primera letra y la decoración generada.
Abrir guíaRadio de borde en CSSCSS Border Radius
El border-radius de CSS hace que las esquinas del cuadro sean de cuartos de elipse usando radios horizontales y verticales. Cambia la pintura y el recorte, pero no el tamaño del cuadro en el diseño, y no crea un squircle matemático.
Abrir guíaEsquina Squircle de CSSCSS Squircle Corner
En el borrador de CSS Borders Nivel 4, squircle es un valor de forma de esquina para una superelipse convexa entre redonda y cuadrada. Equivale a superelipse(2), necesita un radio de borde distinto de cero y aún requiere verificar compatibilidad con el navegador.
Abrir guíaModo de colores forzadosForced Colors Mode
El modo de colores forzados usa una paleta del sistema elegida por el usuario en lugar de muchos colores de la página. Esto puede hacer que los controles y el texto sean más fáciles de distinguir.
Abrir guíaVisual Effect MaterialVisual Effect Material
El Material de Efecto Visual es un estilo de superficie macOS que mezcla y desenfoca lo que está detrás. Cambia con el estado de la ventana y la apariencia clara u oscura.
Abrir guía