STYLE.md ·
How Charter works. Every rule, written down.
The official document, made friendly: security paper with a drawn guilloche, a specimen record that fills itself in under a holographic seal, Fraunces headlines that end in a soft italic, and a route that says who does each step.
Official · fair · reassuring
Best for
- US medical cannabis card clinics (evaluation services), written so the clinic never promises approval: a flat fee whatever the decision, the state's part shown as the state's, no health claims (see "Medical cannabis evaluations in the US")
- Anyone who helps people through paperwork that someone else decides: passport and visa help (Waypoint), driving schools (Cedar Row), immigration and tax preparers, permit expediters, notaries, licensing and certification bodies, enrolment offices
- Audiences: people facing a process they don't control, who want to know what happens, who decides and what it costs
Less suited to: anything that sells on mood or appetite (Marquee, Tableau); product catalogues (Catalogue); ongoing clinical care (Remedy, Vigil, Candour).
Personality and voice
Calm, plain and fair, like a good clerk who's on your side: what you do, what we do, what only they can do, and what it costs. Never promises an outcome it doesn't control.
- Headlines: "A fair hearing, by video." · "The fee is for the visit, not the result." · "Five steps, three of us." · "Your papers, in order."
- Buttons: "Book an evaluation" · "See open times" · "State rules" · "Book a document check"
- Microcopy: "An evaluation is not a promise of certification." · "Paid to the state, not to us." · "We'll tell you why in plain words."
- Words to avoid on a card clinic: "guaranteed", "instant card", "approved in minutes", "100% approval", "money back if denied", "qualify now", anything about what cannabis treats or cures, discounts or prizes tied to certification.
Colour
| Token | Day issue (light) | Night issue (dark) | Role |
|---|---|---|---|
--paper |
#f6f4f9 |
#12131d |
Security paper, faintly lilac |
--card |
#fffeff |
#1b1d2b |
Records, forms, cards |
--well |
#ece8f3 |
#161825 |
Alternate sections, the footer |
--line |
#d9d3e4 |
#2f3348 |
Hairlines, perforations |
--guilloche |
#c9bfe0 |
#3a3560 |
Security print lines and microprint (decoration only, never text you need to read) |
--ink / --ink-2 |
#1a2140 / #3a4060 |
#eef0fa / #c9cde2 |
Text |
--muted |
#5d6280 |
#9ba0bd |
Labels, field names |
--seal |
#a2273b |
#ff8fa0 |
The one accent: buttons, links, stamps, the lit phrase |
--navy |
#22306b |
#9fb0ff |
The document's ink: record heads, the notice bar, "the state" |
--ok |
#1f6f5c |
#6fd6b8 |
A cleared stamp |
--foil-1/2/3 |
#b8e0ff / #f7c8f0 / #fff1b8 |
same | The holographic seal |
Measured contrast (WCAG): ink on paper 14.4:1 · muted on paper 5.5:1 (on well 4.9:1) · seal on paper 6.7:1 (on well 6.0:1) · white on seal 7.3:1 · navy on paper 11.3:1 · seal on its soft chip 5.7:1 · navy on its chip 9.9:1. Night issue: ink 16.3:1 · muted 7.2:1 (on card 6.5:1) · seal 8.5:1 · text on seal 8.5:1 · navy on card 8.1:1. The notice bar's text is 7.8:1 or better.
Typography
- Display: Fraunces 500–600, optical sizing on; the lit phrase in italic with
SOFT 100, WONK 1, the friendly half of an official voice. - Body: Libre Franklin 400–600: plain American public-information sans.
- Fields: DM Mono 400–500: field labels, record values, form numbers, microprint.
| Token | Size | Use |
|---|---|---|
--fs-h1 |
clamp(42px, 5.8vw, 84px), weight 600 | Page headline |
--fs-h2 |
clamp(32px, 3.8vw, 54px), weight 600 | Section headline |
--fs-h3 |
21px, weight 600 | Card titles |
--fs-lead |
clamp(18px, 1.35vw, 21px) | Intro paragraphs |
--fs-body |
17px | Body |
--fs-label |
11.5px mono caps | Eyebrows with a form number (BW·01) |
The signature move: every headline ends on the plain fact in a soft seal-red italic, and every section carries a form number.
Layout
- 1200px wrap, gutter
max(20px, 4vw). A navy notice bar on top says the honest thing first; a sticky header with a hairline. - Hero: copy left, the specimen record right, a guilloche rosette turning slowly behind it. Then the route, what to bring, fees (ours apart from the state's), a FAQ in rounded cards, and a navy closing card with its own guilloche.
- The footer starts with a line of microprint and ends with the licence block.
Shape
- Friendly-official:
--r-s8px,--r-m14px,--r-l22px, pill buttons and switches. - Document cards (
.doc.stub) have a perforated line across the top. Stamps are rotated, bordered and slightly transparent. - The brand mark is a small embossed seal.
Motion language
- The specimen record: when it comes into view each field types itself in, one after another (32ms a character), then the signature draws itself (1.3s) and the stamp lands with a little bounce. The sheet tilts towards the pointer and the foil seal's light follows it; when nobody is pointing, the light drifts slowly.
- The guilloche turns: two layers, 160s and 220s, opposite ways.
- The route lights its steps in order (380ms apart) as the line draws across, or down on phones.
- Stamps thunk in (420ms, scale 1.6 to 1).
- Reveals: 16px rise and fade, 600ms. State panels rise in when you switch state. The phone menu unfolds.
- Motion switch in the footer (
[data-motion-toggle],html.calm, remembered assite-motion, default fromprefers-reduced-motion). Calm shows the record complete, the route lit and the guilloche still. - Night issue switch (
[data-theme-toggle]), remembered assite-theme;theme-colorfollows.
Imagery and illustration
The record, the seal, the guilloche, stamps and the route. No stock photos of smiling doctors or handshakes, and on a card clinic no leaves, smoke, products or people using cannabis. A specimen must say SPECIMEN and must never copy a real state card or government document: use the business's own name and "not a state document" in the microprint.
Signature components
.guilloche[data-rings][data-waves]: an empty box that charter.js fills with an SVG rosette..record-card›.sheet›.record-head(b+span) ›.record-body(dl > div[.wide] > dt + dd[data-type],.foil[data-mark],.sig[data-after]) ›.record-foot(.micro[data-text],.code); then.stamp.specimen[data-after]..route[data-route]›li›.who.you/.who.pract/.who.state(any label) +h3+p..statepick[data-statepick]›.statepick-tabs›button[data-state][data-name];[data-state-panel="PA"]anywhere,[data-state-name],select[data-state-select]..stamp(.navy,.ok,--rot),.doc.stub,.fee/.fee.state,.facts[style="--n:4"],.notice/.notice.seal,.noticebar,.micro,.faq,.licence,.close-card(--close-em).
Multi-page kit
- Phone menu:
.menu-btn[aria-controls]opens.site-menu(links withdata-no); Escape, outside click and links close it; Tab stays inside while open. - Current page:
aria-current="page"(seal colour and a dot). - Inner pages:
.page-head(with a.guilloche),.crumbs, a.tagand a smaller.h1. - Fields:
.field,.fields,.field-wide,fieldset.field-set,.check,.form-card,[aria-invalid="true"];form[data-template]. - Tiles:
.choices›label.choice > input + span > b + small. Segmented control:.seg(pills;button[aria-pressed]withdata-filter/data-value, orlabel > input + text). - Gate:
[data-gate]withbutton[data-show="panel-id"]. - Slider, switch, tables, layout:
input.range,.switch[role=switch](firesswitchwithdetail.on),.table/.table.stack,.r,.grid-2.lean. - Helpers:
Charter.state()returns the chosen state code;Charter.refresh(root); astateevent ondocumentwithdetail.codeanddetail.name.
Medical cannabis evaluations in the US
Each state runs its own program, so the template is written to the strictest common ground and the industry template (Larkspur) puts each state's route side by side. What we checked, October 2026:
- Pennsylvania: Act 44 of 2021 lets registered practitioners certify through live video or phone. Practitioners register with the Department of Health and complete approved training; the patient registers first and pays the annual ID card fee to the state. Pennsylvania also bars physicians from advertising that they certify patients, which is why the template is written as an evaluation service and talks about evaluations, not physicians offering cards; a practice there should have its advertising checked.
- Ohio: since House Bill 122 took effect on 23 March 2022, recommending physicians may do the required exams by telehealth. The physician submits the patient's registration; it lasts a year.
- Florida: the first certification needs an in-person exam; renewals may be by telehealth since 2023 (HB 387), and certifications must be renewed at least every 30 weeks.
Copy rules the style builds in, for every state:
- No promised outcome. No "guaranteed", "instant", "approval in minutes", "100%" or "money back if denied". A visible line that an evaluation is not a promise of certification.
- A flat fee for the visit, the same whatever the decision; no refunds, discounts, coupons or prizes tied to certification. State fees shown separately, as the state's.
- No health claims about cannabis, and no product advice: that's the dispensary's job.
- The state's part is the state's: the route names who does each step, and the specimen record says it isn't a state document.
- Records first: a real evaluation reads the patient's records; the booking asks for them.
These notes are design guidance, not legal advice. Check final copy against each state's current law, medical board rules and advertising rules before launch.
- Resources for medical professionals (Pennsylvania Department of Health)
- Companies blanket Pa. with ads about medical marijuana cards, but doctors are silenced (Spotlight PA, 2022)
- Ohio's new telehealth rules cover exams for medical marijuana use (McGuireWoods, 2022)
- Ohio Admin. Code 3796:7-2-01, procedure for patient registration
- Florida telehealth renewals for medical marijuana (Foley & Lardner, 2023)
Do and don't
- Do say who decides, in the first screen.
- Do show your fee and the state's fee apart.
- Do mark every sample document SPECIMEN, under your own name.
- Don't imitate a real state card, seal or agency page.
- Don't tie your fee to the outcome, either way.
- Don't use the guilloche colour for text: it's decoration.
Accessibility
AA contrast throughout (measured above); microprint and guilloche are decoration, hidden from assistive tech. Skip link and a 3px focus ring. The record's fields carry their full text as aria-label while they type; the route is an ordered list; state buttons use aria-pressed and the panels they show are plain content. Forms label every field, mark errors with aria-invalid and say what's missing in an alert. Tables stack on phones. Responsive to 360px; tested with motion on and off, in Day issue and Night issue.
How to make it yours
| Dial | Range |
|---|---|
| Accent | Seal red (default), plum (Larkspur), passport teal (Waypoint), forest green (Cedar Row); set --seal, --seal-2, --seal-soft (and --on-seal at night) and --close-em |
| Document ink | Navy (default) or any dark blue-black; set --navy and --navy-soft |
| The record | Your own fields: an evaluation, an application, a lesson log, a permit; foil letter from data-mark |
| The route | Three to six steps; label the chips with whoever does each step |
| Not negotiable | Fraunces with the soft italic lit phrase, mono field labels, the guilloche, a specimen record marked as a specimen, a route that names who decides, fees shown apart from the state's or agency's, and on card clinics no promised approval and no health claims; the Motion switch |



