Start here
How to make this template yours, in the order that matters.
Read this once before you change anything. It covers the CMS, where colours and fonts live, the charts, and what you can delete safely.
#first
What to change first
Work down this list in order. Each step unlocks the next, and by step eight the site is yours and ready to publish.
01
Name, logo and favicon
The logo is one component, Kerno/Logo. Replace the image in its Fill and the Nav, Footer and Preloader all follow. Set the favicon in Site settings.
See it in the nav
02
Address and hours
Edit the address and hours on /contact and in the Visit section on /about. Both are typed text, so change them in both places.
Open /contact
03
Programmes and prices
Open the Programs collection. Rename, reprice or delete the four sample programmes. The plan cards on /membership are typed text, so update those prices on that page.
Open Programs
04
Physicians
Open the Team collection. Add each person with a real portrait and registration number. Remove the five samples.
Open Team
05
Results cases
Open the Results collection. Use real, consented cases only, and keep the results notice on every page that shows them.
Open Results
06
Legal and medical disclaimer
Fill every bracket on /legal with your company details. Have a lawyer read it before you publish.
Open /legal
07
Photos
Swap the images in place so crops and overlays stay. Keep people in natural light and avoid stock smiles.
Open /about
08
SEO and publish
Set each page title and description, the social image and the 404. Delete the Buy template card if your copy shows it: open Site Settings, Code, right-click the Buy template card row and pick Delete. Leave the two API Plugin rows, they run the page transition. Then connect your domain and publish.
Back to the home
#cms
The four CMS collections
Programmes, physicians, results and journal articles are CMS collections, so you edit them as items, not on the canvas. Each page and card reads its fields. Change a field once and every place that shows it updates.
Programs
Drives /programs, each programme page and the programme cards on physician pages. The plan cards on /membership are typed on that page, so keep their prices matching.
Field
What it does
Name
Card title and the page heading.
Slug
The address: /programs/baseline.
Eyebrow
The glass pill above the heading.
Lead
One sentence under the heading. Also the card text.
Cover, Cover alt
Page and card image. Write the alt for someone who cannot see it.
Duration
Shown in the facts row.
In-person visits
Shown in the facts row.
Biomarkers count
The number of markers, set in Doto.
Price from
The price line on the card.
Duration value, unit, note
The duration figure on the programme page, with its note.
Visits note, Biomarkers note
The small notes under those two numbers.
Price value, unit, note, short
The price figure on the programme page.
Price label, Duration line
Short lines used on the cards.
Billing note
The billing line on the programme page.
Cover caption
The line under the cover image.
Measure note label, Measure note
The short note about what the programme measures.
Author, Author role
Links to a Team item. The physician shown on the page, with their role.
For you if, Not for you if
The “for you, not for you” block. Keep both halves.
Body
The long text. Use H2 and H3 for headings.
Order
Sort order on lists. Lowest first.
Team
Drives /team, each physician page and the physician cards on programme pages.
Field
What it does
Name
Card and page heading.
Slug
The address: /team/elena-ruiz.
Role, Specialty
The two lines under the name on the card.
Portrait, Portrait alt
Card and page portrait. Same background for everyone.
Registration no.
Shown under the name. Required for licensed clinicians.
Degree, Training, Hospital
The credentials list, one line each.
Years practising
A number. Shown in the facts row.
Languages
Comma separated.
Lead, First name, Short role
Extra lines on the physician page.
Practising, Language codes
Short versions for the cards, like 22 years and ES · EN · CA.
Bio
First person, three short paragraphs.
Programs
Links to programme items. The person appears on those pages.
Order
Sort order on /team.
Results
Drives /results and each case page. Every number here is a biomarker number, so it is set in Doto.
Field
What it does
Name, Age
First name and age only.
Slug
The address: /results/marta-apob.
Headline metric
The marker and unit on the card.
Change value
Before and after, written “132 → 78”.
Change direction
Up, down or flat. Sets the signal colour and arrow. Flat can be the goal.
Portrait, Portrait alt
Card and case image. Use consented photos only.
Starting point
Chapter one of the case.
What we found
Chapter two.
What we changed
Chapter three.
At 12 months
Chapter four.
Chart
The SVG file for the case chart. See Swapping the charts.
Chart title, label, value, note, caption
The text around the chart.
Metric, Unit, Before, After
The marker, its unit and the two readings on the case page.
Case chip, Intro, Card lead
The pill and intro on the case page, and the text on the card.
Aside 1 to 4, label and text
The four side notes on the case page.
Data label, key, note
The data block on the case page.
Card name, Direction label, Direction colour
Used on the cards.
Order
Sort order on /results.
Journal
Drives /journal and each article page. The cards on /journal read the same items.
Field
What it does
Title, Title HTML
Card and page heading. Keep both the same.
Slug
The address: /journal/apob-is-not-cholesterol.
Date
Shown on the card and the article.
Read time, Topic
The small labels on the card and the article.
Excerpt
The card text.
Cover, Cover alt
Card and article image. Write the alt for someone who cannot see it.
Body
The article. Use H2 and H3 for headings.
Author, Author role
Typed names, shown on the article.
#colours
Colours and fonts
Every colour on every page is a colour style. Kerno is dark only, so each style has one value. Change a style and every page follows. Never paste a raw hex value onto a layer: it will not follow.
Colour group
What it controls
Color/Background *
The page background and raised sections.
Color/Surface *
Cards, glass and layers that sit on photos.
Color/Border *
The 1px hairlines.
Color/Text *
Primary, secondary and tertiary text, plus the text that sits on photos.
Color/Brand Navy *
The navy fields.
Color/Accent *
Highlight blue is the quiet accent on hairlines and numbers.
Color/Signal *
Up, flat, down and in range, watch, act. Data only.
Color/Button *
Button fills and hover states.
Color/Paint *
Colours baked into drawn shapes and effects. Leave them unless you change the palette.
Color/Shadow Paper *, Color/Focus Ring
Card shadows and the keyboard focus ring.
Signal rules
Signal colours mean something, so keep them on data only. A result that moved the right way uses Signal Up, the wrong way Signal Down, no change Signal Flat. Readings against a range use Signal In Range, Signal Watch and Signal Act. Never use the brand blue for a signal state, and never use a signal colour for decoration.
Fonts
Two families. Inter sets everything you read. Doto sets biomarker numbers only, the readings that came out of a test. Marketing numbers such as prices, member counts and years stay in Inter. To change a family, edit the text style, not the layer, and every page follows.
#charts
Swapping the charts
Each case on /results has its own chart, stored as an SVG file in the Chart field. To swap one, export a new SVG at the same size, 640 by 250, and upload it to the item. Use the signal colours for the lines, so the chart reads the same as the rest of the page.
#delete
Sections you can delete
Every section is a full-width block in auto layout, so deleting one closes the gap on its own. These are safe to remove. The nav and footer live in the layout template Kerno/Layout, so they stay. Keep the closing CTA on every page.
Section
Safe to delete?
Home · Partners
Yes. Delete until you have real partners or press.
Home · Stats
Yes. The next section moves up.
Home · Stories
Yes. Removes member outcomes from the home.
Home · Report
Yes. Also delete /sample-report if nothing links to it.
Home · Band
Yes. Purely visual.
About · Accreditations
Yes, while you have none to show.
Membership · Price FAQ
Yes. Move key answers to the plan cards.
Home · Hero
No. It holds the page heading.
Results · Grid
No. Delete the whole page instead.
If you delete /results, also delete the Results collection and the Results link in Kerno/Nav. The results notice shown below must stay on any page that shows a member outcome.
