SDM — Theme Reference

Palette

CSS custom properties — the entire site is driven by these 11 tokens.

BACKGROUND

--bg: #2b2b2b

Page background. Used on body and .code blocks.

SURFACE

--surface: #313335

Card and container background. Borders: --border: #4a4a4a.

SURFACE-2

--surface-2: #3c3f41

Hover, input, bar backgrounds. Deeper than surface.

KEYWORD

--keyword: #cc7832

Accent orange. Buttons, section kickers, flow step numbers.

METHOD

--method: #ffc66d

Link yellow. Inline code, links, active states.

STRING

--string: #6a8759

Green. Code string tokens, OK states, topic kind tags.

NUMBER

--number: #6897bb

Blue. Depth values, gradient end, product kind tags.

FIELD

--field: #9876aa

Purple. Concept/person kind tags, JSON property keys.

COMMENT

--comment: #808080

Gray. YAML comments, dim separators.

OK / WARN

--ok / --warn

Coverage status: green (#6a8759) and amber (#f0a030).

TEXT

--text / --text-dim

Primary #a9b7c6 and muted #9a9a9a.

Cards — .card, grid2, grid3, grid4, .bad

All card layouts used across the site. Kind tags (.kind-tag.topic, .skill, .concept, .product, .talk, .person) shown for 4-col grid.

ontology/topics/nlp-llms.yaml topic

LLMs & NLP

Transformer architecture, prompting, fine-tuning, RAG.

ontology/skills/prompt-engineering.yaml skill

Prompt Engineering

Chain-of-thought, few-shot, structured output.

ontology/concepts/transformer.yaml concept

Transformer

Self-attention, multi-head attention, positional encoding.

ontology/products/langchain.yaml product

LangChain

LLM orchestration: chains, agents, retrievers, memory.

ONTOLOGY

3 kinds shown

topic, skill, concept, product — also used: talk person

.bad

Dimmed card

For pain items or disabled content. Applies --comment border.

Tables & Coverage Bars — .table-wrap, .cov-bar-*

Profile requirement tables and machine-checked coverage bars use these components.

Skill	Questions	Depth
core-java	3	0.9	ok
spring-ai	4	0.7	ok
architecture	5	0.63 → need 0.9	thin
security	2	0.40 → need 0.5	thin

Callout component — used for gap alerts and work item suggestions. Left border uses --keyword.

Code Blocks — YAML syntax highlighting

Unified syntax classes: .k (keyword), .s (string), .n (number), .c (comment), .p (property/field).

# ontology/skills/spring-ai.yaml
id: spring-ai
name: Spring AI
kind: skill
description: ChatClient, models, advisors, tool calling…
depends_on: [ai-llm-java]
topics: [chat-client, advisors, tools, embeddings]

Flow & Steps — .flow, .flow-step, .steps, .step

Horizontal flow for lifecycle visualization and step grids.

1 Ontology

→

2 Profile

→

3 Coverage

→

4 Export

Ontology

A graph of nodes — any kinds.

Profile

Selection with a threshold.

Coverage

Gaps by fixed definition.

Export

CLI, MCP, Obsidian, web.

Tags & Meta Lines — .tag, .tag .dot, .meta-line

Used for skill/topic markers and example metadata.

core-java spring-framework spring-ai langchain4j +5 more in the graph

32 questions 8 skills threshold 70% 12 glossary terms

26 questions 6 skills v—

The .pill class is used in the topbar for version labeling. Nest it inside .nav.

Brand

Agent Orb · Wordmark · Layers

The SDM brand mark — an AI agent (orb) guiding the competency graph.

AGENT ORB

Agent Orb

Orb = agent, spark ✦ = AI, nodes = skills. «Agent guides the graph.»

WORDMARK

SDM

Spec-Driven Methodology

Dark lockup (#1e1e1e). Gradient: #cc7832 → #ffc66d.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <linearGradient id="sdmG" x1="0" y1="0"…>
  <rect x="1.5" y="1.5" width="29" height="29" rx="8" fill="url(#sdmG)"/>
  <circle cx="16" cy="16" r="8.5"…>
</svg>

✓
Orb + WordmarkTwo-element lockup. Orb stays standalone or paired.
✓
Inverted variantFill #2b2b2b (bg), gradient stroke for dark surfaces.
✓
Alt paletteGreen/blue gradient (#6a8759 → #6897bb) for secondary use.

Assets

Icons

Line icons — SVG with stroke="currentColor". Files in sdm-theme/icons/.

scatteredscattered.svg

searchsearch.svg

splitsplit.svg

checkcheck.svg

personperson.svg

robotrobot.svg

syncsync.svg

clockclock.svg