.webp){kind=link}
.webp){kind=link}
Design system
The one set of colours, sizes, corners and building blocks that every LeorWiki page, menu and tool uses, so the whole wiki looks and works the same.
- Everyone who adds or changes a CSS snippet, a menu, a page type or an HTML tool in LeorWiki, Claude included
- All CSS snippets in .obsidian/snippets, the website head (🗂️ All files/Site/translate-head.html), Ask LeorWiki and the Service Explorer
1. Where the design system lives
| What | Holds | Rule |
|---|---|---|
| leor-tokens.css | Every colour, size, corner, line and shadow, for light, dark and print | The single source. Change a value here, never in another snippet. |
| Other snippets | The look of one component (home-menu, leor-submenu, sops-menu, task-list ...) | Use only var(--lw-...) values. No hex colours, except black and white inside print rules and inside drawn icons. |
| This note | The rules and the list of tokens and components | Update it in the same step as leor-tokens.css. |
| Update tokens.bat | Copies the tokens into Ask LeorWiki and the Service Explorer | Run it after every change to leor-tokens.css. |
| Backups | _backups/2026-10-25 design system (outside the vault) | The state before the design system. Never inside the vault, so it is not exported. |
When a rule changes: update leor-tokens.css, then this note, then run Update tokens.bat, then check Home, one SOP and one menu in light and dark.
2. Rule zero: markdown first
The strength of LeorWiki is that every page is a markdown note that anyone can read and edit in Obsidian, by hand or with Claude. The design system never takes that away. The look comes from CSS; the content stays plain markdown.
The more often a piece of content changes, the plainer its markdown must be:
| Tier | Content | Changes | Allowed in the note |
|---|---|---|---|
| 1. Documents | SOP procedures, task lists, agendas, standards, PCIs, skill notes, checklists | Weekly | Headings, tables, lists, bold, italics, links and the standard callouts. The look comes from one cssclass (sop, tasks, skill, checklist, rguide). |
| 2. Menus | Submenus, SOPs menu, Items, Meetings, Documents | When pages are added | One callout with one list line per item. Add a page = add a line. Draft state follows the note's Status. |
| 3. Screen pages | Home, Org Chart, Client Visit Journey, Skills Map, Training Passports | Rarely | Nested callouts. Options as words after the callout name, for example [!home-tile|sparkles c-treatments]. Generated pages stay generated by their script. |
| 4. Tools | Ask LeorWiki, Service Explorer | When the tool changes | HTML. The token block is copied in by Update tokens.bat, never typed. |
Never in a note:
- HTML tags. The only exception is
<br>for a line break inside a table cell. - Colours, sizes or styles typed into the note.
- A new callout name without a snippet that styles it and a line in this note.
Links in lists (tablet use: every link must be easy to tap):
- One link per bullet. When several links belong together, write a label bullet and put each link on its own bullet under it, never as a comma list ("Radiance Facial, Hydrafacial, Leor Lite Facial").
- Two links inside one short sentence are fine ("Sponges or disposable face napkins").
- Menus (SOPs menu, submenus, Meetings, Items) are exempt: their snippet turns each link into its own button or row.
3. Tokens
All tokens start with --lw- and live in leor-tokens.css. Values are light | dark.
No red
Never use red or pink-red anywhere in LeorWiki: menus, tiles, buttons, icons, alerts, tools, the website, exported Excel files. Red looks alarming in a clinic and clashes with the Leor look (decision 29 Oct 2026).
- Warnings use amber (--lw-warn), the strongest alerts (stop rule, High priority, errors) use charcoal (--lw-risk) with an icon such as the octagon.
- Before adding a colour: its hue must not be between 330 and 20 degrees (red, rose, pink-red).
- Status emoji in notes stay as they are (🟢 Live, 🟠 Review, 🟡 Draft); never add 🔴 to a menu; roles are role tags, not emoji squares.
Neutrals
These follow Obsidian's own greys, so the wiki keeps matching Obsidian.
| Token | Light | dark | Use |
|---|---|---|
| --lw-bg | #ffffff | #1c1c1c | Page |
| --lw-card | #f6f6f6 | #282828 | Tiles, grouped lists, cards |
| --lw-line | #e4e4e4 | #333333 | Borders and dividers |
| --lw-hover | 6.7% black | 6.7% white | Hover, empty icon squares |
| --lw-ink | #222222 | #dadada | Text |
| --lw-muted | #5c5c5c | #b3b3b3 | Descriptions, section labels |
| --lw-faint | #767676 | #8a8a8a | Soon, chevrons, counts (readable: 4.5 to 1) |
| --lw-connector | #9a9a9a | #6f6f6f | Lines in diagrams (Org Chart, Skills Map, journey, trees) |
| --lw-connector-strong | #7a7a7a | #9a9a9a | Darker neutral marks (circle rings, the direct route) |
Accent and status
| Token | Light | dark | Use |
|---|---|---|
| --lw-accent | #2f7fb5 | #5a9fd0 | Leor blue: icons, fills, links, switches. Obsidian's own accent is set to the same blue. |
| --lw-accent-text | #2c76a9 | #7db4dc | Small blue text on grey (tags, small buttons) |
| --lw-accent-fixed | #2f7fb5 in both | Blue that must not change with the theme (blue bars with white text, numbers drawn on pictures) |
| --lw-ok | #2e8a55 | #6cc191 | Live, Standards box, good, Low priority |
| --lw-warn | #b86e00 | #f0a83a | Critical box, watch, Medium priority |
| --lw-risk | #3d4045 | #d6d9de | Stop rule, never, High priority, errors. Charcoal, not red (see No red) |
| --lw-review | #be7a08 | #f59e0b | Orange Review dot on SOP / PCI buttons |
Note Status stays as emoji in the notes (🟡 Draft, 🟠 Review, 🟢 Live). These tokens only colour what the CSS draws.
The standard callouts use the shared colours: Definition (info) is Leor blue, Critical (warning) is --lw-warn, Standards (success) is --lw-ok. Applicable to (abstract) keeps Obsidian's colour.
Section colours
Used on Home, the Skills Map, the Org Chart and task lists. Each section has the colour of the role that owns it.
| Section | Token | Light | dark | Role |
|---|---|---|---|
| Treatments | --lw-sec-treatments | #4f80bf | #8fb2e0 blue | Skin Practitioner |
| Medical | --lw-sec-medical | #a68329 | #dcbc62 yellow | Doctor |
| Operations | --lw-sec-operations | #679558 | #9cc48e green | Receptionist |
| Sales | --lw-sec-sales | #8761a8 | #b99ad6 purple | Relationship Manager |
| Management | --lw-sec-management | #5b6b8c | #93a3c6 dark slate | Center Manager |
| Customer | --lw-sec-customer | #778ca1 | #9fb3c6 grey-blue | |
| Software | --lw-sec-software | #4f8a8b | #8cc3c4 teal | |
| HR | --lw-sec-hr | #6f7f3a | #b9c47c olive | |
| Training | --lw-sec-training | #c0703f | #e3a37c orange | |
| Other | --lw-sec-other | #828994 | #9aa1ab grey | |
| Brand | --lw-sec-brand | #6b4d44 | #c9ad9f LEOR brown |
On Home and in task lists, a tile or section gets its colour from a word: c-treatments, c-operations, c-sales, c-medical, c-management, c-customer, c-software, c-hr, c-training, c-other, c-brand.
Treatment group colours
Only inside Treatments screens (SOPs menu, Service Explorer, PCIs), never on a screen together with section colours.
| Group | Token | Light | dark | Icon |
|---|---|---|---|
| Consultation | --lw-grp-cons | #a68329 | #dcbc62 | stethoscope |
| Medi-facial | --lw-grp-medi | #5b67b8 | #9aa3e0 indigo | face with glow |
| Skin | --lw-grp-skin | #4f8a8b | #8cc3c4 | layers |
| Hair | --lw-grp-hair | #8761a8 | #b99ad6 | crown |
| Body | --lw-grp-body | #c0703f | #e3a37c | figure |
| Slimming | --lw-grp-slim | #679558 | #9cc48e | diagonal ruler |
| LHR | --lw-grp-lhr | #2f7fb5 | #8fb2e0 | zap |
In the SOPs menu, peels, lasers, energy devices, regenerative, injectables and procedures belong to Skin. A category without an SOP yet stays grey until its SOP exists.
Role colours
Roles are shown as role tags, never as emoji squares (decision 29 Oct 2026). A tag is a small inline span, the one agreed HTML exception: <span class="r-fm">Floor Manager</span>. One label per role, the same everywhere (SOP and checklist "By" columns, meetings, lists, the Visit Journey): the full name in the table below, singular, never a short label (Pract., RM, CM ...) and never untagged where a role is named as the one who does, leads or attends something. In running sentences a role stays plain text. The lead of a meeting has its own Lead line in the [!glance] card, above Attendees, and is not repeated in the attendee list (decision 1 Nov 2026). Tags have one size everywhere (0.85 of the body text) and wrap only between words (decision 29 Oct 2026).
Short labels, SOP step tables only (decision 29 Oct 2026). In the By column of SOP step tables (treatment, client journey and operations SOPs) the screen shows a short label; hovering (mouse) or tapping (tablet, website) shows the full name. The note still holds the full name, so nothing is typed differently. Meeting agendas, all other pages and paper show the full name. Styled by role-tags.css, tap by "ROLE TAG TAP" in translate-head.html.
| Role | Short label |
|---|---|
| Skin Practitioner | Pract. |
| Doctor | Dr. |
| Relationship Manager | RM |
| Receptionist | Recep. |
| Center Manager | CM |
| Floor Manager | FM |
| Nurse, Valet, Founder, Pre-sales, Client | unchanged |
| Marketing Manager | Mktg. |
| Hospitality Executive | Hosp. |
| Nutritionist | Nutri. |
| Finance Manager | Fin. |
| Role | Class | Token | Colour |
|---|---|---|---|
| Skin Practitioner | r-sp | --lw-role-sp | #2f7fd6 blue |
| Doctor | r-doc | --lw-role-doctor | #d9a400 yellow |
| Relationship Manager | r-rm | --lw-role-rm | #9050c0 purple |
| Receptionist | r-rec | --lw-role-reception | #4f9a3c green |
| Center Manager | r-cm | --lw-role-cm | #8b2d7c plum |
| Floor Manager | r-fm | --lw-role-fm | #16918a teal |
| Valet | r-valet | --lw-role-valet | #1189a8 cyan |
| Nurse | r-nurse | --lw-role-nurse | #1d8a57 emerald |
| Marketing Manager | r-mkt | --lw-role-marketing | #e07b26 orange |
| Hospitality Executive | r-hosp | --lw-role-hosp | #5b5fc7 indigo |
| Nutritionist | r-nutri | --lw-role-nutri | #7a9a1e olive green |
| Finance Manager | r-fin | --lw-role-finance | #2a4291 navy |
| Founder | r-founder | --lw-role-founder | #823b17 LEOR brown |
| Pre-sales | r-presales | --lw-role-presales | #977420 bronze |
| Client | r-client | --lw-role-client | #a8b51c lime |
Every role has a real colour. No role tag is grey or close to the border and background greys, and none is red. The three darkest (Center Manager, Finance Manager, Founder) get a lighter twin in dark mode.
Styled by role-tags.css on every page: tint of the role colour behind, the role colour darkened as text (at least 5:1 in light and dark). The Client Visit Journey sections and icons use the same --lw-role tokens.
Type
One system font everywhere, with Noto Sans Devanagari for the Hindi and Marathi views. No web fonts, so the website also works offline. Base size 15px. Headings keep Obsidian's sizes.
| Token | Size | Use |
|---|---|---|
| --lw-fs-xs | 0.75em | Tags, chips |
| --lw-fs-label | 0.8em | Section labels: bold, capitals, letter-spacing --lw-track (0.07em), muted |
| --lw-fs-sm | 0.85em | Descriptions, meta, small buttons |
| --lw-fs-btn | 0.9em | Buttons and pill links |
| --lw-fs-base | 1em | Body text |
| --lw-fs-title | 1.05em | Tile and card titles |
| --lw-fs-row | 1.2em | Menu rows |
Weights: --lw-fw-regular 400, --lw-fw-medium 500, --lw-fw-strong 600 (titles, buttons), --lw-fw-heavy 700 (labels, tags). No other weights.
Spacing, corners, lines
| Kind | Tokens |
|---|---|
| Spacing (4px steps) | --lw-sp-1 4px, --lw-sp-2 8px, --lw-sp-3 12px (gap between tiles), --lw-sp-4 16px (inside cards), --lw-sp-5 20px, --lw-sp-6 24px, --lw-sp-7 32px (between groups) |
| Corners | --lw-r-xs 4px (document callouts, bars), --lw-r-sm 6px (tags), --lw-r-md 10px (buttons, 36px icon squares), --lw-r-icon 12px (44 to 48px icon squares, photos), --lw-r-lg 16px (tiles, cards, grouped lists), --lw-r-pill |
| Lines | --lw-border (1px solid --lw-line). Planned or Draft: --lw-border-soon (1.5px dashed --lw-faint) |
| Shadows | Flat on screen: no shadow on tiles, rows or cards. Only things that float: --lw-shadow-pop (pop-ups), --lw-shadow-menu (drop-down menus), --lw-shadow-knob (switch knob) |
| Tints | --lw-tint 14%: a colour behind an icon or chip. --lw-press-a 10%: press feedback. --lw-hover-a 6%: mouse hover |
Touch, icons, switches
- Anything tappable is at least --lw-tap (44px) tall.
- Icons: Lucide only (the set Obsidian ships). Choose them with a word after the callout name where the snippet allows it. Custom drawings (the treatment group icons, the document icon on "Open SOP") are defined once in leor-tokens.css (--lw-ico-grp-..., --lw-ico-doc).
- Icon square: the context colour at 14% behind the icon in full colour. Sizes: 44px square with a 24px icon (tiles), 36 / 20 (menu rows), 26 / 15 (empty or small).
- Emoji only for Status and role squares, never as decoration.
- One switch, on Home only: Live only / Show all. It controls what every menu shows; menus and pages have no switches of their own (Show drafts and Show coming soon removed 29 Oct 2026). The switch look, for any future switch: 42 × 24, white knob, grey track when off, Leor blue when on. The knob moves in 200 ms, ease-out.
Motion (menus)
One timing for every menu: drop-down menus, fold-out menus, the side menu and its folders, pop-ups.
| Token | Value | Use |
|---|---|---|
| --lw-menu-in | 240 ms | A menu or fold-out opens |
| --lw-menu-out | 200 ms | It closes (a little quicker) |
| --lw-ease-out | cubic-bezier(0.2, 0, 0, 1) | Ease-out: quick start, soft landing. Never linear. |
| --lw-stagger | 45 ms | Items that appear one by one start 45 ms apart, at most 6 steps (item 7 and later come with item 7) |
| --lw-rise | 4px | How far a menu or item drops in. Pop-ups rise 8px from below. |
| --lw-dur | 0.12 s | Press and hover feedback only, not menus |
- Subtle only: fade plus a 4px drop. No bounce, no scaling, no sliding across the screen.
- Items drop in one by one only when a menu opens. Closing is one quick fade of the whole menu.
- A tap during an animation turns it around from where it is, so fast repeated taps always end in the state of the last tap.
- Device setting "reduce motion": short 120 ms fades only, nothing moves, no one-by-one items, fold-outs open at once.
- Where it lives: the tokens and the shared animation lw-menu-in in leor-tokens.css; one-by-one rows in sops-menu (Treatment SOP menu) and item-notes (Used in); on the website, MENU MOTION in translate-head.html animates the top-bar menus, the Feedback pop-up, every fold-out and the side menu with the same tokens. The Service Explorer has its own copy of the five values.
- In Obsidian the rows drop in when a menu opens; the open / close height animation is website only.
- New menu: reuse lw-menu-in and the tokens. Never type a duration or curve in a snippet.
4. Components
| Component | Written in the note as | Snippet | Look |
|---|---|---|---|
| Home tile | [!home-tile|icon c-colour] inside [!home-grid] | home-menu | Card, 16px corners, 44px icon square, title 1.05em / 600, grey description |
| Category tile | [!pick-cat|key]- Name 22 treatments Definition inside [!pick-grid] |
sops-menu | Same card as Home tiles; opens into a full-width panel with SOP cards |
| SOP card | [!pick-sop] SOP name 5 treatments Open SOP inside a category, rows "- Treatment PCI" |
sops-menu | One card per SOP: name, count, "Open SOP" button in the group colour; rows list the treatments it covers with their own PCI. Two cards per row on iPad, one on a phone. No SOP link = "No SOP yet". Unconfirmed PCI (..) hidden in Live only |
| Submenu row | [!submenu] with one "- Page" line per row | leor-submenu | Grouped list: one card per group, rows at least 60px, 36px icon square, chevron |
| Task list | 3 callouts: [!tk-visit] Client visit, [!tk-routine] Routine (Daily to Yearly), [!tk-team] Team & growth (Training, Leadership, Other); a bold line per group | task-list | Side labels: icon tile + title, line in the section colour (green / blue / orange), group labels in a 140px left column in the section colour, tasks on the right, line between groups, lighter line between tasks. No cards, no dots, no numbers. Below 520px the label goes above its tasks. A4 print in black and white |
| Fact card | [!glance] | meeting-page | Card with small grey capital labels and icons |
| Report card | [!rg-card] | report-guide | Card with picture on top, blue numbered steps |
| Skill blocks | [!sk-...] | skill-page | Grey boxes, 4px corners like the SOP callouts |
| Pill links | [!pills] | pill-links | Round buttons, 44px |
| Buttons | Links inside menus (SOP, PCI, Dashboard) | each menu snippet | 44px, 10px corners, page colour, 1px line, 0.9em / 600. Small in-row button 32px. Blue fill only for the one main action (Send, switch on). |
| Section label | A line with only bold text inside a menu (in task lists: see Task list) | leor-submenu | 0.8em, bold, capitals, muted |
| Document callouts | [!info] Definition, [!abstract] Applicable to, [!warning] Critical (SOPs: top of Procedure); [!success] Standards and [!core]- Core standards are no longer used in SOPs | Obsidian + sop-standards | Obsidian's own callouts in the shared colours |
| SOP table | A normal markdown table in a note with cssclass sop | Table-Width-6n4 | Grey header, shaded rows; screen, dark and print from the --lw-table tokens |
| Checklist | Note with cssclass checklist. Layout depends on the checklist type (role tasks, center audits, calls, cleaning, maintenance ...): keep each as simple as possible. To be redone; current drafts use [!cl-fields], [!cl-rule], #### groups, a tick table, [!cl-sign], [!cl-foot], and cl-team for a sheet per team | checklist | Prints on one A4 page in black and white |
| Stage map | [!stages] written by Update stage maps.bat | sop-stages | Grey bars, no colour. The step range is the italic text after the link. |
| Status dot | Automatic from the linked note's Status | sops-menu | Orange dot = Review, no dot = Live |
| Role tag | Skin Practitioner written as <span class="r-sp">Skin Practitioner</span> |
role-tags | Small rounded tag, role colour tint + darker role colour text, 0.85 of the body text / 500, same size on every page. Full role name only. Replaces the emoji squares |
| Top bar | Nothing: added to every website page by translate-head.html (Site folder) | translate-head.html | Docked header in the page's top slot, 44px, page colour, 1px line below; the page starts under it, nothing floats. Left: Back (arrow icon, one step back to the previous page in this tab; faded and not tappable when there is none) then Home (house + word). Right: Language (English / मराठी / हिंदी menu), Feedback, Print / Share. Icons only below 1200px wide, icon + word on desktop. Menus drop down below it. Hidden in print. |
5. "Coming soon" (Draft notes)
A link to a note with Status 🟡 Draft (or a note that does not exist yet) is shown as coming soon and cannot be tapped. Supercharged Links copies the note's Status onto each link; nothing has to be typed.
Each menu keeps its own shape, but all use the same ingredients:
- the same dashed line: --lw-border-soon
- the same grey: --lw-faint
- the same words: "Soon" on rows and buttons, "Coming soon" on tiles and pages
6. Light, dark and print
- Every token has a light and a dark value. Never write a separate .theme-dark rule for a colour: give the token a dark value instead.
- Print always uses the light palette, even when the device is in dark mode. Document pages print in black and white through the print rules in the website head; checklists, task lists and Training Passports keep their own A4 print layouts.
- Inside @media print, plain black and white (#000, #fff) and greys are allowed.
7. How to add or change something
- Check this note: is there already a token or component for it? Use it.
- New value needed: add it to leor-tokens.css with a light and a dark value and a short comment, then add it to this note.
- New component: build it from a callout or a list, give it its own snippet, use only --lw- values, and add a row to the Components table.
- Run Update tokens.bat if you changed leor-tokens.css.
- Check Home, one SOP, one menu and one task list, in light, dark and print preview, on an iPad if possible. Home must still fit one iPad screen without scrolling.
8. Page titles
One rule: the file name is for the people who maintain the wiki, the title is for the people who read it. Every page shows exactly one title.
| Page type | Title shown? | How |
|---|---|---|
| Documents (SOPs, PCIs, skill notes, items, JDs, task lists, meetings) | Yes | Obsidian's page title at the top. Staff need to know which page they are on, and the print header uses it. |
| Screen pages with their own header (Home, SOPs menu, Client Visit Journey, Org Chart) | No | cssclasses: no-title (page-titles.css) |
Where the title comes from:
| View | Shows |
|---|---|
| Obsidian | Always the file name (Obsidian cannot show a property as the title without a community plugin) |
| Website | The note's title property when it has one, otherwise the file name |
Rules:
- Add a title property only when the file name holds something staff should not see: a sort number (11.1 - Machines), an emoji (02 - 📋 SOPs), a 101 code (Onboarding 101) or Index. Then title = Machines, Treatment SOPs, Onboarding, Home.
- The title is the file name without the code, not a new name, so staff can still find the page by searching (Zenoti check-ins 101 → Zenoti check-ins).
- A title with a colon goes in quotes: title: "Post-Care: Forma".
- Never start a note with a # heading. The page title already does that job; a heading would show the title twice.
- SOP codes stay visible in SOP titles (TSOP01 - LHR): they help audits and printed copies.
- PCIs: file name PCI - Treatment, title "Post-Care: Treatment".
- The website never shows a note's properties (Status, Owner, Live since ...), on screen or on paper. Status only works behind the scenes: Coming soon, Live only and the New mark.
9. "New" mark
A small sparkle and the word New show for 7 days after a note goes Live, then disappear by themselves. Website only: Obsidian cannot compare dates.
| Where | Look |
|---|---|
| Home tile | Sparkle + New, top right corner of the tile |
| Menu rows (submenus, Skills Map, Journey, pill links, Training Passports) | Sparkle + New after the page name |
| SOP / PCI / Settings buttons, Org Chart pills | Sparkle only (no room for the word) |
| The page itself | Sparkle + New after the page title |
How to use it:
- The day you set Status to 🟢Live, also fill the property Live since with today's date (date picker; every template has the field).
- Keep Live since as the first release date. A later update does not bring the mark back (decision 28 Oct 2026).
- Only Live notes get the mark. Draft and Review notes never do.
- Colour: --lw-accent-text. Not printed.
How it works: Supercharged Links copies Status and Live since onto every link (data-link-status, data-link-live-since). A script in the website head (translate-head.html, block "NEW MARK") compares the date with today in the viewer's browser, so no new export is needed when the 7 days end.
10. Words to know
| Word | Meaning |
|---|---|
| Token | A named value (colour, size, corner) in leor-tokens.css, for example --lw-accent |
| Snippet | A CSS file in .obsidian/snippets that styles part of the wiki. Obsidian and the website both use it. |
| cssclass | A word in a note's properties that switches on a look, for example sop or tasks |
| Callout | An Obsidian block that starts with > [!name]. LeorWiki menus and cards are callouts. |
| Light / dark | The two colour modes of the device. The wiki follows the device. |
| Live since | The date a note first went Live. Drives the New mark for 7 days. |
| Title property | A line title: ... in a note's properties. The website shows it instead of the file name. |