docs · foundry

Foundry owner's guide

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

2.2.1
version: 8
pages: 30
components: 48 × 2 modes
tokens: 4
workflows

from zip to running

unzip foundry-2.2.1.zip
cd foundry-2.2.1
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 8 routes, the token file, 30 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.2.1.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.2.1/

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 · 2 files

components/21 sections, one file each, no cross-imports · 30 files

fonts/self-hosted woff2 with their licences · 7 files

fonts.tswires the faces to the font tokens

theme.cssevery design decision: 48 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

laid-paper.jpg

README.md

components/21 sections, one file each, no cross-imports

ui/the shared primitives

arrow-link.tsx

badge.tsx

button.tsx

container.tsx

field.tsx

icons.tsx

mode-toggle.tsx

monogram.tsx

section-heading.tsx

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

fonts/self-hosted woff2 with their licences

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: 48 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.

Making it yours

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

the rebrand loop

Edit the values. All 48 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
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.
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 nothing but ./ui/*, exporting one named component in PascalCase.
.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 827 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.

How the catalog reads as data What a license covers Report a broken route