Stripe
Un libro de contabilidad escrito con tinta índigo sobre vidrio esmerilado.
Stripe utiliza un lenguaje casi monocromático para los instrumentos financieros: un lienzo blanco suave y frío con encabezados azul oscuro, casi sin elementos cromados decorativos y un único índigo brillante (#533afd) que podría usarse legítimamente como contorno de botón, enlace o icono. La tipografía es excepcionalmente fina, con un grosor de 300 puntos —incluso a 56 px—, lo que transmite una sensación de sobriedad segura en lugar de una imagen corporativa ostentosa; el espaciado entre letras disminuye drásticamente con el aumento del tamaño. Los botones son pequeños, cuadrados (4 px) y utilizan rellenos morados o contornos morados muy finos. El sistema evita por completo las sombras; la profundidad se logra mediante cambios en los tonos de fondo (blanco → #f8fafd → #e5edf5 → tonos morados), en lugar de mediante la elevación. Toda la interfaz se comporta como un libro de contabilidad o una terminal: información densa, líneas claras, amplio espacio entre secciones y el color aparece solo cuando se requiere una acción.
El ancho máximo es de aproximadamente 1320 px para una columna de contenido centrada en un lienzo blanco. El elemento principal es un bloque de texto alineado a la izquierda a tamaño completo (56 px) con dos llamadas a la acción debajo, sin imagen principal: la tipografía ES el elemento principal. Las secciones están dispuestas verticalmente con márgenes iguales de 96 px y divisores de 1 px #e5edf5; no hay franjas oscuras/claras alternadas. Cada sección sigue un patrón repetitivo: un pequeño título de sección en mayúsculas (color ahumado, 12 px), luego un encabezado de 32-48 px, luego un párrafo de 22 px, luego una cuadrícula de tarjetas de producto (3 columnas en escritorio) o un bloque de texto de 2 columnas con arte visual. Los logotipos de los clientes aparecen en una estrecha franja vertical, alineada a la izquierda. El pie de página es una franja ancha #f8fafd con listas de enlaces de varias columnas. El ritmo general es lento, medido y predominantemente textual; la densidad de información es baja, a pesar de la gran longitud de desplazamiento.
Las imágenes son sobrias y de estilo documental. Las fotos a página completa aparecen solo en secciones que presentan estudios de caso (por ejemplo, fotografía aérea de tráfico para Hertz), tomadas desde arriba o con ángulos dramáticos, utilizando colores naturales, sin duotono ni procesamiento de color. Las capturas de pantalla de la interfaz de usuario del producto se utilizan en tarjetas de características, renderizadas con ángulos nítidos y bordes definidos, sin marcos de dispositivo. Los logotipos de los socios se muestran con sus propios colores, sin contenedores. No hay ilustraciones, renders 3D ni elementos gráficos abstractos decorativos. Los iconos son uniformes: grosor de línea 1, grosor de línea 2 sobre fondo blanco, con arte lineal geométrico (chevrones, flechas, marcas de verificación, símbolos de documento). La página se compone principalmente de texto y espacio en blanco; las imágenes ocupan menos del 3 % del área visual total.
Paleta
Marca
- Indigo Ink
#533afd— El color púrpura se utiliza para los botones rellenos, los estados de navegación seleccionados y los momentos de conversión que requieren enfoque. - Indigo Hover
#7389ff— El color morado se utiliza para resaltar enlaces, etiquetas y frases cortas. No debe usarse como color principal para las llamadas a la acción.
Neutral
- Midnight Ink
#061b31— El título principal y el texto del cuerpo son de un color intenso, casi negro, con un matiz azul frío, que sirve de base para todo el sistema tipográfico. - Slate
#64748d— El texto en gris resalta los enlaces, las etiquetas y las frases cortas. - Steel
#50617a— El texto adicional y los materiales de apoyo se ubican entre los tonos gris pizarra y morado apagado que se utilizan en las sublicencias. - Smoke
#839bc8— Para los títulos decorativos grandes y el texto que los acompaña, se utiliza un tono púrpura apagado; nunca en los párrafos del cuerpo del texto. - Pure White
#ffffff— El lienzo de la página y las superficies en relieve de las tarjetas; el fondo predeterminado con el que se compara todo lo demás. - Mist
#f8fafd— El fondo del pie de página y el divisor de sección tienen un tono frío sutil que separa las áreas sin un borde visible.
Tipografía
de 12 a 56 píxeles · 9 pasos
- sohne-var — reemplazo: Inter Tight (variable · esquemas 300, 400 · La única fuente utilizada en toda la interfaz es para los títulos, el texto principal, la navegación, los botones y las etiquetas. La fuente de 300 ppi se mantiene incluso en un tamaño de pantalla de 56 ppi, lo que constituye una característica distintiva: los títulos transmiten claridad en lugar de ostentación, estableciendo autoridad mediante la sobriedad. La fuente de 400 ppi aparece únicamente en tamaños de 14 a 16 ppi para la navegación y el texto de los botones, donde se requiere un trazo adicional para una mejor legibilidad en tamaños más pequeños.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | espacioso |
| Paso básico | 8px |
| Radio del botón | 4px |
| Radio de la tarjeta | 4px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 96px |
| Ancho de página | 1320px |
La IA construirá tu sitio web al estilo de Stripe y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Ui — Plan clínico en papel mate
- monopo saigon — Un brillo líquido e iridiscente tras el silencio editorial: una galería editorial monocromática flotando sobre luz fundida.
- Ventriloc — Un observatorio editorial de datos sobre papel tibio: una sola brasa naranja que resalta la precisión monocromática.
- Hyer Aviation — El crepúsculo en la cabina sobre un pergamino. El pálido cielo del amanecer se encuentra con el logotipo con serifa del tamaño del fuselaje, y un único toque de color arcilla cálida rompe la sobriedad monocromática.
- Family — Una página impresa en papel pergamino color crema, con un fragmento de un cuento de hadas.
- OFF+BRAND. — Esfera iridiscente sobre pergamino tibio
- Geniestudio — Un cuaderno de luz diurna suave, de esos con márgenes amplios y un trazo grueso de pluma.
- xAI — Laboratorio de crema tibia con pastilla negra
- Seed — un organismo vivo bajo un cristal de laboratorio
- Cosmos — Una pared de galería revestida de lino y decorada con fotografías Polaroid.
- Cal — Practicidad monocromática, un enfoque humano. Un sistema que prioriza la claridad y la funcionalidad mediante una estricta paleta en blanco y negro, pero que la suaviza con una tipografía amigable y formas redondeadas.
- T1 Energy — El dibujo de una planta de producción sobre pergamino cálido es una escena tranquila y monocromática donde la escala industrial y la tipografía sutil representan la esencia de la marca.