Project structure

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 filesh2#the-files

├── 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 editorh2#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.

123

Styles: system.css and site.cssh2#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 componentsh2#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 formsh2#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 codeh2#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 datah2#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.