Steep
Análise de fontes serifadas em papel de cor quente
A Steep apresenta análises como conteúdo editorial — títulos com serifa Signifier flutuam sobre uma tela branca quase monocromática, e um único toque de pêssego quente (#fbe1d1) destaca o sistema, que de outra forma seria acromático. A página se assemelha a uma página dupla de revista de produtos: fonte cursiva grande, amplo espaço para texto, cartões grandes com bordas suaves de 24px de raio e controles em formato de pílula nivelados com a superfície. Os componentes transmitem uma sensação de calma e leveza — as sombras são sutis, as bordas são finas e a cor é usada para enfatizar funções (destaque em pêssego, letras em marrom escuro sobre fundo pêssego). As superfícies do produto (tabelas de região, diagramas de ativação, construtores de IA) são apresentadas como elementos flutuantes ao redor do cabeçalho, em vez de estarem aninhadas dentro da estrutura do painel.
O layout da página tem uma largura máxima de 1200px, centralizado, com as seções principais ocupando quase toda a largura da página, mas permanecendo dentro do contêiner. O layout principal apresenta um cabeçalho centralizado com uma fonte serifada grande, um subtítulo e um par de botões em formato de pílula, cercados por quatro cartões flutuantes de descrição de produtos (tabela de região no canto superior esquerdo, cartão de registro à direita, diagrama de ativação no canto inferior esquerdo, editor de IA no centro inferior) que se sobrepõem a uma tela branca em diferentes deslocamentos. As seções alternam entre fundos Branco Papel e Cinza Cartão, criando um ritmo suave sem forte contraste. As seções de recursos usam um layout de duas colunas de texto e interface do usuário com grandes margens verticais de 80px. A navegação consiste em uma única barra superior transparente (sem fundo, borda ou sombra) com o logotipo à esquerda, links de navegação no centro e duas chamadas para ação (link de texto + botão em formato de pílula preenchido) à direita. A densidade geral do layout é espaçosa — a página "respira" entre as seções e o conteúdo nunca se aglomera nas bordas.
O design visual é focado no produto, não no estilo de vida: elementos de interface flutuantes (tabelas regionais com dados de cinco linhas, gráficos de linhas mostrando ativações de agosto a novembro, anéis de progresso radiais, campos de entrada de IA) são organizados como capturas de tela recortadas em torno de títulos editoriais. Não há fotografias, ilustrações ou gráficos abstratos. Todos os elementos visuais do produto são colocados em cartões flutuantes brancos com bordas finas e sombras suaves. Os círculos dos avatares apresentam um pequeno indicador direcional do cursor — um motivo visual que sinaliza interação em tempo real. A composição principal é uma colagem de texto e interface, em vez de um título centralizado com uma foto genérica.
Paleta
Neutro
- Ink Black
#17191c— O texto principal, o fundo preenchido dos botões e o logotipo de navegação são as únicas superfícies escuras no sistema; todas as chamadas para ação e títulos no texto principal aparecem sobre esse fundo quase preto. - Paper White
#ffffff— A tela da página, o texto dos botões e as superfícies em relevo do cartão constituem o tom de fundo dominante, apresentando aproximadamente 76 pontos de frequência. - Mist Gray
#f2f2f3— Superfícies de cartões, fundos adicionais, preenchimento de campos de entrada — uma camada invisível sob o papel para conteúdo incorporado. - Fog White
#fafafb— Um fundo de página adicional para alternar seções e superfícies ao passar o cursor sobre o papel - um nível acima do papel para criar variações sutis de listras. - Slate Gray
#777b86— Cor do link, texto auxiliar discreto, texto do rodapé - Um cinza frio e dessaturado colocado entre o texto principal e o texto que não pode ser incluído. - Ash Gray
#979799— Etiquetas adicionais, tags de categoria (Marketing, Finanças, Vendas) - um tom mais claro que a cor do link.
Tipografia
de 15 a 90px · 8 etapas
- Signifier — substituição: GT Sectra · esboços 400 · Uma fonte serifada para títulos e manchetes — usada exclusivamente para H1/H2 em três tamanhos; a espessura da fonte permanece em 400 (regular) em todas as escalas, uma escolha característica: uma fonte serifada sussurra em vez de gritar como uma fonte em negrito.
- Sohne — substituição: Inter · esboços 400, 430, 450, 480, 500 · As fontes principais, da interface e da navegação são versáteis, abrangendo tudo, desde metadados até subtítulos; pesos semi-escalonados (430, 450, 480) criam uma hierarquia sutil sem recorrer ao negrito.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 9999px |
| Raio do cartão | 24px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80px |
| Largura da página | 1200px |
A IA criará seu site no estilo Steep e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Newformcap — Jornal editorial no vestiário
- Claude — Um artefato impresso em pergaminho morno — tinta sobre papel de osso, argila como único sopro de cor.
- 11x– Digital workers — Um deserto editorial cinematográfico — fotografias panorâmicas da paisagem contrastando com manchetes monumentais em fonte serifada que parecem um editorial de revista de luxo.
- Revolut — Um trabalho editorial monocromático baseado em uma fotografia de nuvens — tinta branca, botões tipo pillbox, uma única faixa azul de cor em um mundo predominantemente cinza.
- Scheduling — Tinta editorial sobre papel creme
- Titan — arquivo monocromático em tons quentes
- Programa — Um estúdio de design suíço ao meio-dia. A parede branca da galeria é iluminada por um único abajur amarelo — tudo é em tons de cinza até que um botão, ícone ou detalhe chama a atenção, e então esse único detalhe amarelo define toda a sala.
- Sana Agents — Brilho de limão em fundo branco em editorial
- Visual — Editorial samizdat em tom ameno. Papel creme, pôsteres com serifa, anotações marginais monocromáticas, um marcador amarelo.
- Midday — Brochura editorial em papel vegetal - título serifado de 72px sobre fundo bege claro, corpo do texto em fonte sem serifa com espaçamento, controles em formato de pílula, sem sombras.
- Chat for impact — Uma clínica verde-floresta com salas em tons pastel.
- Handhold — Pergaminho quente sob serifas quase inaudíveis — uma página editorial, composta à mão sem ruído cromático, onde a mais fina fonte serifada de 200 pontos transmite toda a mensagem.