# D2 Forks Style Template — Rendering Configuration # KNO Schema Version: 0.0.6 # # Defines the D2 rendering configuration for Possibility/Forks design system. # This template bridges the D2 format specification with Forks visual identity. # # USAGE: # - D2 renderer uses these settings when rendering diagrams # - Thin transformations from other formats (Mermaid) produce structural D2 # - This template's theme/layout settings style the output consistently # ============================================================================= # SCHEMA DECLARATION # ============================================================================= $schema: kno@0.0.9 # ============================================================================= # BASIC TIER # ============================================================================= id: 01KGK3V73MCCQBQN9NSG89C3F3 slug: d2-forks-style-template type: template version: 0.2.0 # ============================================================================= # STANDARD TIER # ============================================================================= title: "D2 Forks Style Template" purpose: | Configure D2 rendering to match the Forks design system. **What This Solves:** - Ensures consistent diagram styling across Possibility - Bridges D2's theme system with Forks visual identity - Enables thin transformations to produce well-styled output **Key Principle:** Source formats (Mermaid, D2) define **structure** (nodes, edges, containers). This template defines **presentation** (colors, fonts, layout). The D2 renderer combines them to produce styled SVG output. ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ RENDERING PIPELINE │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ Mermaid Source ──┐ │ │ │ thin transform │ │ ▼ │ │ D2 Structure ────┐ │ │ │ │ │ D2 Source ───────────────────┤ │ │ │ + this template │ │ ▼ │ │ D2 CLI Render │ │ (theme + layout) │ │ │ │ │ ▼ │ │ Styled SVG │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` # ============================================================================= # RICH TIER — Relationships # ============================================================================= provenance: origin: id: 01KGK3V73MCCQBQN9NSG89C3F3 timestamp: "2026-02-04T01:47:56Z" tool: manual-migration taxonomy: topics: - rendering - styling - diagrams - design-system keywords: - d2 - forks - theme - template - terminal relationships: conforms_to: - xri: "kno://specs/d2-format" reason: "Uses D2's theme and layout options" implements: - xri: "kno://content/forks-style-guide" reason: "Applies Forks visual identity to diagrams" related_to: - xri: "kno://specs/mermaid-format" reason: "Mermaid thin transformations use this for styling" - xri: "kno://specs/diagram-schema" reason: "All diagrams rendered with this template" # ============================================================================= # CONTENT — Template Configuration # ============================================================================= content: # --------------------------------------------------------------------------- # D2 CLI Configuration # --------------------------------------------------------------------------- d2_config: theme: 200 theme_name: "Terminal" layout: "elk" layout_rationale: "ELK produces orthogonal (right-angle) arrows" pad: 20 center: true # --------------------------------------------------------------------------- # Theme Selection Rationale # --------------------------------------------------------------------------- theme_rationale: | Theme 200 (Terminal) was selected because: - **Dark background** — Matches Forks bg color (#1c1b18) - **High contrast** — Excellent readability - **Warm neutrals** — Complements Forks charcoal palette - **Consistent** — Same appearance for native D2 and transformed diagrams # --------------------------------------------------------------------------- # Canonical D2 Structure Pattern # --------------------------------------------------------------------------- # This defines the STRUCTURE of D2 output. Both native D2 authors and # automated transformations (Mermaid → D2) MUST follow this pattern # to ensure visual parity across all diagrams. # # The d2-renderer.ts reads this structure pattern programmatically. # Native D2 authors should match it manually. # --------------------------------------------------------------------------- structure: # Order of elements in D2 output (top to bottom) element_order: - direction - root_style_block - typography_glob - containers_and_nodes - edges # D2 output structure template (pseudocode) template: | direction: {direction} # Global styles (Forks palette) style: { fill: "{root.fill}" stroke: "{root.stroke}" font-color: "{root.font_color}" } # Uniform font size across all elements (recursive glob) **.style.font-size: {typography.font_size} # Containers (subgraphs) {container_id}: "{container_label}" { grid-columns: {N} # Always present grid-gap: {gap} # Only if N > 1 style.fill: "{container.fill}" style.stroke: "{container.stroke}" style.font-color: "{container.font_color}" style.bold: true # Nodes inside container {node_id}: "{node_label}" { style.fill: "{node.fill}" style.stroke: "{node.stroke}" style.font-color: "{node.font_color}" style.bold: false } } # Edges (connections) {source} -> {target}: "{label}" { style.stroke: "{edge.stroke}" style.font-color: "{edge.font_color}" } # Rules for structure generation rules: direction: description: "Flow direction for the diagram" values: ["down", "right", "left", "up"] default: "down" grid_columns: description: "Number of columns for grid layout in containers" behavior: | - Always set grid-columns on containers - For single-item containers: grid-columns: 1 - For multi-item containers: grid-columns: {item_count} - Only add grid-gap when grid-columns > 1 container_bold: description: "Container labels are bold for visual hierarchy" value: true node_bold: description: "Node labels are NOT bold (containers provide hierarchy)" value: false typography_glob: description: "Recursive glob applies font-size to all elements" pattern: "**.style.font-size: {value}" # --------------------------------------------------------------------------- # Forks D2 Style Configuration (machine-readable) # This is the source of truth for D2 styling - code reads from here # --------------------------------------------------------------------------- styles: # Root-level D2 configuration root: grid_columns: 1 grid_gap: 12 fill: "#1c1b18" stroke: "#3a3835" font_color: "#ebe7df" # Container/subgraph styling container: grid_columns: 1 grid_gap: 8 fill: "#252420" stroke: "#6a9a9a" font_color: "#ebe7df" bold: true # Node styling node: fill: "#1c1b18" stroke: "#6a9a9a" font_color: "#ebe7df" # Subtitle styling (description text below main node) subtitle: fill: "transparent" stroke: "transparent" font_color: "#b5b0a6" # muted text color font_size: 9 # Edge styling edge: stroke: "#b5b0a6" font_color: "#b5b0a6" # Global typography typography: font_size: 10 # --------------------------------------------------------------------------- # Forks Color Palette Reference # --------------------------------------------------------------------------- forks_colors: background: "#1c1b18" # --color-bg surface: "#252420" # --color-surface border: "#3a3835" # --color-border text: "#ebe7df" # --color-text text_muted: "#b5b0a6" # --color-text-muted accent: "#6a9a9a" # --color-accent (dusty teal) primary: "#7a8a9e" # Slate blue secondary: "#7d9e8a" # Warm sage tertiary: "#9a8a7a" # Clay taupe # ============================================================================= # ANNOTATIONS # ============================================================================= annotations: - key: bedrock-compliance value: | This template satisfies separation of concerns per thin transformation: - d2-format.kno: Neutral format specification (structure) - forks-style-guide: Design system definition (tokens) - This template: Rendering configuration (presentation + structure pattern) The `styles` section is machine-readable — code reads from here, not hardcoded values. Changes here propagate to all rendered diagrams. The `structure` section defines the CANONICAL D2 OUTPUT PATTERN. Both native D2 authors and transformers MUST follow this pattern. - key: thin-transformation value: | Ontological chain for diagram rendering: mermaid-format.kno → (thin transform) → D2 structure d2-forks-style-template.kno → (style + structure injection) → styled D2 d2-format.kno → (D2 CLI) → SVG output The converter reads both `content.styles` and `content.structure` from this file. This keeps presentation AND structure logic in .kno. - key: usage-context value: | Referenced by: - D2_CONFIG in services/pspace-site/src/lib/d2.ts (CLI flags) - renderElementsToD2() in d2-renderer.ts (styles + structure) - KnoViewer when rendering diagrams - Native D2 diagrams SHOULD match content.structure.template - key: parity-guarantee value: | The structure pattern ensures visual parity between: - Native D2 diagrams (hand-authored) - Transformed diagrams (Mermaid → D2) Both produce identical D2 structure, differing only in: - Semantic content (nodes, edges, labels) - Source format (embedded D2 vs Mermaid) quality: completeness: 0.95 last_reviewed: "2026-01-15" review_status: draft _history: created: "2026-01-14T00:00:00Z" created_by: "claude" modified: "2026-01-16T00:00:00Z" modified_by: "claude"