Agents

The same design system, published as flat files that AI tools can read whole — for Replit, Claude Cowork, Notion custom agents, or anything that takes a URL.

The problem

A gallery is the wrong shape for an agent

The other pages here are built for a person scanning. An agent can't click a nav, and it shouldn't have to parse a 10 MB page of inlined images to discover that the brand indigo is #4f46e5. So the same system is published a second time, as flat files an agent can fetch and read whole.

Every file below is generated from the real sources — css/tokens.css and the section markup — so the spec an agent reads can never drift from the system a human sees.

What it is for

Ask an agent for a one-pager, get a one-pager

This is the point of the whole layer. Every section and every slide is a plain HTML fragment at its own URL — so an agent with no checkout, no build step and no framework can assemble a real document by fetching blocks and concatenating them.

1 · read the index

GET https://fountain-design-system.replit.app/agents/components.json

60 page sections + 12 slide archetypes,
each with a fetchable `url`.

2 · fetch the blocks you picked

GET /sections/05-hero-centered.html
GET /sections/25-problem-columns.html
GET /sections/46-comparison-table.html

The response body IS the fragment.

3 · drop them in the skeleton — this is the whole thing

<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/sections.css">   <!-- per-section layout: required -->
<link rel="stylesheet" href="css/pages.css">

<div class="sheet sheet--letter sheet--auto">
  <div class="sheet__frame">
    <!-- each fetched fragment, in order -->
  </div>
</div>

Swap sheet--letter for sheet--slide to put a web section on a 16:9 slide. For a deck built from the twelve slide archetypes, skip the sheet entirely — they are already 1280×720 — link css/slides.css and concatenate them inside <body class="deck">.

The one step that fails silently: css/sections.css carries every section's own layout. Leave it out and the fragments render as unstyled stacked text. llms.txt says so twice for that reason.

The files

Five ways in

agents/llms.txt Works everywhere

The whole system as one flat text file — tokens, rules, component index, composition commands. Point any agent at this single URL and it has everything.

agents/tokens.json Replit · any codegen

All 114 design tokens, grouped by role: colour, gradient, glass, elevation, type, space, layout, radius. Generated from css/tokens.css.

agents/components.json Replit · Notion agents

The 60 sections: id, name, source file, Figma node, height, the images each uses, and which image slots are still empty.

agents/routing.json Read this first

Which surface to read for which job, and what each one weighs. Fetch this first if you are deciding what to fetch: components for parts, collaterals for finished assets, illustrations last.

agents/links.json Fill this in first

Where every button goes. Each anchor in the library carries data-cta naming a key here, so a URL is written once and reaches every block that points at it. 4 of 109 are filled in; the rest still read # and are listed by scripts/check-links.py.

agents/CLAUDE.md Claude Code · Cowork

Drop-in project memory. Put it at the root of a repo and Claude Code or Cowork picks up the rules automatically.

agents/system-prompt.md Replit · Notion

A paste-ready block for tools that take a system prompt rather than a file — Replit Agent, Notion custom agents, v0-style builders.

Getting started

By tool

Replit

Paste agents/system-prompt.md into the Agent's instructions, then give it the two stylesheet URLs. For a codegen step, fetch tokens.json and components.json directly.

Fetch https://fountain-design-system.replit.app/agents/llms.txt
and build to that spec. Use the tokens
in css/tokens.css for every value.

Claude Code & Cowork

Copy agents/CLAUDE.md to the root of the repo. It's picked up as project memory, so the rules apply to every task without being restated.

curl -O https://fountain-design-system.replit.app/agents/CLAUDE.md

Notion custom agents

Paste system-prompt.md into the agent's instructions. Notion agents can't fetch arbitrary files reliably, so the prompt restates the palette, the type scale and the layout inline — it works standalone.

Anything else

One URL: agents/llms.txt. It carries the rules, every token, the full component index and the composition commands in about 2924 words of plain text.

Shape of the data

What an agent actually receives

tokens.json — excerpt

{
  "color.brand": {
    "--brand-50": "#eef2ff",
    "--brand-100": "#e0e7ff",
    "--brand-600": "#4f46e5",
    "--brand-800": "#3730a3",
    "--gradient-ai": "linear-gradient(180deg, #3935ff 0%, #8f00ff 100%)"
  },
  "type.size": {
    "--h1": "72px",
    "--h2": "56px",
    "--h3": "48px",
    "--h4": "40px"
  }
}

components.json — one entry

{
  "id": "02-hero-primary",
  "name": "Hero / Primary",
  "figma_node": "1:1855",
  "file": "sections/02-hero-primary.html",
  "url": "https://fountain-design-system.replit.app/sections/02-hero-primary.html",
  "height_px": 738,
  "images": [
    "assets/hero/hero-orb-avatars.png"
  ],
  "empty_slots": [],
  "classes": [
    "fx-btn",
    "fx-btn--primary",
    "fx-btn--secondary",
    "fx-btn__icon",
    "fx-container",
    "fx-eyebrow",
    "fx-gap-4",
    "fx-gap-6",
    "fx-gap-8",
    "fx-h1",
    "fx-hero",
    "fx-hero__column",
    "fx-hero__grid",
    "fx-hero__visual",
    "fx-p-xl",
    "fx-row",
    "fx-section",
    "fx-slot",
    "fx-stack"
  ]
}

Keeping it true

Regenerating

These files are build output, not source. Change a token or a section and rebuild — never hand-edit anything under agents/.

python3 scripts/build.py          # components.html
python3 scripts/build-agents.py   # everything under agents/

One thing to set before deploying: BASE_URL at the top of scripts/build-agents.py is currently https://fountain-design-system.replit.app. Point it at the real host and rebuild, so the URLs inside llms.txt and system-prompt.md resolve.