01 — Fundamentos
Canvas, tipografia e espaçamento
Regras base para todo carrossel Instagram da ibe.IA: dimensões do canvas, escala tipográfica completa, espaçamento e tratamento de ênfase.
Canvas 1080 x 1440 px, aspecto 3:4
1080 px 1440 px 3 : 4 @2x
Export via Playwright com deviceScaleFactor: 2 gera imagem de 2160 x 2880 px (retina-ready para Instagram).
Ver código
// Playwright export — 1080x1440 @2x
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 1080, height: 1440 },
deviceScaleFactor: 2,
});
await page.goto('file:///caminho/slide.html');
await page.screenshot({ path: 'slide-01.png', fullPage: false });
await browser.close();Escala tipográfica
Type Scale 12 níveis no canvas 1080 px (preview em ~4x redução)
H1 capa Aprenda IA do zero
H2 interno O que você precisa saber
H2 menor Formação completa em IA
Título item Automações inteligentes
Título passo Instale a ferramenta
Body Texto corrido para descrições e parágrafos dentro do carrossel.
Descrição Detalhes secundários e complementos de informação.
Subtítulo Exemplos reais do lorem ipsum
Label NA PRÁTICA
Swipe bar ARRASTE PARA O LADO
Flow node LOREM
Codebox cmd npx create-app@latest
Ver código
/* ── Type Scale (canvas 1080px) ── */
/* H1 — capa */
.capa h1 {
font-family: var(--display);
font-size: 80px; font-weight: 700;
line-height: 1.02;
letter-spacing: -0.022em;
}
/* H2 — interno */
h2 {
font-family: var(--display);
font-size: 68px; font-weight: 700;
line-height: 1.04;
letter-spacing: -0.02em;
}
/* H2 — menor (crédito) */
.credito .formacao {
font-family: var(--display);
font-size: 60px; font-weight: 700;
line-height: 1.08;
letter-spacing: -0.018em;
}
/* Título item (lista-icones) */
.item-titulo {
font-family: var(--display);
font-size: 30px; font-weight: 600;
line-height: 1.15;
}
/* Título passo (passos-numerados) */
.passo-titulo {
font-family: var(--display);
font-size: 28px; font-weight: 600;
line-height: 1.2;
}
/* Body */
.card-destaque {
font-family: var(--sans);
font-size: 30px; font-weight: 400;
line-height: 1.55;
}
/* Descrição */
.item-desc, .passo-desc {
font-family: var(--sans);
font-size: 26px; font-weight: 400;
line-height: 1.45;
}
/* Subtítulo (itálico) */
.subtitulo {
font-family: var(--sans);
font-style: italic; font-weight: 400;
font-size: 26px;
line-height: 1.45;
}
/* Label / Eyebrow */
.eyebrow {
font-family: var(--mono);
font-size: 24px; font-weight: 500;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Swipe bar */
.swipe-bar {
font-family: var(--mono);
font-size: 24px; font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Flow node */
.fluxo .node {
font-family: var(--mono);
font-size: 24px; font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Codebox cmd */
.codebox .cmd {
font-family: var(--mono);
font-size: 24px; font-weight: 500;
}Regra de tamanho mínimo
Minimum Text 24 px é o piso absoluto no canvas 1080 px
24px ↓ ~8.5px no celular
Nenhum texto no carrossel pode ser menor que 24px no canvas de 1080px.
O Instagram renderiza imagens em ~360-390px de viewport (uma redução de ~2.8x), então 24px no canvas vira ~8.5px na tela do celular, que é o limite inferior de legibilidade.
Na prática, os menores textos do scaffold (eyebrow, swipe bar, flow node, codebox) usam exatamente 24px.
Ver código
/* Regra de tamanho mínimo — 24px no canvas */
/* Todos os elementos mono já usam 24px como piso: */
.eyebrow { font-size: 24px; }
.swipe-bar { font-size: 24px; }
.fluxo .node { font-size: 24px; }
.codebox .cmd { font-size: 24px; }
/* NUNCA usar font-size < 24px em nenhum
elemento do slide 1080x1440. */Sistema de espaçamento
Spacing Padding e gaps internos do slide
Padding externo: 80px 88px (base) / 80px 88px 120px (com swipe bar)
Gaps internos: 20-36px entre blocos semânticos
Grid overlay: 48px de célula
Ver código
/* ── Slide inner padding ── */
.slide-inner {
position: relative;
z-index: 2;
padding: 80px 88px; /* base */
display: flex;
flex-direction: column;
height: 100%;
}
/* Slides com swipe bar: padding-bottom maior */
.capa .slide-inner,
.definicao .slide-inner,
.lista-icones .slide-inner,
.passos-numerados .slide-inner {
padding: 80px 88px 120px;
}
/* ── Gaps internos ── */
.eyebrow { margin-bottom: 20px; }
.definicao h2 { margin-bottom: 40px; }
.lista-icones h2 { margin-bottom: 12px; }
.subtitulo { margin-bottom: 32px–36px; }
.card-destaque { margin-bottom: 28px; }
.pills { gap: 10px; margin-bottom: 36px; }
.steps-card { margin-bottom: 24px; }
.capa .hero-frame { margin-top: 48px; }
/* ── Grid overlay ── */
.grid {
background-size: 48px 48px;
}Tratamento de ênfase
em / strong Sora vs Plus Jakarta Sans — tratamento diferenciado
Sora (títulos)
font-style: normal (sem itálico)
Aprenda IA do zero ao avançado
<em> = font-weight: 800 + cor accent
font-style: normal (sem itálico)
Plus Jakarta Sans (corpo)
font-weight: 500
Texto corrido com destaque em itálico e continuação
<em> = font-style: italic + cor accent
font-weight: 500
Ver código
/* ── Emphasis: Sora (headings) ── */
/* <em> em títulos Sora: peso 800 + cor accent, SEM itálico */
.capa h1 em,
.definicao h2 em,
.lista-icones h2 em,
.passos-numerados h2 em,
.credito .formacao em {
font-style: normal;
font-weight: 800;
color: var(--accent);
}
/* ── Emphasis: Plus Jakarta Sans (body) ── */
/* <em> em corpo: itálico + cor accent + peso 500 */
.card-destaque em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
/* ── Strong: ambas as fontes ── */
/* <strong> sempre sobe o peso sem mudar cor */
.card-destaque strong { font-weight: 600; }
.capa .subtitulo strong {
font-weight: 600;
color: var(--creme);
}02 — Backgrounds
Cores de fundo
6 opções de fundo com orbs ambientais, grid e noise. Cada background combina um gradiente base, radial-gradient orbs coloridos, grid 48px e textura de ruído SVG.
.bg-preto Dark — accent #AF6DFF
dark-slide Título em destaque accent: #AF6DFF Corpo de texto com ênfase sobre fundo preto. .bg-preto .dark-slide
Ver código
.bg-preto {
background:
radial-gradient(ellipse 900px 600px at 15% 15%,
rgba(0,88,212,0.14), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 75%,
rgba(175,109,255,0.12), transparent 50%),
radial-gradient(ellipse 500px 400px at 55% -5%,
rgba(132,204,22,0.06), transparent 45%),
linear-gradient(170deg, #141318 0%, #0D0D12 100%);
}
/* Token: dark-slide, accent: #AF6DFF (default) */ .bg-creme Light — accent #7A3DE8
light-slide Título em destaque accent: #7A3DE8 Corpo de texto com ênfase sobre fundo creme. .bg-creme .light-slide
Ver código
.bg-creme {
background:
radial-gradient(ellipse 700px 500px at 5% 0%,
rgba(0,88,212,0.06), transparent 55%),
radial-gradient(ellipse 600px 400px at 95% 5%,
rgba(175,109,255,0.04), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 95%,
rgba(132,204,22,0.03), transparent 45%),
linear-gradient(170deg, #FFFFFF 0%, #FBF9F4 100%);
}
/* Token: light-slide, accent: #7A3DE8 */ .bg-azul Dark — accent #AF6DFF
dark-slide Título em destaque accent: #AF6DFF Corpo de texto com ênfase sobre fundo azul. .bg-azul .dark-slide
Ver código
.bg-azul {
background:
radial-gradient(ellipse 900px 600px at 20% 10%,
rgba(0,88,212,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 85%,
rgba(175,109,255,0.18), transparent 50%),
radial-gradient(ellipse 500px 400px at 60% 0%,
rgba(251,249,244,0.04), transparent 40%),
linear-gradient(170deg, #003A8C 0%, #002868 100%);
}
/* Token: dark-slide, accent: #AF6DFF (default) */ .bg-roxo Dark — accent #FACC15
dark-slide Título em destaque accent: #FACC15 Corpo de texto com ênfase sobre fundo roxo. .bg-roxo .dark-slide
Ver código
.bg-roxo {
background:
radial-gradient(ellipse 900px 600px at 20% 15%,
rgba(175,109,255,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 85% 80%,
rgba(122,61,232,0.25), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 0%,
rgba(250,204,21,0.06), transparent 40%),
linear-gradient(170deg, #5B22C7 0%, #3D1485 100%);
}
/* Accent override */
.bg-roxo { --accent: #FACC15; } .bg-vermelho Dark — accent #FACC15
dark-slide Título em destaque accent: #FACC15 Corpo de texto com ênfase sobre fundo vermelho. .bg-vermelho .dark-slide
Ver código
.bg-vermelho {
background:
radial-gradient(ellipse 900px 600px at 15% 10%,
rgba(248,79,46,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 85% 85%,
rgba(200,40,15,0.2), transparent 50%),
radial-gradient(ellipse 500px 350px at 55% 0%,
rgba(250,204,21,0.06), transparent 40%),
linear-gradient(170deg, #C42E10 0%, #8E1E08 100%);
}
/* Accent override */
.bg-vermelho { --accent: #FACC15; } .bg-verde Dark — accent #FACC15
dark-slide Título em destaque accent: #FACC15 Corpo de texto com ênfase sobre fundo verde. .bg-verde .dark-slide
Ver código
.bg-verde {
background:
radial-gradient(ellipse 900px 600px at 20% 15%,
rgba(132,204,22,0.3), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 80%,
rgba(99,208,89,0.18), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 0%,
rgba(250,204,21,0.05), transparent 40%),
linear-gradient(170deg, #2D5A00 0%, #1A3D00 100%);
}
/* Accent override */
.bg-verde { --accent: #FACC15; }Sistema de tokens dark / light
dark-slide / light-slide Todos os tokens de cor definidos por cada tema
| Token | .dark-slide | .light-slide |
|---|---|---|
| Texto | ||
| color | var(--creme) #FBF9F4 | var(--preto) #1C1C1C |
| --text-sub | rgba(251,249,244,0.65) | rgba(28,28,28,0.6) |
| --text-dim | rgba(251,249,244,0.4) | rgba(28,28,28,0.38) |
| --accent | #AF6DFF | #7A3DE8 |
| Glass | ||
| --glass-bg | rgba(255,255,255,0.06) | rgba(255,255,255,0.50) |
| --glass-border | rgba(255,255,255,0.10) | rgba(255,255,255,0.65) |
| --glass-shadow | inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.30), 0 8px 32px rgba(0,0,0,0.28) | inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 24px rgba(0,0,0,0.07) |
| --glass-specular | linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.18) 50%, transparent 95%) | linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.6) 50%, transparent 95%) |
| Grid + Noise | ||
| --grid-color | rgba(255,255,255,0.025) | rgba(0,0,0,0.035) |
| --noise-blend | screen | multiply |
| --noise-op | 0.06 | 0.08 |
| Pill | ||
| --pill-bg | rgba(255,255,255,0.06) | rgba(0,0,0,0.03) |
| --pill-border | rgba(255,255,255,0.08) | rgba(0,0,0,0.06) |
Ver código
.dark-slide {
color: var(--creme);
--text-sub: rgba(251,249,244,0.65);
--text-dim: rgba(251,249,244,0.4);
--accent: #AF6DFF;
--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.10);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
0 1px 2px rgba(0,0,0,0.30), 0 8px 32px rgba(0,0,0,0.28);
--glass-specular: linear-gradient(90deg,
transparent 5%, rgba(255,255,255,0.18) 50%, transparent 95%);
--grid-color: rgba(255,255,255,0.025);
--noise-url: url("data:image/svg+xml;utf8,..."); /* white noise */
--noise-blend: screen;
--noise-op: 0.06;
--pill-bg: rgba(255,255,255,0.06);
--pill-border: rgba(255,255,255,0.08);
}
.light-slide {
color: var(--preto);
--text-sub: rgba(28,28,28,0.6);
--text-dim: rgba(28,28,28,0.38);
--accent: #7A3DE8;
--glass-bg: rgba(255,255,255,0.50);
--glass-border: rgba(255,255,255,0.65);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
0 4px 24px rgba(0,0,0,0.07);
--glass-specular: linear-gradient(90deg,
transparent 5%, rgba(255,255,255,0.6) 50%, transparent 95%);
--grid-color: rgba(0,0,0,0.035);
--noise-url: url("data:image/svg+xml;utf8,..."); /* dark noise */
--noise-blend: multiply;
--noise-op: 0.08;
--pill-bg: rgba(0,0,0,0.03);
--pill-border: rgba(0,0,0,0.06);
}
/* Accent overrides per background */
.bg-roxo { --accent: #FACC15; }
.bg-vermelho { --accent: #FACC15; }
.bg-verde { --accent: #FACC15; }Grid overlay
.grid Linhas de 48px sobre dark e light
48px dark: rgba(255,255,255,0.025)
48px light: rgba(0,0,0,0.035)
Ver código
.grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* --grid-color is set by .dark-slide / .light-slide:
dark → rgba(255,255,255,0.025)
light → rgba(0,0,0,0.035) */Noise overlay
::after noise feTurbulence SVG — screen (dark) vs multiply (light). Opacidade aumentada 5x neste preview.
Dark noise (screen)
Light noise (multiply)
Ver código
/* Noise applied via .slide::after */
.slide::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--noise-url);
mix-blend-mode: var(--noise-blend);
opacity: var(--noise-op);
pointer-events: none;
z-index: 1;
}
/* Dark slide noise — white particles, screen blend */
--noise-url: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<filter id='n'>
<feTurbulence type='fractalNoise'
baseFrequency='0.85' numOctaves='2'
stitchTiles='stitch'/>
<feColorMatrix values='
0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/>
</filter>
<rect width='100%25' height='100%25'
filter='url(%23n)' opacity='0.7'/>
</svg>");
--noise-blend: screen;
--noise-op: 0.06;
/* Light slide noise — dark particles, multiply blend */
--noise-url: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<filter id='n'>
<feTurbulence type='fractalNoise'
baseFrequency='0.9' numOctaves='2'
stitchTiles='stitch'/>
<feColorMatrix values='
0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.05
0 0 0 0.55 0'/>
</filter>
<rect width='100%25' height='100%25'
filter='url(%23n)' opacity='0.6'/>
</svg>");
--noise-blend: multiply;
--noise-op: 0.08;Combinações de paleta
Paletas recomendadas 3 combinações sugeridas para sequência de slides
capa
creme
roxo
creme
cta
Preto + Creme + Roxo — a combinação mais versátil. Capa escura, slides de conteúdo alternando creme e roxo, CTA editorial no roxo.
capa
azul
creme
azul
cta
Azul + Creme + Azul — identidade institucional forte. Azul como cor editorial, creme para respiro visual, CTA vermelho para contraste.
capa
verde
creme
verde
cta
Verde + Creme + Verde — voltado para conteúdo técnico (Vibe Coding). Verde como cor editorial, CTA vermelho para urgência.
Capa sempre dark. O primeiro slide usa
.bg-preto ou outra variante escura para impacto no feed.Máximo 3 backgrounds distintos por carrossel. Mais que isso fragmenta a identidade visual.
CTA usa a cor editorial. O slide de call-to-action herda a cor forte do carrossel (roxo, vermelho, etc), nunca creme.
Ver código
/* Exemplo: carrossel com paleta preto + creme + roxo */
<!-- 01 capa -->
<section class="slide bg-preto dark-slide capa">...</section>
<!-- 02 conteúdo -->
<section class="slide bg-creme light-slide definicao">...</section>
<!-- 03 conteúdo -->
<section class="slide bg-roxo dark-slide lista-icones">...</section>
<!-- 04 conteúdo -->
<section class="slide bg-creme light-slide passos-numerados">...</section>
<!-- 05 CTA — usa a cor editorial (roxo) -->
<section class="slide bg-roxo dark-slide cta">...</section>
<!-- Regras:
1. Capa sempre dark (bg-preto ou variante escura)
2. Max 3 backgrounds distintos por carrossel
3. CTA herda a cor editorial, nunca creme
-->03 — Glassmorphism
Sistema glass
Backdrop blur, specular highlights e regras de uso. O glass depende de orbs coloridos por trás para que o blur tenha efeito visual.
Glass Card — Dark Glass sobre bg-preto com orbs ambientais
Glass / dark O vidro precisa de cor por trás Backdrop-filter blur mistura as cores dos orbs ambientais, criando o efeito de profundidade característico do glassmorphism. Sem os orbs, o blur não tem nada para borrar.
Ver código
.glass {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: var(--glass-shadow);
}
.glass::before {
content: '';
position: absolute;
top: 0; left: 4%; right: 4%;
height: 1px;
background: var(--glass-specular);
border-radius: 1px;
z-index: 1;
pointer-events: none;
}
/* Dark glass tokens (.dark-slide) */
--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.10);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
0 1px 2px rgba(0,0,0,0.30),
0 8px 32px rgba(0,0,0,0.28);
--glass-specular: linear-gradient(90deg,
transparent 5%, rgba(255,255,255,0.18) 50%, transparent 95%); Glass Card — Light Glass sobre bg-creme com orbs sutis
Glass / light Opacidade maior no light No tema claro o glass-bg sobe para 50% de opacidade e o specular fica mais brilhante. O shadow perde a intensidade dramática do dark e fica sutil.
Ver código
/* Light glass tokens (.light-slide) */
--glass-bg: rgba(255,255,255,0.50);
--glass-border: rgba(255,255,255,0.65);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
0 4px 24px rgba(0,0,0,0.07);
--glass-specular: linear-gradient(90deg,
transparent 5%, rgba(255,255,255,0.6) 50%, transparent 95%);Glass em todos os fundos
6 Backgrounds O token system adapta o glass automaticamente ao tema dark/light
bg-preto
bg-creme
bg-azul
bg-roxo
bg-vermelho
bg-verde
Ver código
/* Os tokens de glass são definidos por .dark-slide / .light-slide.
Basta aplicar a classe .glass dentro do slide correto
e os valores se adaptam automaticamente:
.dark-slide → glass sutil, sombras fortes
.light-slide → glass opaco, sombras suaves
Nenhum override manual necessário por background. */
<section class="slide bg-azul dark-slide">
<div class="glass">
<!-- tokens de dark-slide aplicados automaticamente -->
</div>
</section>Anatomia do specular highlight
::before specular 3 camadas empilhadas que formam o efeito glass
Camada 3: Specular highlight ::before, 1px, gradient horizontal
Camada 2: Glass surface backdrop-filter: blur(10px) + background semi-transparente
Camada 1: Background + orbs radial-gradients coloridos que dão cor ao blur
Ver código
/* Specular highlight — ::before do .glass */
.glass::before {
content: '';
position: absolute;
top: 0;
left: 4%;
right: 4%;
height: 1px;
background: var(--glass-specular);
border-radius: 1px;
z-index: 1;
pointer-events: none;
}
/* Dark specular: brilho sutil */
--glass-specular: linear-gradient(90deg,
transparent 5%,
rgba(255,255,255,0.18) 50%,
transparent 95%);
/* Light specular: brilho intenso */
--glass-specular: linear-gradient(90deg,
transparent 5%,
rgba(255,255,255,0.6) 50%,
transparent 95%);Escala de border-radius
Radius scale 3 níveis de arredondamento para glass elements
20px Cards grandes, painéis var(--r-lg)
14px Cards médios, pills var(--r-md)
10px Ícones, badges, small var(--r-sm)
Ver código
:root {
--r-lg: 20px; /* Cards grandes, painéis principais */
--r-md: 14px; /* Cards médios, pills, codeboxes */
--r-sm: 10px; /* Ícones, badges, elementos pequenos */
}
/* Uso no glass */
.glass { border-radius: var(--r-lg); } /* padrão */
.glass-md { border-radius: var(--r-md); }
.glass-sm { border-radius: var(--r-sm); }
.pill { border-radius: var(--r-md); }
.icone-box { border-radius: var(--r-sm); }Regras de uso
Glass rules Diretrizes obrigatórias para uso correto do glassmorphism
01
Orbs obrigatórios Glass cards precisam de orbs (radial-gradients coloridos) por trás para que o backdrop-filter blur tenha efeito visual. Fundo sólido flat não funciona.
02
Máximo 2 níveis de nesting Glass dentro de glass é permitido até 2 níveis. Mais que isso perde legibilidade e o blur acumula, virando ruído visual.
03
Padding interno: 32-48px Glass cards usam padding generoso (32px a 48px) para que o conteúdo respire. Padding menor que 32px faz o card parecer apertado.
04
Border-radius: 20 / 14 / 10 Três níveis fixos. 20px para cards grandes e painéis. 14px para cards médios e pills. 10px para ícones e badges pequenos. Nunca valores arbitrários.
Ver código
/* Regras de glass resumidas */
/* 1. Sempre use backgrounds com orbs */
.bg-preto, .bg-creme, .bg-azul,
.bg-roxo, .bg-vermelho, .bg-verde {
/* Todos incluem radial-gradient orbs */
}
/* 2. Max 2 níveis de nesting */
.glass > .glass { /* OK */ }
.glass > .glass > .glass { /* PROIBIDO */ }
/* 3. Padding: 32-48px */
.glass { padding: 32px 36px; } /* mínimo */
.glass { padding: 44px 48px; } /* ideal */
/* 4. Border-radius fixo */
--r-lg: 20px; /* card grande */
--r-md: 14px; /* card médio */
--r-sm: 10px; /* badge/ícone */04 — Componentes
Componentes atômicos
14 peças reutilizáveis para montar qualquer slide. Cada bloco mostra o componente renderizado e o código completo que um agente pode copiar.
Estruturais
Eyebrow Mono uppercase, linha horizontal + accent color
Lorem ipsum
Ver código
<!-- Eyebrow -->
<div class="eyebrow">Lorem ipsum</div>
<style>
.eyebrow {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--mono);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
.eyebrow::before {
content: '';
width: 28px;
height: 2px;
background: var(--accent);
border-radius: 1px;
}
</style> Swipe Bar Barra pill-shaped fixa no bottom de cada slide (exceto último)
Ver código
<!-- Swipe Bar -->
<div class="swipe-bar">
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
<span>Arraste para o lado</span>
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
</div>
<style>
.swipe-bar {
position: absolute;
bottom: 52px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
padding: 18px 44px;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-family: var(--mono);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
z-index: 3;
}
.swipe-bar svg {
width: 28px;
height: 28px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.7;
}
</style> Footer Logo (Crédito) Rodapé do último slide com logo SVG + nome institucional
Ver código
<!-- Footer Logo (último slide) -->
<div class="footer-credito">
<div class="logo-area">
<svg viewBox="0 0 810 810" fill="currentColor">
<path d="M 392.421875 28.476562 C 382.21875 32.195312 380.003906 35.597656 367.425781 67.316406 C 363.15625 77.914062 350.417969 109.554688 338.949219 137.636719 C 327.480469 165.71875 314.191406 198.625 309.285156 210.804688 C 304.382812 222.988281 299.082031 235.644531 297.421875 238.886719 C 288.324219 256.765625 273.136719 271.632812 254.074219 281.125 C 250.832031 282.789062 243.710938 285.871094 238.253906 288.085938 C 220.375 295.207031 196.882812 305.015625 138.824219 329.617188 C 107.5 342.90625 76.253906 356.035156 69.453125 358.804688 C 37.730469 371.617188 32.117188 376.761719 32.035156 392.34375 C 32.035156 398.117188 32.351562 399.699219 34.25 403.574219 C 38.523438 412.355469 41.765625 414.253906 77.125 428.570312 C 88.910156 433.316406 120.550781 446.527344 147.523438 457.839844 C 174.5 469.152344 200.679688 480.066406 205.664062 482.125 C 226.863281 490.824219 253.914062 502.613281 258.582031 505.140625 C 265.226562 508.78125 273.769531 515.820312 279.542969 522.386719 C 282.074219 525.234375 284.449219 527.605469 284.84375 527.605469 C 285.238281 527.605469 289.195312 524.679688 293.625 521.042969 C 338.949219 484.574219 342.589844 481.492188 342.191406 480.382812 C 341.164062 477.851562 335.628906 470.101562 331.59375 465.75 C 321.785156 455.230469 313.636719 450.167969 291.171875 440.832031 C 282.15625 437.113281 263.882812 429.441406 250.355469 423.824219 C 236.910156 418.128906 217.765625 410.21875 207.878906 406.1875 C 188.972656 398.355469 180.351562 394.320312 180.351562 393.292969 C 180.351562 391.867188 184.226562 389.101562 188.734375 387.28125 C 191.265625 386.253906 207.085938 379.449219 223.855469 372.25 C 240.625 364.972656 267.203125 353.503906 283.023438 346.703125 C 298.765625 339.976562 314.746094 332.621094 318.460938 330.40625 C 332.542969 321.941406 342.824219 311.105469 350.183594 296.789062 C 352.398438 292.597656 364.261719 263.882812 376.523438 233.113281 C 388.785156 202.339844 399.542969 176.316406 400.332031 175.367188 C 401.597656 173.785156 401.835938 173.785156 402.941406 174.8125 C 404.050781 175.921875 415.757812 204.636719 435.058594 253.519531 C 447.238281 284.527344 453.804688 295.996094 464.878906 306.203125 C 469.941406 310.789062 479.910156 317.671875 480.621094 317.039062 C 480.859375 316.800781 490.191406 303.671875 501.425781 287.851562 L 521.910156 259.058594 L 516.929688 253.757812 C 507.832031 244.109375 503.007812 235.722656 494.382812 214.367188 C 454.515625 115.25 426.121094 46.039062 422.957031 40.105469 C 417.023438 28.792969 404.683594 24.046875 392.421875 28.476562"/>
<path d="M 709.9375 67.316406 C 693.957031 71.035156 665.875 84.085938 642.9375 98.5625 C 631.308594 105.996094 625.929688 109.953125 614.617188 119.523438 L 605.523438 127.195312 L 596.425781 127.589844 C 585.113281 128.066406 580.128906 129.410156 569.136719 134.867188 C 543.980469 147.285156 531.007812 166.746094 539.078125 180.035156 C 542.242188 185.253906 546.117188 187.074219 557.429688 188.578125 C 567.238281 189.921875 572.21875 191.898438 573.644531 195.0625 C 574.515625 196.960938 574.277344 197.359375 569.769531 201.550781 C 563.835938 207.167969 562.09375 210.332031 562.09375 215.945312 C 562.015625 221.5625 563.835938 225.203125 570.085938 231.765625 C 578.546875 240.785156 586.933594 243.871094 594.210938 240.707031 C 596.1875 239.757812 599.90625 236.910156 602.59375 234.0625 C 607.421875 229.078125 607.5 229 609.636719 230.183594 C 612.957031 232.003906 615.332031 237.777344 616.515625 246.953125 C 617.78125 256.289062 618.097656 257.316406 620.789062 260.957031 C 625.296875 267.046875 635.265625 268.390625 643.964844 264.039062 C 649.976562 261.035156 659.46875 251.9375 664.375 244.425781 C 672.996094 231.136719 676.316406 220.695312 676.316406 206.851562 L 676.316406 197.992188 L 681.300781 192.136719 C 702.261719 167.457031 718.796875 139.535156 728.605469 112.167969 C 733.902344 97.453125 736.199219 81.949219 733.984375 76.175781 C 731.054688 68.34375 721.167969 64.707031 709.9375 67.316406 M 646.417969 150.769531 C 648.238281 152.035156 650.847656 154.644531 652.191406 156.542969 C 654.328125 159.628906 654.566406 160.496094 654.566406 165.957031 C 654.566406 172.203125 653.851562 174.101562 649.898438 178.613281 C 645.941406 183.121094 637.875 185.257812 631.46875 183.4375 C 626.640625 182.09375 620.628906 176.398438 619.445312 171.96875 C 616.753906 162.394531 620.710938 153.378906 629.253906 149.34375 C 634.234375 147.050781 641.988281 147.683594 646.417969 150.769531"/>
<path d="M 552.839844 252.886719 C 536.386719 265.308594 517.800781 288.40625 481.015625 342.113281 C 474.132812 352.160156 449.375 386.09375 439.410156 399.066406 C 386.648438 467.726562 324.476562 524.996094 275.117188 550.152344 C 249.40625 563.359375 230.820312 565.101562 221.960938 555.292969 C 219.03125 552.050781 216.738281 545.800781 216.738281 541.132812 C 216.738281 533.460938 220.296875 520.488281 224.808594 511.550781 L 227.101562 506.960938 L 220.929688 504.113281 C 217.53125 502.53125 211.914062 500.078125 208.433594 498.65625 L 202.105469 495.964844 L 199.652344 498.734375 C 195.300781 503.640625 184.226562 519.617188 178.691406 529.109375 C 171.808594 540.660156 166.90625 552.285156 163.660156 564.46875 C 161.367188 572.933594 161.128906 574.988281 161.050781 585.351562 C 161.050781 598.324219 162.078125 602.515625 167.378906 610.503906 C 177.898438 626.40625 196.648438 633.367188 221.328125 630.519531 C 270.84375 624.742188 334.441406 586.695312 393.136719 527.6875 C 430.867188 489.71875 461.082031 449.691406 487.027344 403.023438 C 500.632812 378.578125 512.5 353.425781 527.210938 317.910156 C 542.953125 279.859375 548.175781 268.550781 556.480469 254.074219 C 558.0625 251.382812 559.011719 249.167969 558.617188 249.167969 C 558.140625 249.167969 555.609375 250.832031 552.839844 252.886719"/>
<path d="M 559.011719 284.925781 C 557.113281 289.117188 554.265625 295.445312 546.90625 311.34375 C 535.914062 335.390625 531.484375 345.910156 532.117188 346.464844 C 532.433594 346.78125 538.996094 349.628906 546.589844 352.792969 C 570.875 362.839844 634.789062 390.207031 635.816406 391 C 638.269531 392.898438 636.765625 394.558594 629.886719 397.328125 C 611.691406 404.605469 500.710938 452.144531 492.644531 456.019531 C 471.207031 466.539062 457.917969 483.546875 446.605469 515.03125 C 442.574219 526.339844 407.214844 618.414062 405.394531 622.292969 C 404.683594 623.953125 403.65625 624.902344 402.707031 624.902344 C 401.042969 624.902344 397.5625 617.230469 384.433594 583.925781 C 379.292969 571.035156 376.839844 565.734375 376.207031 566.289062 C 375.730469 566.605469 363.789062 575.542969 349.628906 586.0625 C 335.46875 596.582031 322.972656 605.917969 321.707031 606.945312 L 319.570312 608.6875 L 332.066406 639.929688 C 378.894531 756.289062 380.003906 758.898438 383.640625 763.566406 C 388.152344 769.339844 398.039062 773.296875 405.394531 772.347656 C 419.476562 770.527344 424.695312 764.753906 434.109375 740.390625 C 435.929688 735.800781 450.007812 700.207031 465.433594 661.289062 C 480.777344 622.371094 496.203125 583.375 499.527344 574.671875 C 502.925781 565.972656 507.4375 555.371094 509.652344 551.101562 C 516.136719 538.601562 527.6875 525.789062 541.609375 515.582031 C 547.9375 510.917969 556.082031 506.960938 582.976562 495.570312 C 594.921875 490.429688 634.078125 473.582031 669.988281 457.996094 C 705.902344 442.414062 742.527344 426.59375 751.386719 422.875 C 773.535156 413.382812 778.28125 410.0625 781.207031 402.074219 C 782.628906 397.960938 782.550781 387.914062 781.046875 383.40625 C 779.464844 378.738281 774.640625 373.28125 769.421875 370.273438 C 767.125 369.007812 756.605469 364.339844 745.925781 359.910156 C 735.25 355.480469 706.058594 343.222656 681.0625 332.621094 C 644.914062 317.355469 567.710938 285.160156 561.382812 282.707031 C 560.511719 282.390625 559.800781 283.023438 559.011719 284.921875"/>
</svg>
<span class="logo-text">ibe.IA</span>
</div>
<div class="instituicao-text">Instituto Brasileiro de Educação em Inteligência Artificial</div>
</div>
<style>
.footer-credito {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
padding-top: 32px;
border-top: 1px solid var(--glass-border);
}
.logo-area {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.logo-area svg {
width: 52px;
height: 52px;
flex-shrink: 0;
}
.logo-area .logo-text {
font-family: var(--display);
font-weight: 700;
font-size: 36px;
line-height: 1;
letter-spacing: -0.015em;
}
.instituicao-text {
font-family: var(--sans);
font-weight: 500;
font-size: 28px;
line-height: 1.35;
color: var(--text-sub);
text-align: right;
max-width: 480px;
}
</style> Hero Image Frame Glass card com padding para imagem interna com border-radius
imagem hero
Ver código
<!-- Hero Image Frame -->
<figure class="hero-frame">
<img src="hero.png" alt="Hero">
</figure>
<style>
.hero-frame {
margin-top: 48px;
border-radius: var(--r-lg);
padding: 12px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.hero-frame img {
display: block;
width: 100%;
height: auto;
border-radius: calc(var(--r-lg) - 8px);
filter: saturate(0.92);
}
</style>Conteúdo
Título Display Sora bold em 3 tamanhos: h1 (80px), h2 (68px), h2-small (60px). em = weight 800 + accent
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consect.
Lorem ipsum dolor sit amet consect adipis.
Ver código
<!-- Título Display — h1 (80px) -->
<h1>Lorem ipsum <em>dolor sit</em> amet.</h1>
<!-- Título Display — h2 (68px) -->
<h2>Lorem ipsum <em>dolor sit</em> amet consect.</h2>
<!-- Título Display — h2 small (60px) -->
<h2 class="h2-sm">Lorem ipsum <em>dolor sit</em> amet consect adipis.</h2>
<style>
/* h1 — capa (80px) */
h1 {
font-family: var(--display);
font-size: 80px;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.022em;
max-width: 920px;
}
h1 em {
font-style: normal;
font-weight: 800;
color: var(--accent);
}
/* h2 — padrão (68px) */
h2 {
font-family: var(--display);
font-size: 68px;
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.02em;
}
h2 em {
font-style: normal;
font-weight: 800;
color: var(--accent);
}
/* h2 small — crédito/formação (60px) */
.h2-sm, .formacao {
font-family: var(--display);
font-size: 60px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.018em;
}
</style> Subtítulo Plus Jakarta Sans, corpo de apoio em texto secundário
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Exemplos reais do lorem ipsum dolor sit.
Ver código
<!-- Subtítulo (capa — 28px, com strong) -->
<p class="subtitulo">
Sed do eiusmod <strong>tempor incididunt</strong> ut labore
et dolore magna aliqua.
</p>
<!-- Subtítulo (slide interno — 26px, italic) -->
<p class="subtitulo">Exemplos reais do lorem ipsum dolor sit.</p>
<style>
/* Subtítulo — capa (28px) */
.capa .subtitulo {
font-family: var(--sans);
font-size: 28px;
font-weight: 400;
line-height: 1.55;
color: var(--text-sub);
max-width: 780px;
}
.capa .subtitulo strong {
font-weight: 600;
color: var(--creme);
}
/* Subtítulo — slide interno (26px, italic) */
.subtitulo {
font-family: var(--sans);
font-style: italic;
font-weight: 400;
font-size: 26px;
color: var(--text-sub);
}
</style> Card Glass (Destaque) Glass card com barra accent vertical na esquerda (::before)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud.
Ver código
<!-- Card Glass Destaque (com accent bar) -->
<div class="card-destaque glass">
Lorem ipsum dolor sit amet,
<strong>consectetur adipiscing elit</strong>.
Sed do eiusmod tempor
<em>incididunt ut labore</em>
et dolore magna aliqua quis nostrud.
</div>
<style>
.card-destaque {
padding: 44px 48px;
margin-bottom: 28px;
font-family: var(--sans);
font-size: 30px;
font-weight: 400;
line-height: 1.55;
position: relative;
}
/* Accent bar na esquerda */
.card-destaque::after {
content: '';
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
width: 3px;
border-radius: 2px;
background: var(--accent);
}
.dark-slide .card-destaque {
color: rgba(251,249,244,0.9);
}
.light-slide .card-destaque {
color: rgba(28,28,28,0.85);
}
.card-destaque strong {
font-weight: 600;
}
.card-destaque em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
/* Herda .glass para background, blur, border, shadow, specular */
</style> Pill com Emoji Grid layout: emoji box 48x48 + texto
🎯 Lorem ipsum dolor sit amet consectetur adipiscing.
🛠️ Sed do eiusmod tempor incididunt ut labore.
🤝 Ut enim ad minim veniam quis nostrud.
Ver código
<!-- Pills com Emoji -->
<div class="pills">
<div class="pill">
<span class="emoji">🎯</span>
<span>Lorem ipsum dolor <strong>sit amet</strong>.</span>
</div>
<div class="pill">
<span class="emoji">🛠️</span>
<span><strong>Sed do eiusmod</strong> tempor incididunt.</span>
</div>
<div class="pill">
<span class="emoji">🤝</span>
<span><strong>Ut enim</strong> ad minim veniam.</span>
</div>
</div>
<style>
.pills {
display: flex;
flex-direction: column;
gap: 10px;
}
.pill {
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
gap: 20px;
padding: 20px 24px;
background: var(--pill-bg);
border: 1px solid var(--pill-border);
border-radius: var(--r-md);
font-family: var(--sans);
font-size: 26px;
font-weight: 400;
line-height: 1.4;
}
.pill .emoji {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
border-radius: var(--r-sm);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.pill strong {
font-weight: 600;
}
/* Tokens (dark-slide) */
--pill-bg: rgba(255,255,255,0.06);
--pill-border: rgba(255,255,255,0.08);
/* Tokens (light-slide) */
--pill-bg: rgba(0,0,0,0.03);
--pill-border: rgba(0,0,0,0.06);
</style> Lista com Ícones Items com icone-box (56x56, cores rotativas) + título + descrição, separados por bordas
Lorem ipsum dolor
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Consectetur adipiscing
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Quis nostrud exercitation
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Duis aute irure dolor
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.
Ver código
<!-- Lista com Ícones (dentro de glass card) -->
<div class="itens-card glass">
<div class="item">
<div class="icone-box c1">📱</div>
<div>
<div class="item-titulo">Lorem ipsum dolor</div>
<div class="item-desc">Sed do eiusmod tempor incididunt.</div>
</div>
</div>
<div class="item">
<div class="icone-box c5">🤖</div>
<div>
<div class="item-titulo">Consectetur adipiscing</div>
<div class="item-desc">Ut enim ad minim veniam.</div>
</div>
</div>
<!-- ...mais items -->
</div>
<style>
.itens-card {
padding: 32px 36px;
display: flex;
flex-direction: column;
flex: 1;
}
.item {
display: grid;
grid-template-columns: 64px 1fr;
gap: 24px;
padding: 22px 0;
border-top: 1px solid var(--glass-border);
align-items: flex-start;
}
.item:last-child {
border-bottom: 1px solid var(--glass-border);
}
.icone-box {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
border-radius: var(--r-sm);
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset,
0 2px 4px rgba(0,0,0,0.2);
}
/* 5 cores rotativas */
.icone-box.c1 { background: var(--vermelho); } /* #F84F2E */
.icone-box.c2 { background: var(--azul); } /* #0058D4 */
.icone-box.c3 { background: var(--verde); } /* #84CC16 */
.icone-box.c4 { background: var(--amarelo); } /* #FACC15 */
.icone-box.c5 { background: var(--roxo); } /* #AF6DFF */
.item-titulo {
font-family: var(--display);
font-size: 30px;
font-weight: 600;
line-height: 1.15;
margin-bottom: 4px;
}
.item-desc {
font-family: var(--sans);
font-size: 26px;
font-weight: 400;
line-height: 1.45;
color: var(--text-sub);
max-width: 720px;
}
</style> Passos Numerados Número circular (48x48, cores rotativas) + título + descrição, separadores tracejados
1
Lorem ipsum dolor sit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua veniam.
2
Consectetur adipiscing elit
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
3
Duis aute irure dolor
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Ver código
<!-- Passos Numerados (dentro de glass card) -->
<div class="steps-card glass">
<div class="passo">
<div class="numero c1">1</div>
<div>
<div class="passo-titulo">Lorem ipsum dolor sit</div>
<div class="passo-desc">Sed do eiusmod tempor incididunt.</div>
</div>
</div>
<div class="passo">
<div class="numero c2">2</div>
<div>
<div class="passo-titulo">Consectetur adipiscing elit</div>
<div class="passo-desc">Ut enim ad minim veniam.</div>
</div>
</div>
<div class="passo">
<div class="numero c3">3</div>
<div>
<div class="passo-titulo">Duis aute irure dolor</div>
<div class="passo-desc">Excepteur sint occaecat cupidatat.</div>
</div>
</div>
</div>
<style>
.steps-card {
padding: 36px 40px;
margin-bottom: 24px;
}
.passo {
display: grid;
grid-template-columns: 52px 1fr;
gap: 22px;
padding: 16px 0;
align-items: flex-start;
}
.passo + .passo {
border-top: 1px solid var(--glass-border);
}
.numero {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 700;
font-size: 24px;
color: var(--creme);
margin-top: 2px;
box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset,
0 2px 4px rgba(0,0,0,0.3);
}
/* Cores rotativas */
.numero.c1 { background: var(--vermelho); }
.numero.c2 { background: var(--azul); }
.numero.c3 { background: var(--verde); color: var(--preto); }
.passo-titulo {
font-family: var(--display);
font-size: 28px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 4px;
}
.passo-desc {
font-family: var(--sans);
font-size: 26px;
font-weight: 400;
line-height: 1.45;
color: var(--text-sub);
}
</style> Fluxograma Horizontal Nodes com 4 estilos (n1-n4) conectados por linhas pontilhadas
Lorem
Ipsum
Dolor
Amet
Ver código
<!-- Fluxograma Horizontal -->
<div class="fluxo">
<div class="node n1">Lorem</div>
<div class="conector"></div>
<div class="node n2">Ipsum</div>
<div class="conector"></div>
<div class="node n3">Dolor</div>
<div class="conector"></div>
<div class="node n4">Amet</div>
</div>
<style>
.fluxo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.fluxo .node {
padding: 14px 22px;
border-radius: var(--r-sm);
font-family: var(--mono);
font-size: 24px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
/* n1: dark solid */
.fluxo .node.n1 {
background: var(--preto);
color: var(--creme);
}
/* n2: accent solid */
.fluxo .node.n2 {
background: var(--accent);
color: #fff;
}
/* n3: outline current */
.fluxo .node.n3 {
border: 1.5px solid currentColor;
}
/* n4: accent outline */
.fluxo .node.n4 {
background: var(--glass-bg);
border: 1.5px solid var(--accent);
color: var(--accent);
}
.fluxo .conector {
flex: 1;
height: 1px;
background-image: linear-gradient(
to right, currentColor 60%, transparent 0%);
background-size: 6px 1px;
background-repeat: repeat-x;
opacity: 0.3;
}
</style> Codebox Terminal estilo com bg escuro, borda verde, $ prompt e cursor
lorem-ipsum.com/dolor
link direto
Ver código
<!-- Codebox -->
<div class="codebox">
<div class="cmd">lorem-ipsum.com/dolor</div>
<div class="label">link direto</div>
</div>
<style>
.codebox {
padding: 24px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: rgba(10,16,6,0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(132,204,22,0.25);
border-radius: var(--r-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
font-family: var(--mono);
}
.codebox .cmd {
font-size: 24px;
font-weight: 500;
color: #B8F04D;
display: flex;
align-items: center;
gap: 12px;
}
.codebox .cmd::before {
content: '$';
color: rgba(255,255,255,0.35);
font-weight: 400;
}
.codebox .cmd::after {
content: '';
display: inline-block;
width: 10px;
height: 22px;
background: #B8F04D;
margin-left: 6px;
opacity: 0.7;
}
.codebox .label {
font-size: 24px;
font-weight: 500;
color: rgba(255,255,255,0.35);
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
}
</style>CTA
Card CTA Glass card centralizado com ação-tag, palavra-chave grande, divisor e instrução
Comenta
Lorem
et dolor sit amet consectetur adipiscing elit sed do eiusmod direto no seu DM.
Ver código
<!-- Card CTA -->
<div class="card-glass-cta glass">
<div class="acao-tag">Comenta</div>
<div class="palavra-chave">Lorem</div>
<div class="divisor-cta"></div>
<div class="instrucao">
et dolor sit amet
<strong>consectetur adipiscing elit</strong>
sed do eiusmod direto no seu DM.
</div>
</div>
<style>
.card-glass-cta {
margin-top: 24px;
padding: 48px 56px 44px;
width: 820px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.card-glass-cta .acao-tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-sub);
}
.card-glass-cta .acao-tag::before,
.card-glass-cta .acao-tag::after {
content: '';
width: 20px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.card-glass-cta .palavra-chave {
font-family: var(--display);
font-weight: 800;
font-size: 88px;
line-height: 1.0;
color: var(--creme);
letter-spacing: -0.02em;
padding: 4px 0;
}
/* Aspas tipográficas */
.card-glass-cta .palavra-chave::before {
content: '\201C';
opacity: 0.45;
margin-right: 2px;
}
.card-glass-cta .palavra-chave::after {
content: '\201D';
opacity: 0.45;
margin-left: 2px;
}
.card-glass-cta .divisor-cta {
width: 64px;
height: 1px;
background: currentColor;
opacity: 0.25;
margin: 4px 0 6px;
}
.card-glass-cta .instrucao {
font-family: var(--sans);
font-weight: 400;
font-size: 28px;
line-height: 1.5;
color: var(--text-sub);
max-width: 620px;
}
.card-glass-cta .instrucao strong {
font-weight: 600;
color: var(--creme);
}
</style> Marca / Avatar Círculo glass (72px) com inicial + handle mono abaixo
i
@lorem.ipsum
Ver código
<!-- Marca / Avatar -->
<div class="marca">
<div class="simbolo">i</div>
<div class="handle">@lorem.ipsum</div>
</div>
<style>
.marca {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.marca .simbolo {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 700;
font-size: 34px;
color: var(--creme);
box-shadow: var(--glass-shadow);
}
.marca .handle {
font-family: var(--mono);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-sub);
}
</style>05 — Composições
Receitas de slide
6 exemplos de como combinar componentes em slides completos.
Essas são receitas de referência, não templates rígidos. O agente pode seguir uma composição diretamente ou criar novas combinando os componentes atômicos da Seção 04. O conteúdo aqui é Lorem Ipsum para demonstração.
Capa bg-preto (dark) — eyebrow-bar + H1 + subtítulo + hero frame + swipe bar
Ver código
<!-- Composição: Capa (bg-preto, dark-slide) -->
<!-- Layout: flex column, subtítulo margin-bottom: auto empurra hero para baixo -->
<!-- Componentes: eyebrow-bar, H1, subtítulo, hero-frame, swipe-bar -->
<section class="slide bg-preto dark-slide capa">
<div class="grid"></div>
<div class="slide-inner">
<div class="eyebrow-bar">
<div class="eyebrow-tags">
<span class="lead">LOREM</span>
<span class="ornament">·</span>
<span>IPSUM</span>
</div>
</div>
<h1>Lorem ipsum dolor sit <em>amet consect</em> adipiscing elit sed.</h1>
<p class="subtitulo">Sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.</p>
<figure class="hero-frame">
<img src="hero.png" alt="Hero">
</figure>
</div>
<div class="swipe-bar">
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
<span>Arraste para o lado</span>
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
</div>
</section> Capa Texto (sem imagem) bg-preto (dark) — eyebrow-bar + H1 + subtítulo extenso, bloco inteiro centralizado verticalmente. Tipografia maior para uso sem hero image + swipe bar
Ver código
<!-- Composição: Capa Texto (bg-preto, dark-slide, sem imagem) -->
<!-- Layout: flex column, justify-content: center (bloco inteiro centralizado verticalmente) -->
<!-- Componentes: eyebrow-bar, H1 (maior), subtítulo (maior + mais texto), swipe-bar -->
<!-- Usar quando: slide de abertura sem hero image, foco 100% em tipografia -->
<section class="slide bg-preto dark-slide capa-texto">
<div class="grid"></div>
<div class="slide-inner center-y">
<div class="eyebrow-bar">
<div class="eyebrow-tags">
<span class="lead">LOREM</span>
<span class="ornament">·</span>
<span>IPSUM</span>
</div>
</div>
<h1 class="h1-texto">Lorem ipsum dolor sit <em>amet consect</em> adipiscing elit sed.</h1>
<p class="subtitulo-texto">
Sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
<div class="swipe-bar">...</div>
</section> Definição bg-creme (light) — eyebrow + H2 + card glass + pills + fluxograma + swipe bar
Ver código
<!-- Composição: Definição (bg-creme, light-slide) -->
<!-- Layout: flex column, fluxograma empurrado para baixo com margin-top: auto -->
<!-- Componentes: eyebrow, H2, card-destaque glass, 3 pills, fluxograma, swipe-bar -->
<section class="slide bg-creme light-slide definicao">
<div class="grid"></div>
<div class="slide-inner">
<div class="eyebrow">Lorem ipsum</div>
<h2>Dolor sit amet <em>consectetur</em> adipiscing.</h2>
<div class="card-destaque glass">
Lorem ipsum dolor sit amet,
<strong>consectetur adipiscing elit</strong>.
Sed do eiusmod tempor
<em>incididunt ut labore</em>
et dolore magna aliqua quis nostrud.
</div>
<div class="pills">
<div class="pill"><span class="emoji">🎯</span><span>Lorem ipsum dolor <strong>sit amet</strong>.</span></div>
<div class="pill"><span class="emoji">🛠️</span><span><strong>Sed do eiusmod</strong> tempor.</span></div>
<div class="pill"><span class="emoji">🤝</span><span><strong>Ut enim</strong> ad minim veniam.</span></div>
</div>
<div class="fluxo">
<div class="node n1">Lorem</div>
<div class="conector"></div>
<div class="node n2">Ipsum</div>
<div class="conector"></div>
<div class="node n3">Dolor</div>
<div class="conector"></div>
<div class="node n4">Amet</div>
</div>
</div>
<div class="swipe-bar">...</div>
</section> Lista com Ícones bg-azul (dark) — eyebrow + H2 + subtítulo + glass card com 4 items + swipe bar
Ver código
<!-- Composição: Lista com Ícones (bg-azul, dark-slide) -->
<!-- Layout: flex column, items dentro de glass card único -->
<!-- Componentes: eyebrow, H2, subtítulo (italic), glass card com 4 icon items, swipe-bar -->
<section class="slide bg-azul dark-slide lista-icones">
<div class="grid"></div>
<div class="slide-inner">
<div class="eyebrow">Na prática</div>
<h2>Ut enim ad <em>minim veniam</em> nostrud.</h2>
<p class="subtitulo">Exemplos reais do lorem ipsum dolor sit.</p>
<div class="itens-card glass">
<div class="item">
<div class="icone-box c1">📱</div>
<div>
<div class="item-titulo">Lorem ipsum dolor</div>
<div class="item-desc">Sed do eiusmod tempor incididunt.</div>
</div>
</div>
<!-- ...3 more items -->
</div>
</div>
<div class="swipe-bar">...</div>
</section> Passos Numerados bg-roxo (dark) — eyebrow + H2 + subtítulo + glass card com 3 steps + codebox + swipe bar
Ver código
<!-- Composição: Passos Numerados (bg-roxo, dark-slide) -->
<!-- Layout: flex column -->
<!-- Componentes: eyebrow, H2, subtítulo, glass card com 3 steps numerados, codebox, swipe-bar -->
<!-- Nota: bg-roxo usa --accent: #FACC15 (amarelo) -->
<section class="slide bg-roxo dark-slide passos-numerados">
<div class="grid"></div>
<div class="slide-inner">
<div class="eyebrow">Primeiros passos</div>
<h2>Quis nostrud <em>exercitation</em> ullamco.</h2>
<p class="subtitulo">Lorem ipsum, dolor sit amet.</p>
<div class="steps-card glass">
<div class="passo">
<div class="numero c1">1</div>
<div>
<div class="passo-titulo">Lorem ipsum dolor sit</div>
<div class="passo-desc">Sed do eiusmod tempor incididunt.</div>
</div>
</div>
<!-- ...2 more steps -->
</div>
<div class="codebox">
<div class="cmd">lorem-ipsum.com/dolor</div>
<div class="label">link direto</div>
</div>
</div>
<div class="swipe-bar">...</div>
</section> CTA bg-vermelho (dark) — marca/avatar + micro text + card CTA glass + fechamento. SEM swipe bar (slide final / de ação)
Ver código
<!-- Composição: CTA (bg-vermelho, dark-slide) -->
<!-- Layout: flex column centered, text-align center -->
<!-- Componentes: marca/avatar, micro text, card-glass-cta, fechamento -->
<!-- SEM swipe-bar (slide final / de ação — não há próximo slide para arrastar) -->
<!-- Nota: bg-vermelho usa --accent: #FACC15 (amarelo) -->
<section class="slide bg-vermelho dark-slide cta">
<div class="grid"></div>
<div class="slide-inner">
<div class="marca">
<div class="simbolo">i</div>
<div class="handle">@lorem.ipsum</div>
</div>
<div class="micro">Lorem ipsum dolor sit amet?</div>
<div class="card-glass-cta glass">
<div class="acao-tag">Comenta</div>
<div class="palavra-chave">Lorem</div>
<div class="divisor-cta"></div>
<div class="instrucao">
et dolor sit amet
<strong>consectetur adipiscing elit</strong>
sed do eiusmod direto no seu DM.
</div>
</div>
<div class="fechamento">
Lorem ipsum <strong>@dolor.sit.amet</strong> consectetur adipiscing elit.
</div>
</div>
</section> Crédito bg-verde (dark) — crédito-fonte (italic + accent bar) + formação title + footer logo. SEM swipe bar (último slide)
Ver código
<!-- Composição: Crédito (bg-verde, dark-slide) -->
<!-- Layout: flex column, justify-content: space-between (topo + footer) -->
<!-- Componentes: crédito-fonte (italic + accent bar), formação title, footer-logo -->
<!-- SEM swipe-bar (último slide) -->
<!-- Nota: bg-verde usa --accent: #FACC15 (amarelo) -->
<section class="slide bg-verde dark-slide credito">
<div class="grid"></div>
<div class="slide-inner">
<div class="topo">
<p class="credito-fonte">
Lorem ipsum dolor sit amet,
<strong>consectetur adipiscing elit</strong>.
Sed do eiusmod tempor incididunt ut labore.
</p>
<h2 class="formacao">
Lorem ipsum <em>dolor sit amet</em>
consectetur <strong>adipiscing elit</strong>
sed do eiusmod.
</h2>
</div>
<div class="footer-credito">
<div class="logo-area">
<svg viewBox="0 0 810 810" fill="currentColor">...</svg>
<span class="logo-text">ibe.IA</span>
</div>
<div class="instituicao-text">
Instituto Brasileiro de Educação em Inteligência Artificial
</div>
</div>
</div>
</section>06 — Regras para Agentes
Instruções de montagem
Contrato que o agente deve seguir ao montar o HTML de um carrossel. Esta é a seção mais importante para consumo por agentes: regras explícitas, estruturadas, sem ambiguidade.
6.1 Estrutura HTML Base
Boilerplate completo que você deve usar como ponto de partida para qualquer carrossel. Copie este HTML inteiro, substitua o conteúdo dos slides, e ajuste as classes de background e tema (dark-slide / light-slide) conforme necessário.
Boilerplate v3 HTML completo com todos os tokens, backgrounds, glass, componentes e 6 slides de exemplo
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Scaffold T2 v3 (Glassmorphism)</title> <link href="fonts.googleapis.com/..." /> <style>/* ...tokens + componentes... */</style> </head> <body> <!-- slides aqui --> </body></html> Ver código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Scaffold T2 v3 (Glassmorphism) — carrossel-instagram ibe.IA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ============================
TOKENS
============================ */
:root {
--creme: #FBF9F4;
--preto: #1C1C1C;
--preto-deep: #0D0D12;
--azul: #0058D4;
--roxo: #AF6DFF;
--roxo-deep: #7A3DE8;
--vermelho: #F84F2E;
--verde: #84CC16;
--verde-deep: #65A30D;
--amarelo: #FACC15;
--display: 'Sora', -apple-system, sans-serif;
--sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
--mono: 'JetBrains Mono', 'Courier New', monospace;
--r-lg: 20px;
--r-md: 14px;
--r-sm: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #18171c; overflow: hidden; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* ============================
SLIDE BASE
============================ */
.slide {
width: 1080px; height: 1440px;
position: relative; overflow: hidden;
display: flex; flex-direction: column;
font-feature-settings: "kern" 1, "liga" 1;
}
.slide + .slide { margin-top: 48px; }
/* ============================
NOISE OVERLAY (::after)
============================ */
.slide::after {
content: '';
position: absolute; inset: 0;
background-image: var(--noise-url);
mix-blend-mode: var(--noise-blend);
opacity: var(--noise-op);
pointer-events: none; z-index: 1;
}
/* ============================
GRID OVERLAY
============================ */
.grid {
position: absolute; inset: 0;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none; z-index: 0;
}
/* ============================
DARK / LIGHT SLIDE THEMES
============================ */
.dark-slide {
color: var(--creme);
--text-sub: rgba(251,249,244,0.65);
--text-dim: rgba(251,249,244,0.4);
--accent: #AF6DFF;
--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.10);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.30), 0 8px 32px rgba(0,0,0,0.28);
--glass-specular: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.18) 50%, transparent 95%);
--grid-color: rgba(255,255,255,0.025);
--noise-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
--noise-blend: screen;
--noise-op: 0.06;
--pill-bg: rgba(255,255,255,0.06);
--pill-border: rgba(255,255,255,0.08);
}
.light-slide {
color: var(--preto);
--text-sub: rgba(28,28,28,0.6);
--text-dim: rgba(28,28,28,0.38);
--accent: #7A3DE8;
--glass-bg: rgba(255,255,255,0.50);
--glass-border: rgba(255,255,255,0.65);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 24px rgba(0,0,0,0.07);
--glass-specular: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.6) 50%, transparent 95%);
--grid-color: rgba(0,0,0,0.035);
--noise-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
--noise-blend: multiply;
--noise-op: 0.08;
--pill-bg: rgba(0,0,0,0.03);
--pill-border: rgba(0,0,0,0.06);
}
/* Accent overrides */
.bg-roxo { --accent: #FACC15; }
.bg-vermelho { --accent: #FACC15; }
.bg-verde { --accent: #FACC15; }
/* ============================
BACKGROUNDS (6 variants)
============================ */
.bg-preto {
background:
radial-gradient(ellipse 900px 600px at 15% 15%, rgba(0,88,212,0.14), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 75%, rgba(175,109,255,0.12), transparent 50%),
radial-gradient(ellipse 500px 400px at 55% -5%, rgba(132,204,22,0.06), transparent 45%),
linear-gradient(170deg, #141318 0%, #0D0D12 100%);
}
.bg-creme {
background:
radial-gradient(ellipse 700px 500px at 5% 0%, rgba(0,88,212,0.06), transparent 55%),
radial-gradient(ellipse 600px 400px at 95% 5%, rgba(175,109,255,0.04), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 95%, rgba(132,204,22,0.03), transparent 45%),
linear-gradient(170deg, #FFFFFF 0%, #FBF9F4 100%);
}
.bg-azul {
background:
radial-gradient(ellipse 900px 600px at 20% 10%, rgba(0,88,212,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 85%, rgba(175,109,255,0.18), transparent 50%),
radial-gradient(ellipse 500px 400px at 60% 0%, rgba(251,249,244,0.04), transparent 40%),
linear-gradient(170deg, #003A8C 0%, #002868 100%);
}
.bg-roxo {
background:
radial-gradient(ellipse 900px 600px at 20% 15%, rgba(175,109,255,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 85% 80%, rgba(122,61,232,0.25), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 0%, rgba(250,204,21,0.06), transparent 40%),
linear-gradient(170deg, #5B22C7 0%, #3D1485 100%);
}
.bg-vermelho {
background:
radial-gradient(ellipse 900px 600px at 15% 10%, rgba(248,79,46,0.35), transparent 55%),
radial-gradient(ellipse 700px 500px at 85% 85%, rgba(200,40,15,0.2), transparent 50%),
radial-gradient(ellipse 500px 350px at 55% 0%, rgba(250,204,21,0.06), transparent 40%),
linear-gradient(170deg, #C42E10 0%, #8E1E08 100%);
}
.bg-verde {
background:
radial-gradient(ellipse 900px 600px at 20% 15%, rgba(132,204,22,0.3), transparent 55%),
radial-gradient(ellipse 700px 500px at 80% 80%, rgba(99,208,89,0.18), transparent 50%),
radial-gradient(ellipse 500px 350px at 50% 0%, rgba(250,204,21,0.05), transparent 40%),
linear-gradient(170deg, #2D5A00 0%, #1A3D00 100%);
}
/* ============================
GLASS UTILITY
============================ */
.glass {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: var(--glass-shadow);
}
.glass::before {
content: '';
position: absolute;
top: 0; left: 4%; right: 4%;
height: 1px;
background: var(--glass-specular);
border-radius: 1px;
z-index: 1;
pointer-events: none;
}
/* ============================
COMMON PIECES
============================ */
.slide-inner {
position: relative; z-index: 2;
padding: 80px 88px;
display: flex; flex-direction: column;
height: 100%;
}
.eyebrow {
display: flex; align-items: center; gap: 14px;
font-family: var(--mono); font-size: 24px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
.eyebrow::before {
content: '';
width: 28px; height: 2px;
background: var(--accent);
border-radius: 1px;
}
/* Swipe bar (all slides except last) */
.swipe-bar {
position: absolute;
bottom: 52px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 16px;
padding: 18px 44px;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-family: var(--mono); font-size: 24px; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
z-index: 3;
}
.swipe-bar svg {
width: 28px; height: 28px;
stroke: currentColor; fill: none;
stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
opacity: 0.7;
}
/* ========================================
01 — CAPA
======================================== */
.capa .slide-inner { padding: 80px 88px 120px; }
.capa .eyebrow-bar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 48px;
}
.capa .eyebrow-tags {
display: flex; gap: 12px; align-items: center;
font-family: var(--mono); font-size: 24px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-dim);
}
.capa .eyebrow-tags .lead {
color: var(--accent);
display: inline-flex; align-items: center; gap: 10px;
}
.capa .eyebrow-tags .lead::before {
content: '';
width: 10px; height: 10px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 18px rgba(175,109,255,0.7);
}
.capa .eyebrow-tags .ornament { color: var(--accent); font-weight: 600; }
.capa h1 {
font-family: var(--display);
font-size: 80px; font-weight: 700;
line-height: 1.02; letter-spacing: -0.022em;
color: var(--creme);
margin-bottom: 32px; max-width: 920px;
}
.capa h1 em { font-style: normal; font-weight: 800; color: var(--accent); }
.capa .subtitulo {
font-family: var(--sans);
font-size: 28px; font-weight: 400;
line-height: 1.55; color: var(--text-sub);
max-width: 780px; margin-bottom: auto;
}
.capa .subtitulo strong { font-weight: 600; color: var(--creme); }
.capa .hero-frame {
margin-top: 48px; border-radius: var(--r-lg);
padding: 12px;
background: var(--glass-bg);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.capa .hero-frame img {
display: block; width: 100%; height: auto;
border-radius: calc(var(--r-lg) - 8px);
filter: saturate(0.92);
}
/* ========================================
02 — DEFINICAO
======================================== */
.definicao .slide-inner { padding: 80px 88px 120px; }
.definicao h2 {
font-family: var(--display);
font-size: 68px; font-weight: 700;
line-height: 1.04; letter-spacing: -0.02em;
margin-bottom: 40px;
}
.definicao h2 em { font-style: normal; font-weight: 800; color: var(--accent); }
.definicao .card-destaque {
padding: 44px 48px; margin-bottom: 28px;
font-family: var(--sans);
font-size: 30px; font-weight: 400; line-height: 1.55;
}
.dark-slide .card-destaque { color: rgba(251,249,244,0.9); }
.light-slide .card-destaque { color: rgba(28,28,28,0.85); }
.card-destaque strong { font-weight: 600; }
.card-destaque em { font-style: italic; color: var(--accent); font-weight: 500; }
.definicao .pills { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.definicao .pill {
display: grid; grid-template-columns: 56px 1fr;
align-items: center; gap: 20px;
padding: 20px 24px;
background: var(--pill-bg); border: 1px solid var(--pill-border);
border-radius: var(--r-md);
font-family: var(--sans); font-size: 26px; font-weight: 400; line-height: 1.4;
}
.definicao .pill .emoji {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
font-size: 28px; border-radius: var(--r-sm);
background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.definicao .pill strong { font-weight: 600; }
.definicao .fluxo {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.definicao .fluxo .node {
padding: 14px 22px; border-radius: var(--r-sm);
font-family: var(--mono); font-size: 24px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.definicao .fluxo .node.n1 { background: var(--preto); color: var(--creme); }
.definicao .fluxo .node.n2 { background: var(--accent); color: #fff; }
.definicao .fluxo .node.n3 { border: 1.5px solid currentColor; }
.definicao .fluxo .node.n4 {
background: var(--glass-bg);
border: 1.5px solid var(--accent); color: var(--accent);
}
.definicao .fluxo .conector {
flex: 1; height: 1px;
background-image: linear-gradient(to right, currentColor 60%, transparent 0%);
background-size: 6px 1px; background-repeat: repeat-x; opacity: 0.3;
}
/* ========================================
03 — LISTA-ICONES
======================================== */
.lista-icones .slide-inner { padding: 80px 88px 120px; }
.lista-icones h2 {
font-family: var(--display);
font-size: 68px; font-weight: 700;
line-height: 1.04; letter-spacing: -0.018em;
margin-bottom: 12px; max-width: 880px;
}
.lista-icones h2 em { font-style: normal; font-weight: 800; color: var(--accent); }
.lista-icones .subtitulo {
font-family: var(--sans); font-style: italic; font-weight: 400;
font-size: 26px; color: var(--text-sub); margin-bottom: 36px;
}
.lista-icones .itens-card {
padding: 32px 36px;
display: flex; flex-direction: column; flex: 1;
}
.lista-icones .item {
display: grid; grid-template-columns: 64px 1fr;
gap: 24px; padding: 22px 0;
border-top: 1px solid var(--glass-border); align-items: flex-start;
}
.lista-icones .item:last-child { border-bottom: 1px solid var(--glass-border); }
.lista-icones .icone-box {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
font-size: 28px; border-radius: var(--r-sm);
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 4px rgba(0,0,0,0.2);
}
.lista-icones .icone-box.c1 { background: var(--vermelho); }
.lista-icones .icone-box.c2 { background: var(--azul); }
.lista-icones .icone-box.c3 { background: var(--verde); }
.lista-icones .icone-box.c4 { background: var(--amarelo); }
.lista-icones .icone-box.c5 { background: var(--roxo); }
.lista-icones .item-titulo {
font-family: var(--display);
font-size: 30px; font-weight: 600; line-height: 1.15; margin-bottom: 4px;
}
.lista-icones .item-desc {
font-family: var(--sans);
font-size: 26px; font-weight: 400; line-height: 1.45;
color: var(--text-sub); max-width: 720px;
}
/* ========================================
04 — PASSOS-NUMERADOS
======================================== */
.passos-numerados .slide-inner { padding: 80px 88px 120px; }
.passos-numerados h2 {
font-family: var(--display);
font-size: 68px; font-weight: 700;
line-height: 1.04; letter-spacing: -0.018em; margin-bottom: 12px;
}
.passos-numerados h2 em { font-style: normal; font-weight: 800; color: var(--accent); }
.passos-numerados .subtitulo {
font-family: var(--sans); font-style: italic; font-weight: 400;
font-size: 26px; color: var(--text-sub); margin-bottom: 32px;
}
.passos-numerados .steps-card { padding: 36px 40px; margin-bottom: 24px; }
.passos-numerados .passo {
display: grid; grid-template-columns: 52px 1fr;
gap: 22px; padding: 16px 0; align-items: flex-start;
}
.passos-numerados .passo + .passo { border-top: 1px solid var(--glass-border); }
.passos-numerados .numero {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--display); font-weight: 700; font-size: 24px;
color: var(--creme); margin-top: 2px;
box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 4px rgba(0,0,0,0.3);
}
.passos-numerados .numero.c1 { background: var(--vermelho); }
.passos-numerados .numero.c2 { background: var(--azul); }
.passos-numerados .numero.c3 { background: var(--verde); color: var(--preto); }
.passos-numerados .passo-titulo {
font-family: var(--display);
font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 4px;
}
.passos-numerados .passo-desc {
font-family: var(--sans);
font-size: 26px; font-weight: 400; line-height: 1.45; color: var(--text-sub);
}
.passos-numerados .codebox {
padding: 24px 32px;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
background: rgba(10,16,6,0.45);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(132,204,22,0.25);
border-radius: var(--r-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
font-family: var(--mono);
}
.passos-numerados .codebox .cmd {
font-size: 24px; font-weight: 500; color: #B8F04D;
display: flex; align-items: center; gap: 12px;
}
.passos-numerados .codebox .cmd::before {
content: '$'; color: rgba(255,255,255,0.35); font-weight: 400;
}
.passos-numerados .codebox .cmd::after {
content: '';
display: inline-block; width: 10px; height: 22px;
background: #B8F04D; margin-left: 6px; opacity: 0.7;
}
.passos-numerados .codebox .label {
font-size: 24px; font-weight: 500;
color: rgba(255,255,255,0.35);
letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
/* ========================================
05 — CTA
======================================== */
.cta .slide-inner {
padding: 80px 88px 120px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; gap: 20px;
}
.cta .marca {
display: flex; flex-direction: column; align-items: center; gap: 12px;
margin-bottom: 10px;
}
.cta .marca .simbolo {
width: 72px; height: 72px; border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
display: flex; align-items: center; justify-content: center;
font-family: var(--display); font-weight: 700;
font-size: 34px; color: var(--creme);
box-shadow: var(--glass-shadow);
}
.cta .marca .handle {
font-family: var(--mono); font-size: 24px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-sub);
}
.cta .micro {
font-family: var(--sans); font-style: italic; font-weight: 500;
font-size: 28px; color: var(--text-sub); margin-top: 4px;
}
.cta .card-glass-cta {
margin-top: 24px; padding: 48px 56px 44px;
width: 820px;
display: flex; flex-direction: column;
align-items: center; gap: 18px;
}
.cta .card-glass-cta .acao-tag {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono); font-size: 24px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--text-sub);
}
.cta .card-glass-cta .acao-tag::before,
.cta .card-glass-cta .acao-tag::after {
content: ''; width: 20px; height: 1px;
background: currentColor; opacity: 0.5;
}
.cta .card-glass-cta .palavra-chave {
font-family: var(--display); font-weight: 800;
font-size: 88px; line-height: 1.0;
color: var(--creme); letter-spacing: -0.02em; padding: 4px 0;
}
.cta .card-glass-cta .palavra-chave::before { content: '\201C'; opacity: 0.45; margin-right: 2px; }
.cta .card-glass-cta .palavra-chave::after { content: '\201D'; opacity: 0.45; margin-left: 2px; }
.cta .card-glass-cta .divisor-cta {
width: 64px; height: 1px;
background: currentColor; opacity: 0.25; margin: 4px 0 6px;
}
.cta .card-glass-cta .instrucao {
font-family: var(--sans); font-weight: 400;
font-size: 28px; line-height: 1.5;
color: var(--text-sub); max-width: 620px;
}
.cta .card-glass-cta .instrucao strong { font-weight: 600; color: var(--creme); }
.cta .fechamento {
font-family: var(--sans);
font-size: 26px; font-weight: 400; color: var(--text-dim); margin-top: 12px;
}
.cta .fechamento strong { color: var(--creme); font-weight: 600; }
/* ========================================
06 — CREDITO
======================================== */
.credito .slide-inner {
padding: 80px 88px 80px;
display: flex; flex-direction: column; justify-content: space-between;
}
.credito .topo { display: flex; flex-direction: column; gap: 56px; }
.credito .credito-fonte {
font-family: var(--sans); font-style: italic; font-weight: 400;
font-size: 28px; line-height: 1.5;
color: var(--text-sub); max-width: 680px;
position: relative; padding-left: 22px;
}
.credito .credito-fonte::before {
content: '';
position: absolute; left: 0; top: 8px; bottom: 8px;
width: 3px; border-radius: 2px;
background: var(--accent); opacity: 0.6;
}
.credito .credito-fonte strong { font-weight: 600; font-style: normal; color: currentColor; }
.credito .formacao {
font-family: var(--display); font-weight: 700;
font-size: 60px; line-height: 1.08; letter-spacing: -0.018em;
max-width: 860px;
}
.credito .formacao em { font-style: normal; font-weight: 800; color: var(--accent); }
.credito .formacao strong { font-weight: 800; }
.credito .footer-credito {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 40px; padding-top: 32px;
border-top: 1px solid var(--glass-border);
}
.credito .logo-area {
display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.credito .logo-area svg { width: 52px; height: 52px; flex-shrink: 0; }
.credito .logo-area .logo-text {
font-family: var(--display); font-weight: 700;
font-size: 36px; line-height: 1; letter-spacing: -0.015em;
}
.credito .instituicao-text {
font-family: var(--sans); font-weight: 500;
font-size: 28px; line-height: 1.35;
color: var(--text-sub); text-align: right; max-width: 480px;
}
</style>
</head>
<body>
<!-- 01 — CAPA -->
<section class="slide bg-preto dark-slide capa">
<div class="grid"></div>
<div class="slide-inner">
<div class="eyebrow-bar">
<div class="eyebrow-tags">
<span class="lead">TEMA</span>
<span class="ornament">·</span>
<span>CATEGORIA</span>
</div>
</div>
<h1>Título principal do <em>carrossel</em> aqui.</h1>
<p class="subtitulo">Subtítulo com <strong>destaque</strong> e contexto.</p>
<figure class="hero-frame">
<img src="hero.png" alt="Hero">
</figure>
</div>
<div class="swipe-bar">
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
<span>Arraste para o lado</span>
<svg viewBox="0 0 24 24"><polyline points="7 18 13 12 7 6"/><polyline points="13 18 19 12 13 6"/></svg>
</div>
</section>
<!-- 02+ — Slides internos com a composição adequada -->
<!-- ... -->
<!-- Último slide — CREDITO (sem swipe-bar) -->
<section class="slide bg-verde dark-slide credito">
<div class="grid"></div>
<div class="slide-inner">
<div class="topo">
<p class="credito-fonte">Fonte do conteúdo.</p>
<h2 class="formacao">Título da <em>formação</em>.</h2>
</div>
<div class="footer-credito">
<div class="logo-area">
<svg viewBox="0 0 810 810" fill="currentColor"><!-- SVG ibe.IA --></svg>
<span class="logo-text">ibe.IA</span>
</div>
<div class="instituicao-text">Instituto Brasileiro de Educação em Inteligência Artificial</div>
</div>
</div>
</section>
</body>
</html>6.2 Como Escolher Backgrounds
Árvore de decisão para escolher a cor de fundo de cada slide.
Capa Sempre fundo escuro:
bg-preto, bg-azul, bg-roxo, bg-vermelho ou bg-verde. Nunca bg-creme. Slides internos
bg-creme (default seguro) ou o mesmo fundo da capa. Alterne se quiser contraste visual. CTA Cor editorial do carrossel (a cor principal escolhida para a capa).
Crédito Mesma lógica dos slides internos:
bg-creme ou fundo da capa. Limite Máximo 3 cores de fundo distintas por carrossel.
Exemplo Se a cor editorial e
bg-azul: use bg-azul na capa, bg-creme nos internos, bg-azul no CTA. 6.3 Como Adaptar ao Conteúdo
Tabela de cenários comuns e como ajustar o layout para cada um.
| Cenário | Adaptação |
|---|---|
| Mais de 4 itens numa lista | Reduzir item-desc para 24px (mínimo) ou dividir em 2 slides |
| Título muito longo | Reduzir de 68px para 60px no H2 |
| Sem hero image | Remover hero-frame, subtítulo ganha mais espaço |
| Sem codebox | Remover, card de passos ocupa mais espaço |
| Menos de 3 passos | Aumentar padding do passo para preencher |
| Texto do body muito longo | Reduzir body de 34px para 30px |
| Mais de 6 slides | Manter a mesma lógica, swipe bar em todos exceto último |
6.4 Contraste e Acessibilidade
Mapa de cores corretas para cada fundo. Usar os tokens exatos abaixo garante contraste suficiente.
| Background | Texto primario | Texto secundario | Accent |
|---|---|---|---|
bg-preto | #FBF9F4 | rgba(251,249,244,0.65) | #AF6DFF |
bg-creme | #1C1C1C | rgba(28,28,28,0.6) | #7A3DE8 |
bg-azul | #FBF9F4 | rgba(251,249,244,0.65) | #AF6DFF |
bg-roxo | #FBF9F4 | rgba(251,249,244,0.65) | #FACC15 |
bg-vermelho | #FBF9F4 | rgba(251,249,244,0.65) | #FACC15 |
bg-verde | #FBF9F4 | rgba(251,249,244,0.65) | #FACC15 |
Nota: o accent em bg-creme usa #7A3DE8 (roxo-deep) em vez de #AF6DFF para garantir contraste suficiente sobre fundo claro.
6.5 O Que Nunca Fazer
Violações que invalidam o carrossel. Se qualquer item abaixo for verdadeiro, o output não passa no controle de qualidade.
- Texto abaixo de 24px
- Glass card sem orbs no fundo (o blur não terá efeito visual)
- Mais de 3 cores de fundo diferentes num carrossel
- Misturar tokens de
light-slideemdark-slideou vice-versa - Omitir swipe bar (exceto no último slide)
- Usar travessões em-dash (
—) em qualquer texto - Inventar dados, exemplos ou cases não presentes no texto-fonte
6.6 Checklist de Qualidade
Antes de entregar o HTML final, verifique cada item abaixo.
- Todos os textos >= 24px
- Capa tem fundo escuro
- Swipe bar em todos os slides exceto último
- Último slide tem footer logo
- Accent color correta para cada fundo
- Glass cards têm orbs atrás
- Máximo 3 cores de fundo no carrossel
- Sem travessões em-dash
- HTML exporta sem scrollbar (
overflow: hidden) - Fontes carregadas antes do screenshot (
document.fonts.ready)