Html Ppt Zhangzara Cartesian
- 58 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-cartesian is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.
- html-ppt-zhangzara-cartesian
- AI & Agent Building
- AI-coding skill
Html Ppt Zhangzara Cartesian by the numbers
- 58 all-time installs (skills.sh)
- Ranked #6,589 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-cartesianAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 58 |
|---|---|
| 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
Cartesian
Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.
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: low
- Slides in demo: 10
Best for
Anything that should feel quiet, considered, and grown-up: investment theses, white papers, advisory work, longform research, gallery / cultural decks. Also a strong choice for editorial features, founder reflections, or any deck where restraint is the message — including across tech and finance.
Avoid for
Decks that need visual heat, multiple accents, or a sense of urgency — the warm-neutral palette is intentionally low-energy.
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-cartesian" 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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cartesian Presentation Template</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #ede8e0;
--bg-secondary: #e2dbd1;
--text-primary: #1a1a1a;
--text-secondary: #5a5a5a;
--accent: #8a8178;
--line: #b8b0a4;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
overflow: hidden;
}
.presentation {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
display: flex;
flex-direction: column;
padding: 4vh 4vw;
background: var(--bg-primary);
overflow: hidden;
}
.slide.active {
opacity: 1;
visibility: visible;
}
/* Geometric decorations */
.geo-lines {
position: absolute;
top: 0;
right: 0;
width: 45vw;
height: 45vh;
pointer-events: none;
z-index: 0;
}
.geo-circle {
position: absolute;
border: 1px solid var(--line);
border-radius: 50%;
opacity: 0.5;
}
.geo-arc {
position: absolute;
border: 1px dashed var(--line);
border-radius: 50%;
opacity: 0.3;
}
/* Navigation */
.nav-dots {
position: fixed;
right: 2vw;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
z-index: 100;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line);
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active {
background: var(--text-primary);
transform: scale(1.3);
}
.slide-counter {
position: fixed;
bottom: 3vh;
right: 3vw;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
color: var(--accent);
letter-spacing: 2px;
z-index: 100;
}
.nav-arrows {
position: fixed;
bottom: 3vh;
left: 3vw;
display: flex;
gap: 16px;
z-index: 100;
}
.nav-arrow {
width: 40px;
height: 40px;
border: 1px solid var(--line);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--text-primary);
transition: all 0.3s ease;
}
.nav-arrow:hover {
background: var(--text-primary);
color: var(--bg-primary);
}
/* Typography */
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 400;
line-height: 1.1;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 3rem);
}
h3 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
}
p, li {
font-family: 'Inter', sans-serif;
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
line-height: 1.6;
color: var(--text-secondary);
}
.label {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--accent);
font-weight: 500;
}
/* Slide 1: Title */
.slide-title {
justify-content: center;
}
.slide-title .content {
position: relative;
z-index: 1;
max-width: 65vw;
}
.slide-title .label {
margin-bottom: 3vh;
}
.slide-title h1 {
font-size: clamp(3rem, 6vw, 5.5rem);
margin-bottom: 2vh;
}
.slide-title .subtitle {
font-family: 'Inter', sans-serif;
font-size: clamp(1rem, 1.5vw, 1.3rem);
color: var(--text-secondary);
max-width: 40vw;
}
/* All geo-decoration instances are decorative overlays, not flex
items — they must be absolutely positioned in their slide. The
slide-statement instance uses inline left/top/width/height to
override the defaults below. */
.geo-decoration {
position: absolute;
border: 1px solid var(--line);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.slide-title .geo-decoration {
right: 5vw;
bottom: 10vh;
width: 30vw;
height: 30vw;
opacity: 0.4;
}
.slide-title .geo-decoration::before {
content: '';
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 1px dashed var(--line);
border-radius: 50%;
}
/* Slide 2: Agenda */
.slide-agenda .content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6vw;
align-items: center;
height: 100%;
position: relative;
z-index: 1;
}
.slide-agenda .left-col h2 {
margin-bottom: 3vh;
}
.slide-agenda .left-col p {
max-width: 30vw;
}
.slide-agenda .agenda-list {
list-style: none;
}
.slide-agenda .agenda-list li {
padding: 2vh 0;
border-bottom: 1px solid var(--line);
display: flex;
align-items: baseline;
gap: 2vw;
}
.slide-agenda .agenda-number {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--accent);
min-width: 3vw;
}
/* Slide 3: Statement */
.slide-statement {
justify-content: center;
align-items: center;
text-align: center;
}
.slide-statement .content {
max-width: 60vw;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.slide-statement .quote-mark {
font-family: 'Playfair Display', serif;
font-size: 5rem;
line-height: 1;
color: var(--line);
opacity: 0.5;
display: block;
margin-bottom: 2vh;
}
.slide-statement h2 {
font-style: italic;
margin-bottom: 3vh;
}
.slide-statement .attribution {
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
}
/* Slide 4: Bar Chart */
.slide-barchart .content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 5vw;
align-items: center;
height: 100%;
position: relative;
z-index: 1;
}
.slide-barchart .left-col h2 {
margin-bottom: 2vh;
}
.slide-barchart .chart-container {
position: relative;
height: 55vh;
width: 100%;
}
/* Slide 5: Two Column */
.slide-twocol .content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5vw;
align-items: center;
height: 100%;
position: relative;
z-index: 1;
}
.slide-twocol .image-placeholder {
width: 100%;
height: 60vh;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.slide-twocol .image-placeholder::before {
content: '';
position: absolute;
width: 150%;
height: 1px;
background: var(--line);
transform: rotate(-30deg);
}
.slide-twocol .image-placeholder::after {
content: '';
position: absolute;
width: 150%;
height: 1px;
background: var(--line);
transform: rotate(30deg);
}
.slide-twocol .image-label {
position: relative;
z-index: 1;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent);
}
.slide-twocol .right-col h2 {
margin-bottom: 2vh;
}
.slide-twocol .right-col p {
margin-bottom: 2vh;
}
.slide-twocol .stats {
display: flex;
gap: 3vw;
margin-top: 4vh;
padding-top: 3vh;
border-top: 1px solid var(--line);
}
.slide-twocol .stat-item h4 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
margin-bottom: 0.5vh;
}
.slide-twocol .stat-item span {
font-size: 0.8rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Slide 6: Three Cards */
.slide-cards {
justify-content: center;
}
.slide-cards .content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.slide-cards .header {
text-align: center;
margin-bottom: 6vh;
}
.slide-cards .header h2 {
margin-bottom: 1vh;
}
.slide-cards .cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3vw;
}
.slide-cards .card {
border: 1px solid var(--line);
padding: 4vh 2vw;
background: rgba(255,255,255,0.3);
}
.slide-cards .card-icon {
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3vh;
font-size: 1rem;
color: var(--accent);
}
.slide-cards .card h3 {
margin-bottom: 2vh;
font-size: 1.3rem;
}
.slide-cards .card p {
font-size: 0.9rem;
}
/* Slide 7: Line Chart */
.slide-linechart .content {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
z-index: 1;
}
.slide-linechart .header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4vh;
}
.slide-linechart .chart-wrapper {
flex: 1;
position: relative;
min-height: 0;
}
.slide-linechart .chart-wrapper canvas {
max-height: 100%;
}
/* Slide 8: Timeline */
.slide-timeline .content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
z-index: 1;
}
.slide-timeline .header {
margin-bottom: 6vh;
}
.slide-timeline .timeline {
display: flex;
justify-content: space-between;
position: relative;
padding-top: 3vh;
}
.slide-timeline .timeline::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line);
}
.slide-timeline .timeline-item {
flex: 1;
padding-right: 3vw;
position: relative;
}
/* Phase markers removed — the labels alone provide enough structure
and the small circles were colliding with the start of each label. */
.slide-timeline .timeline-item::before {
content: none;
}
.slide-timeline .timeline-item h4 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
margin-bottom: 1vh;
margin-top: 2vh;
}
.slide-timeline .timeline-item .year {
font-size: 0.75rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1vh;
}
.slide-timeline .timeline-item p {
font-size: 0.85rem;
}
/* Slide 9: Team */
.slide-team .content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
z-index: 1;
}
.slide-team .header {
text-align: center;
margin-bottom: 6vh;
}
.slide-team .team-grid {
display: flex;
justify-content: center;
gap: 4vw;
}
.slide-team .team-member {
text-align: center;
}
.slide-team .member-photo {
width: 12vw;
height: 12vw;
border-radius: 50%;
background: var(--bg-secondary);
margin: 0 auto 2vh;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--accent);
}
.slide-team .team-member h4 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
margin-bottom: 0.5vh;
}
.slide-team .team-member span {
font-size: 0.8rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Slide 10: Closing */
.slide-closing {
justify-content: center;
align-items: center;
text-align: center;
}
.slide-closing .content {
position: relative;
z-index: 1;
}
.slide-closing h1 {
margin-bottom: 3vh;
}
.slide-closing p {
margin-bottom: 4vh;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.9rem;
}
.slide-closing .geo-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50vw;
height: 50vw;
border: 1px solid var(--line);
border-radius: 50%;
opacity: 0.3;
z-index: 0;
}
.slide-closing .geo-ring::before {
content: '';
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
border: 1px dashed var(--line);
border-radius: 50%;
}
/* Vertical line decoration */
.vertical-line {
position: absolute;
left: 8vw;
top: 0;
width: 1px;
height: 100%;
background: var(--line);
opacity: 0.3;
z-index: 0;
}
/* Horizontal accent */
.horizontal-accent {
position: absolute;
bottom: 15vh;
left: 0;
width: 20vw;
height: 1px;
background: var(--text-primary);
z-index: 0;
}
@media (max-aspect-ratio: 4/3) {
.slide-agenda .content,
.slide-barchart .content,
.slide-twocol .content {
grid-template-columns: 1fr;
gap: 3vh;
}
.slide-cards .cards-grid {
grid-template-columns: 1fr;
}
.slide-timeline .timeline {
flex-direction: column;
gap: 3vh;
}
.slide-timeline .timeline::before {
display: none;
}
.slide-team .team-grid {
flex-direction: column;
gap: 3vh;
}
}
</style>
</head>
<body>
<div class="presentation">
<!-- Slide 1: Title -->
<div class="slide slide-title active">
<div class="geo-decoration"></div>
<div class="content">
<div class="label">Presentation Template</div>
<h1>Cartesian</h1>
<p class="subtitle">A minimalist framework for strategic narratives. Clean geometry meets editorial refinement.</p>
</div>
</div>
<!-- Slide 2: Agenda -->
<div class="slide slide-agenda">
<div class="content">
<div class="left-col">
<div class="label">Overview</div>
<h2>Session Agenda</h2>
<p>An outline of key discussion points structured to guide our strategic conversation forward.</p>
</div>
<div class="right-col">
<ul class="agenda-list">
<li><span class="agenda-number">01</span> Market Position Analysis</li>
<li><span class="agenda-number">02</span> Core Value Proposition</li>
<li><span class="agenda-number">03</span> Growth Trajectory</li>
<li><span class="agenda-number">04</span> Implementation Roadmap</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Statement -->
<div class="slide slide-statement">
<div class="content">
<span class="quote-mark">"</span>
<h2>Precision in approach defines the boundary between noise and signal.</h2>
<div class="attribution">Guiding Principle</div>
</div>
<div class="geo-decoration" style="left: -10vw; top: 10vh; width: 40vw; height: 40vw; opacity: 0.2;"></div>
</div>
<!-- Slide 4: Bar Chart -->
<div class="slide slide-barchart">
<div class="content">
<div class="left-col">
<div class="label">Performance Data</div>
<h2>Quarterly Metrics</h2>
<p>Comparative analysis across key business indicators demonstrating sustained momentum and operational efficiency.</p>
</div>
<div class="right-col">
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Slide 5: Two Column -->
<div class="slide slide-twocol">
<div class="content">
<div class="left-col">
<div class="image-placeholder">
<span class="image-label">Visual Reference</span>
</div>
</div>
<div class="right-col">
<div class="label">Case Study</div>
<h2>Structural Overview</h2>
<p>A comprehensive examination of foundational elements that define our operational framework and strategic positioning within the market landscape.</p>
<p>Through iterative refinement and measured adaptation, the methodology ensures alignment with evolving objectives and stakeholder expectations.</p>
<div class="stats">
<div class="stat-item">
<h4>47%</h4>
<span>Efficiency Gain</span>
</div>
<div class="stat-item">
<h4>12x</h4>
<span>Scale Factor</span>
</div>
<div class="stat-item">
<h4>3.2M</h4>
<span>Revenue Impact</span>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 6: Three Cards -->
<div class="slide slide-cards">
<div class="content">
<div class="header">
<div class="label">Capabilities</div>
<h2>Core Competencies</h2>
</div>
<div class="cards-grid">
<div class="card">
<div class="card-icon">I</div>
<h3>Analytical Depth</h3>
<p>Rigorous data-driven methodologies that transform raw information into actionable strategic intelligence.</p>
</div>
<div class="card">
<div class="card-icon">II</div>
<h3>Operational Scale</h3>
<p>Streamlined processes designed to expand seamlessly while maintaining quality and consistency.</p>
</div>
<div class="card">
<div class="card-icon">III</div>
<h3>Adaptive Design</h3>
<p>Flexible frameworks that evolve with changing conditions and emerging opportunities.</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Line Chart -->
<div class="slide slide-linechart">
<div class="content">
<div class="header">
<div>
<div class="label">Trend Analysis</div>
<h2>Growth Projection</h2>
</div>
<p style="max-width: 25vw; text-align: right;">Multi-year trajectory illustrating compound growth patterns and market penetration metrics.</p>
</div>
<div class="chart-wrapper">
<canvas id="lineChart"></canvas>
</div>
</div>
</div>
<!-- Slide 8: Timeline -->
<div class="slide slide-timeline">
<div class="content">
<div class="header">
<div class="label">Roadmap</div>
<h2>Implementation Phases</h2>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="year">Phase One</div>
<h4>Discovery</h4>
<p>Initial assessment and comprehensive audit of existing systems and processes.</p>
</div>
<div class="timeline-item">
<div class="year">Phase Two</div>
<h4>Strategy</h4>
<p>Development of tailored frameworks aligned with organizational objectives.</p>
</div>
<div class="timeline-item">
<div class="year">Phase Three</div>
<h4>Execution</h4>
<p>Phased rollout with continuous monitoring and iterative optimization.</p>
</div>
<div class="timeline-item">
<div class="year">Phase Four</div>
<h4>Scale</h4>
<p>Expansion of proven methodologies across all operational units.</p>
</div>
</div>
</div>
</div>
<!-- Slide 9: Team -->
<div class="slide slide-team">
<div class="content">
<div class="header">
<div class="label">Leadership</div>
<h2>Key Contributors</h2>
</div>
<div class="team-grid">
<div class="team-member">
<div class="member-photo">A</div>
<h4>Alex Morgan</h4>
<span>Strategy Director</span>
</div>
<div class="team-member">
<div class="member-photo">J</div>
<h4>Jordan Lee</h4>
<span>Operations Lead</span>
</div>
<div class="team-member">
<div class="member-photo">S</div>
<h4>Sam Taylor</h4>
<span>Research Head</span>
</div>
<div class="team-member">
<div class="member-photo">R</div>
<h4>Reese Park</h4>
<span>Design Principal</span>
</div>
</div>
</div>
</div>
<!-- Slide 10: Closing -->
<div class="slide slide-closing">
<div class="geo-ring"></div>
<div class="content">
<div class="label">Conclusion</div>
<h1>Thank You</h1>
<p>Questions & Discussion</p>
<div style="margin-top: 4vh; font-size: 0.85rem; color: var(--accent);">
contact@example.com
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="nav-dots">
<div class="nav-dot active" data-slide="0"></div>
<div class="nav-dot" data-slide="1"></div>
<div class="nav-dot" data-slide="2"></div>
<div class="nav-dot" data-slide="3"></div>
<div class="nav-dot" data-slide="4"></div>
<div class="nav-dot" data-slide="5"></div>
<div class="nav-dot" data-slide="6"></div>
<div class="nav-dot" data-slide="7"></div>
<div class="nav-dot" data-slide="8"></div>
<div class="nav-dot" data-slide="9"></div>
</div>
<div class="nav-arrows">
<button class="nav-arrow" id="prevBtn">←</button>
<button class="nav-arrow" id="nextBtn">→</button>
</div>
<div class="slide-counter">
<span id="currentSlide">01</span> / <span id="totalSlides">10</span>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.nav-dot');
let currentSlide = 0;
const totalSlides = slides.length;
document.getElementById('totalSlides').textContent = String(totalSlides).padStart(2, '0');
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
document.getElementById('currentSlide').textContent = String(index + 1).padStart(2, '0');
currentSlide = index;
}
function nextSlide() {
const next = (currentSlide + 1) % totalSlides;
showSlide(next);
}
function prevSlide() {
const prev = (currentSlide - 1 + totalSlides) % totalSlides;
showSlide(prev);
}
document.getElementById('nextBtn').addEventListener('click', nextSlide);
document.getElementById('prevBtn').addEventListener('click', prevSlide);
dots.forEach(dot => {
dot.addEventListener('click', () => {
showSlide(parseInt(dot.dataset.slide));
});
});
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
nextSlide();
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
}
});
// Bar Chart
const barCtx = document.getElementById('barChart').getContext('2d');
new Chart(barCtx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Revenue',
data: [2.4, 3.1, 3.8, 4.5],
backgroundColor: '#1a1a1a',
borderColor: '#1a1a1a',
borderWidth: 1
}, {
label: 'Target',
data: [2.5, 3.0, 3.5, 4.2],
backgroundColor: 'transparent',
borderColor: '#b8b0a4',
borderWidth: 2,
borderDash: [5, 5]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
font: { family: 'Inter', size: 11 },
color: '#5a5a5a',
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: '#e2dbd1',
drawBorder: false
},
ticks: {
font: { family: 'Inter', size: 11 },
color: '#8a8178',
padding: 10
}
},
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
font: { family: 'Inter', size: 12 },
color: '#1a1a1a',
padding: 10
}
}
}
}
});
// Line Chart
const lineCtx = document.getElementById('lineChart').getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
datasets: [{
label: 'Market Share',
data: [12, 18, 25, 34, 42, 51],
borderColor: '#1a1a1a',
backgroundColor: 'rgba(26, 26, 26, 0.05)',
borderWidth: 2,
fill: true,
tension: 0.4,
pointBackgroundColor: '#1a1a1a',
pointBorderColor: '#ede8e0',
pointBorderWidth: 2,
pointRadius: 5
}, {
label: 'Industry Average',
data: [10, 14, 19, 24, 30, 36],
borderColor: '#b8b0a4',
backgroundColor: 'transparent',
borderWidth: 2,
borderDash: [5, 5],
fill: false,
tension: 0.4,
pointBackgroundColor: '#b8b0a4',
pointRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
font: { family: 'Inter', size: 11 },
color: '#5a5a5a',
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: '#e2dbd1',
drawBorder: false
},
ticks: {
font: { family: 'Inter', size: 11 },
color: '#8a8178',
padding: 10,
callback: function(value) {
return value + '%';
}
}
},
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
font: { family: 'Inter', size: 12 },
color: '#1a1a1a',
padding: 10
}
}
}
}
});
</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-cartesian",
"name": "Cartesian",
"tagline": "Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.",
"mood": [
"quiet",
"considered",
"elegant",
"warm-minimal"
],
"occasion": [
"investment thesis",
"white paper",
"advisory deliverable",
"research report",
"book / longform pitch",
"gallery / cultural"
],
"tone": [
"classical",
"literary",
"restrained",
"confident-quiet"
],
"formality": "high",
"density": "low",
"palette": {
"bg_primary": "#EDE8E0",
"bg_secondary": "#E2DBD1",
"text_primary": "#1A1A1A",
"text_secondary": "#5A5A5A",
"accent": "#8A8178",
"line": "#B8B0A4",
"description": "warm bone and stone neutrals only; no saturated color; the entire system runs on tonal contrast and typography"
},
"typography": {
"display": "Playfair Display",
"body": "Inter",
"style": "transitional serif headlines paired with a clean grotesk; reads like a Sunday newspaper essay"
},
"scheme": "light",
"best_for": "Anything that should feel quiet, considered, and grown-up: investment theses, white papers, advisory work, longform research, gallery / cultural decks. Also a strong choice for editorial features, founder reflections, or any deck where restraint is the message — including across tech and finance.",
"avoid_for": "Decks that need visual heat, multiple accents, or a sense of urgency — the warm-neutral palette is intentionally low-energy.",
"slide_count": 10,
"navigation": "inline keyboard handler with on-page nav dots and slide counter",
"source": "https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/cartesian"
}
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