Identidade da Marca

A ALFA representa confiança, inovação e excelência na indústria de jogos. Nossa identidade visual reflete profissionalismo mantendo a acessibilidade para nossa base diversificada de usuários.

Paleta de Cores

Nossa paleta de cores foi cuidadosamente selecionada para transmitir energia, confiança e sofisticação. As cores primárias estabelecem a identidade visual forte da ALFA.

Cores Primárias da Marca

Cores Secundárias

Cores de Destaque

Cores Semânticas

Tipografia

Nossa tipografia combina modernidade e legibilidade, com fontes cuidadosamente selecionadas para diferentes contextos de uso.

Escala Tipográfica

Componentes

Biblioteca completa de componentes reutilizáveis para construir interfaces consistentes e profissionais.

Botões

Cards

Badges

Alertas

Formulários

Tabelas

Sistema de Espaçamento

Baseado em unidades de 8px para criar ritmo visual consistente

Sistema de Grid

Grid flexível de 12 colunas com gutter responsivo

Ícones

Sistema de ícones consistente para uso em toda a plataforma. Todos os ícones seguem o mesmo grid e peso visual.

Animações

Animações suaves e profissionais para melhorar a experiência do usuário sem distrair.

Duração das Transições

Easing Functions

/* Padrão - ease-out suave */
cubic-bezier(0.4, 0, 0.2, 1)

/* Entrada - ease-in */
cubic-bezier(0.4, 0, 1, 1)

/* Saída - ease-out */
cubic-bezier(0, 0, 0.2, 1)

Mockups e Dashboards

Exemplos práticos de implementação do design system em diferentes contextos.

Customer Service

Complete UI components for customer support and service desk operations.

Recursos e Implementação

Tudo que você precisa para implementar o ALFA Design System em seus projetos.

Implementação Rápida

<!-- 1. Incluir fontes do Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">

<!-- 2. Incluir CSS Tokens -->
<link rel="stylesheet" href="/designsystem/tokens.css">

<!-- 3. Incluir CSS Core -->
<link rel="stylesheet" href="/designsystem/alfa-core.css">

<!-- 4. Exemplo de uso -->
<button class="btn btn-primary">
    ⚡ Apostar Agora
</button>

<div class="card card-premium">
    <h3>Oferta Exclusiva</h3>
    <p>Bônus de 200% no primeiro depósito</p>
    <button class="btn btn-gold">Resgatar Bônus</button>
</div>

Variáveis CSS Principais

/* Cores Primárias */
var(--alfa-yellow)     /* #EBFF00 */
var(--alfa-dark-blue)  /* #00003C */
var(--alfa-gold)       /* #FFD700 */
var(--alfa-neon)       /* #00FF41 */
var(--alfa-dark)       /* #2B1B5A */

/* Tipografia */
var(--font-primary)    /* Inter */
var(--font-secondary)  /* Roboto */
var(--font-display)    /* Montserrat */
var(--font-mono)       /* JetBrains Mono */

/* Espaçamento */
var(--space-xs)  /* 4px */
var(--space-sm)  /* 8px */
var(--space-md)  /* 16px */
var(--space-lg)  /* 24px */
var(--space-xl)  /* 32px */

/* Sombras */
var(--shadow-md)
var(--shadow-glow)
var(--shadow-glow-gold)
var(--shadow-glow-neon)

/* Transições */
var(--transition-fast)  /* 150ms */
var(--transition-base)  /* 300ms */
var(--transition-slow)  /* 500ms */

Classes Utilitárias

/* Botões */
.btn-primary       /* Amarelo principal */
.btn-secondary     /* Outline amarelo */
.btn-neon         /* Verde neon */
.btn-gold         /* Dourado premium */

/* Cards */
.card             /* Card padrão */
.card-premium     /* Card com badge premium */

/* Badges */
.badge-success    /* Verde */
.badge-warning    /* Dourado */
.badge-error      /* Vermelho */
.badge-info       /* Azul */

/* Grid */
.grid-item-2      /* 2 colunas */
.grid-item-3      /* 3 colunas */
.grid-item-4      /* 4 colunas */
.grid-item-6      /* 6 colunas */
.grid-item-12     /* Largura total */

/* Animações */
.pulse            /* Efeito pulse */
.glow             /* Efeito glow */
.slide-in         /* Entrada lateral */
.fade-in          /* Fade suave */