Guia de estilo

Nomes de classes «Client-First», variáveis do Webflow e controlos do Designer. Código personalizado apenas para o que o Designer não consegue expressar (:has, :checked, preenchimento automático, fotogramas-chave), mantido no cabeçalho da página e comentado.

O ritmo vertical corresponde ao preenchimento dentro de uma secção, nunca à margem entre secções. Dentro de uma secção, o espaço é um «flex» ou um intervalo da grelha, nunca uma margem inferior («margin-bottom»). Todas as classes de texto devem redefinir as suas margens superior e inferior para 0; caso contrário, as margens predefinidas do Webflow para títulos e parágrafos irão interferir.

px apenas para bordas e sombras, que são elementos decorativos. rem para o texto, preenchimento e espaços, para que aumentem em função do tamanho da fonte do leitor. ch para a medida de leitura (o `max-width-text` é de 60 ch). Espaçamento entre letras em em, para que o tracking se adapte ao tamanho do texto.

Os tamanhos são definidos por ponto de interrupção no Designer (computador, tablet, telemóvel), nunca com a função clamp(). O que se vê num ponto de interrupção é exatamente o que é publicado.

As classes de texto definem o tipo de letra, o tamanho e a cor. O alinhamento e a largura são determinados pelo contentor: o mesmo estilo de título «h1» fica centrado na página inicial (dentro de «section-header.is-center») e alinhado à esquerda nas páginas «contacto» e «vendas».

Todas as regras são quase pretas, nunca cinzentas; as regras cinzentas são interpretadas como ausentes. A propriedade «border/subtle» destina-se apenas às bordas dos painéis.

Um ajuste específico de uma página transforma-se numa classe de combo, pelo que a classe partilhada permanece inalterada em todos os outros locais. Dê à classe de combo um nome que reflita a sua função (is-line, is-full, is-tight) e renomeie-a quando essa função mudar.

Sem fases fixadas, alinhamento automático ao deslocar ou avanço por rotação da roda do rato. O «Motion» aplica o estilo apenas ao conteúdo que se desloca normalmente; o «sticky» nativo do CSS é permitido, uma vez que continua a ser o leitor a controlá-lo.

Um parágrafo introdutório, utilizado com moderação quando uma secção necessita de um nível adicional de ênfase.

Texto do corpo. Preto, nunca em tom suave nem secundário. Combine-o com «max-width-text» (60ch) para qualquer texto com mais de uma linha.

Detalhe secundário: funções associadas a um nome de testemunho, descrições dos cartões.

Botões, etiquetas, ícones, separadores e elementos de navegação mantêm a sua própria classe, mas associam o tamanho da fonte, a altura da linha e a família tipográfica aos mesmos tokens ui/type. Nunca introduza um tamanho de fonte sem formatação.

Números do Geist Mono (ui-num, ui-mono, ui-deal_num), iniciais do avatar com 11 px, o glifo das teclas do teclado (ui-key) e a hora na barra de estado com espessura 600.

Tamanho único em todos os dispositivos: 16px, tanto em ecrãs de computador como de telemóvel. O glifo assume a cor do seu contentor, por isso define a cor no elemento pai, nunca no ícone. Nunca coles um ficheiro SVG numa ilustração: adiciona primeiro o ícone à pasta «Ícones de Produto» e, só depois, insere-o.

Os ícones «Orbit» e «Consolidate» mantêm os seus próprios tamanhos. As setas de linha, as estrelas, os cursores, as barras onduladas e os avatares fotográficos não são ícones.

container-large 90rem (1440px), pelo que os portáteis com ecrãs entre 1440 e 1728 mantêm uma margem lateral. container-medium 64rem, container-small 48rem. As faixas de mídia ficam dentro do contentor, não ocupam toda a largura; apenas a faixa principal ultrapassa os limites do mesmo.

1,5 rem de cada lado em cada ponto de quebra.

Espaço superior e inferior em cada secção. A classe .is-hero define 3rem na parte superior para que a imagem do produto seja visível na página inicial.

Título e introdução de uma secção. .is-tight reduz a distância em relação ao conteúdo, .is-center centraliza tudo o que está dentro dele (home hero).

Medido no Figma: os cartões em disposição 5-up e a linha de logótipos em disposição 6-up não cabem numa grelha de 12 colunas. O que se mantém constante é a medida e a margem interna de 1,5 rem, pelo que as linhas são frações iguais. Os heroes de duas colunas utilizam a sua própria grelha (contact-hero: 1fr 1fr, espaço de 6 rem, empilhados no tablet).

Computador de secretária a partir de 992 px (com 1440 e 1920 acima), tablet até 991 px, telemóvel em modo paisagem até 767 px, telemóvel em modo retrato até 479 px. O tipo de letra e o espaçamento alteram-se no tablet e no telemóvel.

Como uma secção começa: uma linha horizontal no contêiner, seguida do seu título. Utilizado em todas as secções da página inicial após o «hero», e no «hero» de contacto e vendas.

Apenas a regra, quando o conteúdo define o seu próprio espaçamento (CTA no rodapé).

As listas são separadas por uma linha fina na parte superior de cada linha, nunca apenas por espaços em branco.

Cantos agudos por todo o lado: cartões, painéis, campos, mosaicos com logótipos. A única exceção é o CTA principal, um «pill» completo (raio de 999 px).

Os traços dos painéis utilizam o contorno (todos os quatro traços longos), pelo que não ocupam espaço no layout e são sobrepostos aos elementos filhos. Qualquer elemento de um só lado, como uma linha horizontal ou um sublinhado, utiliza a borda.

Wrapper .signup-form_wrap, formulário com data-folk-demo="contact", um campo de entrada [type=email], um .js-select cujos valores são 1-2, 3-9, 10-49, 50-249, 250-999, 1000+. O script procura a empresa quando o campo de e-mail deixa de estar em foco e, em seguida, redireciona os candidatos qualificados com 10 ou mais para /demo-calendly, os qualificados com 3–9 para /book-a-folk-demo-2 e todos os restantes para o redirecionamento de candidatos não qualificados.

E-mail, tamanho da equipa e botão numa linha com borda, 0,875 rem, 3 rem de altura.

Contacte o departamento de vendas. Sem caixa, sem fundo, texto com 1,25 rem, sublinhado preto de 1 px e 4 rem de altura. O texto de preenchimento é o título (sem rótulos; cada campo possui um atributo `aria-label`). O texto de preenchimento e o menu suspenso não selecionado apresentam o estilo «text/secondary». Sem sublinhado quando em foco: o cursor serve de indicação, e o menu suspenso apresenta uma linha de 2 px apenas quando recebe o foco do teclado.

Pílula preta, largura total, 1 rem, 3,5 rem de altura.

Espaços estreitos (0,5 rem), botão e pilha de notas (1 rem), bloco (2 rem) entre os dois grupos.

Uma opção «select» nativa em vez de blocos de opções: os blocos de opções precisavam de um script de ligação para aceder ao script de qualificação, enquanto a opção «select» não precisa de nenhum. A parte superior da página sobrepõe-se ao preenchimento automático azul do Chrome e mantém o tipo de letra do campo nos valores sugeridos.

Numa secção ou numa grelha. O «load» interage com a página (heróis), exibe-os quando o grupo entra no ecrã e percorre a página item a item à medida que estes vão aparecendo. O atributo «data-reveal-at="60%"» atrasa a exibição até que a parte superior atinja essa altura.

up: desvanecimento e subida de 1 rem. linhas: um título revelado linha a linha. desvanecimento: apenas opacidade, utilizado para contentores muito finos, para que a regra apareça com a sua secção.

Um atributo em vez de três, como nos padrões habituais.

Os títulos acima da dobra utilizam a função de revelação apenas com CSS, pelo que são considerados pintados imediatamente (LCP). Nunca aplique um efeito de desvanecimento com JavaScript num contentor que contenha o H1.

Com animações reduzidas, sem JavaScript ou no Designer, tudo fica simplesmente visível. O motor é o reveal.js, localizado no rodapé do site; os modos exclusivos da página inicial encontram-se no reveal-extra.js.

A edição de qualquer uma destas altera todas as páginas. A variante «Base» do rodapé inclui o formulário CTA. Nunca renomeie .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu ou .sub-nav-item: os scripts e o CSS referem-se a estes elementos.

A parede com o logótipo da empresa e as secções de testemunhos, reutilizadas nas vendas por contacto.

O formulário de demonstração incorporado, já ligado ao script de qualificação.

As ilustrações são elementos codificados do Webflow, não imagens: nítidas em qualquer DPI, interativas e animáveis. Utilizam as suas próprias classes «ui-» e tokens e nunca utilizam o espaçamento da página. Cada ilustração animada contém uma instância do seu componente «Code», pelo que o script é editado apenas uma vez. Todas as ilustrações estão listadas em /illustrations; adicione cada nova ilustração nesse local.

• Obtenha uma demonstração
• Descubra qual é o plano mais adequado para si