Referência

Design System

Tokens, paleta, tipografia e snippets de código do design system Alun. Baseado no Manifesto SF v2 e no brand guide oficial.

Paleta de cores

Preto

#0D0C0C

brand-black

Backgrounds, text on light

Branco

#FFFFFF

brand-white

Text on dark

Cinza

#333333

brand-gray

Text on light backgrounds

Placa Mãe

#D1CDCD

brand-placa-mae

Light neutral background

ON Odisseia

#FF9414

brand-orange

Primary accent, CTAs

OFF Odisseia

#9A4800

brand-orange-off

Dark orange, hover states

ON Magenta

#ED1460

brand-magenta

Secondary accent

OFF Magenta

#610725

brand-magenta-off

Deep burgundy backgrounds

Off-white

#F3F2F2

brand-off-white

Light page backgrounds

Accessible Gray

#8A8585

brand-accessible-gray

Text that passes WCAG on dark

Tailwind usage

<!-- Background -->
<div class="bg-brand-orange">...</div>

<!-- Text -->
<p class="text-brand-placa-mae">...</p>

<!-- Border -->
<div class="border-brand-magenta">...</div>

Tipografia

FK Grotesk

font-grotesk

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Weights: 300 · 400 · 500 Body, UI, navigation

FK Grotesk Mono

font-grotesk-mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Weights: 400 Code, labels, metadata

Flecha M

font-flecha-m

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Weights: 300 · 400 Headings, editorial

Flecha L

font-flecha-l

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Weights: 300 · 400 Display, hero, manifesto

Escala tipográfica

Display — Flecha L, 8xl+

Educação

Heading — Flecha M, 3xl-4xl

Seção do manifesto

Body — FK Grotesk, base-lg

O Grupo Alun é o maior ecossistema de educação em tecnologia e negócios do Brasil.

Label — FK Grotesk Mono, xs-sm

Design System · Referência

Tailwind usage

<!-- Display heading -->
<h1 class="font-flecha-l text-5xl md:text-8xl leading-none">
  Manifesto
</h1>

<!-- Section heading -->
<h2 class="font-flecha-m text-3xl md:text-4xl leading-tight">
  Seção
</h2>

<!-- Body text -->
<p class="font-grotesk text-base md:text-lg leading-relaxed">
  Texto corrido...
</p>

<!-- Metadata / label -->
<span class="font-grotesk-mono text-xs tracking-wider uppercase">
  Categoria
</span>

Tokens & Config

tailwind.config.mjs

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          black: '#0d0c0c',
          white: '#FFFFFF',
          gray: '#333333',
          'placa-mae': '#D1CDCD',
          orange: '#FF9414',
          'orange-off': '#9A4800',
          magenta: '#ED1460',
          'magenta-off': '#610725',
          'off-white': '#f3f2f2',
          'accessible-gray': '#8a8585',
        },
      },
      fontFamily: {
        grotesk: ['"FK Grotesk"', 'sans-serif'],
        'grotesk-mono': ['"FK Grotesk Mono"', 'monospace'],
        'flecha-m': ['"Flecha M"', 'serif'],
        'flecha-l': ['"Flecha L"', 'serif'],
      },
      screens: {
        xs: '550px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
      maxWidth: {
        site: '1200px',
      },
    },
  },
};

@font-face (global.css)

/* Cascade: woff2 → woff → ttf/otf */
@font-face {
  font-family: "FK Grotesk";
  src: url("/fonts/fk-grotesk/FKGrotesk-Regular.woff") format("woff"),
       url("/fonts/fk-grotesk/FKGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Flecha L";
  src: url("/fonts/flecha-l/FlechaL-Regular.woff2") format("woff2"),
       url("/fonts/flecha-l/FlechaL-Regular.woff") format("woff"),
       url("/fonts/flecha-l/FlechaL-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

Identidade visual

Pixelator (grafismo)

Identidade visual assinatura: fotos renderizadas como pixel art usando caracteres [ ] ( ) em magenta, laranja e preto. Cria uma estética digital-meets-human.

Motivo de colchetes

Colchetes grandes [ ] do logotipo usados como moldura visual para enquadrar fotos e blocos de conteúdo.

Logotipos

alun.svg

alura_fiap_pm3_startse.svg

alun_mais_empresas.svg

Asset paths

public/assets/img/brand/
├── logos/
│   ├── svg/{white,black}/   ← alun.svg, alura_fiap_pm3_startse.svg, alun_mais_empresas.svg
│   └── png/{white,black}/   ← same in PNG
├── photos/                  ← 1-8 pixelator, 9-17 real photos
└── grafismos/               ← pixelatorAlun.jpeg

Acessibilidade

Focus visible

Todos os elementos interativos recebem outline laranja no focus.

*:focus-visible {
  outline: 2px solid #FF9411;
  outline-offset: 2px;
}

Skip link

Link invisível que aparece no Tab, pulando direto para o conteúdo principal.

<a href="#main-content"
   class="skip-link">
  Pular para o conteúdo
</a>

Contraste

Texto secundário usa brand-accessible-gray (#8A8585) em vez de brand-text-gray (#CECACA) para atingir contraste WCAG AA em fundos escuros.

ARIA

Filtros usam aria-pressed, botões de calendário usam aria-label, grupos de filtro usam role="group".

Padrões de composição

Grid mosaic

Composição modular com blocos de cor + fotos + pixelator em grids assimétricos.

<section class="grid grid-cols-3 grid-rows-2 min-h-[90vh]">
  <div class="bg-brand-magenta-off"></div>
  <div class="bg-brand-black"></div>
  <div class="row-span-2">
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div class="bg-brand-placa-mae p-8">
    <h2 class="font-flecha-l text-7xl">Aprender</h2>
  </div>
  <div class="bg-brand-orange"></div>
</section>

Text overlay on photo

Foto full-bleed com texto grande sobreposto e gradient para legibilidade.

<section class="relative min-h-[90vh] flex items-center">
  <img src="..." class="absolute inset-0 w-full h-full object-cover" />
  <div class="absolute inset-0 bg-black/20"></div>
  <h2 class="relative font-flecha-l text-white text-[14rem]">
    Educação
  </h2>
</section>

Split screen

Duas colunas: imagem/pixelator de um lado, texto com fundo sólido do outro.

<section class="grid grid-cols-1 md:grid-cols-2 min-h-[70vh]">
  <div class="overflow-hidden">
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div class="bg-brand-placa-mae flex items-end p-16">
    <h2 class="font-flecha-l text-brand-black text-8xl">
      Tecnologia
    </h2>
  </div>
</section>