Project structure

Every Tandmade site is a standard Astro project. What lives where, which files are generated, and what is code versus data.

Every Tandmade site is a standard Astro project. The editor, the agent and your own tools all change the same files — there is no hidden model behind them.

The files

bash

├── src/
│   ├── pages/                 # one file per page; [slug].astro = a template for collection items
│   ├── components/            # sections and components (sections/Hero.astro, …)
│   ├── layouts/               # Layout.astro wraps every page
│   ├── styles/
│   │   ├── system.css         # generated from design/tokens.json — don't edit
│   │   └── site.css           # your classes; the visual editor writes here
│   ├── cms.config.ts          # collections and their fields
│   ├── content.config.ts      # connects the collections to Astro
│   ├── forms.config.ts        # where form submissions go (optional)
│   └── fx/                    # interactions
├── design/
│   ├── tokens.json            # the design system: colors, fonts, type, spacing
│   └── layout.md, voice.md    # written guidelines for the design system
├── settings/
│   ├── site.json              # title template, default description and share image, indexing, analytics
│   ├── head.html              # custom code for <head> (optional)
│   └── body.html              # custom code for <body> (optional)
├── public/                    # files served as they are: favicon, images
├── DESIGN.md                  # generated summary of the design system
├── AGENTS.md                  # notes for coding agents
├── astro.config.mjs
└── package.json

Where you see it in the editor

Open the code of any element with </> in the inspector header or ⌥C. The bar of the code panel shows the file and line the element comes from, and the rules are grouped by the stylesheet they live in.

1. File and line Where the element is in the source. Click to see its markup.
2. site.css Rules from your own stylesheet that style this element.
3. Markup The element's markup in the .astro file.

Styles: system.css and site.css

• src/styles/system.css is compiled from design/tokens.json. Change tokens in Design (or in the JSON) and both system.css and DESIGN.md are generated again. Edits made directly in system.css are overwritten.
• src/styles/site.css holds the site's own classes. Styles you change in the inspector are written here. Use the design system's CSS variables in it, not fixed colors or sizes, so a token change reaches everything.

Pages and components

Each file in src/pages/ is a page; its path is the address. A file with a parameter, like src/pages/blog/[slug].astro, is a template that renders one page per collection item. Pages are built from components in src/components/ and wrapped in src/layouts/Layout.astro.

Collections and forms

• src/cms.config.ts defines collections and their fields. Content › New collection writes it for you.
• A form's fields are its HTML: the inputs in the page are the schema. src/forms.config.ts only says what happens with a submission — the email recipient, redirect, webhook, retention and spam check — and the Forms panel writes it.

Settings and custom code

settings/site.json is what Site settings… edits: the title template, default description and share image, indexing, Google verification and analytics. Custom code goes into settings/head.html and settings/body.html, not into pages.

Code and data

Code changes go live when you publish the site. Data goes live on its own: publishing a collection item updates the live site without a rebuild. While you build, the data sits in a local database in .expirio/ (not tracked by Git); the live site keeps its own copy on Cloudflare.