slidev-theme-architectural-console

A dark, architectural console theme for Slidev — built for systems engineers and conference speakers.

"The Architectural Console" pairs the brutalist efficiency of a terminal with the editorial precision of a premium architectural firm. Zero border-radius. Tonal depth over divider lines. Amber as the single signal colour.

Design system and visual language created with Google Stitch. Creative direction: "The Architectural Console".

Installation

Add to your slide deck's frontmatter:

---
theme: slidev-theme-architectural-console
---

Or to use a local copy:

---
theme: ./
---

Recommended fonts (auto-loaded)

The theme imports all three families from Google Fonts automatically via styles/index.css. No extra configuration needed.

| Role | Family | |----------|-----------------| | Display | Space Grotesk | | Body | IBM Plex Sans | | Mono | IBM Plex Mono | | Serif | IBM Plex Serif |

Design Tokens

All design values are CSS custom properties. No hardcoded hex in any layout or component.

Surfaces (tonal depth, no divider lines)

| Token | Value | Role | |-------------------------|-----------|-----------------------------------| | --ac-surface | #131315 | Slide canvas — the base void | | --ac-surface-lowest | #0e0e10 | Code blocks, terminals | | --ac-surface-low | #1a1a1c | Mid-depth panels, alt rows | | --ac-surface-mid | #202022 | Standard card/panel background | | --ac-surface-high | #2a2a2c | Lifted interactive elements | | --ac-surface-highest | #353537 | Highest elevation — overlays |

Text

| Token | Value | Role | |--------------------------|-----------|-----------------------------| | --ac-on-surface | #e8e8e2 | Primary text | | --ac-on-surface-muted | #9a9a94 | Secondary / muted text | | --ac-on-surface-dim | #6b6b64 | Captions, slide numbers |

Accent

| Token | Value | Role | |--------------------|--------------------------|----------------------------| | --ac-primary | #F59E0B | Amber — the signal colour | | --ac-primary-dark| #D97707 | Gradient end | | --ac-primary-dim | rgba(245,158,11,.12) | Amber tint — highlights | | --ac-tertiary | #8fd5ff | Terminal success / info |

Semantic

| Token | Value | |------------------|-----------| | --ac-success | #22C55E | | --ac-error | #EF4444 | | --ac-gh-open | #3B82F6 | | --ac-gh-merged | #8B5CF6 | | --ac-gh-closed | #EF4444 |

Layout Reference

| Layout | Description | Key Props | Slots | |---------------------|--------------------------------------------------|---------------------------------------------------|----------------------------------| | cover | Title slide with ghost code decoration | — | default (h1), label, subtitle, speaker, role, initials | | default | Two-column: prose left, code right | — | default (left), right | | section | Chapter break with ghost number | chapter | title, default (subtitle) | | statement | Full-slide centred quote | — | default | | two-cols | Equal-width tonal columns | — | title, default (left), right | | two-cols-header | Header strip + labelled two-col body | leftLabel, rightLabel | title, default (left), right | | code-split | 40/60 prose + code | lang | default (left), right (code) | | intro | Single speaker card (large) | name, title, company, initials, avatar, handles, tags | — | | dual-intro | Two speaker cards side by side | — | speakerA, speakerB | | terminal | Full terminal window with chrome bar | windowLabel, windowCommand | title, default (terminal body) | | github-card | GitHub issue/PR card | type, status, number, issueTitle, body, labels, author, authorInitials, openedAgo, commentCount, reactions, slideTitle | — | | arch-diagram | Architecture diagram frame | section, diagramTitle | default (diagram) | | before-after | Side-by-side before/after comparison | beforeLabel, afterLabel, showFixed | title, default (before), after | | benchmark | Horizontal bar chart | title, subtitle, items[] | annotation | | lesson-learned | Numbered lessons list | — | title, default (ol) | | live-code | Full-slide code editor with tab bar | filename, package, lang, tabs[] | default (code block) | | error-spotlight | Error + root cause analysis | rootCause | title, error, fix | | big-point | Single large centred statement | — | default | | end | Thank-you + QR placeholder | url, handles[] | — | | comparison-table | Multi-column comparison table | title, subtitle, columns[], rows[] | — | | resource-links | Resource list + QR panel | title, subtitle, qrUrl | default (resource items) | | poll | Audience poll with optional bar results | title, options[] | — |

Usage Examples

cover

---
layout: cover  (or omit — cover is the default for slide 1)
---

Building a Container <span class="ac-accent">Runtime From Scratch</span>

::label::
TECHNOGISE · GOPHERCON INDIA · 2025

::subtitle::
How Linux namespaces, pivot_root, and cgroups power every container you've ever run.

::speaker::
Ajitem Sahasrabuddhe

::role::
Lead Technology Consultant · Technogise

::initials::
AS

Important: The default slot content (the h1 title) must appear before the first ::name:: marker in Slidev's slot system.

default

---
layout: default
---

<span class="ac-label">LINUX NAMESPACES</span>
<h2>Isolation <span class="ac-accent">primitives</span></h2>

<ul class="ac-bullets">
  <li>PID namespace: each container gets its own process tree</li>
  <li>NET namespace: isolated network stack</li>
</ul>

::right::

\`\`\`go
cmd.SysProcAttr = &syscall.SysProcAttr{
    Cloneflags: syscall.CLONE_NEWPID | syscall.CLONE_NEWNS,
}
\`\`\`

section

---
layout: section
chapter: "03"
---

::title::
Filesystem <span class="ac-accent">Isolation</span>

::default::
Unpacking how containers see a completely different root from the host.

statement

---
layout: statement
---

Every container is just a <span class="ac-accent">process</span> with a different view of the world.

two-cols

---
layout: two-cols
---

::title::
<h2>Namespace <span class="ac-accent">Reference</span></h2>

Left column content...

::right::

Right column content...

two-cols-header

---
layout: two-cols-header
leftLabel: "chroot"
rightLabel: "pivot_root"
---

::title::
<h2><span class="ac-accent">pivot_root</span> vs chroot</h2>

Left column content...

::right::

Right column content...

code-split

---
layout: code-split
lang: "go"
---

<span class="ac-label">NETWORK NAMESPACES</span>
<h2>Wiring the <span class="ac-accent">veth pair</span></h2>

<ul class="ac-bullets">
  <li>Create a veth pair in the host namespace</li>
</ul>

::right::

\`\`\`go
func CreateVethPair(nsPath string) error { ... }
\`\`\`

intro

---
layout: intro
name: "Ajitem Sahasrabuddhe"
title: "Lead Technology Consultant"
company: "Technogise"
initials: "AS"
handles:
  - label: "@asahasrabuddhe"
    href: "https://github.com/asahasrabuddhe"
tags:
  - Go
  - Containers
  - Linux
---

dual-intro

---
layout: dual-intro
---

::speakerA::
<SpeakerCard
  name="Ajitem Sahasrabuddhe"
  title="Lead Technology Consultant"
  company="Technogise"
  initials="AS"
  :handles="[{label:'@asahasrabuddhe'}]"
/>

::speakerB::
<SpeakerCard
  name="Rohan Gupta"
  title="Senior Software Engineer"
  company="Technogise"
  initials="RG"
/>

terminal

---
layout: terminal
windowLabel: "zsh — ajitem@dev — 120×38"
windowCommand: "▲ gcr run"
---

::title::
Running <span class="ac-accent">gcr</span> for the first time

::default::
<div><span class="ac-term-prompt">$</span> <span class="ac-term-cmd">gcr run alpine:3.19</span></div>
<div class="ac-term-success">✓ Container started</div>
<div class="ac-term-output">PID 1 confirmed inside namespace</div>

Terminal line classes: ac-term-prompt (amber), ac-term-cmd (white), ac-term-output (muted), ac-term-success (blue), ac-term-error (red).

github-card

---
layout: github-card
slideTitle: "The bug that started it all"
type: "issue"
status: "open"
number: 847
issueTitle: "pivot_root fails with EINVAL on overlayfs"
body: "Description..."
labels:
  - name: "bug"
    variant: "error"
author: "asahasrabuddhe"
authorInitials: "AS"
openedAgo: "14 days ago"
commentCount: 23
reactions:
  - emoji: "👍"
    count: 41
---

arch-diagram

---
layout: arch-diagram
section: "ARCHITECTURE"
diagramTitle: "gcr runtime — component overview"
---

\`\`\`mermaid
graph LR
  CLI --> API --> K["Linux kernel"]
\`\`\`

before-after

---
layout: before-after
showFixed: true
---

::title::
<h2>Fixing the <span class="ac-accent">pivot_root</span> EINVAL</h2>

\`\`\`go
// Before — breaks with EINVAL
syscall.PivotRoot(newRoot, putOld)
\`\`\`

::after::

\`\`\`go
// After — bind-mount first
syscall.Mount(newRoot, newRoot, "", MS_BIND, "")
syscall.PivotRoot(newRoot, putOld)
\`\`\`

benchmark

---
layout: benchmark
title: "Container startup latency"
subtitle: "Median over 1000 runs"
items:
  - label: "gcr (this project)"
    value: 18
    unit: "ms"
    winner: true
  - label: "runc"
    value: 52
    unit: "ms"
---

::annotation::
Measured on Linux 6.6, AMD EPYC 9354P. Lower is better.

lesson-learned

---
layout: lesson-learned
---

::title::
Lessons <span class="ac-accent">Learned</span>

<ol>
  <li>
    <span class="num">01</span>
    <div>
      <div class="item-title">Read the kernel source</div>
      <div class="item-desc">Man pages don't cover all EINVAL cases.</div>
    </div>
  </li>
</ol>

live-code

---
layout: live-code
filename: "namespace.go"
package: "gcr/pkg/namespace"
lang: "go"
tabs:
  - "namespace.go"
  - "pivot_root.go"
---

\`\`\`go {1-5|7-18}
package namespace
// ...
\`\`\`

error-spotlight

---
layout: error-spotlight
rootCause: "pivot_root(2) requires the new root to be a mount point."
---

::title::
The <span class="ac-accent">EINVAL</span> mystery

::error::
<div class="ac-term-error">panic: invalid argument</div>
<div class="ac-term-output">goroutine 1 [running]: ...</div>

::fix::
<span class="ac-chip ac-chip--success">Fixed in v0.3.2</span>

big-point

---
layout: big-point
---

Containers are not <span class="ac-accent">magic</span>. They are syscalls with good marketing.

end

---
layout: end
url: "github.com/asahasrabuddhe/gcr"
handles:
  - label: "@asahasrabuddhe"
    href: "https://github.com/asahasrabuddhe"
---

comparison-table

---
layout: comparison-table
title: "Go vs Rust for container runtimes"
columns:
  - "Go"
  - "Rust"
rows:
  - criterion: "Startup time"
    values: ["~2ms GC pause", "zero-cost"]
    verdict: "Rust"
    verdictVariant: "info"
  - criterion: "Ecosystem"
    values: ["containerd, moby", "youki, bubblewrap"]
    verdict: "Go"
    verdictVariant: "amber"
---

resource-links

---
layout: resource-links
title: "Go deeper"
qrUrl: "github.com/asahasrabuddhe/gcr"
---

<div class="resource-item">
  <span class="resource-type ac-chip ac-chip--active">PAPER</span>
  <div class="resource-body">
    <span class="resource-title">Linux Namespaces — LWN series</span>
    <span class="resource-url">lwn.net/Articles/531114</span>
  </div>
</div>

poll

---
layout: poll
title: "What container runtime does your team use?"
options:
  - letter: "A"
    label: "containerd (Docker / Kubernetes default)"
    percent: 52
  - letter: "B"
    label: "CRI-O"
    percent: 28
---

Omit percent on each option for a live-poll slide with no bars.

Utility Classes

| Class | Purpose | |--------------------|---------------------------------------------------| | .ac-label | Mono uppercase section label (amber) | | .ac-accent | Amber inline span inside headings | | .ac-muted | Secondary colour text | | .ac-chip | Mono chip / tag | | .ac-chip--active | Amber left border + white text | | .ac-chip--success| Green left border | | .ac-chip--error | Red left border | | .ac-chip--info | Blue left border | | .ac-bullets | Amber square bullet list | | .ac-callout | Left-accent callout block (amber) | | .ac-callout--error | Red callout variant | | .ac-rule | 320px amber horizontal rule | | .ac-ghost-number | Large ghost number (used by section layout) |

Screenshot Gallery

01 — Cover

02 — Default (two-column)

03 — Section

04 — Statement

05 — Two Cols

06 — Two Cols Header

07 — Code Split

08 — Intro

09 — Dual Intro

10 — Terminal

11 — GitHub Card

12 — Architecture Diagram

13 — Before / After

14 — Benchmark

15 — Lessons Learned

16 — Live Code

17 — Error Spotlight

18 — Big Point

19 — End / Thank You

20 — Comparison Table

21 — Resource Links

22 — Poll

Hard Constraints (for contributors)

• No border-radius — 0px on every element, always
• No hardcoded hex in .vue files — every colour via --ac-* CSS variable
• No 1px divider lines — tonal nesting only (single exception: the 2px amber top bar)
• No light mode — colorSchema: dark always
• All headings → var(--ac-font-display) (Space Grotesk)
• All mono labels, chips, code → var(--ac-font-mono) (IBM Plex Mono)
• All layout .vue files → <style scoped> — no global leaks
• All global styles → styles/index.css only

License

MIT © Ajitem Sahasrabuddhe