theme.json

{
  "slug": "foundry-json-render",
  "name": "Foundry json-render",
  "version": "2.10.0",
  "category": "portfolio",
  "priceCents": 0,
  "description": "Foundry is a free Tailwind agency portfolio built like a piece of editorial production. It includes a separately authored React edition and a framework-free HTML template edition, with ready static pages, Nunjucks source and vanilla JavaScript. Fraunces display type, Archivo text and IBM Plex Mono labels sit on cool steel paper with one restrained coral accent. A priced services ledger, four complete case studies, a validated enquiry form, a long-form journal and legal imprint cover eight routes including the living component guide. Twelve generated photographic plates show the work, bindery, railway arch and six fictional teammates in one coherent editorial shoot. Portraits and case evidence stay separate from names and captions, so no text crosses image pixels. Light and cold-ash dark modes share one semantic token system with computed WCAG AA pairs. The React source includes twenty-one independent sections and twelve shared primitives, two of them dialog and disclosure parts whose behaviour and structure are vendored and whose whole appearance is one editable recipe file, plus three self-hosted typefaces and four extension skills.",
  "summary": "For a studio putting its own work online: a free Tailwind agency portfolio template in HTML and React, with four case studies across 8 routes.",
  "tags": [
    "free tailwind agency portfolio template",
    "free nextjs portfolio template",
    "agency",
    "html agency template",
    "editorial",
    "free",
    "tailwind-v4"
  ],
  "palette": {
    "bg": "#f4faff",
    "surface": "#ffffff",
    "accent": "#e26d5a",
    "text": "#13181d",
    "line": "#cedce8"
  },
  "darkMode": true,
  "pages": [
    {
      "path": "/",
      "title": "Home",
      "sections": [
        "site-header",
        "hero",
        "client-band",
        "selected-work",
        "services-ledger",
        "manifesto",
        "testimonial",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/work",
      "title": "Work",
      "sections": [
        "site-header",
        "work-index",
        "client-band",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/services",
      "title": "Services",
      "sections": [
        "site-header",
        "services-ledger",
        "capabilities",
        "process",
        "faq",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/team",
      "title": "Studio",
      "sections": [
        "site-header",
        "team-grid",
        "manifesto",
        "open-roles",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/contact",
      "title": "Contact",
      "sections": [
        "site-header",
        "contact-desk",
        "faq",
        "enquiry-form",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/journal",
      "title": "Journal",
      "sections": [
        "site-header",
        "journal-entry",
        "journal-notes",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/legal",
      "title": "Legal",
      "sections": [
        "site-header",
        "page-header",
        "legal-notice",
        "cta",
        "site-footer"
      ]
    },
    {
      "path": "/components",
      "title": "The parts",
      "sections": [
        "site-header",
        "page-header",
        "hero",
        "client-band",
        "selected-work",
        "work-index",
        "services-ledger",
        "manifesto",
        "testimonial",
        "capabilities",
        "process",
        "faq",
        "team-grid",
        "open-roles",
        "contact-desk",
        "enquiry-form",
        "journal-entry",
        "journal-notes",
        "legal-notice",
        "cta",
        "site-footer"
      ]
    }
  ],
  "components": [
    {
      "name": "site-header",
      "file": "src/components/site-header.tsx",
      "renders": "Sticky header with the wordmark, five nav links, an availability line and a start-a-project button; the mobile menu is ui/accordion-disclosure over a native <details>, so it works with no script and still closes on Escape"
    },
    {
      "name": "hero",
      "file": "src/components/hero.tsx",
      "renders": "Oversized display headline with a coral half-line, lead paragraph, two calls to action and a four-cell hairline facts rail (founded, studio size, engagement length, next opening); headingLevel defaults to 1 for the home route and accepts 2 for a nested showcase specimen without changing the type class"
    },
    {
      "name": "client-band",
      "file": "src/components/client-band.tsx",
      "renders": "Quiet muted band setting eight client names as wordmarks beside a since-2016 count"
    },
    {
      "name": "selected-work",
      "file": "src/components/selected-work.tsx",
      "renders": "Four case-study teasers as full-width editorial rows: index, client at display size, summary, discipline chips, year and the number the work moved"
    },
    {
      "name": "work-index",
      "file": "src/components/work-index.tsx",
      "renders": "The case ledger — four case studies opened out in place as ruled entries: one photographic plate, oversized index numeral and year, client at display size, sector line, discipline chips, duration, named studio team with roles, one governing constraint, paired The brief and What we made blocks and a three-cell hairline strip of outcome figures, closed by a totals row for all thirty-one; each entry keeps its existing anchor so the home-page teasers link straight to it, and heading=\"page\" makes it open the work route with the h1 above entry 01"
    },
    {
      "name": "services-ledger",
      "file": "src/components/services-ledger.tsx",
      "renders": "The signature section — six services set like a table of contents: 01 / name / summary / deliverables / from-price / duration, one row highlighted as most requested; heading=\"page\" makes it open the services route, carrying that page's h1 as its own head row above rule 01"
    },
    {
      "name": "manifesto",
      "file": "src/components/manifesto.tsx",
      "renders": "Studio manifesto with a sticky display heading beside three paragraphs of real copy and a four-cell hairline numbers strip"
    },
    {
      "name": "testimonial",
      "file": "src/components/testimonial.tsx",
      "renders": "One display-size lead quote with a monogram attribution; the other two client proofs sit beside the service and case claims they support rather than being pooled here"
    },
    {
      "name": "capabilities",
      "file": "src/components/capabilities.tsx",
      "renders": "Six capabilities in a hairline card grid, each with a paragraph and a monospaced deliverables list"
    },
    {
      "name": "process",
      "file": "src/components/process.tsx",
      "renders": "Four numbered engagement phases in a hairline grid, each with its week window and what it outputs"
    },
    {
      "name": "faq",
      "file": "src/components/faq.tsx",
      "renders": "Sticky heading beside a ui/accordion-disclosure list over native <details> elements; ships an 'engagement' and a 'working' question set selected by the variant prop"
    },
    {
      "name": "team-grid",
      "file": "src/components/team-grid.tsx",
      "renders": "Six people as candid 4:3 environmental portraits with name, role, one-liner and a since/focus definition list, followed by the full-width studio photograph; heading=\"page\" turns the masthead into the sheet's plateless first cell so the contact sheet opens the studio route"
    },
    {
      "name": "open-roles",
      "file": "src/components/open-roles.tsx",
      "renders": "Two open roles with contract and salary chips, location, description and an apply link, plus a no-spec-work note"
    },
    {
      "name": "contact-desk",
      "file": "src/components/contact-desk.tsx",
      "renders": "The contact page's opening block: three enquiry desks in a hairline grid — mono label, the address at display size, who reads it and when it is answered — over a ruled entry for the arch itself, whose oversized number hangs into the container gutter beside the street address, travel notes, visiting terms and an authored area map of the four streets around the arch, drawn from the tokens with no external tiles; heading=\"page\" gives it the route's h1 on a short lid"
    },
    {
      "name": "enquiry-form",
      "file": "src/components/enquiry-form.tsx",
      "renders": "The project enquiry form: five fields in an asymmetric split against a what-happens-next rail, headed by a quiet display-size legend rather than a section masthead, with validation on submit and on leaving a field, designed error, submitting and success states — the fieldset goes inert and the button reports aria-busy while the request is in flight — a ui/dialog confirmation before anything typed is discarded, and the POST boundary printed under the button"
    },
    {
      "name": "journal-entry",
      "file": "src/components/journal-entry.tsx",
      "renders": "The article layout: display headline, standfirst, a sticky mono byline rail beside a 68-character prose column, subheads, three margin notes annotating the paragraphs they sit beside, a hanging pull quote and a three-cell outcome strip that both run the full measure-plus-margin width, and the link back to the case; headingLevel defaults to 1 on /journal and accepts 2 for a nested showcase specimen, shifting its subheads to h3 without changing their type classes"
    },
    {
      "name": "journal-notes",
      "file": "src/components/journal-notes.tsx",
      "renders": "Four shorter journal notes as a hairline grid — date, title at display size, and a note finished at its own length so nothing links to a page that does not exist"
    },
    {
      "name": "legal-notice",
      "file": "src/components/legal-notice.tsx",
      "renders": "The imprint: six clauses in a hairline grid — who we are, what we keep, cookies, invoicing, ownership, complaints — over the company number at display size and a registered-details list; showHeading is false on the legal route, where the page masthead already opens the page"
    },
    {
      "name": "page-header",
      "file": "src/components/page-header.tsx",
      "renders": "Editorial page opener with eyebrow, display heading, lead and an optional three-cell hairline facts strip, over a laid-paper texture layer — a grayscale asset used as a luminance mask so the sheet is drawn entirely in --foreground, one file serves both modes, and a bottom alpha ramp takes the relief to zero before the section boundary; headingLevel defaults to 1 for route openers and accepts 2 for the nested styleguide specimen without changing the type class"
    },
    {
      "name": "cta",
      "file": "src/components/cta.tsx",
      "renders": "Closing call to action on a coral-tinted accent panel with two buttons and a reply-time definition list"
    },
    {
      "name": "site-footer",
      "file": "src/components/site-footer.tsx",
      "renders": "Brand block with availability line, three columns of footer navigation and a legal bottom bar"
    },
    {
      "name": "ui/button",
      "file": "src/components/ui/button.tsx",
      "renders": "Shared primitive: Button and ButtonLink in primary/secondary/ghost variants and sm/md/lg sizes, with disabled and pending states — pending swaps the variant colour for the inactive slate, keeps its label, sets aria-busy and refuses a second press — plus the buttonClasses helper"
    },
    {
      "name": "ui/arrow-link",
      "file": "src/components/ui/arrow-link.tsx",
      "renders": "Shared primitive: the standing text link — darker coral, underline on hover, arrow that nudges right"
    },
    {
      "name": "ui/badge",
      "file": "src/components/ui/badge.tsx",
      "renders": "Shared primitives: square-cornered Badge chip (accent/neutral/outline/solid tones) and the monospaced Eyebrow section slug"
    },
    {
      "name": "ui/field",
      "file": "src/components/ui/field.tsx",
      "renders": "Shared primitives: the form family — Field (mono label, control, hint or error line), Input, Textarea and Select, sharing one card-grounded ramp, one focus offset and an error state that is never colour alone"
    },
    {
      "name": "ui/mode-toggle",
      "file": "src/components/ui/mode-toggle.tsx",
      "renders": "Shared primitive: the navbar light/dark control — a client island that writes the dark class onto the nearest .tt-foundry-json-render wrapper or the document element, remembers the choice, and keeps aria-pressed honest when something else changes the mode"
    },
    {
      "name": "ui/container",
      "file": "src/components/ui/container.tsx",
      "renders": "Shared primitive: one gutter for every section, stepping at 375, 640 and 1024, and three measures to hang it on: prose 48rem, default 72rem, wide 80rem"
    },
    {
      "name": "ui/icons",
      "file": "src/components/ui/icons.tsx",
      "renders": "Shared primitive: the bespoke FoundryMark brand glyph (currentColor, strokeWidth 1.5) — every other icon in the theme is a named lucide-react import at the same weight"
    },
    {
      "name": "ui/monogram",
      "file": "src/components/ui/monogram.tsx",
      "renders": "Shared primitive: the initials tile that replaces photography, in sm/md/block sizes and secondary/accent tones, plus the initialsOf helper"
    },
    {
      "name": "ui/plate",
      "file": "src/components/ui/plate.tsx",
      "renders": "Shared primitive: Plate frames 3:2 evidence with a hairline and mono caption, PlateBand runs the studio image full-bleed, and PortraitPlate provides the full-cell 4:3 team crop. Every <img> in the theme goes through this file, and no type ever sits over a photograph."
    },
    {
      "name": "ui/section-heading",
      "file": "src/components/ui/section-heading.tsx",
      "renders": "Shared primitive: eyebrow + oversized display h2 + optional lead and right-hand action, on one baseline row"
    },
    {
      "name": "ui/dialog",
      "file": "src/components/ui/dialog.tsx",
      "renders": "The modal plate: a near-square card on one hairline, no shadow, over a 78% ink veil that does the elevation, with a ruled header, a mono slug under the display-size question and the answers on the muted foot band. It is placed rather than animated: closeMs is 0. Three widths, and a neutral or coral edge."
    },
    {
      "name": "ui/accordion-disclosure",
      "file": "src/components/ui/accordion-disclosure.tsx",
      "renders": "The disclosure, in two surfaces from one recipe: the FAQ's full-bleed ruled row with a printed + that becomes a −, and the header menu's 40px square control with a shadowed plate under it. Both are native details elements, so the answers are in the page with no script, and both close on Escape and hand focus back to the row."
    }
  ],
  "tokens": {
    "--background": "#f4faff",
    "--foreground": "#13181d",
    "--card": "#ffffff",
    "--card-foreground": "#13181d",
    "--primary": "#e26d5a",
    "--primary-hover": "#f7806c",
    "--primary-active": "#ff9a88",
    "--primary-foreground": "#2b120c",
    "--secondary": "#e1ecf4",
    "--secondary-foreground": "#2e3841",
    "--muted": "#e8f0f7",
    "--muted-foreground": "#4e5a63",
    "--accent": "#fbeae4",
    "--accent-foreground": "#a8412c",
    "--border": "#cedce8",
    "--field-border": "#6e7a85",
    "--ring": "#a8412c",
    "--surface-tint": "#eaf3fa",
    "--shadow-color": "#091823",
    "--scrim": "color-mix(in oklab, var(--shadow-color) 78%, transparent)",
    "--radius": "0.25rem",
    "--font-display": "var(--font-fraunces), \"Iowan Old Style\", Georgia, \"Times New Roman\", serif",
    "--font-text": "var(--font-archivo), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif",
    "--font-sans": "var(--font-text)",
    "--font-mono": "var(--font-plex-mono), ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
    "--text-d1": "1.5rem",
    "--leading-d1": "1.25",
    "--tracking-d1": "-0.01em",
    "--text-d2": "2.25rem",
    "--leading-d2": "1.2",
    "--tracking-d2": "-0.01em",
    "--text-d3": "clamp(2.25rem, 1.5rem + 3.75vw, 3.375rem)",
    "--leading-d3": "1.1",
    "--tracking-d3": "-0.02em",
    "--text-d4": "clamp(2.75rem, 1.75rem + 5vw, 5.0625rem)",
    "--leading-d4": "1.05",
    "--tracking-d4": "-0.03em",
    "--text-lead": "1.125rem",
    "--leading-lead": "1.6",
    "--text-body": "1rem",
    "--leading-body": "1.55",
    "--text-small": "0.875rem",
    "--leading-small": "1.45",
    "--text-caption": "0.75rem",
    "--leading-caption": "1.4",
    "--tracking-label": "0.08em",
    "--display-weight": "600",
    "--label-weight": "500",
    "--duration-feedback": "150ms",
    "--ease-feedback": "cubic-bezier(0.33, 1, 0.68, 1)"
  },
  "tokensDark": {
    "--background": "#0c1216",
    "--foreground": "#e5eff8",
    "--card": "#141a1f",
    "--card-foreground": "#e5eff8",
    "--primary": "#f2917a",
    "--primary-hover": "#dd7e68",
    "--primary-active": "#c96c56",
    "--primary-foreground": "#2b0f07",
    "--secondary": "#19242c",
    "--secondary-foreground": "#d3e0eb",
    "--muted": "#181f24",
    "--muted-foreground": "#93a2ae",
    "--accent": "#2c1d17",
    "--accent-foreground": "#f6a88f",
    "--border": "#28333c",
    "--field-border": "#65727c",
    "--ring": "#f2917a",
    "--surface-tint": "#1a2126",
    "--shadow-color": "#01070e",
    "--scrim": "color-mix(in oklab, var(--shadow-color) 88%, transparent)",
    "--radius": "0.25rem",
    "--font-display": "var(--font-fraunces), \"Iowan Old Style\", Georgia, \"Times New Roman\", serif",
    "--font-text": "var(--font-archivo), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif",
    "--font-sans": "var(--font-text)",
    "--font-mono": "var(--font-plex-mono), ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
    "--display-weight": "500",
    "--label-weight": "400",
    "--text-d1": "1.5rem",
    "--leading-d1": "1.25",
    "--tracking-d1": "-0.01em",
    "--text-d2": "2.25rem",
    "--leading-d2": "1.2",
    "--tracking-d2": "-0.01em",
    "--text-d3": "clamp(2.25rem, 1.5rem + 3.75vw, 3.375rem)",
    "--leading-d3": "1.1",
    "--tracking-d3": "-0.02em",
    "--text-d4": "clamp(2.75rem, 1.75rem + 5vw, 5.0625rem)",
    "--leading-d4": "1.05",
    "--tracking-d4": "-0.03em",
    "--text-lead": "1.125rem",
    "--leading-lead": "1.6",
    "--text-body": "1rem",
    "--leading-body": "1.55",
    "--text-small": "0.875rem",
    "--leading-small": "1.45",
    "--text-caption": "0.75rem",
    "--leading-caption": "1.4",
    "--tracking-label": "0.08em",
    "--duration-feedback": "150ms",
    "--ease-feedback": "cubic-bezier(0.33, 1, 0.68, 1)"
  },
  "compatibility": {
    "next": ">=15",
    "react": ">=19",
    "tailwind": ">=4"
  },
  "dependencies": [
    "lucide-react"
  ],
  "editions": {
    "react": {
      "source": "src",
      "runtime": "react"
    },
    "html": {
      "source": "html/src",
      "output": "html/dist",
      "engine": "nunjucks",
      "runtime": "vanilla",
      "buildRequired": false
    }
  },
  "ui_library": {
    "version": "1.5.1",
    "files": [
      "html/src/js/_tt/accordion-disclosure.js",
      "html/src/js/_tt/dialog.js",
      "html/src/js/_tt/focusables.js",
      "html/src/js/_tt/layer.js",
      "html/src/js/_tt/presence.js",
      "html/src/js/_tt/reduced-motion.js",
      "src/components/ui/_tt/accordion-disclosure.axes.ts",
      "src/components/ui/_tt/accordion-disclosure.fixtures.ts",
      "src/components/ui/_tt/accordion-disclosure.tsx",
      "src/components/ui/_tt/dialog.axes.ts",
      "src/components/ui/_tt/dialog.fixtures.ts",
      "src/components/ui/_tt/dialog.tsx",
      "src/components/ui/_tt/focusables.ts",
      "src/components/ui/_tt/host.ts",
      "src/components/ui/_tt/ids.ts",
      "src/components/ui/_tt/layer.ts",
      "src/components/ui/_tt/presence.ts",
      "src/components/ui/_tt/recipe.ts",
      "src/components/ui/_tt/reduced-motion.ts"
    ]
  },
  "license": "free",
  "design": {
    "typefaces": {
      "display": "Fraunces",
      "text": "Archivo",
      "mono": "IBM Plex Mono"
    },
    "typeRatio": 1.5,
    "signature": "The ruled ledger row — a hairline-ruled list where each row is a mono index, a display-size name and a right-aligned figure, with one row tinted and bled to the band edge. It recurs on the home page, /services and /work.",
    "surface_kind": "marketing",
    "built_against": "2026-08-23",
    "levers": {
      "theme": "paper",
      "density": "comfortable",
      "accent_mode": "single-saturated",
      "motion": "still",
      "borders": "hairline",
      "radius": "small",
      "texture": "paper",
      "shadow": "none"
    },
    "icons": {
      "set": "lucide",
      "stroke": 1.5,
      "ladder": [
        "size-3.5",
        "size-4",
        "size-5"
      ],
      "contexts": {
        "nav": "glyph",
        "panel_header": "mark",
        "fact_row": "none",
        "feature_grid": "none"
      }
    },
    "disclosure": {
      "helper_line": "one-clause",
      "sentence": "hint",
      "paragraph": "details",
      "parallel_views": "tabs",
      "secondary_object": "drawer"
    },
    "cta": {
      "header": "quiet",
      "hero": "filled",
      "repeats": [
        "fold",
        "end"
      ],
      "mobile": "inline"
    },
    "colour_budget": {
      "brand_max_pct": null,
      "concentration_pct": 70,
      "regions": []
    }
  }
}