Caldera

Paleta

Marca

• Ember #fc5000 — Los botones de acción principales, las tarjetas de estadísticas y los elementos visuales clave son los únicos acentos de color llamativos; su riqueza, en contraste con los tonos grises cálidos, crea una sensación de urgencia sin necesidad de elementos decorativos adicionales.
• Plasma Violet #524ae9 — Base principal de degradado de semitonos, una superficie de tarjeta adicional: se utiliza casi exclusivamente en el patrón de puntos principal y en una tarjeta dedicada; nunca se utiliza para controles.

Neutral

• Sulfur #f5f28e — El fondo de los iconos de etiquetas y categorías, que se muestran en pequeños detalles, es de un color amarillo suave que se utiliza para indicar las categorías de las entradas del blog y los anuncios del programa.
• Limestone #f7f6f2 — Las superficies de las tarjetas, los fondos de los bloques de contenido y los rellenos de los botones adicionales tienen un tono de blanco más claro y cálido que hace que los elementos destaquen sobre el lienzo de la página.
• Pumice #e2e2df — El fondo principal de la página es un gris medio cálido que sirve de base para cada sección; es ligeramente más oscuro que la superficie de la cartulina, lo que permite una sutil separación entre la figura y el fondo sin sombras.
• Obsidian #070607 — El texto principal, los encabezados, el texto de los enlaces y los marcos de los botones son casi negros con un ligero tinte cálido apenas perceptible que combina con los colores cálidos del lienzo.
• Chalk #ffffff — Texto en secciones oscuras, texto de entrada sobre fondos oscuros, superposiciones de alto contraste: el blanco puro se utiliza únicamente cuando se requiere el máximo contraste con superficies oscuras.

Tipografía

de 12 a 189 píxeles · 10 pasos

• PP Neue Corp Compact — reemplazo: Bebas Neue · esquemas 400 (Ultrabold cut) · Todos los encabezados y texto de visualización. Una fuente condensada y ultranegrita de diseño personalizado les confiere a los encabezados un aspecto industrial y robusto, similar al de un letrero. El tamaño de 189 px en el bloque principal refleja el estilo característico de la marca: condensado, casi estructural más que tipográfico. Las configuraciones "ss06" y "ss10" activan formas de letra y espaciado alternativos para un ritmo más agresivo y condensado. El espaciado positivo entre letras (+0,02 em) es inusual para tamaños de visualización y evita la sensación de texto apretado entre 80 y 189 px.
• DM Sans — reemplazo: Inter · esquemas 500 (Medium only — never Regular or Bold) · El texto principal, los enlaces de navegación, las etiquetas de los botones y los encabezados secundarios tienen un tamaño máximo de 30 píxeles. Se eligió deliberadamente un grosor de fuente medio: la fuente Regular resultaría demasiado delgada en comparación con la fuente de encabezado extranegrita, y la fuente Negrita competiría con ella. DM Sans crea un contrapunto humanístico y ligeramente geométrico a la fuente de encabezado de estilo industrial.
• System sans-serif — reemplazo: Inter · esquemas 400 · Leyendas, metatexto, fechas, microetiquetas. Se utilizan únicamente en 12px, donde el peso y el reconocimiento de marca son menos importantes que el ahorro de espacio.

Intervalos y forma

Estilos similares

• teenage engineering — Catálogo industrial de iluminación de estudio: el producto es el único elemento significativo de la página, y todo lo demás se discute a su alrededor.
• basement — Una imprenta vacía a las 3 de la madrugada: fuentes enormes y comprimidas que se extienden sobre la oscuridad absoluta, un único destello de luz naranja en la barra de navegación, todo lo demás blanco o gris fantasmal.
• amra — Una esfera iridiscente sobre un fondo blanco: el toque de color lavanda es el único matiz cromático en una página casi perfectamente acromática, y la única esfera con degradado cumple la función que normalmente desempeña la ilustración principal.
• Stink Studios — Un estudio de cine a medianoche: el proyector zumba, la sala está oscura, solo la película está iluminada.
• Andrei Rybin — Un cuaderno de bocetos monocromo es un cuaderno de diseño en el que se adhieren pantallas de teléfono a una pared blanca como si fueran hojas de contacto.
• Uniswap Cup — La transmisión de la competición de eSports se lleva a cabo en un sitio simulado: un marcador rosa delimita una cuadrícula de cuadrados blancos y líneas finas.
• Freytag Anderson — El telón del cine se alza sobre una sola palabra. Una enorme imagen en movimiento ocupa toda la pantalla, el nombre de la marca aparece en una esquina como un título, y nada más distrae.
• Integrated Biosciences — Laboratorio de bioluminiscencia a medianoche
• Vercel — Terminal impreso en papel blanco
• Mintlify — Un jardín de nubes sobre una mesa de cristal. El cielo dibujado a mano y el documental se entrelazan: el único punto donde el color y el concepto colisionan antes de que la página se desvanezca en un blanco monástico.
• Gleap — Un espacio de trabajo decorado en cálidos tonos crema con detalles en grafito: un estudio donde los puntos de tinta negra mate parecen flotar sobre la arquitectura de lino.
• ClickUp — Un potente panel de control sobre mármol blanco. La página es un folleto de producto para una herramienta de productividad, por lo que el lenguaje visual se toma prestado del propio producto: listas densas, indicadores de estado, grupos de avatares y declaraciones tipográficas en negrita que parecen las especificaciones del producto en pantalla.