Diretório·Taxonomia·Design System
H
Hub de Startups/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

#E8346E

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

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

accent-hovervar(--accent-hover)hover state
34%
accentvar(--accent-hex)acento principal
accent-darkvar(--accent-dark)pressed

Neutros escuros — dark mode base

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

Neutros claros — light mode base

page-bg#f9f9f7fundo da página
14%
white#ffffffcards, inputs
gray-100#f3f4f6tags, logo bg
8%
gray-200#e5e7ebbordas padrão
gray-300#d1d5dbseparadores
gray-400#9ca3aftexto muted
gray-500#6b7280texto secundário
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

bg-accent · text-black · rounded-lg · px-6 py-3

Secondary / Ghost

border-gray-300 dark:border-zinc-700 · hover:border-accent/50

Nav

rounded-md · px-4 py-2 · border-gray-200

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

Dados atualizados em 21 de março de 2026

Informações desatualizadas? Reportar

dl › dt text-[10px] uppercase · dd text-sm font-bold · 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]

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)]

10 · Tokens de design

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

11 · Design Tokens

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: 163 230 53 /* var(--accent-hex) */
--accent-hover: 190 242 100 /* #bef264 */
--accent-dark 132 204 22 /* #84cc16 */
--accent-hex: var(--accent-hex) /* WebkitTextStroke */
--accent-rgb 163, 230, 53 /* 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