Formatos
& Templates

Formatos editoriais canônicos do ecossistema MSCREATIVE.SYSTEMS. Cada template é autocontido — inclui wireframe engine, tokens inline e marcadores editáveis. LLMs copiam e renderizam sem dependências externas.

Seção 7

Story Format

Formato 9:16 para Instagram Stories. 7 camadas visuais: grid, scan, marker, ghosts, glitch, ASCII, icosaedro.

OFFF BCN 2026

O criativo mais sênior da sala é quase sempre o mais impotente

1. O lugar precisa existir antes da tecnologia.
2. Sem conceito, escala é barulho.
3. A melhor UX é a que desaparece.

Nils Leonard · Uncommon Creative Studio

Dimensões

1080 × 1920 px

Aspect ratio 9:16, resolução nativa Instagram.

Safe Zone — Topo

120px

UI do Instagram (avatar + nome). Nenhum conteúdo crítico acima.

Safe Zone — Base

160px

Barra de resposta e swipe-up. Info-strip permitido.

Grid

54 × 54 px

--ds-grid-size. Textura de sistema, quase invisível.

Camadas

7 layers

Grid, Scan, Marker, Ghosts (×3), Glitch (×2), ASCII, Icosaedro.

Render Pipeline

HTML/CSS → Playwright → PNG

Template standalone, sem dependências externas.

HTML — Story Template (1080×1920, standalone)

<!DOCTYPE html>
<html lang="pt-BR"><head><meta charset="UTF-8">
<title>MSCS Story</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ed-font-hl:'IBM Plex Sans',sans-serif;
  --ed-font-em:'Libre Caslon Text',serif;
  --ed-font-label:'Space Mono',monospace;
  --ed-bg:linear-gradient(145deg,#0A0A0E,#111114);
  --ed-hl:#6A6A6A;--ed-em:#A85A30;
  --ed-body:rgba(130,130,130,0.4);
  --ed-label:rgba(130,130,130,0.18);
  --ed-accent:#A85A30;--ed-accent2:#6A3818;
  --ed-grid:rgba(255,255,255,0.025);
  --ed-ghost1:rgba(168,90,48,0.06);
  --ed-ghost2:rgba(168,90,48,0.04);
  --ed-ghost3:rgba(168,90,48,0.025);
  --ed-glitch:rgba(168,90,48,0.07);
  --ed-ascii:rgba(168,90,48,0.035);
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&family=Libre+Caslon+Text:ital@0;1&family=Space+Mono&display=swap');
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#05060a;padding:20px}
.stage{position:relative;overflow:hidden;width:1080px;height:1920px;background:var(--ed-bg);font-family:var(--ed-font-hl);color:var(--ed-hl)}
/* Layer 1: Grid */
.grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--ed-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ed-grid) 1px,transparent 1px);background-size:54px 54px}
/* Layer 2: Scan lines */
.scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(140,130,115,0.005) 3px,rgba(140,130,115,0.005) 4px)}
/* Layer 3: Product marker */
.marker{position:absolute;left:0;top:0;width:3px;height:100%;z-index:6;background:linear-gradient(180deg,rgba(168,90,48,0.12),transparent 40%)}
/* Layer 4: Ghosts */
.ghost{position:absolute;z-index:0;pointer-events:none;border-radius:2px}
.g1{inset:-8px;border:1px solid var(--ed-ghost1)}
.g2{inset:-16px;border:1px solid var(--ed-ghost2)}
.g3{inset:-24px;border:1px solid var(--ed-ghost3)}
/* Layer 5: Glitch */
.glitch{position:absolute;left:0;width:100%;height:1px;z-index:5;pointer-events:none}
.gl1{top:500px;background:linear-gradient(90deg,transparent 10%,var(--ed-glitch) 10% 28%,transparent 28% 55%,rgba(168,90,48,0.06) 55% 72%,transparent 72%)}
.gl2{top:1350px;background:linear-gradient(90deg,transparent 18%,var(--ed-glitch) 18% 38%,transparent 38% 60%,rgba(168,90,48,0.06) 60% 82%,transparent 82%)}
/* Layer 6: ASCII */
.ascii{position:absolute;z-index:3;pointer-events:none;font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.15em;white-space:nowrap;color:var(--ed-ascii)}
.a1{top:260px;right:50px;transform:rotate(-90deg);transform-origin:right center}
.a2{bottom:440px;left:45px;transform:rotate(1deg)}
/* Info strips */
.istrip{position:absolute;left:0;width:100%;z-index:10;display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 40px;font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ed-label)}
.istrip-top{top:0;border-bottom:1px solid var(--ed-ghost1)}
.istrip-bot{bottom:0;border-top:1px solid var(--ed-ghost1)}
/* Content */
.content{position:absolute;z-index:8;top:174px;left:72px;right:72px;bottom:214px;display:flex;flex-direction:column}
.tag{font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;padding:6px 14px;border-radius:2px;color:var(--ed-accent);border:1px solid rgba(168,90,48,0.25);background:rgba(168,90,48,0.04);display:inline-block;margin-bottom:56px}
h1{font-size:54px;line-height:1.12;font-weight:300;letter-spacing:-0.02em;margin-bottom:44px;max-width:900px}
h1 em{font-family:var(--ed-font-em);font-style:italic;color:var(--ed-em);font-size:62px}
hr{border:none;height:2px;background:linear-gradient(90deg,var(--ed-accent),var(--ed-accent2),transparent);margin-bottom:36px}
.sub{font-size:19px;line-height:1.65;color:var(--ed-body);font-weight:300;max-width:780px}
.card{margin-top:56px;padding:28px 0;border-top:1px solid var(--ed-ghost1);border-bottom:1px solid var(--ed-ghost1);display:flex;align-items:center;gap:28px}
.initials{width:64px;height:64px;border-radius:50%;border:1px solid var(--ed-ghost1);display:flex;align-items:center;justify-content:center;font-family:var(--ed-font-label);font-size:28px;letter-spacing:0.08em;color:var(--ed-em)}
.nm{font-size:17px;font-weight:400;color:var(--ed-hl)}
.rl{font-family:var(--ed-font-label);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ed-label);margin-top:4px}
</style></head>
<body>
<div class="stage">
  <div class="ghost g3"></div>
  <div class="ghost g2"></div>
  <div class="ghost g1"></div>
  <div class="grid"></div>
  <div class="scan"></div>
  <div class="marker"></div>
  <div class="glitch gl1"></div>
  <div class="glitch gl2"></div>
  <div class="ascii a1">▶ SOVEREIGNTY ▶▶▶</div>
  <div class="ascii a2">░▒▓█▓▒░</div>
  <div class="istrip istrip-top">
    <span>✕ ✕ ✕</span>
    <span><!-- EDIT: tagline -->CRIATIVIDADE É ESTRUTURA</span>
    <span>MSCREATIVE.SYSTEMS™</span>
  </div>
  <div class="content">
    <span class="tag"><!-- EDIT: tag -->OFFF BCN 2026</span>
    <h1><!-- EDIT: headline -->O criativo mais <em>sênior</em> da sala é quase sempre o mais <em>impotente</em></h1>
    <hr>
    <p class="sub"><!-- EDIT: subtitle -->Senioridade não é liberdade criativa — é acúmulo de dependências.</p>
    <div class="card">
      <div class="initials"><!-- EDIT -->NL</div>
      <div><div class="nm"><!-- EDIT -->Nils Leonard</div>
      <div class="rl"><!-- EDIT -->Co-Founder · Uncommon Creative Studio</div></div>
    </div>
  </div>
  <div class="istrip istrip-bot">
    <span>OFFF BCN 2026</span>
    <span>@mscreative.systems</span>
  </div>
</div>
</body></html>

Seção 8

Carousel Pipeline

Pipeline de 9 slides para Instagram carrossel. Ritmo narrativo com alternância Dark/Light e arquitetura tipográfica editorial.

Cover

Dark

Problem

Dark

Data

Dark

Paradox

Dark

Pullquote

Light

Solution

Dark

Proof

Dark

Reflection

Light

CTA

Dark

#	Modo	Conteúdo	Tipografia
01	Dark	Capa — headline + speaker + tags	IBM Plex 48px / Libre Caslon 54px em
02	Dark	Problema — tensão, pergunta central	IBM Plex 38px / quote 26px
03	Dark	Dado — número-âncora, estatística	Fraunces 72px (número, opsz 144) / Body 16px
04	Dark	Paradoxo — inversão, contradição	IBM Plex 38px + em 44px
05	Light	Pullquote — citação do speaker	Libre Caslon 28px italic
06	Dark	Solução — reframe, veredicto	IBM Plex 38px + body 16px
07	Dark	Prova — case, referência real	Body 16px + label 10px
08	Light	Reflexão — pergunta pro leitor	Libre Caslon 26px italic
09	Dark	CTA — seguir / salvar / compartilhar	Fraunces 36px (opsz 24) + label 11px

Resolução

1080 × 1350 px

Instagram Portrait (4:5).

Formato

Instagram Carousel

Até 20 slides por post.

Pipeline

HTML/CSS → Playwright → PNG

Template standalone por slide.

Ritmo

7 Dark + 2 Light

Slides 05 e 08 quebram o padrão visual.

HTML — Carousel Cover Slide (1080×1350, standalone)

<!DOCTYPE html>
<html lang="pt-BR"><head><meta charset="UTF-8">
<title>MSCS Carousel Cover</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ed-font-hl:'IBM Plex Sans',sans-serif;
  --ed-font-em:'Libre Caslon Text',serif;
  --ed-font-label:'Space Mono',monospace;
  --ed-bg:linear-gradient(145deg,#0A0A0E,#111114);
  --ed-hl:#6A6A6A;--ed-em:#A85A30;
  --ed-body:rgba(130,130,130,0.4);
  --ed-label:rgba(130,130,130,0.18);
  --ed-accent:#A85A30;--ed-accent2:#6A3818;
  --ed-grid:rgba(255,255,255,0.025);
  --ed-ghost:rgba(168,90,48,0.06);
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&family=Libre+Caslon+Text:ital@0;1&family=Space+Mono&display=swap');
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#05060a;padding:20px}
.stage{position:relative;overflow:hidden;width:1080px;height:1350px;background:var(--ed-bg);font-family:var(--ed-font-hl);color:var(--ed-hl)}
.grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--ed-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ed-grid) 1px,transparent 1px);background-size:54px 54px}
.scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(140,130,115,0.005) 3px,rgba(140,130,115,0.005) 4px)}
.marker{position:absolute;left:0;top:0;width:3px;height:100%;z-index:6;background:linear-gradient(180deg,rgba(168,90,48,0.12),transparent 40%)}
.ghost{position:absolute;z-index:0;pointer-events:none;border-radius:2px}
.g1{inset:-8px;border:1px solid var(--ed-ghost)}.g2{inset:-16px;border:1px solid rgba(168,90,48,0.04)}
.glitch{position:absolute;left:0;width:100%;height:1px;z-index:5;pointer-events:none}
.gl1{top:420px;background:linear-gradient(90deg,transparent 12%,rgba(168,90,48,0.08) 12% 30%,transparent 30% 58%,rgba(168,90,48,0.06) 58% 75%,transparent 75%)}
.istrip{position:absolute;left:0;width:100%;z-index:10;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 36px;font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ed-label)}
.istrip-top{top:0;border-bottom:1px solid var(--ed-ghost)}
.istrip-bot{bottom:0;border-top:1px solid var(--ed-ghost)}
.content{position:absolute;z-index:8;top:140px;left:64px;right:64px;bottom:180px;display:flex;flex-direction:column}
.issue{margin-bottom:36px;font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.25em;color:rgba(168,90,48,0.6);text-transform:uppercase}
.tag{font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;padding:6px 14px;border-radius:2px;color:var(--ed-accent);border:1px solid rgba(168,90,48,0.25);background:rgba(168,90,48,0.04);display:inline-block;margin-bottom:48px}
h1{font-size:48px;line-height:1.14;font-weight:300;letter-spacing:-0.02em;margin-bottom:40px;max-width:880px}
h1 em{font-family:var(--ed-font-em);font-style:italic;color:var(--ed-em);font-size:54px}
hr{border:none;height:2px;background:linear-gradient(90deg,var(--ed-accent),var(--ed-accent2),transparent);margin-bottom:32px}
.sub{font-size:17px;line-height:1.6;color:var(--ed-body);font-weight:300;max-width:720px}
.card{margin-top:auto;padding:26px 0;border-top:1px solid var(--ed-ghost);display:flex;align-items:center;gap:24px}
.initials{width:58px;height:58px;border-radius:50%;border:1px solid var(--ed-ghost);display:flex;align-items:center;justify-content:center;font-family:var(--ed-font-label);font-size:26px;color:var(--ed-em)}
.nm{font-size:16px}.rl{font-family:var(--ed-font-label);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ed-label);margin-top:4px}
.slide-idx{position:absolute;bottom:60px;right:48px;z-index:9;font-family:var(--ed-font-label);font-size:9px;letter-spacing:0.22em;color:rgba(168,90,48,0.35);text-transform:uppercase}
</style></head>
<body>
<div class="stage">
  <div class="ghost g2"></div><div class="ghost g1"></div>
  <div class="grid"></div><div class="scan"></div><div class="marker"></div>
  <div class="glitch gl1"></div>
  <div class="istrip istrip-top"><span>✕ ✕ ✕</span><span>EDIÇÃO · CURADORIA</span><span>MSCREATIVE.SYSTEMS™</span></div>
  <div class="content">
    <div class="issue"><!-- EDIT -->OFFF BCN 2026 · Ed. 01</div>
    <span class="tag"><!-- EDIT -->CAPA</span>
    <h1><!-- EDIT -->O criativo mais <em>sênior</em> da sala</h1>
    <hr>
    <p class="sub"><!-- EDIT -->Um insight sobre senioridade e autonomia criativa.</p>
    <div class="card">
      <div class="initials">NL</div>
      <div><div class="nm">Nils Leonard</div><div class="rl">Co-Founder · Uncommon</div></div>
    </div>
  </div>
  <div class="slide-idx">01 / 09</div>
  <div class="istrip istrip-bot"><span>@mscreative.systems</span><span>DESLIZE →</span></div>
</div>
</body></html>

HTML — Carousel Content Slide (1080×1350, standalone)

<!DOCTYPE html>
<html lang="pt-BR"><head><meta charset="UTF-8">
<title>MSCS Carousel Content</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ed-font-hl:'IBM Plex Sans',sans-serif;
  --ed-font-em:'Libre Caslon Text',serif;
  --ed-font-label:'Space Mono',monospace;
  --ed-bg:linear-gradient(145deg,#0A0A0E,#111114);
  --ed-hl:#6A6A6A;--ed-em:#A85A30;
  --ed-body:rgba(130,130,130,0.4);
  --ed-label:rgba(130,130,130,0.18);
  --ed-accent:#A85A30;--ed-accent2:#6A3818;
  --ed-grid:rgba(255,255,255,0.025);
  --ed-ghost:rgba(168,90,48,0.06);
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&family=Libre+Caslon+Text:ital@0;1&family=Space+Mono&display=swap');
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#05060a;padding:20px}
.stage{position:relative;overflow:hidden;width:1080px;height:1350px;background:var(--ed-bg);font-family:var(--ed-font-hl);color:var(--ed-hl)}
.grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--ed-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ed-grid) 1px,transparent 1px);background-size:54px 54px}
.scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(140,130,115,0.005) 3px,rgba(140,130,115,0.005) 4px)}
.marker{position:absolute;left:0;top:0;width:3px;height:100%;z-index:6;background:linear-gradient(180deg,rgba(168,90,48,0.12),transparent 40%)}
.ghost{position:absolute;z-index:0;pointer-events:none;border-radius:2px}
.g1{inset:-8px;border:1px solid var(--ed-ghost)}.g2{inset:-16px;border:1px solid rgba(168,90,48,0.04)}
.istrip{position:absolute;left:0;width:100%;z-index:10;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 36px;font-family:var(--ed-font-label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ed-label)}
.istrip-top{top:0;border-bottom:1px solid var(--ed-ghost)}
.istrip-bot{bottom:0;border-top:1px solid var(--ed-ghost)}
.content{position:absolute;z-index:8;top:130px;left:64px;right:64px;bottom:170px;display:flex;flex-direction:column}
.kicker{font-family:var(--ed-font-label);font-size:11px;letter-spacing:0.25em;color:rgba(168,90,48,0.6);text-transform:uppercase;margin-bottom:28px}
h1{font-size:38px;line-height:1.2;font-weight:300;letter-spacing:-0.02em;margin-bottom:36px;max-width:880px}
h1 em{font-family:var(--ed-font-em);font-style:italic;color:var(--ed-em);font-size:44px}
hr{border:none;height:2px;width:240px;background:linear-gradient(90deg,var(--ed-accent),var(--ed-accent2),transparent);margin-bottom:28px}
.quote{font-family:var(--ed-font-em);font-style:italic;font-size:26px;line-height:1.35;color:rgba(130,130,130,0.42);border-left:3px solid rgba(168,90,48,0.2);padding-left:28px;max-width:720px;margin:12px 0 36px}
.body{font-size:16px;line-height:1.65;max-width:760px;font-weight:300;color:var(--ed-body)}
.body em{font-family:var(--ed-font-em);font-style:italic;color:rgba(168,90,48,0.7);font-size:18px}
.fmeta{margin-top:auto;display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--ed-ghost);font-family:var(--ed-font-label);font-size:9px;letter-spacing:0.2em;color:rgba(130,130,130,0.3);text-transform:uppercase}
.slide-idx{position:absolute;bottom:56px;right:44px;z-index:9;font-family:var(--ed-font-label);font-size:9px;letter-spacing:0.22em;color:rgba(168,90,48,0.35);text-transform:uppercase}
</style></head>
<body>
<div class="stage">
  <div class="ghost g2"></div><div class="ghost g1"></div>
  <div class="grid"></div><div class="scan"></div><div class="marker"></div>
  <div class="istrip istrip-top"><span>OFFF BCN 2026</span><span>Ed. 01</span><span>MSCREATIVE.SYSTEMS™</span></div>
  <div class="content">
    <div class="kicker"><!-- EDIT -->Desdobramento · 02</div>
    <h1><!-- EDIT -->Senioridade não é <em>liberdade</em> — é acúmulo de <em>dependências</em></h1>
    <hr>
    <blockquote class="quote"><!-- EDIT -->“Ele delegou a execução. E com ela, a autonomia.”</blockquote>
    <p class="body"><!-- EDIT -->A estrutura corporativa confunde <em>escopo</em> com <em>soberania</em>. O resultado chega decomposto.</p>
    <div class="fmeta"><span>NILS LEONARD · UNCOMMON</span><span>02 / 06</span></div>
  </div>
  <div class="slide-idx">02 / 09</div>
  <div class="istrip istrip-bot"><span>@mscreative.systems</span><span>DESLIZE →</span></div>
</div>
</body></html>

Seção 9

Formatos Editoriais

Todos os formatos do pipeline editorial MSCREATIVE.SYSTEMS. Templates standalone em studies/editorial_typography/.

Story (9:16)

1080 × 1920

Instagram Story. 7 camadas, speaker card.

Carousel Cover

1080 × 1350

Capa de carrossel, tags, slide index.

Carousel Content

1080 × 1350

Slides internos, kicker, quote, body.

Newsletter Header

1200 × 630

Substack hero image, Cormorant accent.

LinkedIn Post

1200 × 627

LinkedIn feed, headline + speaker.

Open Graph

1200 × 630

OG image para links compartilhados.

Seção 10

Hierarquia de Contraste

Dois regimes visuais. Dark como padrão. Light como ruptura de ritmo. Nunca branco puro — nunca preto puro.

Dark Mode — Default

Infraestrutura
do Improviso

Existe uma diferença entre improvisar e ter infraestrutura de improviso. Uma é aposta. A outra é arquitetura.

EXPERIENCE ARCHITECTURE · TIER S

Light Mode — Ruptura

Senioridade
≠ Liberdade

Quanto mais alto o cargo, mais intermediários entre a ideia e sua forma final. O resultado chega decomposto.

PULLQUOTE · SLIDE 05

Dark BG

#0A0C10 → #12141A

Gradient base. 7 de 9 slides.

Light BG

#F5F7FA → #E8EBF0

Ruptura visual. Slides 05 e 08.

Dark Text

#B2A898

Headline no dark mode.

Light Text

#1A1D26

Headline no light mode.