Built for the room,
not just the reader.
The Deck system is a specialized register of the Noocleus brand. While the Foundation defines our architectural substrate, the Deck system is optimized for scannability, impact, and the unique constraints of presentation environments.
Clear statements,
tightly composed.
Lexend 700 for titles, 300-weight for key messages. We use tight letter-spacing to give large display text a sense of gravity and architectural intent.
The architecture is the asset
Typed knowledge graphs turn generic agents into domain experts.
Mathematical harmony.
Following Tim Brown's More Meaningful Typography, sizes derive from a 14px base and a 1.20 ratio. This creates a predictable, rhythmic progression across all slides.
The 24px metronome.
After Richard Rutter's Compose to a Vertical Rhythm, we pick a baseline (24px), then make every line-height and margin a multiple of it. The page gains a hidden metronome that everything rides.
Each line sits on the grid.
Body is 16 / 24: font-size 16px, line-height 24px. The 24px is the baseline. Headings, body, lists, even cards all snap to multiples of 24, and the page rides a hidden metronome.
Headings snap too.
An h4 at 22 / 24 fills one baseline. Margins above and below are 24 (one beat) or 48 (two beats), never 18 or 30. Spacing becomes rhythm; rhythm becomes feel.
Atoms of delivery.
The deck register defines specific roles for every typographic beat. These atoms ensure that no matter the layout, the "volume" of the message remains consistent.
A node is data. Types make it architecture.
Subtitle right under the title. Weight 300, mid-color, designed to contrast with the title above.
Standard body text at 20px. Generous leading and minor-third scaling ensures scannability from the back of the room.
The vocabulary, applied.
Compositions, cards, lists, diagrams, code, bonuses.
Standard compositions.
The core compositions of the Deck system. These utilities handle the centering and spacing of the atoms automatically, ensuring a consistent cinematic feel.
PRISM
An engine for typed knowledge graphs.
You bring the shape; we bring everything else.
Four layers, two access surfaces.
The engine (L2) is what we ship.
Methodology sits on top, knowledge architecture below it, the engine, then the substrate.
The architecture
Four layers, two access surfaces. What we ship vs. what you ship.
One card, six modifiers.
Every card uses .card with one modifier. Pick by intent, not by visual. No fills: thin borders + accent left-rules carry meaning.
.card.is-callout · emphasis asideDECK · CARD · 01The thesis in one line: a generic agent reads. A shaped agent walks.
.card.is-accent · product highlightDECK · CARD · 02Your kit’s shape
Domain types and edges. Skills the agent uses. The decisions only you can make.
.card.is-content · mid-density cardDECK · CARD · 03The engine
Typed primitives, atomic writes, harness wiring.
Your kit
Knowledge architecture and skill topology.
The substrate
Files by default; pluggable when you outgrow.
three-col grids and side-by-side comparisons. .card.is-external · non-productDECK · CARD · 04Claude Code (today); anything MCP-aware (tomorrow). PRISM extends it, doesn’t replace it.
.card.is-section · chapter containerDECK · CARD · 05Out of the box
What L2 ships before you write a line. The engine’s job is to disappear.
- Typed edges: semantic, validated
- Inheritance: types extend types
- Atomic writes: always consistent
- Files-are-truth: markdown + YAML, hand-editable
.card.is-lane · compact grid cardDECK · CARD · 06.four-lanes. Hierarchy without bullets.
Indentation, weight, and a thin left-rule carry the structure.
.content-list · in-slide listDECK · LIST · 01- What concepts exist (spec, decision, capability, finding…)
- What they mean: how a spec differs from a design
- How they relate: a spec derives from a proposal
- How they evolve: supersedes, refines, deprecates
.detail · secondary itemDECK · LIST · 02derive_from a decision. trigger a refactor. .content-list). node ├── doc │ ├── proposal │ ├── decision │ └── finding ├── code │ ├── class │ └── function └── (your domain)
Same vocabulary across every diagram.
Numbered rows, dashed externals, accent left-rule for “the product”, mono labels. Diagrams stop looking like four separate styles.
.stack-rows · layered architectureDECK · DIAG · 01.four-lanes · alternatives gridDECK · DIAG · 02.lane with auto-numbered prefix via CSS counters. Use to compare 4 options. .causal-chain · derivation timelineDECK · DIAG · 03.loop · agent cycleDECK · DIAG · 04Block goes charcoal. Inline stays light.
Charcoal background (#2a2a2a) with light text and an accent left-rule for big code blocks. Inline code stays light to read in flowing prose.
.code-block · multi-lineDECK · CODE · 01$ axi init --kit @noocleus/forge ✓ Engine bootstrapped at .prism/ ✓ Claude Code hooks registered ✓ Bootstrap meta-types loaded: type-def, field-def, role-def ✓ Installed kit: @noocleus/forge ✓ Ready to run: try /idea in Claude Code
<code>DECK · CODE · 02Pass --kit any number of times to compose multiple kits, or omit it to start with the engine alone and author your own kit.
| Layer | Owns | Ships as |
|---|---|---|
| L4 · Methodology | Skill topology | Domain kit |
| L3 · Knowledge architecture | Type-defs, field-defs | Domain kit |
| L2 · Engine | Primitives, methods | The product |
| L1 · Substrate | Files + YAML | Pluggable |
Two tiers, two modals, one design.
Subtle teasers hint at extras. Tier 1 unlocks the bees + lets you pick one. Tier 2 unlocks the deeper bonuses (research, prompts, examples).
| Tier | Ask | Validation | Unlocks |
|---|---|---|---|
| 1 · meet the hive | Quick survey: rating, what I missed, what next | Any one answer | Bee selection (chooser opens after submit) |
| 2 · the deeper bits | Email subscribe or LinkedIn connect | Email format, or LinkedIn click | Research notes, prompts, worked examples |
.bonus-badge · teaser inline with slide-numDECK · BONUS · 02.bonus-card · link modeDECK · BONUS · 03Reading list: typed knowledge graphs
Six pointers I keep going back to: Tana, Roam, Notion, Obsidian Dataview, Tinkerpop, and the internal “schemas, not prose” essay.
.bonus-card · prompt modeDECK · BONUS · 04Interview prompt: shape your ontology
A Claude prompt that interviews you about your domain and proposes 4 to 6 type-defs in YAML, one at a time. Paste into Claude Code or any chat to run it.
view full text
You are a domain interviewer. Your job is to surface the implicit shape of my work and propose type-defs. Ask me, one at a time: 1. What concepts recur in my domain? 2. What relationships matter between them? 3. Which fields are required vs nice-to-have? Then propose 4 to 6 type-defs as YAML, each with: - name (kebab-case) - 2 to 4 fields with types - 1 to 2 typed edges to other types Stop after each type-def for my confirmation.
There’s a bit more here.
Reading lists, prompts, worked examples. Either one unlocks them.
Where it lives.
Mobile adaptation and the layout engine.
Bottom bar with progress dots.
Replaces the desktop pill at ≤768px. Section sheet replaces the TOC rail. No ? button: no keyboard on touch.
A node is data. Types make it architecture.
Each node is just data with an ID. Edges give it semantics.
A node is the genesis. Type-defs extend it.
Constraints
- Bar position: bottom, ~14px from edge for thumb safety
- No
?: no keyboard on touch - Slide count: right side of bar, mono
- Section sheet: tap
≡for grouped section list
.mobile-barand the section sheet are hidden in@media print- Slides print as the desktop layout regardless of viewport
The cinematic frame.
Decks are stage-managed. Instead of a scrolling page, we use a three-tier system to lock content to the center of the viewport while enforcing readable safe-zones.
| Utility | Role | Properties |
|---|---|---|
.deck-canvas | Stage | 100vh, Scroll-snapping, Smooth scroll |
.deck-section | Frame | 100vh, Viewport lock, Grid toggle |
.deck-wrapper | Lens | Vertical centering, 1240px safe-area |
.deck-impactCentered alignment, oversized title (7xl). Use for openers/quotes.
.deck-deliveryLeft-aligned, standard title (5xl). The primary content register.
.deck-detailTighter tracking, small title (3xl). For specs and deep-dives.
.deck-tempo-airy48px gaps (2 beats). Maximum breath.
.deck-tempo-snappy32px gaps (~1.5 beats). Talking pace.
.deck-tempo-dense16px gaps (0.5 beat). Technical packing.
Beyond the static.
The deck system includes specialized interactive components for audience feedback, gated content, and mascot-driven narration.
The best parts are inside.
Leave your email to unlock the full deck, interactive diagrams, and bonus resources.
We share research, not noise. Unsubscribe anytime.
A small survey, then your bee.
Help me improve the deck. Any one answer unlocks bee selection.