Customizing

There are two supported ways to customize this theme, and both are fine:

A. Edit the built HTML directly. The pages in the package are ordinary HTML. Open one, change the words, upload. Nothing to install. Best for a one-off site or a quick change.

B. Edit the data and rebuild (this guide). Content lives in JSON, design lives in design tokens, and the build assembles the pages. One edit updates every page that uses that value. Needs Python 3 and the source/ folder that ships in the package. Best if you want your changes to stay consistent as the site grows.

Route B is what the layered build is for; route A is always available as a fallback.

content/*.json   ->  every word, number, link, and list a visitor sees
tokens/          ->  every colour, size, font and radius
                     (build) ->  your site

Change a headline in source/content/home.json, run the build, and the new headline appears on every format of the theme at once. Change --color-brand-primary in the tokens, rebuild, and the whole site is recoloured. You never touch a template.

For the full list of colour/size/font variables, see THEMING.md. This guide covers the content.

The content files

File	Controls
source/content/site.json	Brand name, tagline, navigation menu, partner-portal link, contact details, social links, footer blurb
source/content/home.json	Every home-page section: hero, ribbon, metrics, globe, pipeline, science, news, contact
source/content/pages.json	The interior pages, each built from a list of typed sections
source/content/products.json	The product catalog and every product detail page
source/content/collections.json	Facilities, leadership and partners

Edit any of these in a plain text editor, then rebuild (see your format's README for the one build command). No other file is touched.

Examples, all data-only

Change the hero

In source/content/home.json:

"hero": {
  "badge": "GMP-certified biomanufacturing",
  "title": "Medicine security, engineered end to end.",
  "lead": "Adjuvant Bio develops, manufactures ...",
  "cta_primary":   { "label": "Explore the catalog", "href": "/catalog.html" },
  "cta_secondary": { "label": "View the pipeline",  "href": "/#pipeline" },
  "stats": [ { "count": 12, "suffix": "",  "label": "Products in market" } ]
}

Every string, link and number here is what the page renders. count values animate up from zero on their own.

Change the navigation menu

In source/content/site.json, edit the nav array. A top-level entry with a children array becomes a dropdown; without one it is a plain link. The footer columns and the mobile drawer are built from the same array, so you edit the menu once.

Move the globe's markers

In source/content/home.json under network:

"focus": { "lat": 24, "lng": 46 },
"hubs": [
  { "lat": 24, "lng": 46, "label": "Central Hub", "primary": true },
  { "lat": 1.3, "lng": 103.8, "label": "East" }
]

focus is the region the globe zooms to; each hub has a coordinate, a label and an optional primary flag (primary markers pulse). No JavaScript is edited.

Add a pipeline programme

Add an object to the pipeline.programmes array in source/content/home.json. pct is the progress-bar fill; status is active, enrolling or planning.

Add or edit a product

Add an object to source/content/products.json. A catalog row and a full detail page are generated for it, and the filters pick up any new category automatically.

Build an interior page

Interior pages in source/content/pages.json are a hero plus an ordered list of typed sections. You compose a page by listing sections; you never write HTML. The types:

type	Renders	Key fields
metrics	Count-up KPI cards	items[] with count, suffix, label
cards	Icon + heading + text cards	items[] with icon, title, body
flow	Numbered stage diagram	items[] with num, name, desc
values	Value / pillar cards	items[] with title, body
jobs	Job listing rows	items[] with title, dept, loc, type
resources	Download cards	items[] with title, desc
posts	News cards	items[] with tag, title, excerpt, date
richtext	Two or more prose columns	columns[] with eyebrow, heading, body
cta	Call-to-action band	heading, lead, cta_primary, cta_secondary
include	Embeds a home section	ref: science, partners, or contact

tone on any section picks its band background: surface, subtle, or dark. Available icon names: globe, pulse, shield, chart, cell, flask, box, doc.

To add a whole new page, add an entry under pages, then link to /<name>.html from site.json's nav.

Design (tokens)

Colours, type, spacing and radii are variables in css/tokens.css, generated from tokens/tokens.json. The one-line rebrand and the full table are in THEMING.md. To ship a second colourway, add a small skin file (a few overridden values) and build it alongside the first, also covered there.

The one thing to remember

If you are on route B, everything a visitor sees comes from source/content/ and source/tokens/. Reaching for an .html file to change a word usually means the value you want is in a JSON file, where editing it once updates every page that shows it. (On route A, editing the HTML directly is exactly right.)