Calendly
Tinta azul escura sobre mármore frio
O Calendly transmite uma sensação de espaço de planejamento calmo e confiante: uma tela quase branca com bastante espaço livre, cartões de produtos brancos e nítidos flutuando sobre um fundo cinza frio, e toda a tipografia renderizada em tinta azul escura em vez de preto puro. O elemento definidor é a cor azul escura (#0b3558), usada em todos os lugares onde o texto aparece — títulos, botões, ícones, links — o que suaviza toda a interface, tornando-a mais acolhedora e elegante do que a típica página de destino de SaaS. Um único azul brilhante (#006bff) é usado para todas as ações principais, e toques decorativos em rosa e azul que se estendem além dos layouts dos produtos adicionam calor sem criar poluição visual. Os componentes são discretos: bordas finas de 1px, sombras sutis com tonalidade azul, raios de cartão grandes de 24px e cantos de botão de 8px parecem intencionais em vez de banais.
Largura máxima de 1200px, centralizado, com margens amplas em desktops. A tela principal é dividida em duas colunas: a coluna da esquerda contém um cabeçalho de 80px + texto principal + botões de login empilhados, enquanto a coluna da direita contém um cartão de widget de reserva com elementos decorativos ao fundo. Abaixo da tela principal, há uma faixa única de largura total com o logotipo da Trust. As seções subsequentes alternam entre blocos de cabeçalho centralizados (H2 + subtexto + chamada para ação opcional), seguidos por blocos de duas colunas descrevendo recursos (texto à esquerda/produto à direita ou produto à esquerda/texto à direita) com elementos decorativos de destaque atrás de cada imagem de produto. Grades de cartões são raramente usadas — o layout prioriza seções em pares colocadas lado a lado em vez de grades de várias colunas. O espaçamento entre as seções varia de 48 a 64px. A navegação consiste em uma barra superior fixa de 64px com o logotipo à esquerda, um menu centralizado e um grupo de chamadas para ação à direita.
O principal elemento visual são as capturas de tela do produto — maquetes simples da interface do usuário do calendário de reservas, renderizadas em cartões brancos nítidos com cantos largos e arredondados. Design decorativo: cada cartão de produto é circundado por um toque suave de roxo coral (#e55cff) ou azul celeste (#0099ff), ligeiramente deslocado e desfocado, criando um efeito de colagem em vez de uma captura de tela plana. Sem fotografias, sem imagens de estilo de vida — todos os elementos visuais representam a interface do usuário do produto, formas abstratas de destaque ou logotipos monocromáticos de parceiros na barra de confiança. Os ícones são lineares, com uma largura de linha de 1,5 a 2 px, monocromáticos, em azul escuro (Ink Navy) ou azul (Signal Blue).
Paleta
Marca
- Ink Navy
#0b3558— Texto principal, títulos, ícones, fundo escuro para chamadas à ação, links de navegação. - Signal Blue
#006bff— Chamada principal para ação (CTA), navegação ativa, ênfase em links, estados selecionados
Neutro
- Carbon
#0a0a0a— Texto em preto puro (formato alternativo), glifo do logotipo, preenchimento do ícone. - Slate Gray
#476788— Texto principal adicional, texto de apoio, rótulos silenciados. - Mist Gray
#a6bbd1— Texto desativado, rótulos de funções inativas, contornos de ícones claros - Cloud
#f8f9fb— Tela da página, fundo do rodapé, superfície extra - Paper
#ffffff— Superfícies de cartão, painéis em relevo, texto em botões sobre fundo escuro. - Pebble
#f0f3f8— Imagens de fundo para ícones, sombreamento de campos de entrada, separadores sutis, efeitos de foco.
Tipografia
de 12 a 80px · 10 etapas
- Gilroy — substituição: Manrope · esboços 400, 500, 600, 700 · Todo o texto da interface. Gilroy é uma fonte sans-serif humanista geométrica com espaçamento amplo e contraste uniforme entre os traços; suas versões em negrito (700) são usadas para títulos, enquanto as versões 500–600 são usadas para botões e subtítulos. Substitua por Manrope ou Inter.
- Gilroy — substituição: Inter · esboços 400 · Texto corrido e rótulos de interface de usuário de uso geral - a espessura da fonte de 400 pontos garante que textos longos sejam legíveis sem parecerem pesados.
- Gilroy — substituição: Inter · esboços 500 · Títulos secundários e texto corrido destacado - a fonte 14/500 é a principal ferramenta para títulos de cartões e rótulos em linha.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8-16px |
| Raio do botão | 8px |
| Raio do cartão | 24px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 48-64px |
| Largura da página | 1200px |
A IA criará seu site no estilo Calendly 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
- Mollie — Um balcão de cashmere, um livro-razão escuro. Deixe bastante espaço em branco para o design editorial ao redor do texto preto e, em seguida, reforce os pontos relacionados ao produto com tons quentes de creme, marrom expresso e fotos táteis de métodos de pagamento reais.
- Kagi — Uma sala de leitura separada. Crie um espaço branco aberto em torno de um texto em grafite marcante, usando detalhes sutis em roxo e superfícies em tons pastel quentes para quebrar a tranquilidade.
- Milanote — Milanote é um estúdio criativo dedicado. Crie páginas no estilo de galeria editorial usando painéis visuais flutuantes: paredes com molduras escuras, espaço de exibição branco e capturas de tela que parecem objetos reais com uma leve profundidade.
- Co2 — Um atlas climático sob a luz do inverno. Crie páginas como uma paisagem aérea documental, onde títulos com serifa, dados codificados por categorias e imagens gélidas destacam amplas margens brancas.
- GitButler — Turquesa no final do texto. Uma combinação de títulos serifados de alto contraste com sutis grades técnicas, superfícies em tom grafite quente e um discreto toque de turquesa.
- ElevenLabs — Um ensaio fotográfico em tons creme quentes com títulos sutis. Um caderno em estilo Bauhaus — papel cor de casca de ovo, tinta preta e um único detalhe em roxo e laranja para exibição do produto.
- Awesomic — Tela editorial em zinco com marcas de pontuação laranja que lembram confete.
- Monad — revista técnica editorial sobre pergaminho quente
- Dub — Painel de controle de papel de arroz fosco do Link
- Seline Analytics — Uma mesa analítica silenciosa sobre papel quente
- Notion — Um caderno de papel quente sob o sol do meio-dia
- Anthropic — Uma revista científica de campo impressa em pergaminho de tom quente — superfícies de marfim sereno, títulos editoriais com serifa e um único detalhe em tom de barro que aparece apenas quando é necessário dar o que falar.