01 — Fundamentos

Editorial Fraunces

Família editorial: o texto é a peça. Um único card creme sobre fundo preto, serifa variável Fraunces, zero imagem, zero glass. Leitura lenta, intencional; cada slide concentra uma ideia única.

Referência

Tokens, classes e valores que esta página usa. Tudo que as instruções de componentes abaixo referenciam está documentado aqui — não é preciso abrir nenhum arquivo de tokens para entender o que está sendo dito.

Tokens de design

TokenHex / ValorPapel
var(--c-cream)#FBF9F4Fundo do card editorial
var(--c-black)#1C1C1CTexto principal + fundo da página
var(--c-yellowEm)#FACC15Background do highlight amarelo
var(--c-purple)#AF6DFFAcento .ia na assinatura ibe.IA
var(--f-editorial)'Fraunces', Georgia, serifÚnica fonte — serifa variável (eixos opsz 9-144, wght 300-800)
var(--bg-body)#08080eFundo escuro da página do guia (body), quase preto puro. Não é o fundo do slide em si.
var(--r-md)14pxRadius em wrappers da preview dentro do guia

Classes canônicas

Definidas em public/styles/sections/carousel/editorial/componentes.css. Cada classe é documentada em detalhe na Seção 02 Componentes.

ClassePapel
.ed-cardCard creme canônico — 920×1300px, radius 44px, padding 96px, aplica sombra editorial multicamada
.ed-capaTexto de capa — 88px Fraunces 400, opsz 144, line-height 1.05, letter-spacing -0.025em
.ed-bodyTexto body — 44px default (Fraunces 400, opsz 80). Modifiers: .ed-body--sm (40px), .ed-body--md (42px)
.ed-highlightMarca-texto amarelo inline — bg --c-yellowEm, padding 2px 18px 8px, radius 12px, weight 700
.ed-biglineLinha de ênfase 56px weight 700, usada como <strong class="ed-bigline"> entre parágrafos
.ed-payoffTexto de fechamento conceitual — 52px weight 400, opsz 120, line-height 1.22
.ed-signatureBloco rodapé com .ed-signature__mark (símbolo + wordmark ibe.IA) + .ed-signature__institute (texto à direita)

Paleta

Apenas 3 cores. Nada mais.

--c-cream
--c-black
--c-yellowEm

Tipografia

Fraunces (serifa variável, eixo opsz). Weight 400 para corpo, 700 para strong e ênfase. opsz varia: 80 no body, 120 no payoff, 144 na capa. Letter-spacing negativo sutil (-0.012em a -0.025em). Token: var(--f-editorial).

Card editorial canônico

Dimensões base 920 × 1300 px (proporção de carrossel Instagram vertical). border-radius: 44px. padding: 96px.

Sombra editorial canônica

Equivalente editorial da sombra glass — sem tinta azul, sem inset complexo. Representa "papel iluminado sobre mesa escura": 

box-shadow:
  0 60px 120px rgba(0,0,0, 0.5),         /* profundidade */
  0 0 0 1px rgba(28,28,28, 0.05),        /* borda técnica */
  inset 0 1px 0 rgba(255,255,255, 0.6);  /* highlight interno topo */

02 — Componentes

Peças atômicas

7 componentes reusáveis prefixados com .ed-*. Combine-os em composições (Seção 03) ou crie novas.

.ed-card Card creme base — creme, radius 44px, padding 96px, sombra editorial canônica, 920×1300

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna.

Ver código 
<!-- Card editorial base -->
<div class="card">
  <div class="texto">
    <p class="body">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<style>
.card {
  background: #FBF9F4;
  border-radius: 44px;
  padding: 96px;
  width: 920px;
  height: 1300px;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.5),
    0 0 0 1px rgba(28,28,28,0.05),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
</style>
.ed-capa Texto de capa — 88px, Fraunces 400, opsz 144, line-height 1.05

Lorem ipsum dolor sit amet consectetur.

Ver código 
<p class="capa">Lorem ipsum dolor sit.</p>

<style>
.capa {
  font-family: 'Fraunces', serif;
  font-size: 88px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}
</style>
.ed-body Texto corpo — 44px default. Modifiers: .ed-body--sm (40px), .ed-body--md (42px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ver código 
<p class="body">Lorem ipsum <strong>dolor</strong> sit amet.</p>

<style>
.body {
  font-family: 'Fraunces', serif;
  font-size: 44px;          /* default */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 80;
}
.body.sm { font-size: 40px; }
.body.md { font-size: 42px; }
.body strong { font-weight: 700; }
</style>
.ed-highlight Marca-texto amarelo inline — use em palavras/números de destaque

Lorem ipsum 1 em 1.000.

Ver código 
<p>Texto comum <span class="highlight">palavra</span> texto.</p>

<style>
.highlight {
  display: inline-block;
  background: #FACC15;
  padding: 2px 18px 8px;
  border-radius: 12px;
  font-weight: 700;
}
</style>
.ed-bigline Linha de ênfase 56px weight 700 entre parágrafos body

Lorem ipsum dolor sit amet:

Consectetur adipiscing elit sed.

Eiusmod tempor incididunt ut labore.

Ver código 
<p class="body"><strong class="bigline">Linha de ênfase grande.</strong></p>

<style>
.bigline {
  display: block;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0;
}
</style>
.ed-payoff Fechamento conceitual — 52px, opsz 120, line-height 1.22

Lorem ipsum dolor sit amet consectetur.

Sed do eiusmod tempor. E quanto ele efetivamente pagou.

Ver código 
<p class="payoff">Texto de fechamento.</p>

<style>
.payoff {
  font-family: 'Fraunces', serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.22;
  font-variation-settings: "opsz" 120;
}
</style>
.ed-signature Assinatura ibe.IA — symbol + wordmark + institute. Usado no último slide (crédito).

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aprenda a criar carrosséis automáticos na Formação IA para Negócios.

ibe.IA
Instituto Brasileiro
de Educação em IA
Ver código 
<!-- Assinatura editorial — último slide -->
<div class="signature">
  <div class="mark">
    <div class="symbol"><svg>...logo ibe.IA...</svg></div>
    <div class="wordmark">ibe<span class="ia">.IA</span></div>
  </div>
  <div class="institute">Instituto Brasileiro<br/>de Educação em IA</div>
</div>

03 — Composições

Receitas de slide

6 receitas derivadas de carrosséis editoriais reais. Combine livremente.

01 · Capa com highlight Texto-capa com marca-texto amarelo em palavra/número chave

Lorem ipsum dolor sit amet.

Sed do eiusmod 1 em 1.000.

Ver código 
<div class="card">
  <div class="texto">
    <p class="capa">Lorem ipsum dolor.</p>
    <p class="capa">Sit amet <span class="highlight">1 em 1.000</span>.</p>
  </div>
</div>
02 · Texto corrido 3-4 parágrafos de body sem destaque — narrativa contínua

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Ver código 
<div class="card">
  <div class="texto">
    <p class="body">Parágrafo 1.</p>
    <p class="body">Parágrafo 2.</p>
    <p class="body">Parágrafo 3.</p>
  </div>
</div>
03 · Texto com strong Body com <strong> em palavras-chave — ênfase editorial

Só 1% dos lorem ipsum são vendidos em um ano inteiro.

E, quando vendem, quase sempre é pra outros indivíduos.

Apenas 0,1% faz um exit pra private equity.

Ou seja: 1 em cada 1.000 negócios.

Ver código 
<div class="card">
  <div class="texto">
    <p class="body md">Só <strong>1%</strong> lorem ipsum.</p>
    <p class="body md">Apenas <strong>0,1%</strong> exit.</p>
  </div>
</div>
04 · Permissão com big-line Body + linha de ênfase 56px no meio + body. Usar para afirmações de permissão/verdade

Então aqui vai a permissão que talvez você precise ouvir:

Tá tudo bem construir um negócio que só dá dinheiro.

Renda ativa continua sendo legal. Você não precisa vender pra ser bem-sucedido.

Ver código 
<div class="card">
  <div class="texto">
    <p class="body md">Introdução à permissão:</p>
    <p class="body md"><strong class="bigline">A afirmação principal.</strong></p>
    <p class="body md">Reforço após o big-line.</p>
  </div>
</div>
05 · Payoff de fechamento 3 parágrafos em tipo payoff (52px) — conclusão conceitual

No fim, a gente vai morrer.

E vai ter trabalhado uma parte bem grande da vida.

O que importa é como esse tempo foi gasto.

Ver código 
<div class="card">
  <div class="texto">
    <p class="payoff">Parágrafo de fechamento 1.</p>
    <p class="payoff">Parágrafo 2 — <strong>destaque</strong>.</p>
    <p class="payoff">Parágrafo 3.</p>
  </div>
</div>
06 · Crédito + assinatura Último slide — body sm com crédito + signature ibe.IA no rodapé do card

Esse carrossel foi 100% criado com IA, e inspirado na Newsletter Lorem Ipsum.

Aprenda a criar carrosséis automáticos na Formação IA para Negócios da ibe.IA.

ibe.IA
Instituto Brasileiro
de Educação em IA
Ver código 
<div class="card">
  <div class="texto">
    <p class="body sm">Crédito inspirado em <strong>Fonte</strong>.</p>
    <p class="body sm">Aprenda mais na <strong>Formação</strong> da ibe.IA.</p>
  </div>
  <div class="signature">
    <div class="mark">
      <div class="symbol"><svg>...</svg></div>
      <div class="wordmark">ibe<span class="ia">.IA</span></div>
    </div>
    <div class="institute">Instituto Brasileiro<br/>de Educação em IA</div>
  </div>
</div>

04 — Regras p/ Agentes

Boilerplate editorial

Boilerplate completo e autocontido para um agente externo reproduzir a família editorial Fraunces do zero. Inclui load de fonte, CSS dos 7 componentes, exemplo de composição e do-and-don't.

1. Load da Fraunces

<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=Fraunces:opsz,wght@9..144,300..800&display=swap" rel="stylesheet">

2. CSS completo dos 7 componentes

:root {
  --preto: #1C1C1C;
  --creme: #FBF9F4;
  --amarelo: #FACC15;
  --roxo: #AF6DFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0a0a0a; font-family: 'Fraunces', serif; -webkit-font-smoothing: antialiased; }

.slide { width: 1080px; height: 1440px; background: #0a0a0a; display: flex; align-items: center; justify-content: center; position: relative; }

.card {
  width: 920px; height: 1300px;
  background: var(--creme); color: var(--preto);
  border-radius: 44px; padding: 96px;
  display: flex; flex-direction: column;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.5),
    0 0 0 1px rgba(28,28,28,0.05),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.texto { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.capa   { font-size: 88px; font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
.capa p + p { margin-top: 36px; }

.body   { font-size: 44px; font-weight: 400; line-height: 1.25; letter-spacing: -0.012em; font-variation-settings: "opsz" 80; }
.body p + p { margin-top: 28px; }
.body strong { font-weight: 700; }
.body.sm { font-size: 40px; }
.body.md { font-size: 42px; }

.highlight { display: inline-block; background: var(--amarelo); padding: 2px 18px 8px; border-radius: 12px; font-weight: 700; }

.bigline { display: block; font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0; }

.payoff { font-size: 52px; font-weight: 400; line-height: 1.22; font-variation-settings: "opsz" 120; }
.payoff p + p { margin-top: 36px; }

.signature { padding-top: 36px; border-top: 1px solid rgba(28,28,28,0.12); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.signature .mark { display: flex; align-items: center; gap: 20px; }
.signature .symbol { width: 76px; height: 76px; }
.signature .symbol svg { width: 100%; height: 100%; }
.signature .wordmark { font-size: 56px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variation-settings: "opsz" 144; }
.signature .wordmark .ia { color: var(--roxo); }
.signature .institute { font-size: 22px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; text-align: right; max-width: 360px; }

3. Exemplo de slide completo

<!-- Slide 1 — Capa com highlight -->
<section class="slide">
  <div class="card">
    <div class="texto">
      <p class="capa">Vender sua empresa é o sonho.</p>
      <p class="capa">A realidade é <span class="highlight">1 em 1.000</span>.</p>
    </div>
  </div>
</section>

4. Do-and-don't editorial

  • Strong inline é OK para ênfase em palavras-chave.
  • Um slide por ideia — texto concentrado, nunca poluído.
  • Highlight amarelo deve destacar no máximo 1 palavra/número por slide.
  • Bigline no meio de body para afirmações de permissão/verdade.
  • Nunca misturar Fraunces com Sora ou Plus Jakarta no mesmo slide.
  • Nunca aplicar efeito glass, backdrop-filter ou aurora no card editorial.
  • Nunca mudar o amarelo do highlight para outra cor.
  • Nunca usar imagens, hero frames ou vídeo — família é de texto puro.
  • Nunca mais do que 4 parágrafos num slide de body.