Brand Guidelines
GLP-1 Healthcare is built on the authority-resource archetype: the visual language of a reference publication, not a consumer health brand. Every choice below serves one goal — that a person deciding whether to take a medication can tell at a glance that this is a serious source.
Version 2 · Last updated 2026-07-24
The mark
Four ascending bars — a titration curve. It reads as a simple step chart, but it depicts the single most defining fact about this class of medication: the dose starts low and climbs in steps.
The two leading bars are set in line grey and the two trailing bars in amber, so the mark carries the same progression the palette does — neutral ground giving way to the action colour.
Wordmark: “GLP-1” in navy, “Healthcare” in amber, set in the Georgia serif at 700, with the domain beneath it as a locator.
The hyphen is not optional. The drug class is glucagon-like peptide-1, written GLP-1. Every page of our content writes it that way, so the brand must too — a site arguing for precision cannot be imprecise about the one term it is named after. It also keeps our entity data consistent: search engines resolve “GLP-1” as the canonical term, and we declare glp1.healthcare as an alias rather than as the name.
Colour
Two of these colours carry meaning rather than style. Evergreen and brick are reserved: using them decoratively would weaken the signal in the exact places — a safety warning, a review status — where a reader most needs to trust it.
Institutional
The authority ground. Navy carries headings, the utility bar, and the footer — it is what makes the site read as a reference publication rather than a consumer brand.
#1c3247--navyHeadings, the stats band, primary button outlines.
#142434--navy-deepUtility bar and footer grounds.
Grounds & text
A cool, slightly blue-biased neutral set. Chosen rather than inherited: the bias toward navy keeps the greys from reading as unconsidered default grey.
#f4f7f9--icePage background.
#ffffff--paperCards and raised surfaces, and alternating section bands.
#22303c--inkBody copy.
#52616e--ink-softSecondary copy, captions, supporting detail.
#d9e0e5--lineBorders, rules, and dividers.
Action
One warm accent, spent deliberately. Amber marks what is interactive or actionable and appears nowhere else — that scarcity is what makes it read as a signal.
#b5641a--amberPrimary buttons, eyebrows, the logo's TLD, active nav underline.
Reserved: Interactive and actionable elements only. Never decorative fill.
#94500f--amber-deepInline links in body copy, and the hover state for primary buttons.
Illustration
A separate range used only inside illustrations. It exists precisely so that illustrations can be warm without borrowing amber, evergreen or brick — those carry reserved meanings, and spending them on decoration would blunt the signal where it matters. Muted by design, so warmth never competes with a safety warning for attention.
#f7efe6--illo-creamAmbient light, paper and page surfaces within a scene.
#e6cbab--illo-sandSurfaces, tabletops, and mid-tone fills.
#cfa276--illo-sand-deepShadowed edges and ruled detail.
#c2836a--illo-clayThe warm focal object in a scene — a mug, a bookmark, a marker.
#a9bfb0--illo-sageFoliage and soft secondary shapes. Note this is NOT evergreen.
#b6cad6--illo-skyWater, glass, and cool accents.
Semantic
These two carry meaning, not style. They are the only colours a reader should have to interpret, and using them decoratively would erode the signal exactly where it matters most.
#2b5d50--evergreenThe answer-first takeaway box, verified/reviewed status, source attribution.
Reserved: Verified, reviewed, or trustworthy states only. Never a decorative green.
#a83a32--brickSeek-care boxes, the awaiting-review badge, contraindication callouts.
Reserved: Caution and urgency only. If a reader sees brick, something needs their attention.
Typography
Four roles, zero web fonts. Loading no font files is a deliberate performance decision — it removes render-blocking requests and eliminates any flash of unstyled text, and we spend that budget on content instead.
Voice
The visual identity signals authority; the writing has to earn it. These principles are enforced editorially through our Editorial Policy.
Every page and every major section opens with the direct answer. A reader who stops after two sentences should still have what they came for.
Write for someone anxious and unfamiliar with the vocabulary. Use the medical term, then define it — 'telogen effluvium: a temporary shedding response' — rather than choosing between precision and clarity.
'Usually starts two to three months after the trigger' is useful. 'Don't worry, it's common' is not. Quantify where the evidence allows, and say so where it doesn't.
Where evidence is thin or evolving, say that plainly rather than smoothing it over. Naming a limit builds more trust than projecting false confidence.
No invented reviewers, no fabricated citations, no implied endorsement from the bodies we cite. Every page states its review status openly, including when the answer is 'not yet reviewed'.
We are not selling a transformation and we are not frightening people away from treatment. Present the trade-offs and let the reader decide with their clinician.
Core components
Three patterns carry most of the site’s credibility. They appear on every clinical page, in this order.
Diagrams inform. Illustrations orient.
Both are original and drawn as inline SVG, but they do different jobs and follow different rules. A diagram carries information the reader needs — injection sites, a titration pattern — so it uses the interface palette, is described to screen readers, and always has a text equivalent in the prose. An illustration carries warmth and a sense of place, uses the separate illustration palette, and is hidden from screen readers because repeating the heading beside it would be noise. Neither is decorative filler; both must earn their place.
The short answer
The direct answer, in the serif, before any explanation. A reader who stops here should still have what they came for.
When to seek medical care
Reserved for genuine red-flag symptoms. Brick appears nowhere else, so its presence always means the same thing.
Usage rules
| Do | Don’t |
|---|---|
| Use amber only for things a reader can act on. | Don't use amber as a decorative fill, background, or highlight. |
| Reserve evergreen for verified and reviewed states. | Don't use evergreen as a general-purpose accent because it looks calm. |
| Reserve brick for genuine caution and urgency. | Don't use brick for emphasis, errors of style, or visual variety. |
| Set headings in the Georgia serif at 700. | Don't set headings in the sans stack — it collapses the institutional voice. |
| Always write the brand "GLP-1 Healthcare" — hyphenated. | Don't write "GLP1 Healthcare" or use the domain as the name; glp1.healthcare is the address. |
| Set 'GLP-1' in navy and 'Healthcare' in amber. | Don't recolour, rotate, or add effects to the mark, or set it below 24px tall. |
| Colour illustrations from the --illo-* palette only. | Don't reach for amber, evergreen or brick in an illustration, however well they'd look. |
| Describe diagrams to screen readers; hide illustrations from them. | Don't announce an illustration that only repeats the heading beside it — that's noise, not access. |
| Use tabular figures for any numbers that stack. | Don't set doses or dates in the serif — the figures don't align. |
| Keep body measure near 65–72 characters. | Don't let clinical copy run the full width of a desktop viewport. |
| Load zero web fonts. System and Georgia stacks only. | Don't introduce a webfont for display type — it costs render time we deliberately spend elsewhere. |
Accessibility & themes
- Both themes are designed, not inverted. Every token is redefined for dark mode so contrast and the semantic colours keep working on a dark ground.
- Colour is never the only signal. Every semantic state carries a text label as well — “Evidence-sourced”, “When to seek medical care” — so meaning survives colour blindness and monochrome print.
- Focus is always visible. A 2px amber outline with offset, never removed.
- Motion is optional. All transitions are disabled under
prefers-reduced-motion. - Targets and reflow. Interactive controls are at least 40×40px, and no page scrolls horizontally at 375px.