Design System Tokens / Tipografia / Botões / Cards / Formulários / Badges / Feedback / Navegação / Layout / Padrões

Coliseu dos Jogos

Design System

Todos os componentes, tokens e padrões visuais do projeto. Use este arquivo como referência para replicar o sistema em outros projetos com agentes de IA.

Design Tokens

Variáveis CSS e Tailwind config que formam a base visual do sistema.

Paleta de Cores

Primary

#8B1A1A

--col-primary

Primary Light

#B02525

--col-primary-light

Primary Dark

#5C0F0F

--col-primary-dark

Gold

#C5A028

--col-gold

Gold Light

#D9BC45

--col-gold-light

Gold Dark

#9A7C1A

--col-gold-dark

Parchment

#F5EDD6

--col-parchment

Parchment Dark

#E8DDBC

--col-parchment-dark

Marble

#EDE7D9

--col-marble

Obsidian

#100E1A

--col-obsidian

Obsidian Light

#1E1829

--col-obsidian-light

Text

#2C1A0E

--col-text

CSS Variables

:root {
  /* Brand */
  --col-primary:       #8B1A1A;  /* Crimson — CTA, buttons */
  --col-primary-light: #B02525;
  --col-primary-dark:  #5C0F0F;

  /* Accent */
  --col-gold:          #C5A028;  /* Ancient gold — accents, labels */
  --col-gold-light:    #D9BC45;
  --col-gold-dark:     #9A7C1A;

  /* Backgrounds */
  --col-parchment:     #F5EDD6;  /* Main light bg */
  --col-parchment-dark:#E8DDBC;  /* Hover / muted bg */
  --col-marble:        #EDE7D9;  /* Card / surface bg */
  --col-obsidian:      #100E1A;  /* Dark bg (header, footer) */
  --col-obsidian-light:#1E1829;

  /* Text */
  --col-text:          #2C1A0E;  /* Body text */
  --col-text-light:    #6B5040;  /* Secondary / muted */
  --col-off-white:     #FAF7F0;  /* Text on dark surfaces */

  /* Typography */
  --font-display: 'Cinzel', serif;     /* Headings, labels, buttons */
  --font-body:    'Raleway', sans-serif; /* Body, paragraphs */
}
/* Google Fonts import */
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">

/* Tailwind config */
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#8B1A1A', 'primary-light': '#B02525', 'primary-dark': '#5C0F0F',
        gold: '#C5A028', 'gold-light': '#D9BC45', 'gold-dark': '#9A7C1A',
        parchment: '#F5EDD6', 'parchment-dark': '#E8DDBC', marble: '#EDE7D9',
        obsidian: '#100E1A', 'obsidian-light': '#1E1829',
        coltext: '#2C1A0E', 'coltext-light': '#6B5040', 'off-white': '#FAF7F0',
      },
      fontFamily: {
        display: ['Cinzel', 'serif'],
        body:    ['Raleway', 'sans-serif'],
      }
    }
  }
}

Tipografia

Duas famílias tipográficas. Cinzel (display/serif) para headings e labels; Raleway (sans) para corpo de texto.

Cinzel — Display / Headings

Coliseu dos Jogos

Cinzel 900 · 48px · heading display

O Reino dos Tabuleiros

Cinzel 700 · 32px · h1

Promoções da Semana

Cinzel 600 · 22px · h2

Catan — O Jogo de Estratégia

Cinzel 600 · 16px · h3 / card title

Bem-vindo ao Coliseu

Cinzel 700 · 10px · eyebrow / label

Raleway — Body / UI

Adentrando o mundo dos jogos de tabuleiro moderno? Nossa coleção reúne mais de 200 títulos cuidadosamente selecionados para todos os estilos de jogo.

Raleway 400 · 16px · paragraph

R$ 29,90 /diária · Estratégia · 3–6 jogadores

Raleway 400 · 14px · meta / secondary

Adicionar ao carrinho

Raleway 500 · 13px · UI text

Frete grátis em pedidos acima de R$ 200

Raleway 600 · 12px · caption / info
<!-- Display heading -->
<h1 style="font-family:var(--font-display);font-size:clamp(28px,5vw,48px);font-weight:900;">Título Principal</h1>

<!-- Section heading -->
<h2 style="font-family:var(--font-display);font-size:22px;font-weight:700;">Seção</h2>

<!-- Eyebrow label -->
<p style="font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--col-primary);">Bem-vindo ao Coliseu</p>

<!-- Body paragraph -->
<p style="font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--col-text);">Texto do parágrafo.</p>

<!-- Muted/secondary text -->
<p style="font-family:var(--font-body);font-size:14px;color:var(--col-text-light);">Informação secundária</p>

Botões

Quatro variantes de botão com estados hover e active. Sempre usar font-family Cinzel em uppercase com letter-spacing.

btn-primary (CTA principal)

.btn-primary {
  background: var(--col-primary);
  color: var(--col-gold);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 6px;
  border: 1px solid rgba(197,160,40,.3);
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover {
  background: var(--col-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139,26,26,.35);
}

btn-secondary (ação secundária)

.btn-secondary {
  background: transparent;
  color: var(--col-gold);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 6px;
  border: 1px solid rgba(197,160,40,.5);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-secondary:hover {
  background: rgba(197,160,40,.1);
  border-color: var(--col-gold);
  transform: translateY(-1px);
}

Cards

Product card, blog card e info card. Todos com hover lift + gold border.

Product Card

Catan Promo

Catan

Estratégia

★★★★★(234)
R$ 29,90/diária
Pandemic Novo

Pandemic

Cooperativo

★★★★★(187)
R$ 24,90/diária
Gloomhaven Esgotado

Gloomhaven

RPG / Aventura

★★★★★(412)

Indisponível para aluguel

<div class="product-card flex flex-col">
  <div class="relative">
    <img src="IMAGE_URL" alt="Nome do Jogo" class="card-img">
    <span class="card-badge badge-promo">Promo</span>  <!-- ou badge-new / badge-out -->
  </div>
  <div class="p-4 flex flex-col flex-1">
    <a href="item.html?id=ID">
      <h3 class="font-display text-sm font-semibold text-coltext">Nome do Jogo</h3>
    </a>
    <p class="text-xs text-coltext-light mt-1">Categoria</p>
    <div class="flex items-center gap-1 mt-2">
      <span class="stars text-xs">★★★★★</span>
      <span class="text-xs text-coltext-light">(234)</span>
    </div>
    <div class="flex items-baseline gap-2 mt-3">
      <span class="text-primary font-bold text-base">R$ 29,90</span>
      <span class="text-xs text-coltext-light">/diária</span>
    </div>
    <button class="btn-primary text-xs px-3 py-2 mt-auto">Alugar</button>
  </div>
</div>

<!-- CSS -->
.product-card {
  background: var(--col-marble); border-radius: 10px;
  border: 1px solid rgba(197,160,40,.2); overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139,26,26,.12);
  border-color: rgba(197,160,40,.5);
}
.card-img { width: 100%; height: 180px; object-fit: cover; }
.card-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.badge-new  { background: var(--col-primary); color: var(--col-gold); }
.badge-promo{ background: var(--col-gold); color: var(--col-obsidian); }
.badge-out  { background: rgba(44,26,14,.7); color: rgba(245,237,214,.6); }

Blog Card

Blog
Curadoria

Os 10 Melhores Jogos para Iniciantes

Adentrando o mundo dos jogos de tabuleiro moderno? Selecionamos os dez títulos ideais para começar.

15 mai · 6 min Ler → 
<article class="blog-card flex flex-col">
  <img src="IMAGE_URL" alt="Título" style="width:100%;height:176px;object-fit:cover;">
  <div class="p-5 flex flex-col flex-1">
    <span class="font-display text-[10px] tracking-widest uppercase text-gold">Categoria</span>
    <h3 class="font-display text-sm font-semibold text-coltext mt-2">Título do Post</h3>
    <p class="text-coltext-light text-sm mt-2">Resumo do artigo...</p>
    <div class="flex justify-between mt-4 pt-3 border-t border-gold/15">
      <span class="text-xs text-coltext-light">15 mai · 6 min</span>
      <a href="#" class="font-display text-[10px] uppercase tracking-wider text-gold">Ler →</a>
    </div>
  </div>
</article>

.blog-card {
  background: var(--col-marble); border-radius: 10px;
  border: 1px solid rgba(197,160,40,.2); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(139,26,26,.1); }

Formulários

Inputs, selects e quantity control com tema Roman. Focus ring dourado, fundo mármore.

<!-- Label + Input -->
<label class="form-label">Nome completo</label>
<input type="text" class="form-input" placeholder="Seu nome completo">

<!-- Select -->
<label class="form-label">Estado</label>
<select class="form-select">
  <option value="">Selecione</option>
  <option>São Paulo</option>
</select>

<!-- Quantity control -->
<div class="qty-control">
  <button class="qty-btn">−</button>
  <input type="number" class="qty-input" value="1" min="1">
  <button class="qty-btn">+</button>
</div>

/* CSS */
.form-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--col-text-light);
  display: block; margin-bottom: 6px;
}
.form-input {
  width: 100%; background: var(--col-marble); color: var(--col-text);
  font-family: var(--font-body); font-size: 14px;
  padding: 10px 14px; border-radius: 6px;
  border: 1px solid rgba(197,160,40,.25); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
  border-color: var(--col-gold);
  box-shadow: 0 0 0 3px rgba(197,160,40,.12);
}
.qty-control { display: inline-flex; align-items: center; border: 1px solid rgba(197,160,40,.3); border-radius: 6px; overflow: hidden; }
.qty-btn { width: 34px; height: 34px; background: rgba(197,160,40,.08); color: var(--col-text-light); border: none; cursor: pointer; }
.qty-btn:hover { background: rgba(197,160,40,.18); color: var(--col-gold); }
.qty-input { width: 42px; height: 34px; text-align: center; background: transparent; border: none; outline: none; }

Badges & Chips

Status badges para pedidos, card badges para produtos e chips para categorias/tags.

Status de Pedido

Confirmado Enviado Entregue Pendente Cancelado

Chips / Tags

Estratégia Cooperativo Promoção 2–4 jogadores 45 min +12 anos 
<!-- Status badges -->
<span class="status-badge status-confirmado">Confirmado</span>
<span class="status-badge status-enviado">Enviado</span>
<span class="status-badge status-entregue">Entregue</span>
<span class="status-badge status-pendente">Pendente</span>
<span class="status-badge status-cancelado">Cancelado</span>

<!-- Chips -->
<span class="chip">Estratégia</span>            <!-- gold -->
<span class="chip-primary">Promoção</span>        <!-- crimson -->
<span class="chip-neutral">2–4 jogadores</span>   <!-- neutral -->

/* CSS */
.status-badge {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.status-confirmado { background: rgba(197,160,40,.15); color: var(--col-gold-dark); border: 1px solid rgba(197,160,40,.3); }
.status-enviado    { background: rgba(59,130,246,.1);  color: #2563eb;              border: 1px solid rgba(59,130,246,.25); }
.status-entregue   { background: rgba(34,197,94,.1);   color: #15803d;              border: 1px solid rgba(34,197,94,.25); }
.status-pendente   { background: rgba(249,115,22,.1);  color: #c2410c;              border: 1px solid rgba(249,115,22,.25); }
.status-cancelado  { background: rgba(139,26,26,.1);   color: var(--col-primary);   border: 1px solid rgba(139,26,26,.25); }

.chip         { background: rgba(197,160,40,.1); color: var(--col-gold-dark); border: 1px solid rgba(197,160,40,.25); }
.chip-primary { background: rgba(139,26,26,.1);  color: var(--col-primary);   border: 1px solid rgba(139,26,26,.25); }
.chip-neutral { background: rgba(44,26,14,.07);  color: var(--col-text-light);border: 1px solid rgba(44,26,14,.15); }
/* shared */
.chip, .chip-primary, .chip-neutral {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; display: inline-block;
}

Feedback

Toast notifications e promo banners para comunicação contextual.

Toast

Adicionado ao carrinho!
Quantidade indisponível.
Erro ao processar pedido.

Promo Banner

Frete grátis em compras acima de R$ 200,00 · Use o código COLISEU10 para 10% de desconto

<!-- Toast (fixed bottom-right in production) -->
<div class="toast">
  <span class="toast-icon">✓</span> Adicionado ao carrinho!
</div>

<!-- Promo banner -->
<div class="promo-banner">
  <span class="promo-icon">🏛</span>
  <p>Frete grátis acima de R$ 200 · Código <strong style="color:var(--col-gold);">COLISEU10</strong></p>
</div>

/* Toast CSS */
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--col-obsidian); color: var(--col-off-white);
  font-size: 13px; padding: 12px 20px; border-radius: 8px;
  border: 1px solid rgba(197,160,40,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* Production: position: fixed; bottom: 24px; right: 24px; z-index: 9999; */
/* Animation: */
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.toast { animation: slideUp .25s ease; }

Layout & Decoração

Ornamentos, divisores, meander strip e seção hero.

Ornament Divider

◆
Promoções

Section Heading Pattern

Novidades em Destaque

◆

Promoções da Arena

◆

Hero Section

Bem-vindo ao Coliseu

O Reino dos
Jogos de
Tabuleiro

Mais de 200 títulos para alugar. Estratégia, cooperativo, família e muito mais.

200+

Títulos

5k+

Clientes

50+

p/ Aluguel

<!-- Ornament divider -->
<div class="ornament-divider">◆</div>
<div class="ornament-divider">Seção</div>  <!-- with text -->

<!-- Meander strip -->
<div class="meander-strip"></div>

<!-- Section heading -->
<p class="section-heading">Novidades em Destaque</p>  <!-- crimson, light bg -->
<p class="section-heading section-heading-gold">Promoções</p>  <!-- gold, dark bg -->

/* CSS */
.ornament-divider {
  display: flex; align-items: center; gap: 14px; color: var(--col-gold); font-size: 12px;
}
.ornament-divider::before, .ornament-divider::after {
  content: ''; flex: 1; height: 1px;
}
.ornament-divider::before { background: linear-gradient(to right, transparent, rgba(197,160,40,.5)); }
.ornament-divider::after  { background: linear-gradient(to left,  transparent, rgba(197,160,40,.5)); }

.meander-strip {
  height: 6px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--col-gold) 0, var(--col-gold) 6px, transparent 6px, transparent 12px);
  opacity: .35;
}

.section-heading {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--col-primary);
}
.section-heading-gold { color: var(--col-gold); }

<!-- Hero section structure -->
<section style="background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,26,26,.55) 0%, transparent 70%), var(--col-obsidian); min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px;">
  <p class="section-heading section-heading-gold">Bem-vindo ao Coliseu</p>
  <h1 class="font-display" style="font-size: clamp(32px,6vw,64px); font-weight: 900; color: var(--col-off-white); margin-top: 12px;">
    O Reino dos <span style="color:var(--col-gold);">Jogos</span>
  </h1>
  <button class="btn-hero" style="margin-top: 32px;">Explorar Catálogo</button>
</section>

Padrões Compostos

Combinações de componentes usadas nas páginas do projeto.

Grade de Categorias

Estratégia Cooperativo Família Engine Abstrato Drafting

Cart Item

Catan
Catan

Estratégia · Aluguel

R$ 29,90 /diária

R$ 59,80

2 diária(s)

Pandemic
Pandemic

Cooperativo · Aluguel

R$ 24,90 /diária

R$ 24,90

1 diária(s)

Order Summary Card

Resumo do Pedido

Catan

Aluguel · ×2

R$ 59,80

Pandemic

Aluguel · ×1

R$ 24,90

SubtotalR$ 84,70
FreteGrátis
TotalR$ 84,70

Avatar & Profile Card

LC

Leandro Campos

Membro desde 2024

12 Pedidos VIP
AB
CD

Rating Display

4.8
★★★★★

234 avaliações

5
80%
4
14%
3
4%
2
2%

Layout de Página Padrão

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página — Coliseu dos Jogos</title>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Tailwind config + CSS variables (see Tokens section) -->
</head>
<body style="font-family:var(--font-body);background:var(--col-parchment);color:var(--col-text);">

  <!-- Header -->
  <header style="position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(16,14,26,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(197,160,40,.15);">
    <div class="meander-strip"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
      <!-- Logo + nav + actions -->
    </div>
  </header>

  <!-- Main content -->
  <main style="padding-top:80px;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- Page content -->
    </div>
  </main>

  <!-- Footer -->
  <footer style="background:var(--col-obsidian);border-top:1px solid rgba(197,160,40,.2);padding:48px 0 24px;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
        <!-- Brand / links / newsletter -->
      </div>
      <div class="meander-strip mt-10"></div>
      <p style="text-align:center;font-family:var(--font-display);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,247,240,.3);margin-top:16px;">
        © 2025 Coliseu dos Jogos. Todos os direitos reservados.
      </p>
    </div>
  </footer>

</body>
</html>