Saving
Redução de desperdícios com ganhos mensuráveis ao longo do processo.
DS #2 · Workbench de consolidação
New Design System
O norte dos componentes do site. Aqui mapeamos tudo que existe, cruzamos com onde é aplicado, e definimos o conjunto oficial — reduzindo muitas searchbars, chips e botões a poucos componentes fm-consolidados. Página interna, noindex.
A jornada — 3 design systems
#1
Legado
O retrato do design atual — a herança do Webflow, com toda a redundância. Congelado como referência.
Ver a DS legado →#2
Este (workbench)
O norte. Mapeia todos os componentes e onde são usados, e decide quais viram oficiais — substituindo os outros.
#3
Futuro otimizado
A convergência: o catálogo limpo do site já reconstruído, só com os componentes oficiais. Enxuto.
Fundamentos
Tipografia, cor, sombras, espaço, raio, scrim e largura são consumidos pelos componentes e composições — por isso são decididos antes deles. Renderizados ao vivo com os tokens --fm-* (a fonte única é public/css/fm/base.css; espelham as Figma Variables — o objetivo é gerar a biblioteca no Figma a partir daqui).
Tipografia · ~47 classes + flexões → 8 estilos oficiais (2 famílias)
→--fm-text-* · --fm-font-*Depois · escala oficial, 2 famílias
8 estilos nomeados (Oswald display/h1/h2 · Nunito h3/corpo/meta), responsivos via clamp.
Aa Bb Cc
.fm-displayAa Bb Cc
.fm-h1Aa Bb Cc
.fm-h2Cabeçalho menor
.fm-h3Texto de destaque (lead).
.fm-body-lgTexto de corpo padrão para leitura confortável.
.fm-bodyTexto secundário e legendas.
.fm-body-sm.fm-metaTokens de tamanho: xs .75 · sm .875 · md 1 · lg 1.25 · xl 1.5 · 2xl 2 · 3xl 3 · 4xl 4 · 5xl 5rem
Antes · redundância (documentado)
- ~47 classes tipográficas vivas, com flexões por até 6 breakpoints (base/1440/991/767/479).
- Duplicatas a colapsar:
heading-h1×heading-h1-2;heading-large×heading-large-2;heading-medium×heading-medium-2/3; numéricasheading-3/4/5/8×semânticasheading-h2/h3/h4;text-size-medium×-2×-adress;text-meta×-2/3/4×-footer;text-rich-text×-3. - 3 fontes fantasma (referenciadas sem
@font-face→ caem no fallback, remover):Satoshi,Clashdisplay,DM Sans.
~47 classes + flexões → escala única (2 famílias reais)
Cor · 20 vars com ruído → 18 tokens honestos
→--fm-* (paleta)Depois · paleta oficial
Marca
--fm-navy#011222--fm-white#fffGrays
--fm-gray-700#3c444c--fm-gray-500#55606b--fm-gray-300#8d949c--fm-gray-100#caced1Teal
--fm-teal#178398--fm-teal-bright#20b9d6--fm-teal-soft#6ad0e4--fm-teal-pale#bae9f2Red
--fm-red#dd1a6e--fm-red-strong#9d124e--fm-red-soft#e8669e--fm-red-pale#f4b8d2Yellow
--fm-yellow#fad021--fm-yellow-strong#b29417--fm-yellow-soft#fce06a--fm-yellow-pale#fdf0baAntes · ruído removido (documentado)
- O azul Webflow
#3898ecaparecia 33× — não é cor da marca. --blackdo skin era navy (nome mentiroso).- Cinzas genéricos
#191919/#999/#ddd.
20 vars com ruído → 18 tokens honestos
Efeitos / Sombras · 17 sombras ad-hoc → escala de 4 (navy-tinted)
→--fm-shadow-*Depois · escala oficial (4)
--fm-shadow-smrepouso: cards
--fm-shadow-mdelevado: dropdowns / hover
--fm-shadow-lgflutuante: popups / modais
--fm-shadow-focusanel de foco teal
Antes · redundância (documentado)
- 17 box-shadows distintos no skin — pretos genéricos em blurs/opacidades inconsistentes (
0 2px 8px #0000001a,0 2px 24px #00000040,0 5px 25px #00000040, uma empilhada de 5 camadas…). - O glow azul Webflow
0 0 3px 1px #3898ec(lixo). - Anéis
insetde validação.
17 sombras ad-hoc → escala de 4 (navy-tinted, da marca)
Espaço · utilitárias de margem/padding do skin → escala de 10
→--fm-space-*--fm-space-10.25rem--fm-space-20.5rem--fm-space-30.75rem--fm-space-41rem--fm-space-61.5rem--fm-space-82rem--fm-space-123rem--fm-space-164rem--fm-space-246rem--fm-space-328remRaio · raios ad-hoc do skin → escala de 5 (screen responsivo = "look iPhone")
→--fm-radius-*--fm-radius-sm0.5rem--fm-radius-md1rem--fm-radius-lg2rem--fm-radius-screen6→2rem (resp.)--fm-radius-pill100remScrim / Overlay · gradientes hardcoded → 3 tokens (sobre navy/teal)
→--fm-scrim-*--fm-scrim-photonavy → transparente (case sobre foto)
--fm-scrim-photo-strongnavy reforçado (tela estreita)
--fm-scrim-tealtinta teal (CTA com bg-photo)
Largura máxima · conteúdo centraliza em telas ultra-wide
→--fm-max-widthconteúdo · máx 1600px
--fm-max-width: 1600px — Nav, Footer e o conteúdo das rotas centralizam nesse limite; abaixo dele, nada muda. Sections full-bleed vão de ponta a ponta — só o texto respeita o container.
Componentes oficiais
Renderizados ao vivo (os fm- reais), ao lado das variantes que substituem.
Searchbar fm-searchbar
oficialSubstitui em: /blog · /hub-de-startups · /mapa-da-mina
Antes · 3 implementações
/blog · .blog-search/hub · .search_component/mapa · .mm-searchDepois · 1 componente, variantes
variant="outline" size="md"variant="filled" size="md"variant="outline" size="sm" (com texto → limpar)Button fm-button
oficialSubstitui em: todas as páginas (CTA) · home/alugue (texto) · hub/mapa (filtro)
Consolida as ~8 variantes do inventário (acima) → 1 componente, 4 variantes × 2 tamanhos. Consome os fundamentos: paleta --fm-*, --fm-radius-pill, --fm-shadow-sm (hover) e --fm-shadow-focus (teclado).
variant="solid" / "outline"variant="inverse" (fundo escuro)variant="text" (+ withArrow)Chip / Tag fm-chip
oficialSubstitui em: /blog · /hub-de-startups · /mapa-da-mina · /projetos · /post/*
Consolida a família .label (×6 modificadores) → 1 componente: variantes outline/solid/muted + estado is-active. O ativo era navy (blog) e teal (hub); unificado em teal (cor de seleção da marca).
variantesDesignInovaçãoUXfiltro: is-active (teal) × inativoFintechEnergiaSaúdetag em fundo escuro (outline)EstratégiaPesquisaCard fm-card
oficialSubstitui em: /blog · /hub-de-startups · /alugue · /design-de-produto · /post/*
Consolida os cards de conteúdo numa composição por slots (mídia + corpo + rodapé), variantes media/filled/outline. Reusa fm-chip (eyebrow) e fm-button (rodapé). O slot footer carrega ações — ex.: o globo do card de startup (Hub), que é o link para o site externo (afordância importante, preservada).
fora daqui: .projects-item — é height:100vh; position:sticky (case full-bleed da pilha) = Section/Hero, não card.
fora daqui: .maps-locations-item/.sidebar__location-card e os elementos internos do mapa — são parte do produto Mapa da Mina e permanecem próprios (não consolidam).
Design
Como nasce um bom produto
Da pergunta certa ao protótipo: o caminho que conecta estratégia e execução.
01
Descoberta
Diagnóstico e benchmarking para enquadrar o problema antes de desenhar a solução.
Inteligência de Dados
1UP
A 1UP Technology transforma dados em informação — o globo abre o site externo.
Filterbar fm-filterbar
oficialSubstitui em: /blog · /hub-de-startups · /mapa-da-mina (busca + filtros)
Não é estilo novo — é composição dos primitivos fm-searchbar + fm-chip com o layout da barra. Clique nos chips (demo não-controlada). A lógica de filtrar a lista mora na rota (fatia 3+).
Accordion fm-accordion
oficialSubstitui em: /mapa-da-mina (painel de filtros) · FAQs futuras
Expand/collapse com aria-expanded. Por padrão só um item aberto por vez (multiplo libera vários); abertoInicial abre um índice na montagem. Chevron gira no estado is-open.
É o processo de transformar um problema de negócio em uma solução desejável, viável e factível — da pesquisa ao protótipo testável.
Badge fm-badge
oficialRótulos/status: o próprio selo oficial deste catálogo, a pílula do hero, status em listas.
Distinto do fm-chip: estático e não interativo (nunca vira <button>), menor e mais compacto. Tons da paleta × variantes soft (tint) e solid (cheio).
variante="soft" (padrão)NovoBetaEsgotadoRascunhovariante="solid"NovoBetaEsgotadoRascunhoField fm-field
oficialInput de formulário rotulado — para os CTAs/forms inline futuros.
Apresentacional (o valor é controlado pela rota via props nativas). Label + input ou textarea (multiline), com hint e marca de obrigatório. Foco = borda teal + --fm-shadow-focus.
Máx. 500 caracteres
Sections não são componentes. Heros, CTAs e layouts são composições dos primitivos acima (card, button, chip, searchbar…) + os fundamentos (tokens). Cada rota monta sua section com essas peças na hora do rebuild (fatia 3+) — não há componente fm-section/fm-hero. Os signatures (hero de física Matter.js da home, pilha sticky .projects-item) são recriados como assinatura na fatia 5.
Inventário visual — elementos atuais (redundância)
Documentação fiel do que existe hoje: cada variante abaixo é o markup real das páginas construídas, renderizado com o skin do site(femtov1 + blog/hub) — aparece exatamente como no ar. Agrupado por família, com a assinatura de classe e onde é usado. É o insumo da consolidação: o que vira um fm- oficial e substitui o resto.
Imagens de conteúdo foram trocadas por um placeholder neutro; classes e estrutura preservadas. Fonte: docs/diagnostico/INVENTARIO-componentes-uso.md.
Buttons · 9 variantes
→fm-button + variantes~4 arquétipos espalhados em 36 assinaturas: CTA sólido (primary/dark-mode), CTA simples (w-button), botão-texto com ícone animado (+ inverse), chips de filtro (reset/filter) e o wrapper div-button. (.heading-medium.cta abaixo NÃO é botão — é o título da seção CTA Matter da home.)
Chips / Tags · 4 variantes
→fm-chip + variantesUma única família .label com modificadores. Mesma estrutura interna (.label-inner › .label-text + .label-text-hover) em todas; muda só o modificador de cor/uso.
Cards · 9 variantes
→fm-card + variantes por conteúdo~8 implementações do mesmo padrão (mídia + título + texto + meta), cada página com a sua. Imagens de conteúdo trocadas por placeholder neutro.
Próximos oficiais
Com o inventário acima documentado, as próximas famílias a ganhar um componente fm- oficial (no modelo antes → depois, como a Searchbar) são: Button · Chip / Tag · Card. Cada uma colapsa todas as variantes acima em um único componente com variantes.