Editorial Burgundy Principles Template
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
A reusable three-slide HTML presentation template for editorial decks with fixed burgundy/blush palette and principle-card structure.
About
An HTML-based presentation template for editorial decks with a burgundy, blush, and muted-gold color palette. Designed for culture manifestos, strategy narratives, and internal principle statements. Includes three slides: numeric headline, studio tags with title lockup, and eight-card principle grid. Supports keyboard navigation (arrow keys) and dot-based slide navigation. Self-contained, sandbox-safe HTML with file-write capability to generate customized instances while preserving card hierarchy, tag structure, and interactive controls.
- Three-slide editorial deck structure for manifestos and culture narratives
- Burgundy, blush, and muted-gold palette with premium typographic treatment
- Eight-principles card grid layout with pill-style tag cloud slide
- Keyboard navigation (ArrowLeft/ArrowRight) plus dot and button controls
- Self-contained, sandbox-safe HTML artifact output
Editorial Burgundy Principles Template by the numbers
- 1,771 all-time installs (skills.sh)
- +122 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #164 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
editorial-burgundy-principles-template capabilities & compatibility
- Capabilities
- generate customized three slide decks preserving · keyboard navigation (arrowleft/arrowright) · dot based and button based slide control · self contained sandbox safe html output
- Use cases
- ui design · presentations
- Platforms
- macOS · Windows · Linux
- Runs
- Runs locally
- Pricing
- Free
What editorial-burgundy-principles-template says it does
Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards
npx skills add https://github.com/nexu-io/open-design --skill editorial-burgundy-principles-templateAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Create a three-slide editorial presentation deck in burgundy/blush palette for culture narratives and strategy storytelling.
Who is it for?
Culture documentation, strategy manifestos, internal principles slides, studio positioning narratives.
Skip if: Data-heavy dashboards, real-time analytics, or multi-page documents.
When should I use this skill?
User requests editorial burgundy template, studio salon deck, principles manifesto slides, or pink/burgundy premium presentation.
What you get
Users produce branded editorial presentations with guided navigation and consistent typographic hierarchy.
- index.html presentation deck
- template.html reusable layout
By the numbers
- 3-slide sequence structure
- 8 principle cards per grid
- 2 navigation interaction modes (keyboard, click)
Files
Editorial Burgundy Principles Template
A three-slide editorial deck for culture narratives, strategy storytelling, and internal manifestos.
Resource map
editorial-burgundy-principles-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.htmlWorkflow
1. Start from assets/template.html. 2. Keep the 3-slide sequence:
- numeric headline
- studio tags + title lockup
- eight-principles card grid
3. Replace copy while preserving card and tag hierarchy. 4. Keep interactions:
- Prev / Next buttons
- dot navigation
- keyboard navigation (
ArrowLeft/ArrowRight)
5. Keep HTML self-contained and sandbox-safe.
Output contract
Emit one concise orientation sentence and one HTML artifact:
<artifact identifier="editorial-burgundy-principles" type="text/html" title="Editorial Burgundy Principles Deck">
<!doctype html>
<html>...</html>
</artifact><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Editorial Burgundy Principles Template</title>
<style>
:root { --wine:#5a1f2e; --wine2:#7f2b43; --blush:#f4c5ce; --gold:#e4cd74; --paper:#f8d8de; --line:rgba(90,31,46,.18); }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--wine); font-family:Inter,Arial,sans-serif; min-height:100vh; }
.deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); overflow:hidden; position:relative; }
.toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.btns { display:flex; gap:8px; } button { border:1px solid var(--line); background:transparent; color:var(--wine); border-radius:999px; height:30px; padding:0 12px; cursor:pointer; }
.slides { position:relative; height:760px; }
.slide { position:absolute; inset:0; opacity:0; transform:translateX(18px); transition:.35s ease; pointer-events:none; padding:32px; }
.slide.active { opacity:1; transform:none; pointer-events:auto; }
.s1 { background:var(--wine); color:#f8d8de; }
.kicker { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.s1 h1 { margin:18px 0 0; font-size:220px; line-height:.85; letter-spacing:-.05em; color:#f7c4d0; }
.s1 .pct { color:var(--gold); font-size:84px; font-family:Georgia,serif; font-style:italic; margin-left:8px; }
.row2 { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.desc h3, .bars h3 { margin:0 0 12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.desc p { margin:0; color:#f0cad2; line-height:1.5; max-width:560px; }
.bar { display:grid; grid-template-columns:58px 1fr 52px; gap:12px; align-items:center; margin-bottom:10px; }
.bar .track { height:8px; background:rgba(248,216,222,.18); border-radius:99px; overflow:hidden; }
.bar .fill { height:100%; background:var(--gold); }
.bar:last-child .fill { background:#f3d7de; }
.s2 .top { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:28px; }
.tags { min-height:330px; position:relative; }
.pill { position:absolute; border-radius:999px; padding:12px 22px; font-weight:700; }
.pill.a{left:2%;top:6%;background:var(--wine);color:var(--gold);} .pill.b{left:17%;top:6%;background:var(--gold);color:var(--wine);} .pill.c{left:35%;top:6%;background:var(--wine2);color:var(--gold);} .pill.d{left:52%;top:6%;background:var(--gold);color:var(--wine);}
.pill.e{left:70%;top:6%;background:var(--wine2);color:var(--gold);} .pill.f{left:4%;top:20%;background:var(--gold);color:var(--wine);} .pill.g{left:21%;top:20%;background:var(--wine2);color:var(--gold);} .pill.h{left:39%;top:20%;background:var(--gold);color:var(--wine);}
.pill.i{left:58%;top:20%;background:var(--wine2);color:var(--gold);} .pill.j{left:4%;top:34%;background:var(--gold);color:var(--wine);} .pill.k{left:23%;top:34%;background:var(--wine2);color:var(--gold);} .pill.l{left:43%;top:34%;background:var(--gold);color:var(--wine);}
.title-lockup { margin-top:120px; font-size:126px; line-height:.9; font-weight:900; letter-spacing:-.04em; color:var(--wine2); }
.title-lockup em { font-family:Georgia,serif; font-style:italic; color:var(--gold); font-weight:500; }
.s3 h2 { margin:0 0 24px; font-size:62px; letter-spacing:-.03em; }
.s3 h2 em { font-family:Georgia,serif; font-style:italic; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:14px; height:620px; }
.card { border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.card.w { background:var(--wine2); color:#f5d2da; } .card.g { background:var(--gold); color:var(--wine); }
.idx { font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; } .card h3 { margin:0; font-size:30px; line-height:1.02; } .card p { margin:0; line-height:1.42; font-size:15px; opacity:.9; flex:1; }
.dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; }
.dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--wine); background:transparent; } .dot.active { background:var(--wine); transform:scale(1.25); }
.hover { transition:transform .2s ease; } .hover:hover { transform:translateY(-2px); }
</style>
</head>
<body>
<main class="deck">
<header class="toolbar"><span>Editorial / Studio Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
<section class="slides">
<article class="slide s1 active" data-slide="0">
<div class="kicker">§ 04 — Headline figure</div>
<h1>72<span class="pct">%</span></h1>
<div class="row2">
<section class="desc"><h3>What this measures</h3><p>Placeholder annotation about what the figure means, fielded in a stable sample and weighted to population.</p></section>
<section class="bars"><h3>Composition</h3><div class="bar"><span>A</span><div class="track"><div class="fill" style="width:82%"></div></div><span>82.4</span></div><div class="bar"><span>B</span><div class="track"><div class="fill" style="width:64%"></div></div><span>63.9</span></div><div class="bar"><span>C</span><div class="track"><div class="fill" style="width:48%"></div></div><span>48.1</span></div><div class="bar"><span>D</span><div class="track"><div class="fill" style="width:31%"></div></div><span>31.0</span></div></section>
</div>
</article>
<article class="slide s2 hover" data-slide="1">
<div class="top"><span>Vol. 04 — Editorial brief</span><span>Spring / Summer edition</span><span>FW · 2026</span></div>
<section class="tags"><span class="pill a">Focus</span><span class="pill b">Tech-equipped</span><span class="pill c">Creativity</span><span class="pill d">Coffee</span><span class="pill e">Community</span><span class="pill f">Coworking</span><span class="pill g">Productivity</span><span class="pill h">Inspiration</span><span class="pill i">Flexible</span><span class="pill j">Workshops</span><span class="pill k">Collaboration</span><span class="pill l">Studio</span></section>
<div class="title-lockup">Studio <em>&</em> Salon</div>
</article>
<article class="slide s3" data-slide="2">
<h2>Eight principles, <em>loosely held.</em></h2>
<section class="grid">
<article class="card w hover"><div class="idx">/ 01</div><h3>Slow looking</h3><p>Let readers stay with the frame long enough to absorb context.</p></article>
<article class="card g hover"><div class="idx">/ 02</div><h3>Open kitchen</h3><p>Show process and iteration, not only polished outcomes.</p></article>
<article class="card w hover"><div class="idx">/ 03</div><h3>Borrowed light</h3><p>Credit influences and name references with precision.</p></article>
<article class="card g hover"><div class="idx">/ 04</div><h3>Quiet defaults</h3><p>Use restraint first; amplify only when the narrative asks for it.</p></article>
<article class="card w hover"><div class="idx">/ 05</div><h3>Fewer, finer</h3><p>Remove noise so every element earns its place.</p></article>
<article class="card g hover"><div class="idx">/ 06</div><h3>Generous edges</h3><p>Leave enough whitespace for breathing and interpretation.</p></article>
<article class="card w hover"><div class="idx">/ 07</div><h3>Hand in it</h3><p>Retain small traces of craft; avoid sterile over-polish.</p></article>
<article class="card g hover"><div class="idx">/ 08</div><h3>To be added</h3><p>Keep one slot open for what the team learns next.</p></article>
</section>
</article>
</section>
<nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
</main>
<script>
(function () {
const slides = Array.from(document.querySelectorAll(".slide"));
const dots = Array.from(document.querySelectorAll(".dot"));
let idx = 0;
const max = slides.length - 1;
function show(next) { idx = Math.max(0, Math.min(max, next)); slides.forEach((el, i) => el.classList.toggle("active", i === idx)); dots.forEach((el, i) => el.classList.toggle("active", i === idx)); }
document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") show(idx - 1); if (event.key === "ArrowRight") show(idx + 1); });
})();
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Editorial Burgundy Principles Example</title>
<style>
:root { --wine:#5a1f2e; --wine2:#7f2b43; --blush:#f4c5ce; --gold:#e4cd74; --paper:#f8d8de; --line:rgba(90,31,46,.18); }
* { box-sizing: border-box; } body { margin:0; background:var(--paper); color:var(--wine); font-family:Inter,Arial,sans-serif; min-height:100vh; }
.deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); overflow:hidden; position:relative; }
.toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.btns { display:flex; gap:8px; } button { border:1px solid var(--line); background:transparent; color:var(--wine); border-radius:999px; height:30px; padding:0 12px; cursor:pointer; }
.slides { position:relative; height:760px; } .slide { position:absolute; inset:0; opacity:0; transform:translateX(18px); transition:.35s ease; pointer-events:none; padding:32px; } .slide.active { opacity:1; transform:none; pointer-events:auto; }
.s1 { background:var(--wine); color:#f8d8de; } .kicker { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .s1 h1 { margin:18px 0 0; font-size:220px; line-height:.85; letter-spacing:-.05em; color:#f7c4d0; } .s1 .pct { color:var(--gold); font-size:84px; font-family:Georgia,serif; font-style:italic; margin-left:8px; }
.row2 { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:36px; } .desc h3, .bars h3 { margin:0 0 12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .desc p { margin:0; color:#f0cad2; line-height:1.5; max-width:560px; }
.bar { display:grid; grid-template-columns:58px 1fr 52px; gap:12px; align-items:center; margin-bottom:10px; } .bar .track { height:8px; background:rgba(248,216,222,.18); border-radius:99px; overflow:hidden; } .bar .fill { height:100%; background:var(--gold); } .bar:last-child .fill { background:#f3d7de; }
.s2 .top { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:28px; }
.tags { min-height:330px; position:relative; } .pill { position:absolute; border-radius:999px; padding:12px 22px; font-weight:700; } .pill.a{left:2%;top:6%;background:var(--wine);color:var(--gold);} .pill.b{left:17%;top:6%;background:var(--gold);color:var(--wine);} .pill.c{left:35%;top:6%;background:var(--wine2);color:var(--gold);} .pill.d{left:52%;top:6%;background:var(--gold);color:var(--wine);} .pill.e{left:70%;top:6%;background:var(--wine2);color:var(--gold);} .pill.f{left:4%;top:20%;background:var(--gold);color:var(--wine);} .pill.g{left:21%;top:20%;background:var(--wine2);color:var(--gold);} .pill.h{left:39%;top:20%;background:var(--gold);color:var(--wine);} .pill.i{left:58%;top:20%;background:var(--wine2);color:var(--gold);} .pill.j{left:4%;top:34%;background:var(--gold);color:var(--wine);} .pill.k{left:23%;top:34%;background:var(--wine2);color:var(--gold);} .pill.l{left:43%;top:34%;background:var(--gold);color:var(--wine);}
.title-lockup { margin-top:120px; font-size:126px; line-height:.9; font-weight:900; letter-spacing:-.04em; color:var(--wine2); } .title-lockup em { font-family:Georgia,serif; font-style:italic; color:var(--gold); font-weight:500; }
.s3 h2 { margin:0 0 24px; font-size:62px; letter-spacing:-.03em; } .s3 h2 em { font-family:Georgia,serif; font-style:italic; font-weight:500; } .grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:14px; height:620px; }
.card { border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; } .card.w { background:var(--wine2); color:#f5d2da; } .card.g { background:var(--gold); color:var(--wine); } .idx { font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; } .card h3 { margin:0; font-size:30px; line-height:1.02; } .card p { margin:0; line-height:1.42; font-size:15px; opacity:.9; flex:1; }
.dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; } .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--wine); background:transparent; } .dot.active { background:var(--wine); transform:scale(1.25); } .hover { transition:transform .2s ease; } .hover:hover { transform:translateY(-2px); }
</style>
</head>
<body>
<main class="deck">
<header class="toolbar"><span>Editorial / Studio Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
<section class="slides">
<article class="slide s1 active" data-slide="0"><div class="kicker">§ 04 — Headline figure</div><h1>72<span class="pct">%</span></h1><div class="row2"><section class="desc"><h3>What this measures</h3><p>Surveyed confidence in shipping creative work without sacrificing rigor, weighted to active contributors in Q1.</p></section><section class="bars"><h3>Composition</h3><div class="bar"><span>A</span><div class="track"><div class="fill" style="width:82%"></div></div><span>82.4</span></div><div class="bar"><span>B</span><div class="track"><div class="fill" style="width:64%"></div></div><span>63.9</span></div><div class="bar"><span>C</span><div class="track"><div class="fill" style="width:48%"></div></div><span>48.1</span></div><div class="bar"><span>D</span><div class="track"><div class="fill" style="width:31%"></div></div><span>31.0</span></div></section></div></article>
<article class="slide s2 hover" data-slide="1"><div class="top"><span>Vol. 04 — Editorial brief</span><span>Spring / Summer edition</span><span>FW · 2026</span></div><section class="tags"><span class="pill a">Focus</span><span class="pill b">Tech-equipped</span><span class="pill c">Creativity</span><span class="pill d">Coffee</span><span class="pill e">Community</span><span class="pill f">Coworking</span><span class="pill g">Productivity</span><span class="pill h">Inspiration</span><span class="pill i">Flexible</span><span class="pill j">Workshops</span><span class="pill k">Collaboration</span><span class="pill l">Studio</span></section><div class="title-lockup">Studio <em>&</em> Salon</div></article>
<article class="slide s3" data-slide="2"><h2>Eight principles, <em>loosely held.</em></h2><section class="grid"><article class="card w hover"><div class="idx">/ 01</div><h3>Slow looking</h3><p>Let readers stay with the frame long enough to absorb context.</p></article><article class="card g hover"><div class="idx">/ 02</div><h3>Open kitchen</h3><p>Show process and iteration, not only polished outcomes.</p></article><article class="card w hover"><div class="idx">/ 03</div><h3>Borrowed light</h3><p>Credit influences and name references with precision.</p></article><article class="card g hover"><div class="idx">/ 04</div><h3>Quiet defaults</h3><p>Use restraint first; amplify only when the narrative asks for it.</p></article><article class="card w hover"><div class="idx">/ 05</div><h3>Fewer, finer</h3><p>Remove noise so every element earns its place.</p></article><article class="card g hover"><div class="idx">/ 06</div><h3>Generous edges</h3><p>Leave enough whitespace for breathing and interpretation.</p></article><article class="card w hover"><div class="idx">/ 07</div><h3>Hand in it</h3><p>Retain small traces of craft; avoid sterile over-polish.</p></article><article class="card g hover"><div class="idx">/ 08</div><h3>To be added</h3><p>Keep one slot open for what the team learns next.</p></article></section></article>
</section>
<nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
</main>
<script>
(function () {
const slides = Array.from(document.querySelectorAll(".slide"));
const dots = Array.from(document.querySelectorAll(".dot"));
let idx = 0;
const max = slides.length - 1;
function show(next) { idx = Math.max(0, Math.min(max, next)); slides.forEach((el, i) => el.classList.toggle("active", i === idx)); dots.forEach((el, i) => el.classList.toggle("active", i === idx)); }
document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") show(idx - 1); if (event.key === "ArrowRight") show(idx + 1); });
})();
</script>
</body>
</html>
Checklist
P0
assets/template.htmlexists and opens directly from disk.example.htmlexists with realistic editorial copy and numeric values.- Frontmatter uses
od.mode: templateandod.scenario: live-artifacts. - Exactly three slides are present with working buttons, dots, and arrow navigation.
- No sandbox-hostile APIs are used (
localStorage,sessionStorage,alert,confirm,prompt,window.open).
P1
- Slide 1 has a dominant numeric headline and comparison bars.
- Slide 2 includes pill-style keyword clusters plus a large title lockup.
- Slide 3 includes eight principle cards in a 2x4 grid.
- Typography remains legible at >= 1280px width.
P2
- Interaction states are restrained and consistent across slides.
- Active dot is visible against the background.
- Color contrast stays readable for key body text.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose editorial-burgundy-principles-template for ready-made editorial HTML decks; use figma-implement-design when starting from Figma frames instead.
FAQ
Can I customize the color palette?
Template is locked to burgundy/blush/muted-gold. Fork and edit assets/template.html CSS for custom palettes.
How many slides does this support?
Designed for three-slide sequence: headline, tags+title, principle cards. Extend by modifying HTML structure.
What navigation options are available?
Prev/Next buttons, dot navigation, and keyboard controls (ArrowLeft/ArrowRight).
Is Editorial Burgundy Principles Template safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.