01
Tipografia
Space Grotesk · Inter · 2 famílias · 4 pesosFamílias tipográficas
| Família | Pesos usados | Papel | Importação |
|---|---|---|---|
| Space Grotesk | 500 700 | Headlines, títulos, números de destaque, logo | Google Fonts |
| Inter | 400 500 | Body, labels, UI, nav links, meta, buttons | Google Fonts |
Estilos — Space Grotesk
Hero H1
CTA Section H2
Page H1
Section Title
Card Title — 18px
56
Process Item Title
Problem Card Text
Dubowl
PT · EN · ES
Estilos — Inter
Body text — parágrafos principais, hero, about, page headers. Cor secundária por padrão.
Case body text — conteúdo dos cases. Ligeiramente maior para leitura longa.
Process item body text.
Nav link · Footer link · Case nav
Button label
Ver todos os projetos →
Card description text — truncada em 2 linhas com -webkit-line-clamp.
Card meta · Footer copy · Stat label
Section Label · Eyebrow
Tag · Badge · Card tag · Case category
02
Cores
10 tokens · prefixo --fd-Backgrounds & Superfícies
--fd-bg
#0F0F0F
Background principal de todas as páginas. Body background.
--fd-surface
#1A1A1A
Cards de projeto, footer, about-snippet, nav blur base, case-meta, problem-card, decision-card, result-card.
--fd-surface-elevated
#222222
Definido mas não aplicado diretamente via CSS em 2026-07. Disponível para modais, tooltips, overlays futuros.
--fd-border
#2A2A2A
Bordas de cards, nav scrolled, divisores de seção, separadores de tabela, outline do avatar.
Texto
--fd-text-primary
#F2F2F2
Texto principal: títulos, headlines, nav ativa, card titles, values de meta. Não é branco puro — levemente off-white.
--fd-text-secondary
#888888
Texto de suporte: parágrafos, nav links default, eyebrows, labels, meta, card desc, footer copy. Cor mais usada no site.
--fd-text-on-accent
#FFFFFF
Texto sobre botão primário (fundo coral). Garante contraste mínimo 4.5:1 sobre #FE604B.
Accent — Coral Orange
--fd-accent
#FE604B
Cor de marca. CTAs primários, links de destaque (.link-accent), tags, badges, stat numbers, company names no About, result-card border, role-list dots, metrics checks.
--fd-accent-hover
#E5513C
Estado hover do botão primário. Escurecimento de ~7% sobre o accent. Aplicado via transition 200ms ease.
--fd-accent-subtle
rgba(254, 96, 75, 0.10)
Background de tags e badges (.hero__badge, .card__tag, .case-hero__category). Confere leve tint coral sem peso visual.
Border Radius
--fd-radius-sm
4px
uso: nenhum direto
4px
uso: nenhum direto
--fd-radius-md
8px
nav mobile · process-item--text
decision-card · tool-tag
8px
nav mobile · process-item--text
decision-card · tool-tag
--fd-radius-lg
12px
card · process-item · result-card
problem-card
12px
card · process-item · result-card
problem-card
--fd-radius-pill
999px
btn · tag · badge · skill-tag
999px
btn · tag · badge · skill-tag
Espaçamentos principais
--fd-px mobile
24px
24px
--fd-px tablet
40px
40px
--fd-px desktop
80px
80px
--fd-nav-height
64px
64px
--fd-max-width
1440px
1440px
Sombras
| Token | Valor | Uso |
|---|---|---|
| --fd-shadow-card | 0 1px 3px rgba(0,0,0,0.3) | Estado default dos cards |
| --fd-shadow-card-hover | 0 8px 24px rgba(0,0,0,0.4) | Estado hover dos cards (com translateY(-4px)) |
03
Botões
3 variantes · 3 states por variantebtn--primary · Filled
| Prop | Default | Hover | Disabled |
|---|---|---|---|
| background | --fd-accent #FE604B | --fd-accent-hover #E5513C | opacity: 0.35 |
| color | #FFFFFF | #FFFFFF | — |
| transform | nenhum | translateY(-1px) | cursor: not-allowed |
| transition | background-color 200ms ease, transform 200ms ease | ||
btn--outline · Ghost
| Prop | Default | Hover | Disabled |
|---|---|---|---|
| background | transparent | transparent | opacity: 0.35 |
| border | --fd-border #2A2A2A | --fd-accent #FE604B | — |
| color | --fd-text-primary #F2F2F2 | --fd-accent #FE604B | — |
link-accent · Text Link
| Prop | Valor |
|---|---|
| font | Inter 500, 15px |
| color | --fd-accent #FE604B |
| hover | opacity: 0.75 (transition 200ms ease) |
| uso | Work section "Ver todos os projetos" · Card CTA |
Especificações base — .btn
| Propriedade | Valor | Observação |
|---|---|---|
| font-family | Inter | — |
| font-weight | 500 | — |
| font-size | 16px | — |
| padding | 14px 28px | — |
| border-radius | --fd-radius-pill (999px) | Fully rounded |
| min-height | 44px | Acessibilidade — touch target mínimo |
| display | inline-flex · align-items: center · gap: 6px | Suporte a ícone ao lado do texto |
| transition | 200ms ease | background-color, transform, border-color, color |
Tags & Badges (não são botões — elementos de status)
Product Design
Disponível para novos projetos
UX / UI
Figma
FlutterFlow
| Classe | Cor de fundo | Cor de texto | Font | Uso |
|---|---|---|---|---|
| .card__tag .hero__badge .case-hero__category |
--fd-accent-subtle | --fd-accent | Inter 500 · 11–12px · uppercase · ls 0.08em | Categoria do card, badge do hero, categoria do case hero |
| .skill-tag | transparent | --fd-text-secondary | Inter 400 · 13px | Skills no About |
| .tool-tag | --fd-surface | --fd-text-secondary | Inter 400 · 13px | Ferramentas no About |
04
Imagens dos Cases
5 contextos de imagem · todos com object-fit: cover
16 : 9
Card Thumbnail
Cobre toda a largura do card. Não tem altura fixa — segue a proporção 16:9 responsivamente. Hover:
Onde: grade de projetos na homepage e na work.html. Classe:
scale(1.03) transition 400ms. Background do container é --fd-bg para fallback.Onde: grade de projetos na homepage e na work.html. Classe:
.card__thumb img
100% × 460px
Case Hero
Largura total da viewport (sem container), altura fixa 460px. Overlay degradê escurece de 25% no topo a 88% na base para o título ficar legível. Mobile (<480px): altura reduz para 360px.
Margem superior: 24px (mt-24px abaixo do breadcrumb). Classe:
Margem superior: 24px (mt-24px abaixo do breadcrumb). Classe:
.case-hero__img
100% × min 480px
Process Item (com imagem)
Bloco de processo com imagem de fundo. Overlay gradiente bottom-up (92% opacidade na base). Título e body posicionados em flex-end dentro do container. Usado em gol.html, assistshop.html, diariamente.html.
Grid: 2 colunas — se ímpar, o último ocupa largura total (
Grid: 2 colunas — se ímpar, o último ocupa largura total (
grid-column: 1 / -1). Mobile: min-height reduz para 400px.
Sem imagem — altura automática
Process Item (sem imagem)
Variante texto para cases sem imagem de processo (claropay, premierpet, mixlab, bodysoul). Background surface + borda border. Título em text-primary, body em text-secondary. Sem sombra de texto.
Classe:
Classe:
.process-item--text
width: 110% — responsivo
Hero Avatar (homepage)
Imagem ilustrativa na coluna direita do hero. Width 110% causa leve overflow proposital para criar tensão visual. A coluna some em viewport <1100px (
display:none). Classe: .hero__avatar
FD
96 × 96px
About Avatar
Foto circular no cabeçalho da página About. Fallback: iniciais "FD" em Space Grotesk 700 28px na cor accent. Classe:
.about-avatar-img