Uma página,uma linguagem só.

Marca

A assinatura é o par logo + wordmark, sempre lado a lado com gap: 12px. O símbolo é um círculo de 40px, com aro de 2px e sombra dura de 4px na --moldura; o wordmark é Dela Gothic One 23px / 400, com o sufixo .dev no mesmo peso e em --laranja. Nunca redesenhe o par: o contraste de cor entre dallatorre e .dev é a marca.

dallatorre.dev

Sobre o papel bege: wordmark na tinta preta e o .dev no laranja. É o uso do topo e do rodapé, e o padrão da casa.

dallatorre.dev

Sobre o papel escuro: o wordmark vira bege, e o aro do símbolo também — é ele que separa o círculo preto do fundo. O laranja não muda de tema.

Redondofavicon-dallatorre.png

Sobre o preto--preto

Cor

Um papel bege, uma tinta quase preta e seis cores chapadas, sempre dentro de moldura.

As seções se alternam em quatro papéis, e é o papel — não a cor do cartão — que muda com o tema. No escuro eles viram quatro pretos tingidos, e as cores chapadas continuam as mesmas por cima: é por isso que o texto sobre elas é sempre preto.

Tipografia

Três vozes: Montserrat grita, Questrial explica, Dela Gothic assina.

Os títulos que abrem uma tela — a hero e o fecho — são Montserrat 900, e o da hero leva uma das linhas dentro da pílula de sombra dura, como o “Website” do template. O título de seção é Montserrat 700, sem pílula. Caixa-alta e peso fino não entram em título nenhum: fora esses dois padrões, não invente um terceiro.

Título da hero Fonte Montserrat
Peso 900
Tamanho clamp(40, 5.6vw, 84)
Line-height 108%
Tracking −2,5%

Aprenda freelance

com AI de verdade

Título de seção Classe .titulo
Fonte Montserrat
Peso 700
Tamanho clamp(30, 3.6vw, 48)
Line-height 122%
Tracking −1%
Medida 22ch

O que você sai fazendo

Título pareado Classe .fecho h2
Fonte Montserrat
Peso 900 / 600
Tamanho clamp(30, 4.2vw, 56)
Line-height 110%
Tracking −2%

Portfólio não é

o que você estudou

Título de cartão Classe .card h3
Fonte Montserrat
Peso 600
Tamanho clamp(24, 2.3vw, 32)
Line-height 115%

Do briefing ao deploy

Lead Classe .lead
Fonte Questrial
Peso 400
Tamanho 18 · 19 na hero
Line-height 28 · 30
Medida 56ch

Você entra num time, pega um projeto real e sai com uma entrega no portfólio — não com um certificado de conclusão.

Raia Classe .raia__txt
Fonte Montserrat
Peso 600
Tamanho clamp(18, 1.7vw, 24)
Line-height 128%

Um projeto real, do briefing ao deploy

Raia densa Classe .raias--densa
Fonte Questrial
Peso 400
Tamanho 17
Cor --tinta-2

Leitura corrida: listas longas em texto menor, sem virar título

Olho de seção Classe .eyebrow
Fonte Montserrat
Peso 600
Tamanho 18 / 28
Cor --tinta

Como vai ser o workshop

Numeração Onde ::before do título
Fonte Montserrat
Peso 600
Tamanho .72em do título
Forma 01. · contador
Figuras tabular-nums

01.   02.   03.   04.   05.

Etiqueta Classe .tag
Fonte Montserrat
Peso 600
Tamanho 13–15
Forma pílula, contorno 2px

Experiência real

Botão Classe .btn
Fonte Montserrat
Peso 600
Tamanho 17 / 26 · 16 / 24

Quero minha vaga

Nota Classe .nota__txt
Fonte Questrial
Tamanho clamp(12.5, .95vw, 16)
Line-height 135%
Largura 140 → 195px

Nove anos entregando software para cliente pagante

Wordmark Classe .marca span
Fonte Dela Gothic One
Peso 400
Tamanho 23
Cor --tinta · --laranja

dallatorre.dev

Espaço & Forma

O compasso é o do template, e não fluido: seção com 104px de respiro em cima e embaixo (72px no telefone), miolo travado em 1120px e margem lateral de 28px (18px no telefone). O que respira junto do viewport é o corpo dos títulos e o padding das caixas grandes — esses, sim, em clamp() sobre vw.

Sombra & Moldura

Nada aqui tem desfoque. Tudo o que sai do papel sai com moldura de tinta e sombra dura, deslocada só para baixo e sem blur nenhum — é ela que diz o que é botão, o que é cartão e o que é chão. A espessura acompanha o tamanho da peça, e a sombra também.

3

4

5

8

12

Escada de sombras

3px etiqueta e olho · 4px botão, selo e campo · 5px ladrilho e dock · 8px pílula do título · 12px cartão. Sempre 0 Npx 0 0 var(--moldura). No botão o hover encolhe a sombra; na carta do leque, que levanta, ela cresce para 18px.

Foto emoldurada

Foto não leva véu: leva moldura. 2px quando mora dentro de um cartão, 4px quando está solta no papel, com raio de 16 a 32px — e o texto mora fora dela.

Os SVGs são as cores das próprias marcas, então cada um ganha uma pastilha nos tons claros do template — bege, bege 2, lilás, verde-claro, pêssego —, com moldura de 2px, sombra dura de 5px e padding de 21%. Os quatro logos que vêm em branco chapado (MariaDB, PostgreSQL, MySQL e MCP) ficam no --preto.

Lilás--lilas

Bege--bege

Bege 2--bege-2

Pêssego--pessego

Verde claro--verde-claro

Bege 2--bege-2

Preto--preto

Tamanho e canto variam por ladrilho (64px e 18px são os da órbita 1): quem manda são os dados de cada casa — --lado e --canto no HTML da home, HeroCircles.jsx no workshop —, não uma medida única. O que não varia é a pastilha, a moldura e o padding.

Botões

Um desenho só, em duas medidas: a pílula do template. Contorno de 2px, sombra dura de 4px e cor chapada — verde para o que a página quer que se aperte, lilás para o resto. O clique é um afundar: no hover a pílula desce 1px e a sombra encolhe junto, no :active ela encosta no chão (0.2s).

Sobre um cartão de cor o botão é o mesmo, só que bege: o verde sumiria no cartão verde. O texto do CTA sempre pede uma ação de entrada — Entrar no time, Quero minha vaga — nunca Saiba mais.

Só o ícone, num círculo bege de 42px com o mesmo contorno, a mesma sombra e o mesmo afundar da pílula — é o idioma e o tema no topo da home, e a seta do carrossel do template (lá, de 54px). Sem rótulo visível, quem diz o que ele faz é o aria-label.

O menu é uma fileira de pílulas lilás de 8px 18px, Montserrat 600 16px — a do topo da home e a do rodapé —, e a chamada principal é a pílula verde no fim dela. As abas são as mesmas pílulas dentro de um trilho de papel com moldura fina: a acesa ganha o lilás e o contorno, as outras ficam só no texto. É o desenho do Preview / DESIGN.md lá em cima.

Pílulas & Selos

Tudo que rotula é uma pílula, e toda pílula é totalmente arredondada, com contorno de 2px. O selo mudou de papel: agora é a pastilha redonda do template, a que carrega o ícone no alto de um cartão de cor. Rótulo de texto é a etiqueta.

Círculo bege de 64px, contorno de 2px e sombra dura de 4px na --linha — mora sempre sobre cor, então desenha em preto nos dois temas. O ícone é um glifo preto: SVG de traço a 28px, ou um dos PNGs como fundo a 50%.

A etiqueta com ponto é o marcador de estado; a pílula verde-clara de sombra curta é o olho da hero. A pílula lilás com a seta (.cursor-tag__rotulo, 15px / 600, sombra de 3px) é a etiqueta que segue o cursor pela página — e, como toda cor aqui, leva texto preto por cima.

Cards & Painéis

Dois contêineres, a mesma moldura. O painel é o cartão neutro: papel --cartao, contorno de 4px, raio de 40px e sombra dura de 12px. O cartão de cor é o mesmo desenho com uma das seis cores chapadas por dentro e texto preto por cima — e é ele que entorta.

Cada cartão roda numa cor e numa inclinação de ±1 a 2°, e endireita no hover (rotate: 0deg, .3s). rotate, e não transform: a cascata do GSAP escreve o transform na entrada, e os dois somam. Passe o mouse.

Trabalho em grupo

Do briefing ao deploy

dallatorre.dev Workshop

Freelancer + AI

Do briefing ao deploy em quatro horas.

Ver o workshop

O que é link afunda em vez de endireitar: no hover o cartão desce 10px e a sombra cai para 2px, como o View case do template.

Cinco cartas sobrepostas em 13% da própria largura, cada uma com giro e deslocamento vertical próprios. Passe o mouse: a carta se endireita, sobe 16px, cresce 6%, ganha uma sombra dura mais alta e empurra as vizinhas. O verde fica no meio de propósito — é ele que ancora as outras quatro cores.

A faixa exposta de cada card (largura − sobreposição − padding) é o que manda no corpo do título: todos precisam se ler no repouso, então os dois números andam juntos. Cada card tem perspective própria — num contêiner comum todos dividiriam o mesmo ponto de fuga e os das pontas girariam tortos.

dallatorre.dev

AprenderWorkshop Freelancer + AIWeb ToolkitDesign system

Em outro lugarInstagramMensagem direta

© 2026 dallatorre.dev — @edudallatorreFeito em Londres.

O rodapé é um cartão bege sobre o papel pêssego, como o do template: a marca no alto, um fio de 2px, e embaixo os destinos — o rótulo em Montserrat 600 18px e as pílulas, lilás para o que é do site e bege para o que leva para fora dele.

Abaixo de 946px a navegação sai do topo e vira uma barra flutuante no pé, ao alcance do polegar: um cartão de papel com moldura de 2px, raio de 30px e sombra de 5px. Só o item da seção em que a página está fica aceso — a pastilha verde, com contorno —, e quem diz qual é ele é o aria-current que o script escreve, e não uma classe.

Cabeçalho de Seção

Toda seção abre igual, como no template: o olho miúdo em Montserrat 600, o título grande logo abaixo e a linha de apoio, tudo centrado. Não há régua nem seta de continuidade: o que separa uma seção da outra é a troca de papel. A entrada é do GSAP, pelo atributo data-cabeca — o olho sobe, as letras do título acendem em ordem aleatória e o lead vem por último.

O título é frase curta e sem ponto final. Lead e itens de lista são frases completas, com ponto.

Raias

A lista numerada que serve as quatro seções do meio: grade de 52px 1fr 42px, divisórias de 2px na --moldura e, no hover, o papel lilás mais um recuo à esquerda. A marca da direita é um botão de ícone, e gira 90°.

Superfície de Cor

No sistema novo o claro é o padrão, e o que muda de uma seção para a outra é o papel: bege, bege 2, pêssego e lilás, em alternância. Sobre o papel de cor o conteúdo vai num cartão bege, como o Partners in crime do template, e os destaques de dentro voltam a ser cartões de cor. Os ícones deixaram de ser máscara: os PNGs já são glifos pretos, e entram como imagem dentro de um selo bege — sem filter e sem tingir.

Notas & Setas

As credenciais viram anotações manuscritas em volta da foto, com uma seta apontando para o que descrevem. Ficam ancoradas na borda da imagem, não na da tela: right: 100% encosta a nota na moldura e o top em porcentagem passa a ser da altura da foto — é o que mantém todas dentro da faixa dela em monitor largo.

Nove anos entregando software para cliente pagante

Times de 2 a 30 pessoas, remoto e presencial

A seta é desenhada apontando para a direita e para baixo, e vale como está do lado esquerdo da foto; do lado direito ela é espelhada (scaleX(-1)) em vez de existir um segundo desenho. Cada nota ainda gira a seta no próprio ângulo, via --giroSeta. Corpo e largura são contidos de propósito: são nove notas em volta de uma foto só. A seta é o laranja do logo — o único traço de cor do palco —, e a foto vai em preto e branco, com moldura de 4px.

Formulários

A página de hoje não tem campo nenhum — todo CTA leva ao grupo do WhatsApp. Este é o desenho derivado dos tokens, para quando entrar um formulário de inscrição, e não uma peça já em uso.

Movimento

Uma curva só na página inteira: cubic-bezier(.22, 1, .36, 1) — saída rápida, chegada longa. O GSAP usa power3.out para entradas e power2.inOut para o flip dos cards. Nada de linear, exceto os giros infinitos (as órbitas), que precisam de velocidade constante.

Movimento reduzido. Com prefers-reduced-motion: reduce, os giros infinitos param: órbitas, contra-giro dos ladrilhos e o cursor do typewriter perdem a animation. As transições de hover ficam — são curtas e disparadas pelo usuário. Toda entrada de ladrilho é escala + opacidade, nunca filter: animar filter dentro de dois ancestrais que giram congela a rasterização no meio do caminho.

Direção de Arte

A imagem da página é sempre a mesma promessa: gente real trabalhando junto. Foto documental emoldurada em tinta, sem véu por cima, e ícones de linha em preto dentro de selos bege. Sem stock sorridente, sem mockup de dashboard.

Palco & plateia

A foto do palco: ambiente escuro, luz de palco, plateia visível. Entra emoldurada, com 4px de tinta e raio de 28px, e o texto mora fora dela, num cartão — nunca por cima.

Trabalho em grupo

Telas, mesa, mais de uma pessoa. É a prova visual do argumento da página — time, não curso.

Ícones em selo

Os PNGs são glifos pretos e entram como são: fundo de um selo bege a 50%, com contorno e sombra dura. Sem máscara e sem filter — a cor do ícone é a da tinta.

Faça & Não faça