
Medium
jornal branco cremoso na hora dourada
O Medium funciona como uma sala de leitura literária transplantada para a web: um fundo quente e cremoso (#f7f4ed) substitui o branco estéril típico de SaaS, fazendo com que textos longos pareçam páginas impressas. O sistema visual é agressivamente monocromático — quase todas as superfícies da interface, textos e bordas estão em uma estreita faixa de cinzas quentes que variam de #242424 a #6b6b6b — para que a atenção do leitor esteja completamente focada no conteúdo. O único gesto característico é o título serifado (GT Super, 120px, peso 400, espaçamento entre letras -0,055em), uma escolha deliberada que foge à tendência: uma fonte serifada de transição, adaptada para exibição, quase imperceptível em vez de uma fonte geométrica sem serifa em negrito, sinaliza: "Publicamos livros, não softwares". Os botões são "pílulas" cheias de tinta quase preta — a única tinta sólida na página.
A página inicial possui duas colunas: a da esquerda ocupa aproximadamente 55% do espaço da página, com o título, o subtítulo e a chamada para ação dispostos verticalmente com amplo espaçamento interno; a da direita ocupa aproximadamente 45% do espaço da página, com um painel de ilustrações. A coluna da esquerda está alinhada à esquerda (não centralizada), ancorando a página ao eixo de leitura. Abaixo da página inicial, há uma única faixa creme de largura total com links centralizados no rodapé. Sem grades de cartões, seções de destaque ou faixas alternadas na página inicial — a página inicial É uma página. A densidade de conteúdo é intencionalmente baixa: um título, uma frase, um botão, uma imagem. A página é uma capa, não um painel de controle.
As ilustrações são editoriais e episódicas, não sistemáticas. A página principal apresenta uma única ilustração desenhada à mão (uma flor verde, uma mão geométrica, linhas de constelação) em um estilo solto e ligeiramente ingênuo. As ilustrações parecem trabalhos encomendados que mudam sazonalmente, em vez de pertencerem a um acervo permanente. Não há fotografias na página principal. Não há ícones na página principal — todo o trabalho é feito pelo logotipo e pelo texto. A linguagem visual é primordialmente orientada ao texto, com as ilustrações servindo como pontuação.
Paleta
Neutro
- Newsprint Cream
#f7f4ed— A tela da página, o fundo da janela principal e o fundo da seção têm um tom quente, ligeiramente cremoso, que cria a sensação de uma interface impressa em vez de uma digital. - Paper White
#ffffff— Superfícies de cartão, painéis em relevo, campos de preenchimento de formulários e quaisquer superfícies que precisem ser separadas da tela creme. - Ink
#242424— Texto principal, texto principal, links, títulos - um tom ligeiramente mais quente que o preto puro, fica bem em um fundo creme. - Body Gray
#333333— A cor secundária do texto e a cor de primeiro plano padrão são usadas quando é necessária uma cor ligeiramente mais clara que a cor da tinta sem perder o contraste. - Button Black
#191919— É possível usar uma cor neutra para elementos secundários da interface do usuário, divisores e rótulos com cores suaves. Ela não deve ser usada como cor principal para chamadas à ação. - Marginalia Gray
#6b6b6b— Suporte para cores neutras na interface secundária, divisores e rótulos discretos.
Tipografia
de 13 a 120px · 5 etapas
- medium-content-sans-serif-font — substituição: Inter · esboços 400 · A fonte medium-content-sans-serif foi encontrada nos dados extraídos, mas não foi descrita pela IA.
- GT Super — substituição: Playfair Display · esboços 400 · Os títulos e o corpo do texto utilizam uma fonte serifada de transição, em tamanho extremo, com espaçamento entre letras reduzido e espaçamento entre linhas de 0,83. A escolha de uma fonte com peso 400 (não negrito) e tamanho de 120px é uma característica marcante: as formas das letras, e não o peso, são o foco. O espaçamento negativo entre as letras reduz os espaços visuais, fazendo com que "Human Stories and Ideas" pareça um bloco tipográfico coeso.
- Söhne — substituição: Inter · esboços 400 · A fonte sans-serif da interface do usuário é usada para navegação, botões, subtítulos e títulos pequenos. O intervalo de 13 a 14 px é para rótulos de navegação e botões; 20 a 22 px é para subtítulos e texto secundário dentro do título. Uma fonte sans-serif limpa, com proporções humanistas, é legível em tamanhos pequenos e discreta em tamanhos maiores.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 16-24px |
| Raio do botão | 9999px |
| Raio do cartão | 0px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64px |
| Largura da página | 1200px |
A IA criará seu site no estilo Medium 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
- Steep — Análise de fontes serifadas em papel de cor quente
- 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.