---
name: foundry-css
description: Write custom CSS for Zerply Foundry published blogs and landing pages. Use when the user wants to restyle Foundry, match a brand site, or generate CSS for Foundry Settings → Custom CSS.
---
# Foundry custom CSS
Zerply Foundry serves blogs and landing pages on the customer's domain. Teams paste CSS into **Foundry → Settings → Advanced → Custom CSS**. Your job is to output that CSS.
Human spec: https://zerply.ai/docs/foundry-custom-css/
## Output rules
- Return **only CSS** unless the user asks for an explanation.
- CSS only. No JavaScript, HTML, or `` tags.
- `@import` and `@font-face` are allowed. `@import` must be the first line.
- Prefer CSS variables on `[data-foundry-tenant]`, then `[data-foundry-*]` selectors.
- Never target Tailwind class names (`px-8`, `text-3xl`, `bg-card`). They can change.
- Do not use `!important` unless a rule cannot win otherwise (reading-progress width and TOC highlight are inline because they change at runtime).
- Ask for a site URL, colors, and fonts if the user did not give brand notes.
- After generating, tell them to paste into Foundry settings and save.
## How CSS is applied
Injected after Foundry defaults. Equal specificity in custom CSS wins. Root markup:
```html
...
```
Dark overrides: `[data-color-scheme="dark"] [data-foundry-tenant] { ... }`
## Theme variables
Set on `[data-foundry-tenant]`:
| Variable | Used for |
| --- | --- |
| `--background` | Page surface |
| `--foreground` | Body text |
| `--card` / `--card-foreground` | Cards, header default |
| `--muted` / `--muted-foreground` | Subtle bands, secondary text |
| `--border` / `--input` | Edges, form borders |
| `--brand-color` | Links and accents |
| `--brand-fill` | Solid buttons (white text) |
`--brand-color` and `--brand-fill` are already contrast-tuned from the team's brand color. Override only for a specific hex.
## Layout variables
| Variable | Default | Used for |
| --- | --- | --- |
| `--foundry-font-sans` | Arial, Helvetica, sans-serif | All UI text |
| `--foundry-header-bg` | `var(--card)` | Sticky header |
| `--foundry-header-border` | `var(--border)` | Header border |
| `--foundry-footer-bg` | `#111827` in light, page background in dark | Footer surface |
| `--foundry-footer-fg` | `#d1d5db` / muted in dark | Footer text |
| `--foundry-footer-muted` | `#9ca3af` / muted in dark | Footer links, copyright |
| `--foundry-footer-heading` | `#ffffff` / foreground in dark | Footer headings |
| `--foundry-footer-border` | `#1f2937` / border in dark | Footer bar |
| `--foundry-footer-logo-filter` | invert in light, `none` in dark | Footer logo |
| `--foundry-hero-bg` | slate gradient | Landing hero |
| `--foundry-hero-fg` | `#ffffff` | Hero text |
| `--foundry-hero-cta-bg` | `var(--brand-fill)` | Hero button |
| `--foundry-hero-cta-fg` | `#ffffff` | Hero button text |
| `--foundry-cta-band-bg` | `var(--brand-fill)` | Landing CTA section |
| `--foundry-cta-band-fg` | `#ffffff` | CTA section text |
| `--foundry-cta-band-button-bg` | `#ffffff` | CTA section button |
| `--foundry-cta-band-button-fg` | `var(--brand-color)` | CTA section button text |
Light theme inverts the footer logo so dark marks stay visible on the dark bar. Dark theme shows the uploaded logo as-is. Override with `--foundry-footer-logo-filter: none`.
## Pages — `[data-foundry-page]`
| Value | URL |
| --- | --- |
| `hub` | `/{base_path}` |
| `landing` | `/{base_path}/{slug}` |
| `blog-index` | `/{base_path}/blog` |
| `blog-all` | `/{base_path}/blog/all` |
| `blog-post` | `/{base_path}/blog/{slug}` |
| `authors` | `/{base_path}/blog/authors` |
| `author` | `/{base_path}/blog/authors/{slug}` |
## Header parts — `[data-foundry-region="header"]`
`inner`, `brand`, `logo`, `site-name`, `nav`, `link`, `cta`, `search`, `search-form`, `menu-button`, `menu`
## Footer parts — `[data-foundry-region="footer"]`
`inner`, `brand`, `logo`, `site-name`, `description`, `social`, `link-group`, `heading`, `link`, `bar`, `copyright`, `theme`, `credit`
## Listing sections — `[data-foundry-section]`
| Value | Where |
| --- | --- |
| `intro` | Hub title |
| `latest-articles` | Hub + blog index grids |
| `pages` | Hub landing-page grid |
| `empty` | Empty hub |
| `featured` | Blog index hero post |
| `category` | Blog index category (`data-foundry-category="{slug}"`) |
Also: `[data-foundry-part="recommended"]`, `filters`, `search`, `pagination`, `breadcrumbs`, `profile`
Cards: `[data-foundry-card="blog|landing|author"]`
## Landing sections — `[data-foundry-section="{type}"]`
Each has `[data-foundry-part="inner"]` except `text` (`body` only) and `hero`/`cta` which also use `inner`.
| Type | Parts |
| --- | --- |
| `hero` | `inner`, `heading`, `subheading`, `cta` |
| `text` | `body` |
| `features` | `inner`, `item`, `icon`, `title`, `description` |
| `faq` | `inner`, `heading`, `item`, `title`, `description` |
| `cta` | `inner`, `heading`, `cta` |
| `testimonials` | `inner`, `heading`, `item`, `quote-mark`, `quote`, `rating`, `author`, `avatar`, `name`, `role` |
| `image_text` | `inner`, `media`, `image`, `copy`, `heading`, `description`, `cta` + `data-foundry-image-position="left|right"` |
| `stats` | `inner`, `heading`, `item`, `value`, `label` |
| `team` | `inner`, `heading`, `item`, `photo`, `name`, `role`, `bio` |
| `contact_details` | `inner`, `heading`, `subheading`, `details`, `address`, `phone`, `email`, `label`, `map` |
| `contact_form` | `inner`, `heading`, `subheading`, `form`, `field`, `label`, `input`, `submit` |
| `logo_cloud` | `inner`, `heading`, `logos`, `logo` |
| `pricing` | `inner`, `heading`, `item`, `name`, `price`, `period`, `features`, `cta` + `[data-foundry-featured="true"]` |
## Blog post parts — `[data-foundry-page="blog-post"]`
`progress`, `heading`, `byline`, `cover`, `toc`, `body`, `table-wrap`, `author-card`, `sidebar`, `sidebar-cta`, `related`, `bottom-cta`
Article body is markdown HTML inside `[data-foundry-part="body"]` (`.prose`). Wide tables are wrapped in `[data-foundry-part="table-wrap"]`.
CTAs: `[data-foundry-cta="inline|sidebar|bottom"]` with inner `[data-foundry-part="card"]`.
## Examples
```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
[data-foundry-tenant] {
--foundry-font-sans: "Inter", sans-serif;
--foundry-hero-bg: #0f172a;
}
[data-foundry-page="blog-post"] [data-foundry-part="body"] {
font-family: Georgia, "Times New Roman", serif;
}
```