tailthemes
all-access
docs · foundry

Foundry owner's guide

Everything from the download to your own palette, read from the files this theme ships.

2.10.2
version
8
pages
33
components
50 × 2 modes
tokens
4
workflows
from zip to running
unzip foundry-2.10.2.zip
cd foundry-2.10.2
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 8 routes, the token file, 33 components and the agent kit.

Download the zip

Install

Three ways in: the zip, the shadcn registry, or your agent over MCP.

the zip

The artifact is versioned and immutable, so the file you get is foundry-2.10.2.zip. Unzip it, run the four commands above, and the site is on localhost:3000.

It is free: no account, no key, no checkout.

the registry

Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/foundry/, mirroring the tree below.

bunx shadcn add https://tailthemes.com/r/foundry.json

A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.

over mcp

Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.

the four tools

What unzips

One directory, laid out the way you would lay it out yourself.

foundry-2.10.2/
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 9 sections
work/page.tsx/work · 5 sections
services/page.tsx/services · 7 sections
team/page.tsx/team · 6 sections
contact/page.tsx/contact · 6 sections
journal/page.tsx/journal · 5 sections
legal/page.tsx/legal · 5 sections
components/page.tsx/components · 21 sections
src/the theme, copied verbatim
app/8 pages, one file each · 8 files
assets/the imagery, and the prompts that made it · 14 files
components/21 sections, one file each, no cross-imports · 47 files
fixtures/1 file
fonts/self-hosted woff2 with their licenses · 7 files
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 50 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality · 4 files
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated
every file
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 9 sections
work/page.tsx/work · 5 sections
services/page.tsx/services · 7 sections
team/page.tsx/team · 6 sections
contact/page.tsx/contact · 6 sections
journal/page.tsx/journal · 5 sections
legal/page.tsx/legal · 5 sections
components/page.tsx/components · 21 sections
src/the theme, copied verbatim
app/8 pages, one file each
components.tsx
contact.tsx
home.tsx
journal.tsx
legal.tsx
services.tsx
team.tsx
work.tsx
assets/the imagery, and the prompts that made it
case-halcyon.jpg
case-marlow.jpg
case-northbank.jpg
case-verity.jpg
journal-bindery.jpg
laid-paper.jpg
README.md
studio-arch.jpg
team-callum-reid.jpg
team-ines-ferreira.jpg
team-milo-vance.jpg
team-nadia-okonkwo.jpg
team-priya-raman.jpg
team-sofia-brandt.jpg
components/21 sections, one file each, no cross-imports
ui/the shared primitives
_tt/
accordion-disclosure.axes.ts
accordion-disclosure.fixtures.ts
accordion-disclosure.tsx
dialog.axes.ts
dialog.fixtures.ts
dialog.tsx
focusables.ts
host.ts
ids.ts
layer.ts
presence.ts
recipe.ts
reduced-motion.ts
accordion-disclosure.tsx
arrow-link.tsx
badge.tsx
button.tsx
container.tsx
dialog.tsx
field.tsx
icons.tsx
mode-toggle.tsx
monogram.tsx
plate.tsx
section-heading.tsx
ui.config.ts
capabilities.tsx
client-band.tsx
contact-desk.tsx
cta.tsx
enquiry-form.tsx
faq.tsx
hero.tsx
journal-entry.tsx
journal-notes.tsx
legal-notice.tsx
manifesto.tsx
open-roles.tsx
page-header.tsx
process.tsx
selected-work.tsx
services-ledger.tsx
site-footer.tsx
site-header.tsx
team-grid.tsx
testimonial.tsx
work-index.tsx
fixtures/
foundry.ts
fonts/self-hosted woff2 with their licenses
Archivo-Variable.woff2
Fraunces-Variable.woff2
IBMPlexMono-Medium.woff2
IBMPlexMono-Regular.woff2
OFL-Archivo.txt
OFL-Fraunces.txt
OFL-IBMPlexMono.txt
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 50 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality
add-page/
SKILL.md
add-section/
SKILL.md
check-quality/
SKILL.md
rebrand/
SKILL.md
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated

Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.

Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.

Using it

Every page is a plain component, and the tokens are scoped to one class.

the pages
  • /Home9 sections
  • /workWork5 sections
  • /servicesServices7 sections
  • /teamStudio6 sections
  • /contactContact6 sections
  • /journalJournal5 sections
  • /legalLegal5 sections
  • /componentsThe parts21 sections
dropping it into an existing app

Tokens are declared on .tt-foundry as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-foundry"> and everything inside picks them up.

Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.

The HTML edition

The same site again, with no framework under it.

Everything under html/ is a second, independently authored edition of the theme. html/dist/ is 8 compiled routes with local fonts and vanilla JavaScript — copy it to any static host and it is live, with no build step and no Node on the server. html/src/ is the Nunjucks source those routes compile from.

the two commands

bun run build:html recompiles html/dist/ after you change the source or the tokens. bun run preview:html serves the compiled edition locally. Both ship in the download's package.json, backed by the two files in scripts/.

One token file drives both editions, so a rebrand made in src/theme.css reaches the HTML edition the next time you run the build — dist/ carries compiled CSS and never updates by itself.

The two editions are kept in step by the publish gate: every route in the manifest must have a compiled counterpart before a version ships, so the 8 pages you saw above exist in both.

Making it yours

Tokens are the API: change the values, never the names.

the rebrand loop
  1. Edit the values. All 50 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
  2. Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
  3. Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.
the workflows that ship inside
  • .claude/skills/add-page

    A page in Foundry is one file in themes/foundry/src/app/ that imports sections and stacks them. No data fetching, no Next-specific APIs, no next/link or next/image — pages must render standalone and inside the marketplace preview route.

  • .claude/skills/add-section

    A section in Foundry is one file in themes/foundry/src/components/, importing shared presentation from ./ui/* and repeated studio facts from ../fixtures/foundry, then exporting one named component in PascalCase. A section never imports another section.

  • .claude/skills/check-quality

    Run all nine checks. Any failure blocks publishing.

  • .claude/skills/rebrand

    Foundry is built so that a rebrand is a single-file edit. Every colour, the radius and the font families live in themes/foundry/src/theme.css.

Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/foundry/ your copy has the project root instead.

For your agent

The theme brought its own rules, so nothing has to be reverse-engineered.

AGENTS.md is 1121 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.

AGENTS.md, first 15 lines
# Foundry — rules for agents

Foundry is a **free**, fully open agency theme (Tailwind v4 / Next.js 15 /
React 19). The demo content belongs to a fictional studio that shares the theme's
name — **Foundry**, a twelve-person brand and digital studio in a railway arch in
Bermondsey, London.

Read this before changing anything. The four workflows in `.claude/skills/`
(`rebrand`, `add-section`, `add-page`, `check-quality`) are the sanctioned way to
extend Foundry; they are written against the real file names and token names
below.

---

**Typefaces**: Fraunces, Archivo and IBM Plex Mono ship under the SIL Open Font License 1.1; the license files in `src/fonts/` travel with every redistribution.

The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.