Html Ppt Zhangzara Biennale Yellow
- 62 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
Helps with ai & agent building tasks during AI-assisted development.
About
html-ppt-zhangzara-biennale-yellow is a Claude Code skill in the AI & Agent Building category.
- html-ppt-zhangzara-biennale-yellow
- AI & Agent Building
- AI-coding skill
Html Ppt Zhangzara Biennale Yellow by the numbers
- 62 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #6,310 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-biennale-yellowAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 62 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Helps with ai & agent building tasks during AI-assisted development.
Files
Biennale Yellow
Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients.
A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.
At a glance
- Scheme: light
- Formality: high
- Density: medium
- Slides in demo: 8
Best for
Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives. Equally good for any deck wanting Dutch-editorial atmosphere with an unmistakable single-color signature.
Avoid for
Decks that need visual punch or saturated multi-color energy — the warm-paper canvas and one-yellow palette are intentionally quiet and atmospheric.
Workflow
1. Clone `example.html` into the user's workspace as the working file. 2. Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders. 3. Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity. 4. Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels. 5. Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template. 6. Keep the navigation runtime as shipped. If the deck ships an assets/deck-stage.js or inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-biennale-yellow" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>Source & license
Vendored from upstream MIT-licensed `zarazhangrui/beautiful-html-templates`.
The full upstream MIT license text — including the original copyright notice — ships in this skill at `LICENSE` and must be redistributed alongside any copy of example.html, template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Biennale Yellow — Slide Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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=Instrument+Serif:ital@0;1&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
:root {
--paper: #E9E5DB; /* warm parchment ground */
--paper-deep: #DCD6C4; /* slightly darker for shadows */
--sun: #F1EE2E; /* signature solar yellow */
--sun-soft: #F8F39B;
--ink: #1B2566; /* deep indigo navy */
--ember: #E26B4A; /* warm peach accent */
--haze: #F0DA7C;
--line: #1B2566;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; }
body {
font-family: 'Archivo', 'Helvetica Neue', sans-serif;
color: var(--ink);
overflow: hidden;
}
/* deck wrapper — fills the viewport, centers a stage */
.deck { position: fixed; inset: 0; display: grid; place-items: center; }
.stage {
position: relative;
width: 100vw; height: 100vh;
overflow: hidden;
background: var(--paper);
}
/* one slide at a time, soft cross-fade */
.slide {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
transition: opacity 280ms ease;
}
.slide.active { opacity: 1; pointer-events: auto; }
/* Type system — kept on a small set of utility classes */
.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: 0.9; letter-spacing: -0.012em; }
.display-it { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; line-height: 1.04; letter-spacing: -0.005em; }
.micro-label { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; }
.body-text { font-family: 'Archivo', sans-serif; font-weight: 400; line-height: 1.5; }
.mono-tab { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; }
/* Page number — single, bottom-right, on every slide */
.pagenum {
position: absolute;
right: clamp(24px, 2.4vw, 48px);
bottom: clamp(22px, 2.4vh, 42px);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(11px, 0.85vw, 13px);
color: var(--ink);
letter-spacing: 0.08em;
z-index: 8;
opacity: 0.75;
}
/* Persistent navigation hint — bottom-left, single appearance */
.nav-hint {
position: fixed;
left: clamp(20px, 2vw, 36px);
bottom: clamp(16px, 2vh, 28px);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(10px, 0.75vw, 12px);
color: var(--ink);
letter-spacing: 0.08em;
opacity: 0.4;
z-index: 10;
pointer-events: none;
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 1 — COVER (poster echo)
────────────────────────────────────────────────────────────────── */
.s-cover { background: var(--paper); }
/* abstract block grid behind, gives the layered yellow feeling */
.s-cover .blocks {
position: absolute; inset: 0;
pointer-events: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
}
.s-cover .blocks div { background: transparent; }
.s-cover .blocks .b1 { background: rgba(241,238,46,0.55); grid-column: 1; grid-row: 3 / 6; }
.s-cover .blocks .b2 { background: rgba(241,238,46,0.4); grid-column: 4; grid-row: 1 / 4; }
.s-cover .blocks .b3 { background: rgba(241,238,46,0.7); grid-column: 1 / 3; grid-row: 6 / 9; }
.s-cover .blocks .b4 { background: rgba(241,238,46,0.45); grid-column: 3 / 5; grid-row: 6 / 8; }
/* central sun-bloom + corner peach edge */
.s-cover .sunglow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 42% 38% at 52% 42%, rgba(241,238,46,0.95) 0%, rgba(241,238,46,0.65) 38%, rgba(240,218,124,0.22) 65%, rgba(233,229,219,0) 88%),
radial-gradient(ellipse 28% 30% at 88% 16%, rgba(226,107,74,0.22) 0%, rgba(226,107,74,0) 70%);
}
.s-cover .date-rail {
position: absolute;
top: clamp(28px, 3.2vh, 56px);
right: clamp(40px, 4vw, 76px);
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(48px, min(5.2vw, 9vh), 96px);
color: var(--ink);
line-height: 0.96;
text-align: right;
letter-spacing: -0.005em;
z-index: 5;
}
.s-cover .titlewrap {
position: absolute;
left: clamp(40px, 4vw, 76px);
bottom: clamp(132px, 16vh, 220px);
z-index: 5;
max-width: 88%;
}
.s-cover .title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(120px, min(14.6vw, 22vh), 240px);
line-height: 0.86;
color: var(--ink);
letter-spacing: -0.018em;
}
.s-cover .title em { font-style: italic; }
.s-cover .subline {
margin-top: clamp(8px, 1vh, 18px);
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: clamp(11px, 0.85vw, 13px);
color: var(--ink);
}
.s-cover .footer-row {
position: absolute;
left: clamp(40px, 4vw, 76px);
right: clamp(40px, 4vw, 76px);
bottom: clamp(28px, 3vh, 52px);
display: grid;
grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
gap: clamp(20px, 2.4vw, 44px);
z-index: 5;
}
.s-cover .footer-row > div {
border-top: 1px solid var(--ink);
padding-top: clamp(10px, 1.2vh, 16px);
}
.s-cover .footer-row .ftag {
text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
font-size: clamp(10px, 0.72vw, 12px);
margin-bottom: 6px;
}
.s-cover .footer-row .ftxt {
font-family: 'Archivo', sans-serif;
font-size: clamp(11px, 0.78vw, 13px);
line-height: 1.45;
}
.s-cover .footer-row .fdesc {
font-family: 'Archivo', sans-serif;
font-size: clamp(11px, 0.74vw, 12px);
line-height: 1.5;
color: var(--ink);
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 2 — MANIFESTO (single italic statement, atmospheric)
────────────────────────────────────────────────────────────────── */
.s-manifesto { background: var(--paper); display: flex; align-items: center; justify-content: center; }
.s-manifesto .haze {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(241,238,46,0.7) 0%, rgba(248,243,155,0.42) 32%, rgba(240,218,124,0.18) 56%, rgba(233,229,219,0) 80%),
radial-gradient(circle 600px at 12% 88%, rgba(226,107,74,0.15) 0%, rgba(226,107,74,0) 70%);
}
.s-manifesto .quote {
position: relative; z-index: 4;
max-width: min(86%, 1480px);
padding: 0 clamp(40px, 6vw, 120px);
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(56px, min(7vw, 11vh), 120px);
line-height: 1.04;
color: var(--ink);
letter-spacing: -0.005em;
text-align: left;
}
.s-manifesto .attr {
position: absolute;
left: clamp(40px, 4vw, 76px);
bottom: clamp(56px, 6vh, 96px);
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: clamp(11px, 0.85vw, 13px);
color: var(--ink);
z-index: 4;
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 3 — PROGRAMME (split editorial spread)
────────────────────────────────────────────────────────────────── */
.s-programme { background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; }
.s-programme .left {
background: var(--sun);
position: relative;
padding: clamp(40px, 4.2vw, 80px);
display: flex; flex-direction: column; justify-content: space-between;
}
.s-programme .left .kicker {
font-family: 'Archivo', sans-serif;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
font-size: clamp(11px, 0.85vw, 14px);
color: var(--ink);
}
.s-programme .left .word {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(110px, min(11vw, 18vh), 200px);
line-height: 0.86;
color: var(--ink);
letter-spacing: -0.018em;
}
.s-programme .left .meta {
font-family: 'Archivo', sans-serif;
font-size: clamp(13px, 0.95vw, 16px);
line-height: 1.5;
max-width: 88%;
color: var(--ink);
}
.s-programme .right {
background: var(--paper);
position: relative;
padding: clamp(40px, 4.2vw, 80px) clamp(40px, 4.2vw, 80px) clamp(56px, 5vh, 88px);
display: flex; flex-direction: column; gap: clamp(18px, 2.2vh, 32px);
}
.s-programme .right .head {
font-family: 'Archivo', sans-serif;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
font-size: clamp(11px, 0.85vw, 14px);
border-bottom: 1px solid var(--ink);
padding-bottom: 14px;
}
.s-programme .strands {
display: flex; flex-direction: column;
gap: clamp(14px, 1.8vh, 22px);
}
.s-programme .strand {
display: grid;
grid-template-columns: 56px 1fr;
gap: clamp(14px, 1.4vw, 24px);
border-bottom: 1px solid rgba(27,37,102,0.18);
padding-bottom: clamp(12px, 1.6vh, 22px);
}
.s-programme .strand .num {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(28px, 2vw, 38px);
color: var(--ink);
line-height: 1;
}
.s-programme .strand h3 {
margin: 0 0 4px 0;
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
font-size: clamp(22px, 1.7vw, 32px);
line-height: 1.1;
color: var(--ink);
}
.s-programme .strand p {
margin: 0;
font-family: 'Archivo', sans-serif;
font-size: clamp(14px, 0.95vw, 15px);
line-height: 1.5;
color: var(--ink);
max-width: 92%;
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 4 — CHAPTER DIVIDER (huge serif numeral)
────────────────────────────────────────────────────────────────── */
.s-chapter { background: var(--paper); }
.s-chapter .glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle 720px at -10% -10%, rgba(241,238,46,0.7) 0%, rgba(241,238,46,0) 65%),
radial-gradient(circle 540px at 110% 110%, rgba(226,107,74,0.18) 0%, rgba(226,107,74,0) 70%);
}
.s-chapter .vrail {
position: absolute;
left: clamp(40px, 4vw, 76px);
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: 0 50%;
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.32em;
font-size: clamp(11px, 0.85vw, 13px);
color: var(--ink);
white-space: nowrap;
z-index: 4;
}
.s-chapter .stack {
position: absolute;
left: clamp(120px, 12vw, 220px);
top: clamp(40px, 5vh, 96px);
bottom: clamp(80px, 9vh, 130px);
right: clamp(40px, 4vw, 76px);
display: flex; flex-direction: column; justify-content: center;
z-index: 4;
}
.s-chapter .nm {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(220px, min(28vw, 64vh), 720px);
line-height: 0.84;
color: var(--ink);
letter-spacing: -0.04em;
}
.s-chapter .ttl {
margin-top: clamp(12px, 1.6vh, 28px);
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: clamp(40px, min(4.4vw, 7vh), 90px);
line-height: 1.05;
color: var(--ink);
max-width: 78%;
}
.s-chapter .lede {
margin-top: clamp(18px, 2.2vh, 36px);
font-family: 'Archivo', sans-serif;
font-size: clamp(15px, 1.05vw, 18px);
line-height: 1.55;
color: var(--ink);
max-width: 56ch;
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 5 — DATA: ATTENDANCE BARS
────────────────────────────────────────────────────────────────── */
.s-data { background: var(--paper); }
.s-data .glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 50% 40% at 92% 8%, rgba(241,238,46,0.55) 0%, rgba(241,238,46,0) 70%);
}
.s-data .frame {
position: absolute; inset: clamp(40px, 4vw, 76px) clamp(40px, 4vw, 76px) clamp(70px, 7vh, 120px);
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto 1fr;
gap: clamp(20px, 2.5vw, 48px);
z-index: 4;
}
.s-data .head { grid-column: 1 / 3; display: flex; align-items: end; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--ink); padding-bottom: clamp(14px, 1.6vh, 24px); }
.s-data .head .lab { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 0.85vw, 13px); color: var(--ink); }
.s-data .head .h { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(32px, min(3.6vw, 6vh), 56px); line-height: 1; color: var(--ink); }
.s-data .col-a { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2vh, 32px); }
.s-data .stat { display: flex; flex-direction: column; gap: 4px; }
.s-data .stat .v { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(72px, min(7vw, 12vh), 144px); line-height: 0.92; color: var(--ink); letter-spacing: -0.01em; }
.s-data .stat .v sup { font-size: 0.42em; vertical-align: super; opacity: 0.7; font-style: italic; }
.s-data .stat .lab2 { font-family: 'Archivo', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(11px, 0.8vw, 13px); color: var(--ink); }
.s-data .stat .desc { font-family: 'Archivo', sans-serif; font-size: clamp(14px, 0.95vw, 15px); line-height: 1.45; color: var(--ink); max-width: 32ch; margin-top: 4px; }
.s-data .chart { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 14px); justify-content: center; }
.s-data .row { display: grid; grid-template-columns: 64px 1fr 80px; align-items: center; gap: clamp(12px, 1vw, 22px); }
.s-data .row .yr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.85vw, 14px); color: var(--ink); letter-spacing: 0.04em; }
.s-data .row .val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.85vw, 14px); color: var(--ink); text-align: right; letter-spacing: 0.02em; }
.s-data .bar { height: clamp(14px, 1.6vh, 22px); background: var(--ink); position: relative; }
.s-data .bar.lit { background: var(--sun); border: 1px solid var(--ink); }
/* ──────────────────────────────────────────────────────────────────
SLIDE 6 — QUOTE SPREAD
────────────────────────────────────────────────────────────────── */
.s-quote { background: var(--paper); }
.s-quote .yblock {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 32%;
background: var(--sun);
}
.s-quote .glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle 600px at 8% 92%, rgba(241,238,46,0.4) 0%, rgba(241,238,46,0) 70%);
}
.s-quote .qwrap {
position: absolute;
left: clamp(40px, 4vw, 76px);
right: 36%;
top: 50%;
transform: translateY(-50%);
z-index: 4;
}
.s-quote .qkicker {
font-family: 'Archivo', sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: clamp(11px, 0.82vw, 13px);
color: var(--ink);
margin-bottom: clamp(14px, 1.8vh, 26px);
}
.s-quote .qbody {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: clamp(40px, min(4.6vw, 7vh), 88px);
line-height: 1.06;
color: var(--ink);
letter-spacing: -0.005em;
}
.s-quote .qattr {
margin-top: clamp(20px, 2.4vh, 36px);
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(14px, 1.4vw, 24px);
align-items: end;
border-top: 1px solid var(--ink);
padding-top: clamp(10px, 1.4vh, 18px);
}
.s-quote .qattr .who { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px, 0.85vw, 13px); color: var(--ink); }
.s-quote .qattr .role { font-family: 'Archivo', sans-serif; font-size: clamp(11px, 0.78vw, 13px); color: var(--ink); opacity: 0.75; }
.s-quote .y-mark {
position: absolute;
right: clamp(40px, 4vw, 76px);
bottom: clamp(70px, 8vh, 130px);
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(120px, min(15vw, 22vh), 280px);
line-height: 0.9;
color: var(--ink);
letter-spacing: -0.04em;
z-index: 4;
}
/* ──────────────────────────────────────────────────────────────────
SLIDE 7 — CALENDAR (dense tabular)
────────────────────────────────────────────────────────────────── */
.s-cal { background: var(--paper); }
.s-cal .glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle 700px at 105% 0%, rgba(241,238,46,0.45) 0%, rgba(241,238,46,0) 65%);
}
.s-cal .frame {
position: absolute;
inset: clamp(40px, 4vw, 76px) clamp(40px, 4vw, 76px) clamp(70px, 7vh, 120px);
display: flex; flex-direction: column;
z-index: 4;
}
.s-cal .frame .topbar {
display: flex; align-items: end; justify-content: space-between;
border-bottom: 1px solid var(--ink);
padding-bottom: clamp(12px, 1.4vh, 22px);
margin-bottom: clamp(16px, 1.8vh, 26px);
}
.s-cal .frame .topbar .h {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(40px, min(4.4vw, 7vh), 80px);
line-height: 1;
color: var(--ink);
}
.s-cal .frame .topbar .lab { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 0.82vw, 13px); color: var(--ink); }
.s-cal .ledger { flex: 1; display: flex; flex-direction: column; gap: 0; }
.s-cal .row {
display: grid;
grid-template-columns: 92px 1.6fr 0.9fr 80px;
gap: clamp(14px, 1.4vw, 28px);
align-items: center;
padding: clamp(10px, 1.3vh, 18px) 0;
border-bottom: 1px solid rgba(27,37,102,0.2);
}
.s-cal .row .date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(13px, 0.95vw, 16px); color: var(--ink); letter-spacing: 0.02em; }
.s-cal .row .ttl { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.15; color: var(--ink); }
.s-cal .row .ttl em { font-style: italic; }
.s-cal .row .ven { font-family: 'Archivo', sans-serif; font-size: clamp(14px, 0.92vw, 15px); color: var(--ink); }
.s-cal .row .dur { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.84vw, 14px); color: var(--ink); text-align: right; letter-spacing: 0.04em; opacity: 0.78; }
.s-cal .row.headrow { border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.s-cal .row.headrow > div { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(10px, 0.7vw, 12px); color: var(--ink); }
/* ──────────────────────────────────────────────────────────────────
SLIDE 8 — COLOPHON (mirror of cover, inverted)
────────────────────────────────────────────────────────────────── */
.s-colophon { background: var(--paper); }
.s-colophon .glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 55% 50% at 50% 110%, rgba(241,238,46,0.85) 0%, rgba(241,238,46,0.5) 35%, rgba(240,218,124,0.18) 60%, rgba(233,229,219,0) 84%),
radial-gradient(ellipse 30% 30% at 12% 18%, rgba(226,107,74,0.18) 0%, rgba(226,107,74,0) 70%);
}
.s-colophon .blocks {
position: absolute; inset: 0;
pointer-events: none;
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(8, 1fr);
}
.s-colophon .blocks .b1 { background: rgba(241,238,46,0.55); grid-column: 1 / 3; grid-row: 1 / 3; }
.s-colophon .blocks .b2 { background: rgba(241,238,46,0.4); grid-column: 4; grid-row: 5 / 8; }
.s-colophon .titlewrap {
position: absolute;
left: clamp(40px, 4vw, 76px);
top: clamp(36px, 4vh, 72px);
z-index: 5;
max-width: 92%;
}
.s-colophon .ktag {
font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.22em; font-size: clamp(11px, 0.82vw, 13px); color: var(--ink); margin-bottom: clamp(12px, 1.4vh, 22px);
}
.s-colophon .ttl {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(80px, min(10vw, 16vh), 200px);
line-height: 0.86;
color: var(--ink);
letter-spacing: -0.018em;
}
.s-colophon .ttl em { font-style: italic; }
.s-colophon .colofo {
position: absolute;
left: clamp(40px, 4vw, 76px);
bottom: clamp(70px, 8vh, 120px);
right: clamp(40px, 4vw, 76px);
display: grid;
grid-template-columns: 1.2fr 1.1fr 1fr 1.4fr;
gap: clamp(20px, 2.4vw, 44px);
z-index: 5;
}
.s-colophon .colofo > div {
border-top: 1px solid var(--ink);
padding-top: clamp(10px, 1.2vh, 16px);
}
.s-colophon .colofo .ftag { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: clamp(10px, 0.72vw, 12px); margin-bottom: 6px; color: var(--ink); }
.s-colophon .colofo .ftxt { font-family: 'Archivo', sans-serif; font-size: clamp(11px, 0.78vw, 13px); line-height: 1.5; color: var(--ink); }
</style>
</head>
<body>
<div class="deck">
<div class="stage">
<!-- 1. COVER ──────────────────────────────────────────────────── -->
<section class="slide s-cover active">
<div class="blocks" aria-hidden="true">
<div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div>
</div>
<div class="sunglow" aria-hidden="true"></div>
<div class="date-rail">02.05—<br/>11.10.2026</div>
<div class="titlewrap">
<h1 class="title">Aurora<br/><em>Programme</em></h1>
<div class="caption subline">Annual Survey · Issue No. 04</div>
</div>
<div class="footer-row">
<div>
<div class="caption ftag">Hosted by</div>
<div class="caption ftxt">Aurora Institute<br/>for Public Form</div>
</div>
<div>
<div class="caption ftag">Edition</div>
<div class="caption ftxt">Fourth annual<br/>open programme</div>
</div>
<div>
<div class="caption ftag">Reading</div>
<div class="caption ftxt">A field study of light,<br/>matter and atmosphere</div>
</div>
<div>
<div class="caption ftag">Notes</div>
<div class="caption fdesc">Six months of exhibitions, residencies and public lectures across three pavilions, mapped against a slow-changing palette of yellow.</div>
</div>
</div>
<div class="pagenum">01 / 08</div>
</section>
<!-- 2. MANIFESTO ──────────────────────────────────────────────── -->
<section class="slide s-manifesto">
<div class="haze" aria-hidden="true"></div>
<p class="quote">A room is a slow argument with the sun. We have spent four years listening for what it answers.</p>
<div class="attr">From the Aurora Charter, 2023</div>
<div class="pagenum">02 / 08</div>
</section>
<!-- 3. PROGRAMME ──────────────────────────────────────────────── -->
<section class="slide s-programme">
<div class="left">
<div class="kicker">Strands · 2026</div>
<div>
<div class="word">Programme</div>
</div>
<div class="meta">Six interlocking strands run across the year. Each is independently curated, but every strand answers to the same question: what does light know that we don't?</div>
</div>
<div class="right">
<div class="head caption">Strand · Title · Anchor</div>
<div class="strands">
<div class="strand">
<div class="num">01</div>
<div>
<h3>Slow Atmospheres</h3>
<p>A reading room of long-form essays, drawings and weather notebooks, organised around the changing yellow of late afternoon.</p>
</div>
</div>
<div class="strand">
<div class="num">02</div>
<div>
<h3>Public Form</h3>
<p>Three commissions in three pavilions, each examining how a public square wears its own light over the course of a season.</p>
</div>
</div>
<div class="strand">
<div class="num">03</div>
<div>
<h3>Field Notes</h3>
<p>A residency programme drawing artists, architects and meteorologists together for a hundred days of recording, drawing and arguing.</p>
</div>
</div>
<div class="strand">
<div class="num">04</div>
<div>
<h3>Quiet Editions</h3>
<p>A typographic publishing strand committed to printing only what asks to be read in daylight, on warm paper, slowly.</p>
</div>
</div>
<div class="strand">
<div class="num">05</div>
<div>
<h3>Open Conversations</h3>
<p>Twelve evenings of public talks, paired with a meal and a question: what is the weather like in your work?</p>
</div>
</div>
</div>
</div>
<div class="pagenum">03 / 08</div>
</section>
<!-- 4. CHAPTER DIVIDER ────────────────────────────────────────── -->
<section class="slide s-chapter">
<div class="glow" aria-hidden="true"></div>
<div class="caption vrail">First Chapter — Slow Atmospheres</div>
<div class="stack">
<div class="nm">01</div>
<div class="ttl">A reading of the season's quietest hours</div>
<p class="lede">In its first chapter the Aurora Programme convenes around the slowest light of the year: the long minutes after the sun has gone but before the room has admitted it. We open the year in March, in three rooms, in three cities, with three lamps left burning past closing.</p>
</div>
<div class="pagenum">04 / 08</div>
</section>
<!-- 5. DATA ──────────────────────────────────────────────────── -->
<section class="slide s-data">
<div class="glow" aria-hidden="true"></div>
<div class="frame">
<div class="head">
<div class="h">Public attendance</div>
<div class="caption lab">Open programme · 2022—2026</div>
</div>
<div class="col-a">
<div class="stat">
<div class="v">182<sup>k</sup></div>
<div class="caption lab2">Visitors · Year four</div>
<div class="desc">A 2.4× rise on the inaugural year, drawn from a programme that grew slower than the audience.</div>
</div>
<div class="stat">
<div class="v">7<sup>4%</sup></div>
<div class="caption lab2">Returning audience</div>
<div class="desc">Three quarters of last year's visitors came back; nearly half came back twice.</div>
</div>
</div>
<div class="chart">
<div class="row"><div class="caption yr">2022</div><div class="bar" style="width: 32%"></div><div class="caption val">76,400</div></div>
<div class="row"><div class="caption yr">2023</div><div class="bar" style="width: 48%"></div><div class="caption val">112,800</div></div>
<div class="row"><div class="caption yr">2024</div><div class="bar" style="width: 62%"></div><div class="caption val">141,200</div></div>
<div class="row"><div class="caption yr">2025</div><div class="bar" style="width: 72%"></div><div class="caption val">164,900</div></div>
<div class="row"><div class="caption yr">2026</div><div class="bar lit" style="width: 86%"></div><div class="caption val">182,300</div></div>
</div>
</div>
<div class="pagenum">05 / 08</div>
</section>
<!-- 6. QUOTE ──────────────────────────────────────────────────── -->
<section class="slide s-quote">
<div class="yblock" aria-hidden="true"></div>
<div class="glow" aria-hidden="true"></div>
<div class="qwrap">
<div class="caption qkicker">A note from the curator</div>
<p class="qbody">The yellow we use is not the yellow we mean. It is the yellow that arrives ten minutes after we leave the building.</p>
<div class="qattr">
<div class="caption who">Idun Reijners</div>
<div class="caption role">Curator-at-large, Aurora Institute · letter to the editorial board, January 2026</div>
</div>
</div>
<div class="y-mark" aria-hidden="true">¨</div>
<div class="pagenum">06 / 08</div>
</section>
<!-- 7. CALENDAR ──────────────────────────────────────────────── -->
<section class="slide s-cal">
<div class="glow" aria-hidden="true"></div>
<div class="frame">
<div class="topbar">
<div class="h">Public calendar</div>
<div class="caption lab">Selected dates · May—October</div>
</div>
<div class="ledger">
<div class="row headrow"><div class="caption">Date</div><div class="caption">Title</div><div class="caption">Venue</div><div class="caption">Length</div></div>
<div class="row">
<div class="caption date">02.05</div>
<div class="ttl"><em>The Long Yellow</em>, opening lecture</div>
<div class="ven">Pavilion of Quiet Form, Rotterdam</div>
<div class="caption dur">90 min</div>
</div>
<div class="row">
<div class="caption date">17.05</div>
<div class="ttl">A walk through the season's first room</div>
<div class="ven">Reading Garden, Pavilion North</div>
<div class="caption dur">2 hr</div>
</div>
<div class="row">
<div class="caption date">06.06</div>
<div class="ttl"><em>Public Form 01</em> — opening</div>
<div class="ven">Square of the Slow Sun, Antwerp</div>
<div class="caption dur">All day</div>
</div>
<div class="row">
<div class="caption date">28.06</div>
<div class="ttl">Field Notes residency, week one supper</div>
<div class="ven">House of the Half Window</div>
<div class="caption dur">3 hr</div>
</div>
<div class="row">
<div class="caption date">19.07</div>
<div class="ttl"><em>A Letter to the Sun</em>, evening reading</div>
<div class="ven">Aurora Library, room 3</div>
<div class="caption dur">75 min</div>
</div>
<div class="row">
<div class="caption date">14.08</div>
<div class="ttl">Quiet Editions — print fair & book launch</div>
<div class="ven">Type Garden, Pavilion South</div>
<div class="caption dur">2 days</div>
</div>
<div class="row">
<div class="caption date">22.09</div>
<div class="ttl">Open Conversations · meteorology & drawing</div>
<div class="ven">Reading Room, ground floor</div>
<div class="caption dur">2 hr</div>
</div>
<div class="row">
<div class="caption date">11.10</div>
<div class="ttl"><em>The Last Window</em>, closing performance</div>
<div class="ven">Pavilion of Quiet Form, Rotterdam</div>
<div class="caption dur">60 min</div>
</div>
</div>
</div>
<div class="pagenum">07 / 08</div>
</section>
<!-- 8. COLOPHON ──────────────────────────────────────────────── -->
<section class="slide s-colophon">
<div class="blocks" aria-hidden="true">
<div class="b1"></div><div class="b2"></div>
</div>
<div class="glow" aria-hidden="true"></div>
<div class="titlewrap">
<div class="caption ktag">Colophon · Programme 04</div>
<h2 class="ttl">With thanks<br/>to the slow<br/><em>readers.</em></h2>
</div>
<div class="colofo">
<div>
<div class="caption ftag">Curated by</div>
<div class="caption ftxt">Idun Reijners<br/>with the editorial board</div>
</div>
<div>
<div class="caption ftag">Designed</div>
<div class="caption ftxt">In daylight, on warm paper,<br/>over fourteen weeks</div>
</div>
<div>
<div class="caption ftag">Hosts</div>
<div class="caption ftxt">Aurora Institute<br/>Pavilion of Quiet Form<br/>Reading Garden</div>
</div>
<div>
<div class="caption ftag">Until next year</div>
<div class="caption ftxt">The fifth programme opens in May 2027. Look for the yellow on the door.</div>
</div>
</div>
<div class="pagenum">08 / 08</div>
</section>
</div>
</div>
<div class="caption nav-hint">← / → · space</div>
<script>
// Plain vanilla navigation: arrows, space, home/end, swipe.
// Show only the active slide via class toggle.
const slides = Array.from(document.querySelectorAll('.slide'));
let current = 0;
function show(i) {
if (i < 0) i = 0;
if (i > slides.length - 1) i = slides.length - 1;
slides[current].classList.remove('active');
slides[i].classList.add('active');
current = i;
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); show(current - 1); }
else if (e.key === 'Home') { e.preventDefault(); show(0); }
else if (e.key === 'End') { e.preventDefault(); show(slides.length - 1); }
});
// Touch swipe — basic horizontal recogniser
let tx = null;
document.addEventListener('touchstart', (e) => { tx = e.touches[0].clientX; }, { passive: true });
document.addEventListener('touchend', (e) => {
if (tx == null) return;
const dx = e.changedTouches[0].clientX - tx;
if (Math.abs(dx) > 40) show(current + (dx < 0 ? 1 : -1));
tx = null;
});
</script>
</body>
</html>
MIT License
Copyright (c) 2026 Zara Zhang
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
{
"slug": "zhangzara-biennale-yellow",
"name": "Biennale Yellow",
"tagline": "Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients.",
"mood": [
"editorial",
"atmospheric",
"warm",
"cultural-institution",
"poster-like"
],
"occasion": [
"exhibition or biennale",
"arts institution programme",
"design or typography conference",
"literary or curatorial publication",
"studio annual report",
"museum season announcement"
],
"tone": [
"literary",
"considered",
"contemplative",
"warm-modern",
"Dutch-editorial"
],
"formality": "high",
"density": "medium",
"palette": {
"paper": "#E9E5DB",
"ink": "#1B2566",
"sun": "#F1EE2E",
"ember": "#E26B4A",
"haze": "#F0DA7C",
"description": "warm parchment ground with a signature solar-yellow accent, deep indigo navy ink, and a soft peach/ember edge that bleeds out of corner gradients"
},
"typography": {
"display": "Instrument Serif",
"body": "Archivo",
"mono": "JetBrains Mono",
"style": "transitional Didone-flavored display serif paired with a clean grotesk sans for micro-typography and a mono for tabular data"
},
"scheme": "light",
"best_for": "Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives. Equally good for any deck wanting Dutch-editorial atmosphere with an unmistakable single-color signature.",
"avoid_for": "Decks that need visual punch or saturated multi-color energy — the warm-paper canvas and one-yellow palette are intentionally quiet and atmospheric.",
"slide_count": 8,
"navigation": "vanilla JS (arrow keys, space, Home/End, touch swipe)",
"source": "https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/biennale-yellow"
}
Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10AI & Agent Buildingagents