Introduction

Margo is an Astro and Tailwind CSS theme for an editorial portfolio: a solo designer, a small design studio, or a photographer. It ships 3 homepages, case studies and photo series, services, pricing, a journal, and the usual inner pages, in English, French, and Arabic with full right-to-left support, in light and dark mode.

Most changes in Margo are edits to plain text files, not code: your projects, text, photos, buttons, menus, prices, and the layout of every section that has more than one. Colors are a few values in one CSS file. When you do want to change code, the theme ships instruction files that tell AI coding tools how it is built.

Margo comes in three editions: Astro, Tina, and Sanity. The design and pages are the same, and they differ in where your content lives and how you edit it. These docs show the files of the Astro edition. See Theme Editions.

What Is Included

3 homepages: a solo designer (/, the main homepage), a small studio (/home-studio/), and a photographer (/home-photo/). The studio and photographer homepages pick their own header and footer layouts
Projects: a projects page with filter chips (/projects/), an archive with every project in one ruled list (/archive/), and one page per project in three templates: a case study, a split case study with the facts beside the images, and a photo series. The demo has 6 case studies and 6 photo series
Services: an overview and one page per service, with a starting price, what the client receives, the process, the tools, related projects, and questions
Pricing and FAQ: a pricing page and a questions page
Studio: about, team with one page per member, testimonials, and contact with a form and a booking card
Journal: a blog with authors, categories, tags, an author box, related posts, a table of contents, and an RSS feed
Legal: privacy policy, terms and conditions, cookie policy, and a 404 page per language
Section layouts: 23 section components, 19 of them with more than one look, chosen with one line. /elements/ previews them all
Header and footer: three header layouts (pill, bar, overlay) and three footer layouts (wordmark, columns, email), set for the whole site or per page
Languages: English, French, and Arabic, with the whole layout mirrored on right-to-left pages. See RTL & Arabic
Built in: site search (⌘K), light and dark mode, smooth scrolling, scroll animations and page transitions, cookie consent, SEO (sitemap, robots.txt, structured data, generated Open Graph images), llms.txt and Markdown copies of pages, Ask AI links, contact forms (Formsubmit, Formspree, or Netlify Forms), and a Mailchimp newsletter form

Choose Your Path

Every guide in these docs starts with the plain-language task, then shows the exact file and setting. Pick the path that matches how you like to work:

I don't codeFollow the Quick Start, then the Beginner Guide. You only edit text files.

I want AI to helpUse Claude, Cursor, Copilot, Gemini, Windsurf, or Codex with ready-made prompts.

I'm a developerLearn the architecture, then use the Customization reference.

I'm ready to launchSet your URL, connect the forms, and deploy.

The Files You Will Edit Most

What you want to change	Where it lives
Site name, URL, forms, header and footer layouts, switches	`src/config/config.toml`
Your email and booking link for the Copy email and Book a call buttons	`[settings.contactInfo]` in `src/config/config.toml`
Projects and photo series	`src/content/projects/english/`
Services	`src/content/services/english/`
Header and footer links	`src/config/menu.<language>.json`, such as `menu.en.json`
Colors and type scale	`src/styles/theme.css`
Fonts	`src/config/fonts.json`
Text and images of a section	`src/content/sections/english/` (and `french/`, `arabic/`)
Footer heading, contact columns, and email	`src/content/sections/english/footer.md`
Text and section settings of one page	`src/content/<collection>/english/-index.md`, or `src/content/pages/english/<page>.mdx` for single pages
Button labels and other small interface text	`src/i18n/<language>.json`, such as `en.json`

This table shows the files. In the Tina edition you can edit them at /admin/, and in the Sanity edition most of this content is in the Studio. See What Is Editable In Tina and What Is Editable In Sanity.