A design system for Slidev.
Tokens, components, and patterns — so a deck is something you assemble, not style.

npm i slidev-theme-tahta

tahta.cagdas.io — live explorer (every layout × every variant) · used in production by tela as its deck theme.

One deck, thirteen variants — one line changed. Not a recolor: different typefaces, shapes, textures, density, and motion.

Most Slidev themes are a stylesheet and some layouts. Tahta is a design system: a token foundation, a component library with a published contract, a layout kit, generated docs, and a test that enforces the system's own rules. You author decks from declarative frontmatter — no CSS, no grids, no layout HTML — and reskin everything by switching a variant.

What makes it a system, not a theme:

• Foundations as data. A 3-tier token layer (tokens.json) — primitives → semantic → variant bundles. Components read only semantic tokens, so a variant is a remap. One --accent derives the whole palette (tints, shades, chart series) via OKLCH — and a brand override keeps its hue, normalized into the variant's envelope so it stays legible instead of clashing.
• A published contract. layouts.json (every layout + field) and variants.json ship in the package; AGENTS.md is generated from them.
• Agent capability modules. Optional prompt fragments (modules/) a consumer appends to AGENTS.md only when relevant — branding (logo + brand color) and imagery (generating & placing images, with a deterministic tahta-imagine treat step). The always-served core stays lean.
• Components & patterns. Stat, Plot (ECharts), Callout, Badge, Icon (Lucide, bundled), Reveal, Fit + 30 layouts — all variant-aware. Semantic good/warn/bad/info roles; themeConfig.lang for locale casing (Turkish i→İ).
• Quality is enforced, not hoped for. npm test gates a token-contract (no hardcoded values) and WCAG-AA contrast for every variant; CI renders every layout across every variant.
• Variants are the proof. themeConfig.variant — 13 complete styles (6 dark / 7 light) swapping type, shape, texture, density, motion, and palette. That's the one-liner — a consequence of the token system, not the pitch.

Machine-readable contracts ship in the package: variants.json (the table above as data) and layouts.json (every layout + field + component) — AGENTS.md is generated from them.

themeConfig:
  variant: brutalist
  accent: '#c8f135'   # optional — override just the brand color

npm i slidev-theme-tahta echarts        # echarts only if you use the chart layout

---
theme: slidev-theme-tahta
title: My Talk
themeConfig: { variant: editorial }
layout: cover
kicker: Team · 2026
subtitle: A one-line promise
---

Every layout reads structured frontmatter — a full stats slide is nine lines and zero markup:

---
layout: stats
kicker: The numbers
title: What actually changed
stats:
  - { value: 80, unit: "%", label: lower p95 latency }
  - { value: 33, unit: "%", label: cost reduction }
  - { value: 0, label: seconds of downtime }
---

Keynote / pitch — cover · lead · section · default · statement · bigtype · quote · stats · fact · metric · compare · chart · steps · feature · timeline · logos · code · two-cols · image · showcase · bleed · embed · end

Teaching / technical — agenda · define · columns · panels · reference · vs · code-explain · diagram (themed Mermaid) (+ <Kbd> / <Terminal> / <FileTree>)

Charts do bar · line · area · donut (ECharts), with a categorical palette derived from your one accent. code supports Magic Move. Long bodies auto-fit to the frame. <em>word</em> in a title sets italic accent emphasis.

Full per-layout reference: packages/theme/AGENTS.md.

Three levels, all declarative:

1. Variant — themeConfig.variant swaps the whole style bundle.
2. Accent — themeConfig.accent overrides the single brand color.
3. Tokens — packages/theme/styles/tokens.css is a 3-tier system (primitives → semantic → variant bundles). Components read only semantic tokens, so a new :root[data-variant='…'] block restyles everything.

See docs/design-system.md.

Two more declarative knobs and two agent modules:

• themeConfig.accent — a brand color. Only the hue is honored; lightness/chroma normalize into the variant's envelope, so any brand color stays legible and on-style (not the exact hex).
• themeConfig.logo (+ logoInvert) — a brand logo: rendered large on openers, as a small mark in the footer of content slides (mark: false to opt out).
• Capability modules (modules/) — prompt fragments a tool (e.g. an agent host) appends to AGENTS.md when relevant: branding and imagery.
• tahta-imagine — for imagery, tahta ships the taste (the recipe) and a deterministic treat step (imagine.mjs: crop → scheme-aware duotone → grain), reading each variant's palette from the tokens. It never generates images — your agent does. See the atlas (dark) and roast (light) example decks.

packages/theme/   slidev-theme-tahta — the design system (tokens · variants · layouts · components)
packages/grade/   @zcag/tahta-grade — visual-grading CLI used to develop the theme
examples/edge/    a deck authored entirely in frontmatter
examples/gallery/ every layout + component, in one deck
docs/             design-system.md + generated images

The theme is the project; the tooling exists to build it well. packages/grade (@zcag/tahta-grade) is the inner loop — it exports every slide to PNG, flags blank/broken/regressed/overflowing slides, and serves a side-by-side report with a tab per variant.

npm install
npm run dev        # live-edit the example deck
npm run grade      # export + grade the example across all four variants, serve the report
npm run assets     # regenerate the README images from source

Editing the system, the loop is: change a token → node packages/grade/cli.mjs examples/gallery/slides.md --variants editorial,brutalist,soft,minimal --watch → see every slide in every variant update, with regressions flagged. Details in packages/grade/README.md.

MIT © Cagdas Salur