Caldera

Paleta

Marca

• Ember #fc5000 — Os botões de ação principais, as fichas de estatísticas e os principais detalhes visuais são os únicos elementos com cores vibrantes; sua intensidade em contraste com os tons quentes de cinza cria uma sensação de urgência sem a necessidade de elementos decorativos adicionais.
• Plasma Violet #524ae9 — Base principal com gradiente de meio-tom, uma superfície de cartão adicional - Usada quase exclusivamente no padrão de pontos principal e em um cartão dedicado; nunca usada para controles.

Neutro

• Sulfur #f5f28e — O fundo dos ícones de etiqueta e categoria, pequenos destaques, é de um tom amarelo suave usado para indicar categorias de postagens de blog e anúncios de programas.
• Limestone #f7f6f2 — As superfícies dos cartões, os fundos dos blocos de conteúdo e os preenchimentos adicionais dos botões apresentam um tom de branco mais claro e quente, que faz com que os elementos se destaquem no fundo da página.
• Pumice #e2e2df — O fundo principal da página é um cinza médio quente que serve de base para cada seção; ele é ligeiramente mais escuro que a superfície do papel cartão, permitindo uma separação sutil entre a figura e o fundo, sem sombras.
• Obsidian #070607 — O texto principal, os títulos, os textos dos links e as molduras dos botões são quase pretos, com um leve tom quente que combina com as cores quentes da tela.
• Chalk #ffffff — Texto em áreas escuras, texto digitado em fundos escuros, sobreposições de alto contraste - O branco puro é usado apenas onde é necessário o máximo contraste com superfícies escuras.

Tipografia

de 12 a 189px · 10 passos

• PP Neue Corp Compact — substituição: Bebas Neue · esboços 400 (Ultrabold cut) · Todos os títulos e textos de destaque. Uma fonte condensada, ultranegrito e personalizada confere aos títulos um aspecto industrial, semelhante ao de uma placa. O tamanho de 189px no bloco principal reflete o estilo característico da marca: condensado, quase estrutural em vez de tipográfico. As configurações "ss06" e "ss10" ativam formas de letras e espaçamento alternativos para um ritmo mais agressivo e condensado. O espaçamento positivo entre letras (+0,02em) é incomum para tamanhos de exibição e evita a sensação de texto comprimido em tamanhos de 80 a 189px.
• DM Sans — substituição: Inter · esboços 500 (Medium only — never Regular or Bold) · O texto principal, os links de navegação, os rótulos dos botões e os títulos secundários têm até 30px. A espessura média da fonte foi escolhida propositalmente — a Regular ficaria muito fina em contraste com a fonte extra-negrito do título, e a Bold competiria com ela. A DM Sans cria um contraponto humanista e ligeiramente geométrico à fonte industrial do título.
• System sans-serif — substituição: Inter · esboços 400 · Legendas, metatexto, datas, microtags. Usado apenas em 12px, onde o peso e o reconhecimento da marca são menos importantes do que a economia de espaço.

Intervalos e forma

Estilos semelhantes

• teenage engineering — Catálogo industrial de iluminação de estúdio - o produto é o único objeto significativo na página, e tudo o mais é discutido em torno dele.
• basement — Uma impressora vazia às 3 da manhã – fontes enormes e comprimidas espalhadas pela escuridão total, um único brilho de luz laranja na barra de navegação, todo o resto branco ou cinza fantasmagórico.
• amra — Uma esfera iridescente sobre um fundo branco — o toque de lavanda é o único pulso de cor em uma página quase perfeitamente acromática, e a esfera com gradiente único realiza o trabalho que normalmente seria da ilustração principal.
• Stink Studios — Um estúdio de cinema à meia-noite - o projetor zumbindo, a sala escura, apenas o filme iluminado.
• Andrei Rybin — Um sketchbook monocromático é um caderno de desenho no qual telas de celulares são fixadas em uma parede branca, como folhas de contato.
• Uniswap Cup — A transmissão da competição de eSports acontece em um cenário simulado – um marcador rosa delimita uma grade de quadrados brancos e linhas finas.
• Freytag Anderson — A cortina do cinema se abre com uma única palavra. Uma enorme imagem em movimento ocupa toda a tela, o nome da marca aparece no canto como um crédito, e nada mais distrai.
• Integrated Biosciences — Laboratório de bioluminescência à meia-noite
• Vercel — Terminal impresso em papel branco
• Mintlify — Um jardim de nuvens sobre uma mesa de vidro. O céu desenhado à mão e o documentário são emoldurados juntos — o único lugar onde cor e conceito se encontram antes que a página se desvaneça em um branco monástico.
• Gleap — Um espaço de trabalho decorado em tons creme quentes com detalhes em grafite — um estúdio onde pontos de tinta preta fosca parecem flutuar sobre a estrutura de linho.
• ClickUp — Um painel de controle poderoso sobre mármore branco. A página é um folheto de produto para uma ferramenta de produtividade, portanto a linguagem visual é emprestada do próprio produto: listas densas, indicadores de status, grupos de avatares e declarações tipográficas em negrito que se assemelham a uma especificação de produto em exibição.