Diretório·Taxonomia·Design System
v1.2 — com design tokens

Design
System

Linguagem visual do Hub de Startups — fundação industrial, minimalista e orientada a dados. Tailwind CSS com suporte a tema claro e escuro.

1 · Paleta de cores

Testar accent color

#ECC625

Apenas visual — não persiste. Para trocar definitivamente, edite globals.css.

Primária — Acento global (token: --accent)

5%
accent-hovervar(--accent-hover)hover state
25%
accentvar(--accent-hex)acento principal
1%
accent-darkvar(--accent-dark)pressed

Neutros escuros — dark mode base

page-bg#08080afundo da página
4%
zinc-900#18181bcards, inputs
10%
zinc-800#27272alogo bg, tags
5%
zinc-700#3f3f46bordas ativas
6%
zinc-600#52525btexto muted
7%
zinc-500#71717aícones
4%
zinc-400#a1a1aatexto secundário

Neutros claros — light mode base

page-bg#f9f9f7fundo da página
10%
white#ffffffcards, inputs
1%
gray-100#f3f4f6tags, logo bg
5%
gray-200#e5e7ebbordas padrão
2%
gray-300#d1d5dbseparadores
7%
gray-400#9ca3aftexto muted
3%
gray-500#6b7280texto secundário
4%
gray-900#111827texto primário

Semânticas — estados e feedback

Sucesso / Match
IA Match score, claim
Erro / Destrutivo
reportar, dead link
WhatsApp
contato direto
LinkedIn
share social

2 · Tipografia

Família de fonte

Inter

next/font/google · subsets: ['latin'] · variável: inter.className

Display — Hero / Página de detalhe

Ecossistema

font-black · uppercase · leading-none · tracking-tight · clamp(3rem, 8vw, 6rem)

H1 — Section headline

Conecte sua operação

font-black · uppercase · leading-[0.9] · clamp(2.2rem, 5vw, 4rem)

H2 — Card title / Startup name

Acme Mining AI

font-black · text-lg · leading-tight

Body — Descrição de startup

Curadoria de soluções de alto impacto para mineração, energia e indústria pesada no Brasil. Cada startup é avaliada por relevância, maturidade e impacto real.

text-sm · text-gray-500 dark:text-zinc-400 · leading-relaxed

Body large — Página de detalhe

A 4VANTS utiliza inteligência artificial para automatizar inspeções de ativos, reduzindo problemas de lentidão e riscos em diversas indústrias.

text-base · text-gray-600 dark:text-zinc-300 · leading-relaxed

Eyebrow / Overline

Mineração & Indústria · Brasil

text-[10px] · font-black · uppercase · tracking-[0.4em] · text-accent

Caption — Meta / Label de campo

Estágio

text-[10px] · font-black · uppercase · tracking-widest · text-gray-400 dark:text-zinc-500

Micro — Timestamp / Info discreta

Dados atualizados em 21 de março de 2026

text-[10px] · font-bold · text-gray-400 dark:text-zinc-700

3 · Botões & CTAs

Primary — Pill (navbar / hero)

bg-accent · rounded-full · px-5 py-2.5 · shadow glow

Secondary / Ghost — Pill

rounded-full · border-white/20 · hover:border-white/50

Nav link

rounded-full · px-4 py-2 · text-sm · font-medium

Action / Link

text-xs · font-black · text-accent

Destructive

text-[10px] · text-gray-300 · hover:text-red-500

Filter — Active

px-3 py-1 · rounded-full · text-[10px] · font-medium · bg-accent text-black

Filter — Inactive

border · hover:border-gray-400 · hover:text-gray-900

Share buttons — Copiar / LinkedIn / WhatsApp

Compartilhar
w-8 h-8 · rounded-md · border · icon · hover:border-[color]/50 hover:text-[color]

4 · Badges & Pills

Tag pill — taxonomia

Machine LearningIoTEdge ComputingDrones
text-[9px] · rounded · bg-gray-100 dark:bg-zinc-800/80 · border

Tag link — página de detalhe

Manutenção PreditivaSCADA/PLC
px-3 py-1 · rounded-full · text-[10px] · font-medium · hover:border-accent/50

Category badge — card

Automação & Robóticatext-[9px] · rounded-full · bg-gray-100 dark:bg-zinc-800

Meta pill — mercado/stage/modelo

MineraçãoGrowthB2B SaaS
rounded-full · px-3 py-1 · border-gray-200 dark:border-zinc-800 · bg-white dark:bg-zinc-900

Source badge — origem do dado

CuradoriaComunidade
dot + label · source === 'import' → accent · source === 'submission' → gray

Match score badge

94%rounded · bg-accent/10 · border-accent/20

5 · Inputs

Search

pl-11 · py-3.5 · rounded-xl · focus:border-accent/50

Text input

px-4 py-3 · rounded-xl · border-gray-200 dark:border-zinc-700

Textarea

resize-none · rows=3 · mesmo padrão do text input

Focus state

border-accent/50 — estado focus

6 · Cards

Startup card — diretório

A

Acme Mining AI

Automação & Robótica

Plataforma de IA para otimização de operações em mineração subterrânea.

IAVisão ComputacionalEdge Computing
Mineração·Growth·B2B SaaS
jan. 2025
logo bg sempre bg-[#08080a] — contraste independente do tema

Related card — horizontal (similares / mesma categoria)

B

DataMine Pro

Plataforma de análise de dados em tempo real para operações de mineração.

Big DataBI
w-10 h-10 logo · p-4 · line-clamp-2 description · mini tags text-[8px]

Pillar card — plataforma

⬡

Curadoria de alto nível

Cada startup é avaliada por relevância, maturidade e impacto real.

símbolo accent · font-bold title · text-xs body

Detail card — sidebar de perfil

Detalhes

Categoria
Automação & Robótica
Estágio
Growth
Modelo de negócio
B2B SaaS
Mercados
Mineração · Energia
No hub desde
fev. de 2022
Site
acmemining.com.br

Redes sociais

ativo: text-accent · inativo: text-zinc-800

Dados atualizados em 21 de março de 2026

Informações desatualizadas? Reportar

dl › dt text-[10px] uppercase · dd text-sm font-bold · social icons ativo/inativo · border-t footer

Founder claim card — dashed border

Você é o fundador?

Reivindique este perfil para editar informações e gerenciar a presença no hub.

border-dashed · icon bg-accent/10 border-accent/20 · text-[10px] CTA

IA Match card — resultado de busca

DataMine Pro94%

Plataforma de análise de dados em tempo real para operações de mineração e indústria pesada.

Inteligência de Dados

p-4 · score badge top-right · line-clamp-3 · category footer

8 · Layout & Divisores

Eyebrow rule

Por que o Hub?
h-px w-8 bg-accent + span tracking-[0.4em]

Section divider

border-b border-gray-200 dark:border-zinc-800/60

Dashed divider — separação suave

border-dashed — usado em founder card e separações opcionais

Stats row

249+

Startups

7

Categorias

100%

Gratuito

IA Match container

IA Match

Descreva seu problema

Nossa IA encontra as startups mais relevantes

rounded-2xl · border-accent/20 · bg-accent/[0.03]

Ghost text decorativo

STARTUPS
text-[22vw] · font-black · uppercase · text-white/[0.018] — fundo decorativo hero

Glow utilities — globals.css

.glow-sm
.glow
.glow-lg
.glow-accent-sm · .glow-accent · .glow-accent-lg · .hover:glow-accent-lg

9 · Animações & Interações

Pulse ring — mapa

NODE
animate-ping · opacity-10

Spin loader

animate-spin · border-t-accent

Marquee — hero

Dados · IoT · Automação ·Dados · IoT · Automação ·
animate-marquee · 28s linear

Hover glow

Hover me
shadow-[0_0_24px_rgba(var(--accent-rgb),0.08)]

CountUp — hero stats

249+

IntersectionObserver · ease-out cubic · 1800ms · suffix opcional

Parallax — hero bg

mouse + scroll → translate
requestAnimationFrame · lerp 0.06 · scale(1.25) · pointer-events-none

10 · Overlays & Notificações

Modal — report / ação destrutiva

Reportar

Link morto

O site de Acme Mining AI está fora do ar?

Motivo opcional…
Confirmar report
bg-[#08080a] · border-zinc-800 · rounded-2xl · label text-amber-400/70 · btn border-amber-400/30 bg-amber-400/10

Modal — estado de sucesso

Obrigado!

Vamos verificar em breve.

Fechar
icon w-10 h-10 rounded-xl bg-accent/10 · checkmark · title text-sm uppercase

Modal — overlay / backdrop

bg-black/40 · backdrop-blur-sm
fixed inset-0 z-50 · bg-black/40 backdrop-blur-sm — click fora fecha

Cookie banner — notificação fixa

Usamos cookies

Para melhorar sua experiência na plataforma.

RecusarAceitar
fixed bottom-5 · rounded-full · bg-[#0f0f0f]/95 border-white/10 · backdrop-blur-2xl · shadow dark

Accordion — critérios / colapsável

  • Nome da startup
  • Categoria definida
  • Descrição preenchida
  • Website ativo— sem site cadastrado
maxHeight 0 → N×36px · opacity 0→1 · transition ease 0.3s — collapses on click

11 · Design Tokens

Border radius

4pxbadge score, tags simples
6pxbotões nav, theme toggle
8pxbotões CTA, logo related
12pxstartup card, inputs, detail card
16pxIA Match box, logo hero
pillbadges de categoria e meta

Tracking (letter-spacing)

DADOS
tightdisplay headline
DADOS
widetags e badges
DADOS
widerbotões CTA
DADOS
widestlabels, metas, captions
DADOS
[0.2em]marquee categories
DADOS
[0.3em]section labels internos
DADOS
[0.4em]eyebrow / overline

Espaçamento interno

p-1.5tag pill
p-2nav buttons, toggle
p-3inputs
p-4related card, IA match card
p-5startup card, founder card
p-6detail sidebar, IA Match box

Tokens CSS definidos em globals.css. Para trocar a cor de acento globalmente, edite apenas as variáveis abaixo — todos os componentes refletem a mudança automaticamente.

Acento — como alterar

/* globals.css */
:root {
--accent: 232 52 110 /* oklch bg-accent */
--accent-hover: 237 95 138 /* #ed5f8a */
--accent-dark: 196 24 90 /* #c4185a */
--accent-hex: #e8346e /* stroke, fill direto */
--accent-rgb: 232, 52, 110 /* rgba() em shadows */
}

Classes Tailwind geradas

bg-accentfundo acento
bg-accent/10fundo tinto
text-accenttexto acento
text-accent/70texto muted
border-accent/50borda suave
hover:bg-accent-hoverhover state

Preview do token atual

Aa
accent · accent-hover · accent-dark · accent/20 · accent/10

Hub de Startups Design System · v1.2

← Voltar ao Hub