Framework-free · CSS Variables · Nunjucks Templates

AI Docs Design System

A design system for LLM-generated HTML AI Docs.

Built on CSS Variables. Structured as reusable components. Consumed by prompts.

The System

Three layers that work together — tokens define the visual language, blocks provide the HTML components, instructions tell the LLM how to use both.

Layer 1

Design Tokens

CSS Variables · 2 themes

The visual foundation. Defines colors, spacing, typography, and borders as CSS custom properties — theme-aware and overridable.

Open →

Layer 2

Building Blocks

CSS Classes · 12 components

The component layer. Predefined CSS classes for headers, chips, lists, buttons, and contact cards — applied as class names in any HTML artifact.

Open →

Layer 3

LLM Instructions

Prompt rules · Usage examples

The consumption layer. Rules, variable references, and examples that tell the LLM how to correctly use tokens and blocks when generating HTML.

Open →

AI Docs

10 Nunjucks templates built on the system — each demonstrating the full component stack in a real-world use case.

Reference

Generic Template

Reference template showcasing all 24 building blocks — use as a starting point for new AI Docs.

View template →

Company Research Brief

Target company overview with value proposition, stakeholders, initiatives, signals, and next actions.

View template →

Meeting Prep

Comprehensive meeting preparation with objectives, attendees, talking points, and objection handling.

View template →

Buyer Engagement Map

Account overview with engagement activity, stakeholders, and buying signals for strategic accounts.

View template →

Next Best Actions

AI-recommended priority actions based on account activity, engagement signals, and deal momentum.

View template →

Key Deal Updates

Pipeline review with deals by stage, top opportunities, and key metrics for Q1 2026 forecast.

View template →

Morning Brief

Morning intelligence summary with priority actions, hot accounts, schedule, and market insights.

View template →

End of Day Digest

Daily accomplishments summary with activity metrics, tomorrow's priorities, and key learnings.

View template →

Account Plan

Comprehensive account strategy with company profile, growth priorities, stakeholders, and action plan.

View template →

Pulse Daily Brief

Rep-facing daily summary with top priority, pipeline risks and opportunities, open actions, CRM hygiene tasks, and key takeaways.

View template →

Design Tokens

Complete visual reference for all CSS variables in the design system. Always use these CSS variables — never hard-code color values. This ensures consistent theming across all HTML artifacts.

Base Styles

Foundation styles applied globally. Use var(--font-family) for all text and var(--border-radius) for rounded elements.

Font Family:'Figtree', sans-serif

Border Radius:16px

Palette

Semantic color categories with full palettes (main, light, dark, contrast text). Match semantics: Primary for brand actions, Error for destructive actions, Success for positive feedback, etc.

Primary

Monochromatic branding palette

main

#3173a5

light

#6ba3ca

dark

#204d70

text

#fff

Secondary

System gray tones for supporting UI elements

main

#d4e6f4

light

#edf4fa

dark

#8ebde1

text

#01243f

Success

Green palette for positive actions and states

main

#457c3c

light

#67ad5b

dark

#305d28

text

#fff

Error

Red palette for error states and destructive actions

main

#cd342c

light

#e15c53

dark

#c42b23

text

#fff

Warning

Yellow/amber palette for warning states

main

#c24d00

light

#ff751a

dark

#a34100

text

#fff

Info

Blue palette for informational states

main

#204d70

light

#6ba3ca

dark

#134165

text

#fff

Background Colors

Page background (default) and card/section backgrounds (paper)

default

#f7fcff

paper

#fff

Text Colors

Primary for main text, secondary for muted/helper text, disabled for inactive elements

primary

#1f2937

secondary

#4b5563

disabled

#9ca3af

Divider

Used for all borders, separators, and divider lines throughout the interface

divider

#e5e7eb

Action Colors

Interactive state colors for buttons, links, and actionable elements. Use hover for overlays, focus for keyboard navigation, and disabled for inactive states

active

#3173a5

hover

#3173a514

selected

#3173a51e

focus

#3173a533

disabled

#9ca3af

disabled bg

#3173a51e

Alert Colors

Lighter color combinations using light backgrounds with dark text for optimal readability. Use for alert boxes, notifications, chips, labels, badges, and other informational UI elements

Error

background

#f6cfd3

text

#ae281f

Warning

background

#ffe6d6

text

#a34100

Info

background

#edf4fa

text

#01243f

Success

background

#cee5cb

text

#305d28

Component Colors

Specialized colors for specific UI components: chips/badges, avatars, tooltips, and modal backdrops

chip fill

#d4e6f4

avatar fill

#204d70

tooltip fill

#111827

backdrop fill

#111827b3

Base Colors

Pure white and white overlay for maximum contrast situations and absolute color values

white

#fff

white overlay

#ffffff1a

Building Blocks

CSS classes defined in artifact-components.css — apply them to any HTML artifact to get consistent, theme-aware styling.

1. Header

Page header with overline, title, subtitle, metadata, and in-document navigation. Uses var(--color-primary-main) background with contrast text. No chips in the header — chips belong in cards and list items. The artifact-nav strip at the bottom of the header holds pill-shaped artifact-nav-link anchors pointing to section IDs (e.g. href='#key-stakeholders'). Add as many or as few links as the artifact needs — the strip wraps automatically.

ACCOUNT PLAN

Acme Corporation

Enterprise Software & Technology

Last updated: February 12, 2026

Navigate to a section

2. Overview / Executive Summary

Highlighted summary section with subtle background and border

Executive Summary

Acme Corporation shows strong buying signals with active engagement from C-level executives. The account has progressed through initial discovery and is now in the evaluation phase. Budget has been approved for Q2 implementation, with a decision timeline of 4-6 weeks.

3. Section Title

Section headings always include source badges and a description line explaining how the data was gathered. Wrap the h4 and badge cluster in artifact-section-title-row, then follow with artifact-source-description. Available badge variants: zoominfo, salesforce, chorus, crm, web.

Meeting Participants

Participants identified from ZoomInfo contact profiles and Salesforce CRM records.

Recent Discussions

Call recordings and transcripts pulled from Chorus, cross-referenced with CRM activity and ZoomInfo contact data.

Industry Trends

Trends synthesized from ZoomInfo intent signals, CRM pipeline data, Chorus call themes, and publicly available industry reports.

4. Section Subtitle

Secondary section headings using H3

Recent Engagement Activity

Used for subsections within major content areas.

5. Sub-section Header

Tertiary headings using H4/H5

1. AI-Powered Sales Intelligence

Used for numbered sections or smaller content groupings.

6. Sub-sub-section Header

Smallest heading level — a bold label for tight content groupings within a sub-section. Used for inline category titles like "What Matters to Them", "Key Themes", or field labels that sit directly above a list or paragraph.

What Matters to Them

Values data-driven distributor management and national account strategies across expansion markets.
Focused on pipeline predictability and reducing time spent on low-quality prospects.

Key Themes

Used directly above body copy or a list to label a grouping without the weight of a full subsection header.

7. Body Copy

Standard paragraph text with proper line height and spacing

This is standard body copy used throughout artifacts. It maintains a comfortable line height of 1.7 for optimal readability. Body text should be clear, concise, and easy to scan.

This is the small variant used for supporting text, descriptions, and metadata. It's slightly smaller but maintains good readability.

8. Blockquote / Customer Quote

Pull quote or verbatim customer statement with attribution. Uses a left-border accent to draw the eye. Stack multiple quotes using artifact-stack for grouped voice-of-customer sections.

Single quote

“We need tighter signal around which prospects are actually in-market — our current process has too much noise.”
— Sarah Chen, VP Revenue Ops, QBR Call, Feb 2026

Multiple quotes stacked

“We need to see clear ROI before we can justify the renewal to leadership. The March deadline is firm.”
— Kathryn Spikes, Director of CRM Marketing

“If you can show us how lead scoring improved conversion rates, that would be the data point we need.”
— Darren Mauro, Director of Revenue Analytics

9. Links

Hyperlinks using primary color with hover states

View full account details

Open in Salesforce

For more information, please contact your account manager or visit our help center.

10. Chips / Tags

Status indicators and labels with semantic colors

Default (Neutral)

DefaultEconomic BuyerDecision MakerEnterprise

Error (Red) — Urgent / Critical

High PriorityAt RiskUrgentHot

Warning (Orange) — Attention Needed

EvaluationEngagedMedium PriorityRenewal Due

Success (Green) — Positive Status

ChampionActiveBudget ApprovedClosed Won

Info (Blue) — Informational

InfoIn ProgressDiscovery

11. Bulleted Lists

Three variants — primary (highlighted callout), secondary (accented), tertiary (muted). Always use the primary variant for "Important to know" sections.

Primary — Highlighted callout. Use for "Important to know"

Budget approved for Q2 implementation$500K allocated for sales technology initiatives
Decision timeline confirmed4–6 weeks to final selection
C-suite sponsorship securedCEO and CRO actively championing the project

Secondary — Standard list with left-border accent

Multiple stakeholders engaged across departmentsCEO, CRO, and CTO all actively participating
Competitive evaluation in progressTwo other vendors under consideration
Proof of concept completed successfullyAll acceptance criteria met in pilot phase

Tertiary — De-emphasized supplemental details

Legacy CRM migration underwayExpected completion end of Q3
Regional team onboarding scheduledSessions planned for APAC and EMEA
Documentation review in queueIT security sign-off pending

12. Buttons

Action buttons with primary, secondary, and tertiary variants

Primary — Main Call to Action

Small Medium (Default)Large

Secondary — Alternative Action

Small Medium (Default)Large

Tertiary — Less Emphasis

Small Medium (Default)Large

13. Expandable Sections

Two variations of collapsible accordion sections. Variation 1: subsection title expandable, used to collapse named content sections. Variation 2: 'See more details' inline expandable with no background, used within cards or list items to progressively disclose content without a section heading.

Variant A — Titled

Key Participants

Variant B — Inline "See more"

See more details

14. Contact Cards

Two variants of contact cards. Compact: name, title, engage chip top-right in header, short description paragraph, last contacted line, and an icon action row — used in Buyer Engagement Map. Robust: name, title, engage chip top-right in header, labeled bullet list section, last contacted line, and icon action row — used in Account Research and Meeting Prep.

Variant A — Compact

Sarah Chen

CEO • Acme Corporation

Likely to Engage

Final decision maker with strong interest in AI-powered solutions. Attended executive demo and expressed enthusiasm about pipeline acceleration capabilities.

Michael Rodriguez

CRO • Acme Corporation

Primary stakeholder driving the evaluation. Has budget authority for Q2 implementation and multiple active touchpoints.

Variant B — Robust

Bartholomew Christiansen-Whitfield

Chief Sales Officer • Acme Corporation

Likely to Engage

What Matters to Them

Oversees national accounts and field sales strategy — values data-driven tools that improve pipeline predictability and reduce time spent on low-quality prospects.
Brings deep experience managing large distributed teams and complex distributor networks, making them receptive to solutions that improve forecasting accuracy and account targeting.

Priya Nair

Chief Marketing Officer • Acme Corporation

Likely to Engage

What Matters to Them

Responsible for brand and product marketing across a diverse portfolio — requires segmented customer engagement strategies for different buyer personas and channel partners.
With experience building consumer brands across multiple verticals, likely values unified customer data that enables personalized campaigns at scale across currently siloed systems.

15. Action Row

Icon-only action buttons (email, call, CRM) plus a vertical ellipsis overflow menu with contact details and additional actions. Replaces text buttons in contact cards.

16. Timeline

Chronological activity feed with a vertical throughline, node indicators, and dates. Use for recent discussions, engagement history, and any time-ordered content.

Feb 10, 2026

Executive demo with CEO and CRO

45-minute product demonstration focusing on AI capabilities. Strong positive response — decision timeline confirmed.

Feb 8, 2026

Technical deep-dive with CTO

Integration requirements and API documentation review. Follow-up on data privacy and compliance features requested.

Feb 5, 2026

Pricing discussion with VP of Sales

Enterprise pricing and ROI analysis shared. CFO has been looped in for budget sign-off.

Feb 1, 2026

Multiple visits to pricing and case studies

15+ page views across product documentation and customer success stories.

17. Comparison Table

Two-column layout pairing issues against solutions. Use for CRM health, gap analyses, before/after breakdowns, and problem–solution mappings.

Issue

Duplicate contact records — CRM contains 3–4 duplicate entries per account, causing split activity history
Missing industry field — 62% of accounts have no industry tag, blocking segmentation
Stale opportunity stages — 140 open deals haven't had a stage update in over 90 days

Solution

Merge & deduplication workflow — run automated merge rules on email + company fields; flag remaining duplicates for manual review
Enrich from ZoomInfo — auto-populate industry via ZoomInfo enrichment on account save
Automated stage nudge — trigger rep alert at 30 days of inactivity; auto-move to At Risk at 60 days

18. Meeting Card (2 variants)

Self-contained card for a single meeting event. Variant A (Scheduled Meeting) shows title, date/time, activity type chip, a summary, and attendee list. Variant B (Completed Meeting) is a robust expandable card used in the End of Day Digest with 3 collapsible drawers: recap & action items, customer quotes, and attendees.

Variant A: Scheduled Meeting

Executive Demo — Acme Corporation

Mar 18, 20262:00 PM – 3:00 PM · 60 min

Scheduled

Attendees

4›

Internal (1)

Jamie Torres

Account Executive · ZoomInfo

Accepted

Acme Corporation (3)

Sarah Chen

CEO · Acme Corporation

Accepted

Ryan Moore

VP Engineering · Acme Corporation

Accepted

Alex Kim

IT Security · Acme Corporation

No Response

Variant B: Completed Meeting

Acme Corporation — QBR

10:00 AM – 11:00 AM·Jamie Torres

CompletedWatch Recording

Q1 Business Review

Customer flagged adoption gaps in two product areas. Champion confirmed budget approved for renewal but escalation risk remains if gaps aren't addressed before EOM.

Meeting Recap & Action Items

3›

Jamie opened with a usage review showing 68% seat adoption. Sarah flagged that two teams haven't onboarded yet and cited competing priorities. Ryan confirmed the technical integration is working but wants a dedicated enablement session before renewal sign-off. Decision timeline: end of month.

Action Items

Schedule enablement session for remaining teams Jamie Torres
Send adoption gap analysis report by Friday Jamie Torres
Loop in CS team for executive escalation path Sarah Chen

Customer Quotes

1›

“The adoption gaps are real, but we know the platform works — we just need more internal enablement bandwidth.”
— Sarah Chen, CEO • Acme Corporation

Attendees

4›

Internal

Jamie Torres

Account Executive

Accepted

External

Sarah Chen

CEO · Acme Corporation

Accepted

Ryan Moore

VP Engineering · Acme Corporation

Accepted

Alex Kim

IT Security · Acme Corporation

No Response

19. CRM Data Card

Compact summary of CRM opportunity data — open count, total pipeline value, and next close date — with a direct link to view in the CRM.

CRM Data

4Open Opportunities

$1.2MTotal Opportunity Amount

Feb 28, 2026Next Close Date

20. Deal Card

Compact card for a single CRM opportunity. Shows deal name, account, stage chip, key metrics strip (amount, close date, probability), collapsible sections for current status/recent changes/next steps, and a footer with source badges on the left and a CRM link on the right.

GTM Studio Expansion

Acme Corporation

Proposal

$45KAmount

May 29, 2026Close Date

70%Probability

Current Status

Recent Changes

Next Steps

View in CRM

21. Account Card

Compact card for a CRM account. Shows company name, industry/size, health or tier chip, key metrics strip (ACV, renewal date, seat usage), supporting fields (owner, primary contact, tier), and a footer link to the CRM record.

Acme Corporation

Enterprise Software · 4,200 employees

Healthy

$168KACV

May 11, 2026Renewal

64%Seat Usage

Account OwnerJamie Torres

Primary ContactSarah Chen · CEO

TierStrategic

View in CRM

23. Summary Metrics Strip

Horizontal strip of key aggregate metrics — counts, totals, or dates. Sits directly below the executive summary to give an at-a-glance snapshot of the most important numbers. Each metric tile shows a large value and a short uppercase label.

6Completed Meetings

5Accounts Engaged

$380KPipeline at Risk

3Action Items Due

24. Callout Card

Left-border highlight card for high-priority callouts, strategic alerts, or important-to-know context. Uses a tinted background with a bold primary-color left border. Supports an optional title and body text.

Timing

Engage Sarah within the next 2–3 weeks — before Acme's Q2 budget freeze takes effect in mid-April. A pilot launched in April gives enough runway to build internal momentum ahead of the June renewal window.

LLM Instructions

When creating HTML use CSS variables and component classes only — no hard-coded values or custom inline styles. This ensures consistent theming across all artifacts.

Usage Rules

Always use CSS variables

var(--color-primary-main) — not hex codes

No custom colors

Only use variables listed in this reference

Match semantics

Error=red, Success=green, Info=blue, Warning=orange

Maintain contrast

Use contrast-text variables for text on colored backgrounds

Use layout classes

Use artifact-container, artifact-grid, artifact-stack — don't recreate with inline styles

Use component classes

Use artifact-button, artifact-chip, artifact-card etc. — no equivalent inline styles

Quick Examples

Primary button

background: var(--color-primary-main);
color: var(--color-primary-contrast-text);
border-radius: var(--button-chip-border-radius);

Card with border

background: var(--color-background-paper);
border: 1px solid var(--color-divider);
border-radius: var(--card-border-radius);

Chip/badge

background: var(--color-chip-default-fill);
border-radius: var(--button-chip-border-radius);

Success alert/chip/label

background: var(--color-alert-success-background);
color: var(--color-alert-success-color);

Error badge/label

background: var(--color-alert-error-background);
color: var(--color-alert-error-color);

Disabled state

color: var(--color-action-disabled);
background: var(--color-action-disabled-background);

CSS Variables

Use only these variables. No exceptions.

Base Styles

Foundation styles applied globally to all artifacts.

--font-familyFont family for all text

--button-chip-border-radiusBorder radius for buttons and chips

--card-border-radiusBorder radius for cards and containers

Background Colors

--color-background-defaultPage background

--color-background-paperCard/section backgrounds

Text Colors

--color-primaryMain text

--color-secondarySecondary/muted text

--color-disabledDisabled text

Primary Colors

--color-primary-mainButtons, links, primary actions

--color-primary-darkHover states

--color-primary-lightSubtle highlights

--color-primary-contrast-textText on primary backgrounds

Secondary Colors

--color-secondary-mainSecondary buttons

--color-secondary-darkSecondary hover

--color-secondary-lightLight backgrounds

--color-secondary-contrast-textText on secondary backgrounds

Action Colors

--color-action-activeActive state

--color-action-hoverHover overlay

--color-action-selectedSelected state

--color-action-focusFocus ring

--color-action-disabledDisabled elements

--color-action-disabled-backgroundDisabled backgrounds

Divider

--color-dividerBorders, separators, dividers

Error Colors

--color-error-mainError state

--color-error-darkError hover

--color-error-lightError highlight

--color-error-contrast-textText on error background

--color-alert-error-colorError text for alerts, chips, labels (dark text on light bg)

--color-alert-error-backgroundError background for alerts, chips, labels (light background)

Warning Colors

--color-warning-mainWarning state

--color-warning-darkWarning hover

--color-warning-lightWarning highlight

--color-warning-contrast-textText on warning background

--color-alert-warning-colorWarning text for alerts, chips, labels (dark text on light bg)

--color-alert-warning-backgroundWarning background for alerts, chips, labels (light background)

Info Colors

--color-info-mainInfo state

--color-info-darkInfo hover

--color-info-lightInfo highlight

--color-info-contrast-textText on info background

--color-alert-info-colorInfo text for alerts, chips, labels (dark text on light bg)

--color-alert-info-backgroundInfo background for alerts, chips, labels (light background)

Success Colors

--color-success-mainSuccess state

--color-success-darkSuccess hover

--color-success-lightSuccess highlight

--color-success-contrast-textText on success background

--color-alert-success-colorSuccess text for alerts, chips, labels (dark text on light bg)

--color-alert-success-backgroundSuccess background for alerts, chips, labels (light background)

Component Colors

--color-chip-default-fillChip/badge background

--color-avatar-fillAvatar background

--color-tooltip-fillTooltip background

--color-backdrop-fillModal backdrop

Base Colors

--color-base-whitePure white

--color-base-blackPure black

Layout Utilities

Use these classes for structure — do not recreate them with inline styles.

Containers

.artifact-containerMax-width (1024px) centered wrapper with paper background

.artifact-cardBordered card with --card-border-radius and --color-background-paper

.artifact-divider<hr> horizontal rule separator

Grid

<div class="artifact-grid artifact-grid--cols-2">...</div>
<div class="artifact-grid artifact-grid--cols-3">...</div>
<div class="artifact-grid artifact-grid--cols-4">...</div>

Modifiers: artifact-grid--gap-small, artifact-grid--gap-medium, artifact-grid--gap-large

Stack (vertical flex)

<div class="artifact-stack artifact-stack--gap-medium">...</div>

Modifiers: artifact-stack--gap-small, artifact-stack--gap-medium, artifact-stack--gap-large

Component Classes

Use these classes — do not write equivalent inline styles.

Header

.artifact-headerOuter wrapper

.artifact-overlineSmall uppercase label above title

.artifact-titleH1, 3rem, bold

.artifact-subtitleH2, 1.5rem

.artifact-header-metaFlex row for chips + metadata

.artifact-metadataSmall secondary date/info text

Overview / Summary

.artifact-overviewHighlighted summary box (secondary-light bg)

.artifact-overview-titleBold section label inside overview

.artifact-overview-contentBody text container inside overview

Typography

.artifact-section-titleH4, 2rem — major section headings

.artifact-section-subtitleH5, 1.5rem — subsection headings

.artifact-subsection-headerH6, 1.25rem, secondary color — minor headings

.artifact-body-textStandard paragraph, 1rem

.artifact-body-text--smallSmall paragraph, 0.875rem, secondary color

.artifact-linkStyled anchor with hover state

.artifact-link-icon16px inline SVG icon next to a link

Chips / Tags

<span class="artifact-chip artifact-chip--[variant] artifact-chip--[size]">Label</span>

Variants: default, error, warning, info, success Sizes: small, medium

Lists

<ul class="artifact-list">
  <li class="artifact-list-item">
    <span class="artifact-list-item-primary">Main text</span>
    <span class="artifact-list-item-secondary">Supporting detail</span>
  </li>
</ul>

Buttons

<a href="#" class="artifact-button artifact-button--[variant] artifact-button--[size]">Label</a>

Variants: primary, secondary, tertiary Sizes: small, medium (default), large

Expandable Section

<div class="artifact-expandable">
  <div class="artifact-expandable-header" onclick="...">
    <h6 class="artifact-expandable-title">Title</h6>
    <button class="artifact-expandable-toggle" aria-expanded="false">
      <svg class="artifact-expandable-icon">...</svg>
    </button>
  </div>
  <div class="artifact-expandable-content" style="display:none;">
    <div class="artifact-expandable-inner">Content here</div>
  </div>
</div>

Contact Card

<div class="artifact-contact-card">
  <div class="artifact-contact-header">
    <div class="artifact-contact-avatar">AB</div>
    <div class="artifact-contact-info">
      <h3 class="artifact-contact-name">Name</h3>
      <p class="artifact-contact-title">Title • Company</p>
    </div>
  </div>
  <div class="artifact-contact-chips"><!-- chips here --></div>
  <p class="artifact-contact-description">Bio text</p>
  <div class="artifact-contact-actions"><!-- buttons here --></div>
</div>