Sistema de design
Fumaça Grafite
O sistema que sustenta este site: uma paleta acromática, três famílias tipográficas e um punhado de peças que se repetem. Tudo o que está abaixo é lido do código — mudar o token muda esta página.
§ 01 — Cor
Uma cor só, em muitas intensidades
Monocromático por decisão, não por falta: os prints dos projetos já são coloridos, e qualquer cor de marca competiria com eles. O vermelho é funcional — marca número negativo — e não faz parte da identidade.
Tema claro
- --fg#13131516.86 AAA15.26 AAA
- --fg-soft#3F3F449.51 AAA8.61 AAA
- --fg-muted#63636A5.42 AA4.90 AA
- --accent-2#4C4C527.75 AAA7.01 AAA
- --danger#B23B305.36 AA4.85 AA
Tema escuro
- --fg#F0F0F017.16 AAA16.14 AAA
- --fg-soft#B5B5B79.55 AAA8.99 AAA
- --fg-muted#8F8F946.07 AA5.72 AA
- --accent-2#C9C9CE11.85 AAA11.15 AAA
- --danger#E0847A7.22 AAA6.79 AA
Razão calculada em tempo de build a partir da própria paleta, pelo padrão WCAG 2. Texto normal precisa de 4.5; a partir de 24px, 3.0 basta.
A régua fica em 1.5 de propósito: é fio decorativo, que a norma isenta. Escurecê-la para passar num teste que não se aplica custaria o desenho.
§ 02 — Tipografia
Três vozes
Uma serifada com itálico de verdade para o que tem voz, uma sem serifa para o que tem função, e uma monoespaçada para o que é dado. A Newsreader é variável: um arquivo cobre de 200 a 800.
Escala
- Frontend Developer.display
- Frontend Developer.body-serif
- Frontend Developer.corpo
- Frontend Developer.kicker
- Frontend Developer.marker
Eixo de peso
Newsreader · 200–800
- Frontend Developer200
- Frontend Developer300
- Frontend Developer400
- Frontend Developer500
- Frontend Developer600
- Frontend Developer700
- Frontend Developer800
§ 03 — Peças
O que se repete
Cada peça existe uma vez no CSS e aparece em toda parte. A lista abaixo é a fonte, não uma reprodução dela.
.pill · .pill-solid
.rule · .rule-thick
.hl · .hang
Um trecho comum com o realce aplicado no meio da frase.
§ 04 — Movimento
Cenas de rolagem
Cinco cenas, marcadas por atributo no HTML. Nenhuma anima opacidade: o conteúdo nasce visível, e se o JavaScript falhar a página fica parada, nunca em branco.
[data-scroll-heading]Título sobe acompanhando a rolagem[data-scroll-card]Bloco entra ao aparecer, desfaz ao voltar[data-scroll-stagger]Filhos entram em cascata[data-scroll-image]Imagem desliza e assenta a escala[data-parallax]Deslocamento contínuo, em fração da janela
Quem pede menos movimento no sistema não recebe nenhuma delas — e o controle no rodapé pausa tudo a qualquer momento.