@decantr/content 3.8.0

package/patterns/eval-dashboard.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "eval-dashboard",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Eval Dashboard",
+  "description": "Model evaluation metrics grid with test case results and multi-model comparison. Displays aggregate metrics (accuracy, latency, cost, pass rate) with sparkline trends, a detailed test case table with color-coded scores, and side-by-side model diff views.",
+  "category": "ai-tools",
+  "tags": [
+    "2026",
+    "ai-tools",
+    "evaluation",
+    "metrics",
+    "dashboard",
+    "comparison",
+    "testing",
+    "LLM",
+    "benchmarks"
+  ],
+  "components": [
+    "MetricCard",
+    "TestCaseTable",
+    "ScoreBar",
+    "DiffView",
+    "ModelComparisonGrid",
+    "ConfusionMatrix"
+  ],
+  "default_preset": "overview",
+  "presets": {
+    "overview": {
+      "description": "Aggregate metrics view with top-row metric cards showing accuracy, latency, cost, and pass rate, each with sparkline trends and summary stats",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py4 _px4"
+      }
+    },
+    "detail": {
+      "description": "Per-test breakdown with a scrollable table of every eval case showing input, expected output, actual output, score bar, and inline diff toggle",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py4 _px4"
+      }
+    },
+    "comparison": {
+      "description": "Model-vs-model comparison with two models side by side, highlighted metric differences, and a shared test case table with dual output columns",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py4 _px4"
+      }
+    }
+  },
+  "visual_brief": "Dashboard layout starting with a top row of 4-5 MetricCards arranged in a horizontal grid (equal width, 16px gap). Each MetricCard is a surface-colored rounded card (border-radius 12px, 20px padding) containing: a muted label at top (12px, uppercase tracking, e.g., 'ACCURACY', 'LATENCY P50', 'COST', 'PASS RATE'), a large primary value below (28px, font-weight 700, e.g., '94.2%', '230ms', '$0.42', '87/100'), a delta indicator showing change from previous run (small text with up/down arrow in green for improvement, red for regression), and a sparkline chart (60px wide, 24px tall) in the bottom-right showing the metric trend over the last 10-20 runs as a thin line with the area beneath filled at 10% opacity. Sparkline color matches the metric's health: green if above target, amber if borderline, red if below. Below the metric cards is the TestCaseTable: a full-width data table with alternating row backgrounds (surface and slightly darker surface). Columns: # (row number, 40px), Input (preview text, truncated to 2 lines, 30% width), Expected (expected output, truncated, 20% width), Actual (actual model output, truncated, 20% width), Score (ScoreBar, 15% width), and Actions (diff toggle icon button, 5% width). The ScoreBar in each row is a horizontal bar (120px wide, 8px tall, border-radius 4px) with a fill that is colored green if score > 80%, yellow if 50-80%, red if < 50%. The fill width represents the score percentage. The numeric score is displayed to the right of the bar (e.g., '92%'). Clicking the diff toggle on a row expands an inline DiffView below that row, showing a side-by-side or unified diff between expected and actual output with green highlights for additions and red for deletions. Table header row is sticky with a muted background. Rows are sortable by clicking column headers (sort indicator arrows). In the comparison preset, the top metric cards show two values per card (Model A vs Model B) with the better value highlighted in accent color and a delta between them. The test case table gains two 'Actual' columns (one per model) and two ScoreBars. The ConfusionMatrix component appears as an optional section: a grid heatmap where rows are true labels and columns are predicted labels, cells colored by frequency (white for 0, deepening accent for higher counts), with count numbers displayed in each cell.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _py4 _px4",
+    "slots": {
+      "metric-cards": "Horizontal grid row of 4-5 MetricCard components with equal width and 16px gap. Each card shows: muted uppercase label (metric name), large bold value, delta from previous run (green up arrow or red down arrow + percentage), and a sparkline trend line in the bottom area. Cards have surface background, 12px border-radius, subtle shadow. Click a metric card to filter the test case table by that metric's criteria.",
+      "test-case-table": "Full-width scrollable data table with sticky header. Columns: row number, input preview (truncatable, click to expand), expected output, actual output, ScoreBar (color-coded horizontal fill bar + numeric score), and actions column with diff toggle. Alternating row background colors. Sortable columns via header click. Pagination or virtual scroll for large eval sets (100+ cases). Row click expands to show full input/output text. Filter controls above the table for score range, pass/fail, and text search.",
+      "score-bar": "Inline horizontal bar (120px wide, 8px tall) representing a 0-100% score. Fill color: green (#22c55e) for >80%, yellow (#eab308) for 50-80%, red (#ef4444) for <50%. Numeric score label (e.g., '92%') to the right of the bar in matching color. Background track is muted gray.",
+      "diff-view": "Expandable inline panel below a test case row showing the difference between expected and actual output. Supports unified or side-by-side diff mode toggle. Added text highlighted with green background, removed text with red background. Line numbers in a muted gutter. Monospace font. Collapsible via the actions toggle button.",
+      "model-comparison-grid": "Comparison preset only. Metric cards show paired values (Model A | Model B) with the superior value in accent color and the delta between models displayed. Test case table includes dual Actual columns and dual ScoreBars. A summary row at the bottom shows win/loss/tie counts across all test cases.",
+      "confusion-matrix": "Optional section showing a labeled grid heatmap. Rows represent true/expected categories, columns represent predicted categories. Each cell is colored by frequency count from white (0) through deepening accent color intensity. Count numbers displayed in each cell. Row and column labels on the axes. Diagonal cells (correct predictions) have a subtle accent border."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Model evaluation dashboard",
+    "announcements": [
+      "Metric {name}: {value}, {delta_direction} {delta_value} from previous run",
+      "Test case {number}: score {score}%, {pass_or_fail}",
+      "Diff view expanded for test case {number}",
+      "Diff view collapsed",
+      "Table sorted by {column} {direction}",
+      "Comparison: Model A {metric} {value_a} vs Model B {value_b}, delta {delta}",
+      "Filter applied: showing {count} of {total} test cases"
+    ],
+    "keyboard": [
+      "Tab: cycle between metric cards, table, and controls",
+      "Arrow Up/Down: navigate table rows",
+      "Arrow Left/Right: navigate between metric cards",
+      "Enter: expand selected row to show full content or toggle diff",
+      "S: toggle sort on focused column header",
+      "F: focus the table filter/search input",
+      "Escape: collapse expanded row or diff view",
+      "1/2/3: switch between overview/detail/comparison presets"
+    ]
+  },
+  "responsive": {
+    "mobile": "Metric cards stack vertically (1 column) with full width. Test case table shows only Input, Score, and expand button columns — other columns accessible by expanding the row. Diff view opens as a bottom sheet. Sparklines hidden on metric cards. Score values shown as colored badges instead of bars. Confusion matrix horizontally scrollable.",
+    "tablet": "Metric cards in a 2x2 grid. Test case table shows all columns with horizontal scroll for overflow. Diff view renders inline. Sparklines visible. Confusion matrix fits if categories are few, otherwise scrollable.",
+    "desktop": "Full horizontal metric card row (4-5 across). Test case table with all columns visible without scroll. Diff view inline with generous width. Comparison preset shows side-by-side model columns comfortably. Hover tooltips on sparklines showing exact values per data point. Confusion matrix fully visible."
+  },
+  "layout_hints": {
+    "metric_priority": "Lead with the health of the evaluation run first, then the case-by-case detail. The user should understand overall quality before they inspect individual failures.",
+    "table_role": "The test-case table is the diagnostic core. Diffs, filters, and comparisons should support it rather than fragmenting the surface.",
+    "comparison_read": "When comparing models, preserve a strong sense of shared inputs and evaluation criteria so the dashboard reads as one experiment."
+  },
+  "motion": {
+    "micro": {
+      "metric-card-hover": "translateY(-2px) + shadow elevation increase 150ms ease-out",
+      "score-bar-fill": "width 0→{score}% 600ms ease-out on initial render or data change",
+      "sparkline-draw": "SVG path stroke-dashoffset animation drawing line left-to-right 800ms ease-out on load"
+    },
+    "transitions": {
+      "diff-expand": "max-height 0→auto + opacity 0→1 300ms ease-out",
+      "diff-collapse": "max-height auto→0 + opacity 1→0 200ms ease-in",
+      "sort-reorder": "rows translateY to new positions 250ms ease-in-out",
+      "preset-switch": "cross-fade 200ms ease-in-out between preset layouts",
+      "metric-value-update": "old value slides up + fades out, new value slides up from below + fades in, 300ms ease-out"
+    },
+    "ambient": {
+      "live-sparkline": "sparkline extends with new data points appended smoothly, 500ms ease-out per new point"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount",
+    "real-time-updates",
+    "hover-tooltip"
+  ],
+  "composition": {
+    "EvalDashboard": "Section(d-section, flex-col, gap-6) > [MetricCard*(d-surface) > [Label(d-annotation, uppercase) + Value(font-bold, text-2xl) + Delta(color: improvement) + Sparkline(d-data, mini)] + TestCaseTable(d-data) > [HeaderRow(sticky) + Row*(d-row) > [Input(truncatable) + Expected(truncatable) + Actual(truncatable) + ScoreBar(d-data, color: score) + DiffToggle(d-interactive)]]",
+    "MetricCard": "Card(d-surface, rounded-xl, p-5, shadow-sm) > [Label(d-annotation) + Value(d-data, mono-data, text-2xl) + Delta(text-sm, color: direction) + Sparkline(svg, 60x24)]",
+    "TestCaseTable": "Table(d-data, full-width, sticky-header, sortable) > Row*(alternating-bg) > [Cell* + ScoreBar + DiffToggle]",
+    "ScoreBar": "Bar(d-data, h-8px, rounded, bg: muted) > Fill(width: score%, bg: green|yellow|red) + Label(mono-data, text-xs)",
+    "DiffView": "Panel(d-surface, monospace, expandable) > [ModeToggle(unified|side-by-side) + DiffContent(green: added, red: removed)]",
+    "ModelComparisonGrid": "Grid(d-section) > [PairedMetricCard* + DualColumnTable + SummaryRow(wins/losses/ties)]",
+    "ConfusionMatrix": "Grid(d-data, heatmap) > Cell*(bg-intensity: count) > [CountLabel]"
+  }
+}

package/patterns/expense-tracker.json

@@ -0,0 +1,130 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "expense-tracker",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Expense Tracker",
+  "description": "Property expense management with category breakdown, receipt upload, recurring expenses, and budget tracking.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Input",
+        "Select"
+      ],
+      "charts": [
+        "PieChart"
+      ]
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Input",
+    "Select"
+  ],
+  "default_preset": "list",
+  "presets": {
+    "list": {
+      "description": "Filterable expense list view with category summary bar, data table, and date range controls",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Input",
+        "Select"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title, add expense, export",
+          "filters": "Property, category, date range, vendor",
+          "summary": "Category totals chart",
+          "table": "Expense records"
+        }
+      }
+    },
+    "create": {
+      "description": "New expense entry form with category select, amount input, description, and receipt upload",
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p6",
+        "slots": {
+          "form": "Expense form fields",
+          "receipt": "Receipt upload",
+          "actions": "Save/cancel"
+        }
+      }
+    },
+    "summary": {
+      "description": "Category summary widget with pie chart breakdown and per-category running totals",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4",
+        "slots": {
+          "chart": "Category pie chart",
+          "legend": "Category breakdown"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "header": "Title and controls",
+      "filters": "Filters",
+      "summary": "Category totals",
+      "table": "Expense records"
+    }
+  },
+  "visual_brief": "Expense management interface with a header row containing title, date range selector, and an 'Add Expense' button. A category summary bar below shows colored pills for each expense category (Maintenance, Insurance, Utilities, etc.) with running totals. The main area is a data table with columns: date, description, category badge, property, amount, receipt icon, and status. Filter controls sit above the table for category and property filtering. The create preset shows a form with category select, amount input, description, property picker, and receipt upload. Summary preset displays a pie chart of category breakdown.",
+  "responsive": {
+    "mobile": "Table becomes a card list — each expense as a stacked card. Category summary pills wrap. Add button is a FAB. Filters collapse into a filter drawer.",
+    "tablet": "Table layout maintained with horizontal scroll for extra columns. Category bar fits in one row.",
+    "desktop": "Full table with all columns visible. Category summary bar spans the top. Comfortable spacing."
+  },
+  "layout_hints": {
+    "ledger_priority": "Lead with expense totals and category scanability, then the underlying records. Users should quickly understand where money is going before they inspect individual receipts.",
+    "form_transition": "Create and edit flows should feel like a continuation of the ledger, not a different application. Preserve category and property context around the form when possible.",
+    "summary_role": "The summary chart or category pills should support the table rather than compete with it as a separate analytics dashboard."
+  },
+  "motion": {
+    "micro": "Category filters and add-expense actions may sharpen slightly on hover. Status or receipt states may brighten enough to confirm selection or upload completion.",
+    "transitions": "Date-range and category filtering should preserve confidence in the ledger by updating smoothly without reordering the whole experience unexpectedly."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Expense tracker",
+    "keyboard": [
+      "Header actions, filters, category summaries, and expense records should remain reachable in a logical order."
+    ],
+    "announcements": [
+      "Expense amount, category, property, and receipt state should be exposed semantically so the ledger remains interpretable without color badges or table styling alone."
+    ]
+  },
+  "composition": {
+    "ExpenseTracker": "Container(d-section, flex-col, gap-4) > [Header + Filters + CategorySummary + ExpenseTable]",
+    "Header": "Row(d-control, space-between) > [Title + DateRange(d-control) + AddButton(d-interactive)]",
+    "CategorySummary": "Row(d-data) > CategoryPill(d-annotation, color-coded)[]",
+    "ExpenseTable": "Table(d-data) > ExpenseRow[]",
+    "ExpenseRow": "Row(d-data-row) > [Date + Description + CategoryBadge(d-annotation) + Property + Amount(mono-data) + ReceiptIcon? + StatusBadge(d-annotation)]"
+  }
+}

package/patterns/featured-launchpad-list.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "featured-launchpad-list",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Featured Launchpad List",
+  "description": "Curated list or grid of featured blueprints, archetypes, or starter paths. Each item explains who it is for, what it scaffolds, and the next command or registry route a builder should use.",
+  "dependencies": {
+    "patterns": {
+      "namespace-badge": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "curated",
+  "presets": {
+    "curated": {
+      "description": "Three to six featured launchpad cards with blueprint name, target workflow, short outcome copy, tag row, and primary inspect/use action.",
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _xl:gc3 _gap4",
+        "slots": {
+          "item-header": "Blueprint or launchpad name with namespace badge.",
+          "item-outcome": "One concise sentence describing what the builder can ship.",
+          "item-tags": "Small tags for workflow, target framework, or adoption mode.",
+          "item-command": "Optional install or scaffold command snippet.",
+          "item-action": "Inspect, launch, or copy command action."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc2 _xl:gc3 _gap4",
+    "slots": {
+      "item-header": "Featured launchpad identity",
+      "item-outcome": "Builder outcome copy",
+      "item-tags": "Workflow and target tags",
+      "item-command": "Optional command preview",
+      "item-action": "Inspect or launch CTA"
+    }
+  },
+  "visual_brief": "A curated launchpad surface that feels selective and high-signal. Cards should read like strong product recommendations, not a generic content feed. Each item needs a clear use case, a reason to trust it, and an obvious next step. Use compact tags and command previews sparingly so the list remains scannable.",
+  "responsive": {
+    "mobile": "Single-column cards with full-width action rows and command snippets that wrap without overflow.",
+    "tablet": "Two-column card grid with equal-height cards and aligned action rows.",
+    "desktop": "Three-column grid or split featured-plus-secondary layout. Keep the primary featured item visually stronger only when the content warrants it."
+  },
+  "layout_hints": {
+    "curation": "Prefer fewer, better launchpad entries over a dense catalog wall. The pattern should communicate recommendation quality.",
+    "command_preview": "Use command snippets only when they accelerate action. They should be copyable or visually separate from prose.",
+    "metadata": "Tags should explain fit: greenfield, brownfield, hybrid, Next, Vite, registry, dashboard, or SaaS."
+  },
+  "motion": {
+    "micro": "Cards lift subtly and action rows sharpen on hover or focus.",
+    "transitions": "Featured items can reveal with a short stagger when the list first enters view."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Featured launchpads",
+    "keyboard": [
+      "Tab order should move through each card's primary action in reading order."
+    ],
+    "announcements": [
+      "Each launchpad should expose name, outcome, and target workflow without relying on tag color."
+    ],
+    "focus_management": "If the whole card is clickable, still expose one named primary link or button."
+  },
+  "composition": {
+    "FeaturedLaunchpadList": "Grid(responsive) > LaunchpadCard[]",
+    "LaunchpadCard": "Card > [Header(Name + NamespaceBadge) + Outcome + TagRow + CommandPreview? + ActionRow]",
+    "TagRow": "Flex(wrap) > Tag[]"
+  },
+  "io": {
+    "consumes": [
+      "featured-content"
+    ],
+    "produces": [
+      "launchpad-selection"
+    ],
+    "actions": [
+      "inspect-click",
+      "command-copy"
+    ]
+  }
+}

package/patterns/features.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "features",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Features Section",
+  "description": "Feature showcase grid with icon, heading, and description for each feature",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "icon"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Grid of feature cards, each with icon, heading, and description",
+      "components": [
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap6 _py12 _px6",
+        "slots": {
+          "heading": "Optional section heading with _heading2 _textCenter and subtext",
+          "feature-card": "Card or borderless block: icon + heading + description",
+          "feature-icon": "Icon in a rounded background circle (48px) with muted primary fill",
+          "feature-title": "Feature name with _heading4 _fontmedium",
+          "feature-description": "Short explanation with _bodysm _fgmuted, 2-3 lines"
+        }
+      }
+    },
+    "alternating": {
+      "description": "Alternating two-column rows: text left / image right, then reversed",
+      "components": [
+        "Card",
+        "icon",
+        "Image"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap16 _py16 _px6",
+        "slots": {
+          "feature-row": "Two-column grid: _grid _gc1 _lg:gc2 _gap8 _aic, alternating order",
+          "text-col": "Heading + description + optional link: _flex _col _gap3",
+          "media-col": "Screenshot, illustration, or icon cluster"
+        }
+      }
+    },
+    "icon-list": {
+      "description": "Compact vertical list of features with inline icons",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py8 _px6 _mw[640px] _mx[auto]",
+        "slots": {
+          "feature-item": "Row: icon (24px) left + title and description stacked right",
+          "feature-title": "Feature name with _textsm _fontmedium",
+          "feature-description": "Short text with _textxs _fgmuted"
+        }
+      }
+    }
+  },
+  "visual_brief": "Grid of feature cards showcasing product capabilities. Each card contains a rounded background circle (48px) holding a feature icon in primary or accent color, a feature heading in medium-weight heading4 text below the icon, and a 2-3 line description in smaller muted text. Cards are evenly distributed in a 3-column grid with consistent gap6 spacing. Cards can be contained surfaces with padding and border, or borderless blocks that rely on spacing alone. An optional centered section heading and subtext sit above the grid. The alternating preset uses wide two-column rows instead \u2014 text on one side with a heading, description paragraph, and optional 'Learn more' link, and an image or illustration on the other, with the sides alternating each row. The icon-list preset is a compact single-column list with inline icons.",
+  "responsive": {
+    "mobile": "Single column. Feature cards stack vertically full-width. Icons center above text or align left in a row layout. Alternating preset stacks to single column with image above text. Gap reduces to gap4.",
+    "tablet": "Two-column grid. Alternating preset activates side-by-side layout. Icon-list stays single column. Comfortable spacing.",
+    "desktop": "Three-column grid for standard. Alternating preset at full two-column width with generous gap8. Icon-list centered at 640px max-width."
+  },
+  "motion": {
+    "micro": "Feature cards lift on hover with translateY(-2px) and subtle shadow increase over 200ms ease.",
+    "transitions": "Cards stagger in on section enter with fade-up (translateY(12px) to 0) at 300ms ease, 80ms stagger delay per card."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scroll-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Features",
+    "keyboard": [
+      "Tab navigates between feature cards",
+      "Shift+Tab navigates backwards between feature cards"
+    ],
+    "announcements": [
+      "Feature section with {count} items",
+      "Feature: {title}"
+    ]
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap6 _py12 _px6",
+    "slots": {
+      "feature-card": "Feature block with icon, title, description",
+      "feature-icon": "Icon in rounded background",
+      "feature-title": "Feature name",
+      "feature-description": "Feature explanation"
+    }
+  },
+  "layout_hints": {
+    "card_treatment": "Feature cards should use a subtle border (1px solid var(--d-border)) with a soft hover effect: translateY(-2px) + border-color transitions to primary on hover. Do NOT use heavy shadows \u2014 keep it flat and clean with border-based elevation.",
+    "icon_treatment": "Feature icons should sit inside a rounded-lg container with a tinted background: background: color-mix(in srgb, var(--d-accent) 10%, transparent). The icon itself uses var(--d-accent) color. This creates a subtle brand-tinted icon well.",
+    "section_background": "Alternate section background from the hero \u2014 if hero fades to var(--d-bg), features should have a slightly elevated background: var(--d-surface) or a 2% lighter shade, creating visual rhythm between sections."
+  }
+}