Internal page
Design system
The rules, styles and components behind this website. Change a style once and every page follows. This page is hidden from search engines and from the navigation.
Start here
This page is the map of the site for you and for the agent.
Type /make-it-yours in the agent with your clinic name, town and phone.
Point every Schedule button at your own online scheduler.
Replace every item that carries a Sample chip.
Have your adviser check the medical disclaimer, privacy notice and terms.
Type /design-system and describe the section you want. For example: “Add a section with three plan cards, a short FAQ and the booking button.”
Rules
Keep these when you edit.
Action blue fills buttons. Accent blue marks links. Highlight yellow is only for the button on dark, the sun and the highlighter band, never for text on a light ground.
Status Flag shows high and low results, always with an icon and a word. Status Error is for forms only.
Keep the Problem section before the sample report.
We test, measure, record, review, explain and retest. We never cure, treat, reverse, prevent or guarantee.
The clinician’s notes give next steps, never what a value means.
Sample chips stay until real content replaces the item.
Forms never ask for symptoms or medical history.
Color
Use the color styles only. Keep the status colors apart from the brand accent.
Background
#F7FAFF · Page ground
Surface
#E3EEFF · Alternate sections
Surface Card
#FFFFFF · Cards only
Text Primary
#10244A · Headings and body
Text Muted
#51617D · Secondary text
Border
#D6E2F5 · Dividers and outlines
Background Dark
#0A2F6B · Dark bands and booking
Action
#1F5FE0 · Buttons, stat numbers
Action Hover
#174BB8 · Button hover, links
Highlight
#FFC94A · Button on dark, the sun
Range Band
#9DC2FF · Reference range
Status Flag
#B23C0A · High and low results
Status Error
#B3261E · Form errors
Status Success
#15803D · In range, form success
Accent On Dark
#A8CBFF · Links on dark
Text Muted On Dark
#BCCBEA · Secondary text on dark
For the agent
Use the color styles by name, never raw hex. Action fills buttons, Highlight is never text on a light ground, and a status color always comes with an icon and a word.
Type
One family, Figtree, for every style. Set every number in a Data style.
Text/H1
64 · 800 · page headline
Health checks explained
Text/H2
44 · section headline
84 markers, one draw
Text/H3
24 · card title
Your results review
Text/Data L
56 · big numbers
3,847
Text/Data M
40 · prices
$495
Text/Body L
20 · lede
84 markers from one morning draw.
Text/Body
18 · body text
A clinician reads every result with you.
Text/Label
14 · eyebrows and labels
SAMPLE REPORT
Text/Button
16 · buttons
Schedule appointment
Spacing and layout
Content width 1120 px inside 40 px side padding. Breakpoints 1200, 810 and 390.
Section padding 96 px on desktop, 80 px on tablet and 64 px on phone.
Spacing steps: 4, 8, 12, 16, 24, 32, 48, 64, 96. Space inside a group is always smaller than the space between groups.
Radius 12 for buttons, 16 for small panels, 20 for result cards and 28 for the plan card. Chips are pills.
On desktop and tablet the sample report section is 400vh tall with a sticky stage. Leave its trigger frames alone unless you change the section height. On phone it shows the finished report.
Components
Reuse a component before you draw a new one.
Button / Primary
Use for the main action in a section. One per section. Hover lifts it and slides the arrow.
Button / On Dark
Use on the dark booking band only.
Sample prices
Chip / Sample
Use on every invented item. Remove it only when real content replaces the item.
ApoB
Waiting
Cholesterol carriers
--
mg/dL
Ref. range under 100
Card / Biomarker
Use for one lab result: name, value, unit, range and status. Keep the status honest.
For the agent
Reuse Button, Card/Biomarker, Chip/Sample and FAQ/Item. Change their controls and variants, not the component masters.
Skills
Type / in the agent to see them, or ask in plain words.
Set up: /make-it-yours puts your clinic name, town, phone and hours everywhere. Try asking: “Make this site ours: Northgate Clinic in Harbor Falls.”
Build: /design-system builds new sections that match these styles. Try asking: “Add a section about corporate health checks.”
Checks: /claims-check finds health claims and leftover samples. Try asking: “Check the page before I publish.”
Status labels on results: In range (check), High (arrow up), Low (arrow down), Waiting (dashed circle).
Sections
The home page, top to bottom. Each layer name says its role and topic.
Nav/Main
Links to results, visits, pricing and FAQ, plus the booking button.
Section/Hero-Baseline
The offer, the $495 price, the 40-minute visit and one booking button.
Section/Problem-Checkup
A routine physical side by side with the Ambrin baseline.
Section/Product-Markers
The eight marker groups that add up to 84.
Section/Product-Report
The signature: a scroll story on desktop and tablet, a finished report on phone.
Section/Product-Visits
The visits across the year.
Section/People-Clinicians
Four sample clinicians.
Section/Proof-Members
Three sample quotes.
Section/Offer-Membership
The plan card and what it includes.
Section/FAQ-Booking
Five questions and the phone card.
Section/CTA-Book
Hours, address and the email booking button.
Footer/Main
Links, hours, the 911 line and the disclaimer.
For the agent
Add a section by copying the nearest one in this list, keep Problem before the sample report, and name it Section/<Role>-<Topic>. Check it at 1200, 810 and 390 px.