Mojo Stylesby Mojo Layers

StylesCharter

Style 16 of 17 · day issue and night issue

Charter

The official document, made friendly: security paper with a drawn guilloche, a specimen record that fills itself in under a holographic seal, Fraunces with a soft italic and a route that says who does each step.

OfficialFairReassuring

Best for

  • Medical card clinics
  • Passport and visa help
  • Driving schools
  • Permit and licence services
  • Tax and immigration preparers
Fraunces · Libre Franklin · DM Mono
Charter template home page: a navy serif headline ending in a soft red italic, and a specimen evaluation record on security paper with a holographic seal, a signature and a SPECIMEN stamp, over a guilloche rosette
Charter template on a phone

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-s 8px, --r-m 14px, --r-l 22px, 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 as site-motion, default from prefers-reduced-motion). Calm shows the record complete, the route lit and the guilloche still.
  • Night issue switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

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 with data-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 .tag and 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] with data-filter/data-value, or label > input + text).
  • Gate: [data-gate] with button[data-show="panel-id"].
  • Slider, switch, tables, layout: input.range, .switch[role=switch] (fires switch with detail.on), .table / .table.stack, .r, .grid-2.lean.
  • Helpers: Charter.state() returns the chosen state code; Charter.refresh(root); a state event on document with detail.code and detail.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.

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

Start with Charter

Your business, in Charter. Fixed price, your content.

We set your logo, palette and words within Charter's rules and build the site. Prices in AUD, no GST added, 50% upfront and 50% on delivery.

Industry templates in Charter

Pricing and FAQOpen the live templateWant something bespoke instead?

The other sixteen

Dark · WebGL lightAurora

A living light field behind frosted glass.

Light and dark · interactiveSignal.

Precision you can see: a paper page around a dark instrument.

Light and dark · product motionStrata

A night band of moving print-layer lines over calm surfaces.

Light and dark · showroomFolio

A quiet showroom where the work is the hero.

Paper · night runRiso

Spot inks that overprint, sliding into register.

Light and evening · editorialAtelier

Quiet luxury, set like a lookbook.

Colour blocks · kinetic typeMarquee

Kinetic type on full-bleed colour blocks.

Light and dusk · physicsPebble

Soft clay pebbles you can flick, for brands that look after people.

Light and after hours · labelsRemedy

The care of a well-run dispensary: labels that print, packs that count out.

Bench and night shift · evidenceAssay

Corporate science: a chromatogram that runs, a batch that releases.

Day and night freight · logisticsDispatch

Clinical logistics: a parcel that rides its tracker, a label that slaps on.

Day clinic and night shift · telehealthVigil

Telehealth with a lamp left on: the clinic's day as a clock, every free time lit.

Case notes and after hours · disclosureCandour

A clinic that shows its working: a record that writes itself, a ledger that says who pays.

Day and night board · split-flapTableau

The menu board: rows that clatter into place, price tickets and one brass accent.

Reading room and night stacks · filedCatalogue

Information, filed: index cards in a drawer, pulled to the front one at a time.

Birch and polar night · steadyCairn

Care built stone by stone: a cairn that stacks itself and a year with the visits marked.

Custom · from $2,500Yours?

A look nobody else has, designed from scratch.