Bitnik Design System
Os tokens e componentes que garantem consistência visual entre o site e os jogos online da bitnikgames — CSS puro, open source, pronto a reutilizar noutro projeto.
Extraído do código deste site em 2026 para manter a mesma identidade visual entre a bitnikgames.vercel.app e os jogos online do catálogo — sem copiar e colar CSS entre projetos. Zero dependências, zero build step obrigatório: funciona em Astro, React, Vue, ou HTML simples.
Instalar
Via npm (num projeto com bundler)
npm install git+https://github.com/dferreiramarques/bitnikgames-design-system.git@import "@bitnikgames/design-system/src/index.css";Sem npm (HTML simples, via jsDelivr)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dferreiramarques/bitnikgames-design-system@main/src/index.css" />Carregar as fontes
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />O CSS só define a stack (--font-display, --font-body) — as fontes em si carregam-se à parte.
Criar uma skin
A única camada que precisas de tocar para adaptar isto a outra marca é tokens.css — escolhe a paleta e as Google Fonts visualmente nesta página, com pré-visualização ao vivo usando o base.css e o components.css reais do pacote, e exporta um tokens.css novo.
Abrir o Skin Builder →Tokens
A única camada que uma "skin" deve tocar — muda estas variáveis e todo o resto segue.
Cor
--color-yellow #e8a93b --color-yellow-deep #c4841f --color-orange #ea7c2e --color-orange-deep #c85f1d --color-brick #b8461f --color-brick-deep #8f3417 --color-cream #fbf3e4 --color-cream-soft #f3e4cb --color-cream-strong #ecd6ac --color-ink #2b1b12 --color-ink-soft #5b4636 --color-white #fffaf1 Forma (border-radius)
--radius-sm 8px --radius-md 14px --radius-lg 24px --radius-pill 999px Sombra
Deriva de --shadow-color-rgb — muda a tinta (--color-ink) da skin e a sombra segue, em vez de ficar preta fixa.
Tipografia
--font-display · Baloo 2 Jogos publicados
--font-body · Inter Texto de corpo, legível em qualquer tamanho — usado em parágrafos, listas e formulários.
Componentes base
Layout, botões, badges e cartões — o que qualquer site de marketing ou catálogo precisa.
Botões
Badges
Aqui usam os nomes específicos deste site (badge-free, badge-paid...). No pacote standalone são generalizados para badge-accent / badge-primary / badge-secondary / badge-outline / badge-ink, para fazer sentido fora do contexto de jogos.
Cartões
Bulbous
.card + .card-media + .card-body
Capivaras
.card-title + .card-excerpt
Catania
.card-meta + .card-footer
Camada opcional: UI de jogo
Não faz parte do import por omissão — só importa game-ui.css em projetos com tabuleiro/cartas. Extraído dos jogos reais no catálogo "Jogar Online".
Chips de cor
Para referenciar jogador/equipa/naipe de forma legível — 4 tokens de cor (--game-color-1..4) que cada jogo sobrescreve com a sua paleta.
Cartas de jogo
1 
2 
3 
4 Arte real do Bulbous — hover para veres o lift + sombra. .badge-circle sobrepõe a numeração, .game-card-bar dá a barra de legenda inferior.
Dados
O mesmo padrão de pips (grelha 3×3 + --shadow-color-rgb) usado nos 9 dados do Nine Oils, aqui parado numa jogada de exemplo.
Tabs
Toast
Confirmar jogada?Modal
(mostrado fora do overlay position:fixed, só para ver o estilo da caixa)
Este é o .modal-box — usado nos popups de detalhe de carta e confirmações dentro dos jogos.
Jogos que já o usam
Cada um com a sua própria paleta — tipografia, raio e sombra partilhados.
Bulbous
Tema escuro, acento lilás. Primeiro a usar .game-card, .chip e .badge-circle.
Capivaras
Tema claro e quente, âmbar + teal. Primeiro a usar --shadow-color-rgb corretamente.
Catania
Tema dourado sobre quase-preto. Texto SVG com var(--font-display) no mapa de hexágonos.