# Ulric design system: brand style handoff For outside design teams and AI design agents building for **Ulric** (Ulric LLC, Eugene, Oregon; founder Eric Richers) and for Ulric's clients. Companion files in this folder: `index.html` (the visual guide with screenshots), `tokens.json` (every value with its source), `tokens.css` (the same values as CSS custom properties), `img/` (screenshots, webp). **How this was made.** Everything below was observed on the live sites on **Oct 18, 2026**. I fetched each site's HTML and CSS (66 stylesheets, about 1.4 MB), read the custom properties and the design comments in the code, measured computed styles in headless Chromium, and took screenshots at 1440 px (desktop) and 390 px (mobile) wide. Sites studied: ulric.studio and every project on ulric.studio/work; the showcase sites mandalamed.com, orcounselors.com, mycomusecolorado.com and www.mindmorphcolorado.com (mindmorph.mycomusecolorado.com redirects there); plus the other live client sites linked from /work (calledtohealcounseling.org, cuti-therapy.com, gracetarnasky.com, laurenroserealty.com, labs.cuti-therapy.com, stayeugene.today). I didn't submit any forms or log in anywhere. Contrast ratios are my own calculations from the observed hex values (WCAG 2.x formula). Quotes in "double quotes" come from code comments or page copy on the cited site. Source keys used below: - **[U]** https://ulric.studio/themes/ulric/assets/style.css - **[ML]** https://mandalamed.com/themes/lotus/assets/lotus.css - **[MS]** https://mandalamed.com/themes/mandalamedicinepdx/assets/style.css (and home-extras.css, nav.css) - **[OA]** https://orcounselors.com/themes/alder/css/alder.css (and alder-*.css, overrides.css) - **[MY]** https://mycomusecolorado.com/themes/mycomuse/assets/tokens.css (and style.css, components.css) - **[MM]** https://www.mindmorphcolorado.com/themes/mindmorph/assets/tokens.css (and style.css, components.css) - **[C]** /core/assets/motion.css, the UlricCMS core file served by the client sites --- ## 1. Design principles (the five that make it Eric's) 1. **Ink on paper. The brand color marks things; it is never the background.** Every site sets its pages in near-black ink on white or warm paper. The accents come from the client's logo and are kept for buttons, links, rules and small marks. MindMorph [MM]: "White paper and near-black ink carry every page; the accent pair is for buttons, links, rules, hover and small marks, never a tinted floor." Mandala [MS]: "no orange fill anywhere"; "A solid button is near-black with white type on a light ground, and white with near-black type on a dark one." Ulric itself is ink #191917 on paper #faf9f5, with the orange #d97757 kept for one italic word, the eyebrow bar and the call button. 2. **One voice in the headline: a characterful display face with one marked word.** Each hero has an eyebrow, then a large display headline in which exactly one word is marked, then a single-sentence lede. Ulric: "Software with a *forty-four-year* head start" (orange Newsreader italic). Mandala: "A sanctuary for **healing**" (a drawn gold underline). orcounselors: "Find a counselor who *fits*." (Lora italic). MycoMuse: "**Steady**, psilocybin facilitation in Colorado." MindMorph: "Integrative **psychiatry**". The last two draw a keyword underline (`--kw-dur:700ms; --kw-w:2.5px` [MM]). 3. **Hairlines, not boxes. Nothing moves that doesn't need to.** Structure comes from thin rules and whitespace, not from fills, borders and gradients. Ulric swipe rows [U]: "no box, no border, no fill, on every row." Mandala stats [MS]: "No fill, no tint, no blur, no borders, no dividers." Mandala FAQ [ML]: "No boxes, discs, rails or fills." orcounselors runs a "no-gradient rule" with one exception [OA]. On hover the cards [OA]: "Nothing else moves: no picture zoom, no play-button growth." On Mandala's service rows [MS]: "nothing moves, shades or underlines on hover." Hairlines get thinner on retina screens: `--hair: .5px` on 2x/3x [MS]. 4. **Built for the phone first, and measured to the pixel.** Everything is written for a phone, with `min-width` layers at 600 and 921 px. Tap targets are 44 px or more, one control height (48 px) is used everywhere, and the "one line, never two" rules are checked against real phone widths ("measure 293px at 360 against 320px of room" [MS]). Fallback fonts are metric-matched so the swap causes no layout shift [U][MM]. Fixed heights keep the stats rows at "zero layout shift" [U]. And [C]: "MOTION NEVER GATES CONTENT." 5. **Say only what's true, and show where it came from.** Numbers carry their source ("Sources: Google · ulric.studio/work · ulric.studio/about, as of Oct 2026" under the Ulric hero stats). Prices are published up front. Every clinical search box says "Not medical advice. In an emergency call 911; in a crisis call or text 988." The AI guide introduces itself as "An AI assistant that answers from our own pages. It cannot give medical advice." MycoMuse's hero states "Facilitation is not medical care or psychotherapy, and no outcome is promised." The copy is plain, first-person and modest. --- ## 2. House style vs client flex | Stays constant (Ulric house style) | Changes per client (flex) | |---|---| | Mobile-first CSS with breakpoints at **600 px** and **921 px** (all four client sites; Alder: "Mobile first; one breakpoint at 921px") | **Palette**: two accents sampled from the client's logo (MycoMuse leaf + violet, MindMorph plum + sage, Mandala periwinkle + gold from the brand kit, orcounselors forest greens) | | Page gutter of 20 px on phones, then 32–40 px; content column 1120–1280 px | **Typefaces**: one display face and one reading face per client (see section 3) | | Ink on white or warm paper; accents only as marks; a near-black "floor" for the footer and dark bands | **Ground tone**: warm cream (Mandala #F9F6EE, Ulric #faf9f5), cool off-white (orcounselors #FAFAF8) or pure white (MycoMuse, MindMorph) | | Hero: full-bleed photo or film with a dark scrim; eyebrow, display H1 with one marked word, one-line lede, a **Book** pill plus an **Ask** search pill, then the crisis line | **Hero media**: a practitioner film (MycoMuse), the clinic interior (Mandala), forest light (MindMorph), an illustration (orcounselors), sky and code (Ulric) | | Pill buttons (`999px`), 48 px controls (56–60 px in the hero), 600-weight label at .875rem | **Button fill**: near-black #1E2119 (Mandala), forest #14532D (orcounselors), leaf-ink #4f6b1e (MycoMuse), plum #6a3c5f (MindMorph), ink #191917 or orange (Ulric) | | Corners: 6 / 10 / 14 px plus the pill; photos slightly rounded | **Photo corner**: 6 px (MycoMuse, MindMorph), 16 px (Mandala, orcounselors) | | Sticky frosted header with a Book pill on the right; full-height phone menu that ends on the Book pill | **Header density**: an announcement bar (Mandala, MindMorph) or none | | Stats row: a large serif number over a small tracked label, one line, no box | **Brand extras**: Mandala's Tenor Sans caps for licence letters, orcounselors' Verified badge | | Sideways snap rows on phones with the next card peeking in; grids from 600 px | | | Hairline FAQ: question, thin plus that turns into a minus, answer around 65ch | | | Motion vocabulary from core: fade-up reveal (22 px, .7 s), image settle, hero line rise, keyword underline draw; all off under reduced motion | | | "Guide" chat launcher bottom-right; the Finder/Ask search with 911/988 links | | **Type pairing rule.** Use one face with character for display (often a serif) and a quiet, legible face for reading. Inter (or the reading face) carries everything a visitor presses. Mandala [MS]: "--ui: the face for what a visitor presses (menu, buttons, links that stand alone)." orcounselors keeps a third face (Lora) for its h2s and its italic keyword. --- ## 3. Tokens All values are in `tokens.json` (with a source for each) and `tokens.css`. ### 3.1 Ulric brand color [U] | Token | Hex | Use / measured contrast | |---|---|---| | `--ink` | **#191917** | text and solid buttons; 16.71:1 on paper | | `--ink-soft` | #33322e | secondary text | | `--paper` / `--bg` | **#faf9f5** | page | | `--paper-2` / `--cream` | #f0eee6 | alternate band (testimonials) | | `--stone` / `--muted` | #69675f | muted text; 5.38:1 on paper | | `--stone-dark` | #a3a094 | eyebrows on dark | | `--accent` | **#d97757** | italic keyword, eyebrow bar, call button fill, progress bar. 2.96:1 on paper, so **not for small text** | | `--accent-deep` / `--accent-strong` | **#b25838** | hover for the solid button; small orange text (4.59:1) | | `--accent-hover` | **#a14f31** | hover for the accent button (white on it is 5.71:1) | | `--on-accent` | #191917 | text on an orange button (5.64:1) | | `--manilla` / `--kraft` | #ebdbbc / #d4a27f | paper-craft secondary tones | | `--line` | rgba(25,25,23,.12) | hairlines | | Dark bands `--d-bg` / `--d-bg-2` / `--d-surface` / `--d-surface-2` | #141413 / #191917 / #211f1c / #2a2824 | footer, CTA band, featured pricing tier (`.dark` sections) | | `--d-fg` / `--d-fg-2` / `--d-muted` | #faf9f5 / #c9c4b8 / #a3a094 | text on dark | | `--d-accent` | **#e08a6d** | orange on dark; 7.04:1 on #141413 | ### 3.2 Client palettes **Mandala Medicine & Wellness** [ML][MS]: olive #383D31 (ink; 10.34:1 on cream), olive-2 #2A2E25, cream #F9F6EE (page), paper #F1ECE0, grey #DDD9D2 (lines), stone #C9C8BF, sage #5F8B73, gold/copper #C58C51 (finder accent, underline; decorative), periwinkle #6D90CA (brand kit; "white type on it only at large size" except on the accident band), blue/muted #5F6C80, ink-2 #434839, button ink #1E2119 (white on it 16:1), button hover #363A2F, light-yellow 245,218,160 (only ever a see-through veil on the finder pills). **orcounselors (Alder theme)** [OA]: page #FAFAF8, dawn #F7EFDF, paper (mint) #E6F5EC, sand #F5EFE6, sand-2 #ECE3D4, ink #0E2A1B (14.71:1), deep #123C27, pill #14532D (primary button; 9.11:1 with white), moss #1C6B3C, brand #3D8850, sage #A8DEB5, body #4A5568, muted #5B6E66, and the one gradient: #EEF6F0 → #F7EFDF. **MycoMuse** [MY]: white #ffffff, wash #f5f6f3, wash-deep #e9ebe5, ink #141513, ink-soft #393c36, quiet #63675f (5.78:1), night #111310, leaf #a4bc50 (accent on night, 8.79:1), leaf-ink #4f6b1e (= accent: buttons and links, 6.08:1), leaf-deep #3f561a (hover), violet #886c94 (decoration only), violet-ink #6c5478 (= accent-2, 6.61:1). **MindMorph** [MM]: white #ffffff, wash #f7f6f6, wash-deep #ecebeb, ink #161314, ink-soft #3d383b, quiet #68626a, night #121012, plum #6a3c5f (= accent: buttons; 8.66:1 with white), plum-deep #532e4a, violet #8b6d97 (decoration), sage-leaf #c3d3a3 (accent on night), sage-ink #55653b (= accent-2), lime #a4bc50 (hero accents only), btn-green #2f3b24. ### 3.3 Type | Site | Display | Reading | UI / extra | Observed (computed, desktop) | |---|---|---|---|---| | Ulric | **Newsreader** 400–500, italic 400 (self-hosted) | **Inter** 400–600 (self-hosted) | ui-monospace for code; Caveat 500 as a handwritten accent | H1 72–88px / 500 / lh 1.02–1.06 / -0.025em; body 15.5px / 24.8px | | Mandala | **DM Sans** 500/700/800 | **Alegreya Sans** 400/500/700 | Alegreya italic (lede), Tenor Sans (caps), Inter (buttons and menu) | H1 115px / 800 / lh .96 / -.04em; body 17px / 27.2px | | orcounselors | **Golos Text** 500/700/800 | **Inter** 300–700 | **Lora** (h2, italic keyword) | H1 108px / 800 / -3.78px; h2 Lora 40px/500; body 16px/24px | | MycoMuse | **Marcellus** 400 | **Karla** 400/500/600 | — | H1 75.8px / 400; body 16px / 26.4px | | MindMorph | **Spectral** 300–500 + italic | **Montserrat** 400–700 | metric-matched fallbacks | H1 75.8px / 400 / lh 1.04; body 16px / 26.4px | Ulric type scale [U]: display `clamp(44px,6.2vw,88px)`, h1 `clamp(40px,5vw,72px)`, h2 `clamp(32px,3.6vw,52px)`, h3 `clamp(22px,2vw,28px)`, lede `clamp(18px,1.5vw,21px)`, body 16px, small 14px, caption 13px, eyebrow 12px (uppercase, 600, tracking about .15em, after a short orange bar). Headings: weight 400, line-height 1.04, tracking -.022em. House client scale [MM][MY]: label .75rem, small .875rem, body 1rem, lede 1.0625rem, h3 1.25rem, h2 `clamp(1.65rem,1.2rem + 1.9vw,2.4rem)`, h1 `clamp(2.1rem,1.4rem + 3vw,3.4rem)`, desktop hero `clamp(4.1rem,4.6vw + .6rem,5.4rem)`. Body line-height 1.65. Headings `text-wrap:balance`. ### 3.4 Spacing, layout - Ulric [U]: 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128 px (`--s-1` to `--s-11`). Max width 1120px. Gutter `clamp(20px,5vw,48px)`. Header 73px. - House [MM][MY]: 8, 12, 16, 24, 32, 48 px; section 64px, then 96px from 921px. Max width 1180px; gutter 20px, then 32px from 600px. Header 68px, then 80px. - Mandala [ML]: max width 1280px; gutter 20 → 40px; section 72 → 120px; column gap 24 → 64px. - orcounselors [OA]: max width 1280px; gutter 24 → 40px; rhythm 72 → 120px (88px on the home page: "even gaps, cleaner, less empty space"). ### 3.5 Radii - Ulric [U]: 6 (small things nested in cards), **10 ("THE corner: cards, frames, media, buttons, inputs")**, 14 (dialogs and sheets only), and the 999px pill for buttons. - House [MM][MY]: 6 / 10 / 14 / 999, with photos at 6. - Mandala [MS]: photos 16 ("slight branded rounded corners to these and all images"), small 10. orcounselors [OA]: 16. ### 3.6 Shadows - Ulric [U]: sh-1 `0 1px 2px rgba(25,25,23,.06), 0 1px 1px rgba(25,25,23,.04)`; sh-2 `0 8px 24px rgba(25,25,23,.08), 0 2px 6px rgba(25,25,23,.06)`; sh-3 `0 24px 64px rgba(25,25,23,.14), 0 8px 20px rgba(25,25,23,.08)`; dark `0 24px 64px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset`. - Mandala buttons [MS]: `0 6px 16px -4px rgba(47,51,41,.36),0 2px 4px -1px rgba(47,51,41,.16)` (with hi and lo variants). - orcounselors raise [OA]: `0 1px 0 rgba(0,0,0,.06), 0 8px 16px -10px rgba(14,42,27,.45)`. - MycoMuse and MindMorph use mostly `box-shadow:none`: separation comes from hairlines. ### 3.7 Breakpoints - Client sites: `min-width:600px` and `min-width:921px` (with `max-width:920px` for phone-only rules and `max-width:359px` for the smallest phones). Mandala: 64 `min-width:921px` rules; MindMorph: 26; orcounselors: 36. - Ulric's own site is older and desktop-first: its most used are `max-width:700px` (14), `767px` (9), `719px` and `900px`. ### 3.8 Motion - Ulric [U]: ease-out `cubic-bezier(.2,.7,.2,1)`, ease-in-out `cubic-bezier(.65,0,.35,1)`; durations 120 / 180 / 260 / 420 / 700 ms. - Core [C]: scroll reveal from opacity 0 and `translateY(22px)` over `.7s cubic-bezier(.2,.6,.2,1)`; `.stagger` children on a 90ms ladder. Image settle: `clip-path: inset(0 0 13% 0)` and `scale:1.022` to rest over .85s. Headline words flip in (`[data-flip]`). `?nofx=1` is a QA mode with everything visible and nothing moving. - House [MM]: hero lines rise 20px over 800ms, stepped 110ms apart (140ms on MycoMuse), with `cubic-bezier(.16,1,.3,1)`; the keyword underline draws in over 700ms at 2.5px. Ease `cubic-bezier(.2,.8,.25,1)`. Hover and press transitions run .15–.2s. - Rules: every site carries 21–28 `prefers-reduced-motion` blocks. Nothing moves on its own except where it was asked for: the orcounselors ticker ("the one row allowed to move on its own") and its carousel, which advances every 10 s with a visible pause button. Link hover on Mandala is a dotted line that draws in "under 300 ms". --- ## 4. Components and patterns (Screenshots in index.html, section 4.) - **Header.** The logo on the left, five or six text links, a quiet **Ask** or **Find help** pill, and a solid **Book** pill on the right. It is sticky and frosted: MindMorph [MM] uses "dense frosted glass ... at .96 with a heavy blur". On phones it holds the logo, a search icon, a short Book pill and the menu button. It is fixed rather than sticky at 920px and below, because "iOS Safari lets a sticky header scroll away". The open phone menu fills the screen and "sets the Book pill on the bottom edge" [MS]. Ulric's call pill is "a compact pill ... solid ink, no outline, medium weight, 40px tall on desktop" ("OpenAI style") [U]. - **Announcement bar.** One line above the header ("Mandala is hiring!...", "New office opening Dec. 1st"). On phones it is "one line, never two"; a line that is too long is cut with "...", so the important words go first [MS]. - **Hero.** A full-bleed photo or film under a dark scrim, with the text anchored low on the left: eyebrow (a dot or bar plus tracked caps), display H1 with one marked word, a one-sentence lede, the Book pill plus an **Ask** search pill with rotating example questions, then the crisis line. At its foot sits a stats row or a marquee of services (Mandala). On phones nothing is removed: "everything stays, it just stacks tighter" [MM]. - **Stats / figures row.** "a large serif number over a small tracked Inter label. No fill, no tint, no blur, no borders" [MS]. Each label is one line, and on Ulric the numbers carry their sources. Phones get "every figure on one row" [MM]. - **Cards.** A photo at 4/3 with slightly rounded corners, a serif title, two or three lines of body, then "Read more →" in the accent (MindMorph services, MycoMuse offerings). Cards have a 1px rule border with 10px radius, or no border at all. On phones they become a sideways snap row with the next card peeking in ("a deliberate peek that says it scrolls" [OA]). Practitioner cards (Mandala) are a portrait photo with rounded corners, the name in DM Sans with tiny Tenor caps for the licence letters ("ND", "LMT"), and the role in tracked caps. - **Provider directory and search (orcounselors).** One search field ("Trauma and PTSD counselor") with a round go button. Quick-filter chips sit in "one row at every width" and scroll sideways with an edge fade and an arrow (Telehealth, Sliding scale, Prescribers, OHP...). The provider card header has "a 56px circle on the left and, beside it, exactly two lines that never wrap" (name; then meta in priority order). Each card shows the license, city, insurance list ("+10 more"), "From $180 /session", a **Verified** badge, "Accepting", "Book via SimplePractice" and "View profile". - **Finder (Mandala, MycoMuse, MindMorph).** The "I need help with ___" or Ask pill opens a sheet titled "What can we help with?". Results appear as you type, grouped as Condition, Services, Practitioners and Questions. Under the field is the line "Not medical advice. In an emergency call 911; in a mental health crisis call or text 988." with **Call 911 / Call 988 / Text 988** as real `tel:` and `sms:` links. - **Booking CTAs.** One verb throughout: "Book online", "Book an appointment", "Book a free consult", "Book a free 15-min call". The Book CTA lives in the header, the hero, the end of each service page and the phone menu. On a light ground it is a solid near-black pill; on a dark ground it is white with ink text; the secondary action is a ghost pill. Hover is "a small shift ... never a new colour" [MS]. - **Testimonials.** Ulric: an italic Newsreader quote in columns under hairlines, an orange opening quote mark, "Read more", the name, role and place plus "on Google", then dots and "★★★★★ 5.0 on Google · Read the reviews on Google →". Mandala: "What patients say" quote cards on paper, with the reviewer's name and the date under each quote. - **FAQ.** "rows between grey hairlines, the question in [display] 500, a thin ... plus on the far right that becomes a minus, the answer ... at ~65ch. No boxes, discs, rails or fills" [ML]. MycoMuse titles its FAQ "Asked, and answered plainly". - **Forms.** Labels sit above the inputs, inputs are 48px tall with a 1px rule, and checkboxes are real: "22px, 2px dark border, 3px corners ... the whole label row is the 44px tap target" [MY]. There's a single primary submit pill. Examples: MycoMuse "Let's connect", Mandala "Stay in touch" (last-minute openings), MycoMuse /book (its own booking engine with day columns of time chips). - **Footer.** A dark "floor" on Ulric, MycoMuse and MindMorph (#141413, #111310, #121012), or the ground colour on Mandala and orcounselors. It holds the logo, columns of plain links, the address and hours, the crisis line, privacy links ("Privacy choices", "Consumer Health Data Privacy Policy"), "© 2026 ...", and on client sites a "Built by Ulric" credit (orcounselors). - **Guide chat.** A round launcher bottom-right in the accent. The panel opens with its disclosure: "An AI assistant that answers from our own pages. It cannot give medical advice." - **Ulric-only.** A thin orange scroll-progress bar on top of the header; a vertical side index (LAB · SERVICES · WORK · ABOUT · CONTACT) on wide screens; browser and phone device frames for the work; numbered pricing tiers ("01 · The Blitz", "02 · The Sprint"...) with the featured tier on a dark surface and an orange CTA. --- ### 4.x Carousel rows (ucar) — the default for all repeated content Galleries, services, team, listings, reviews and articles are **horizontal carousels**, never long grids or stacks (Eric, Oct 18: "these long images are unacceptable to show a client"). Pattern from orcounselors.com's "What is going on?" and "Written by Oregon providers" rows (after openai.com) and Mandala's "Our space". - **Head:** italic serif eyebrow, big bold heading on the left, short italic lede on the right (stacks on phones). - **Arrows:** two round 44px buttons, soft accent fill (`color-mix(accent 30%, white)`), raise shadow, top-right just above the track; `aria-disabled` at 40% opacity at the start/end; hidden when nothing overflows. - **Track:** CSS scroll-snap (`x mandatory`), no scrollbar, bleeds to the page gutter on phones; cards ~85vw on phones (next card peeks), ~46vw on tablets, 340px on desktop; 14px / 20px gap; 16px corners. - **Media cards:** square on phones with the title **on top** of the photo over a dark-to-clear gradient; 4:5 on desktop with the title at the bottom. Small pill "kicker" for the category. - **Text cards:** soft accent-tinted fill, 24px padding, same radius and width. - **Input:** native touch swipe; mouse/pen drag (6px threshold, snaps to the nearest card, no click fires after a drag); arrows step one card; ← → Home End on the focused track; `role=region` + `aria-roledescription=carousel` + label; smooth scrolling off under reduced motion. - **Files:** `ucar.css`, `ucar.js` (dependency-free, ~6 KB each), in `/workspace/ulric-carousel/` and this folder. Live example: index.html#carousel. ### 4.y Header and navigation (unav) Menu items **never wrap to two lines**: short labels ("Our approach" → "Approach"), `white-space:nowrap`, extra items grouped into a dropdown ("More", or "Areas" for realtors). Desktop dropdowns open on hover, focus or click, close on Esc / click-away, and support arrow keys. Below **1100px** — or whenever a fit check finds the links would not fit — the header collapses to a hamburger whose three rules morph into an X; the menu unrolls from under the header, links climb in on a short ladder, groups are accordions, and the CTA (Book / Call / Plan) is sticky at the bottom (Mandala treatment). Test at 390, 768, 1024, 1280 and 1440px. Files: `unav.css`, `unav.js`. ## 5. Therapy and health site patterns - **Crisis line, everywhere it matters.** "Not medical advice. In an emergency call 911; in a crisis call or text 988." This sits under every search and ask box and in the footer, as `tel:911`, `tel:988` and `sms:988` links (Mandala, MindMorph, MycoMuse, orcounselors). orcounselors footer: "Not a crisis service. In a crisis, call or text 988." - **The AI guide is disclosed in its first line**, answers only from the practice's own pages, and "cannot give medical advice". - **Privacy.** Keep health information off the website. Called to Heal's case: "a build that keeps health information off the website entirely". MindMorph's case study says "no patient record on the site" and that chats are deleted after 30 days; I took that from the case study and didn't check it on the live site. Booking stays in the practice's own tool. Mandala carries a "Consumer Health Data Privacy Policy" (Washington My Health My Data Act) plus "Privacy choices". orcounselors: "You decide what to share and when." On orcounselors the consent prompt gives Accept and Decline equal weight. - **Booking stays in the practice's system.** Jane on Mandala (mandalamedicine.janeapp.com); IntakeQ on MindMorph; SimplePractice per provider on orcounselors ("Book via SimplePractice"); MycoMuse uses Ulric's own booking module with Google Calendar sync. The work page says "Booking stays in Jane." and "Booking stays in IntakeQ." Design the CTA, and leave the scheduler alone. - **Insurance, said plainly.** Mandala /insurance lists coverage by practitioner. MindMorph's "Insurance & Payment Options" is by state ("Veterans welcome: in network with TRICARE West, VA Community Care preferred provider"). orcounselors offers insurance filters, including OHP. MycoMuse's FAQ: "Do you accept insurance? No. Facilitation services are private pay and are not covered by insurance." - **Telehealth by state.** Mandala /telehealth (naturopathic medicine and mental health therapy); MindMorph location pages for Colorado and Oregon telehealth; a Telehealth chip on orcounselors. - **Licensure and verification.** orcounselors: "A badge means a checked license. No cost to search." Mandala shows licence letters after each name. MycoMuse: "NMCF Licensed facilitator, Colorado and Oregon". Age gate on MycoMuse: "By proceeding, you confirm that you are 21 years of age or older." - **Calm tone.** Promise no outcomes ("no outcome is promised"). Lead with the person's need: "What do you treat?", "What is going on?", "Four steps to a first session". Phrase the condition guide carefully ("may help", "Once a doctor or urgent care has checked you..."). --- ## 6. Imagery, iconography, voice **Photography.** Real people and real places. Practitioner portraits in the actual clinic, in warm natural light with plants (Mandala). A film of the facilitator speaking (MycoMuse hero). Pacific Northwest and Colorado landscapes for services, such as forest stairs, mountains and dusk water (MindMorph). Eric himself on the Ulric hero ("Eugene, Oregon", a trail photo). Heroes use a dark scrim so white type reads. Content photos get slightly rounded corners. **All content images are square (1:1) or 4:5, never long** (1200 and 600px webp with `srcset`; face, then smart, then center crop; EXIF fixed; light sharpen; drop anything under ~480px or flat rather than stretch it). Heroes are the only exception. Images are responsive webp with `srcset`, and the hero poster is preloaded with `fetchpriority="high"` and a separate phone crop. No stock-y illustration, except orcounselors' simple isometric figures on a light wash. **Icons.** Inline SVG line icons, round caps, stroke 1.5–2.2 (most often 1.6–2.0; orcounselors 1.75), drawn in the text colour. Mandala's car on the accident band is "drawn in the text colour"; its careers icons are "gold drawings". There are small chevrons and arrows (→) at the end of links. A dot or a short bar sits before eyebrows. **Voice.** First person, plain, specific, modest. Short declaratives. Headlines that read like a sentence a person would say. Examples (Ulric): "Proof, in production." / "What clients say." / "Put the baton in good hands." / "Every good studio keeps cats." / "Engineer by upbringing. Counselor by training." / "Fixed prices, published up front." / "you are never in deeper than the phase you are in." (pricing). Clients: "Hi, I'm Masha." / "Asked, and answered plainly" / "Claim your profile. It is free." / "Start with your insurance card or a plain question." Numbers carry a source and a date. Words to avoid: superlatives, guarantees, outcome or ranking claims, jargon. A metaphor is fine when it's carried all the way through: Ulric's tiers are Blitz, Sprint, Relay and Marathon, and the CTA is "the baton". --- ## 7. Accessibility, performance, mobile-first **Accessibility bar (all observed in the code):** - Text contrast is at least 4.5:1, and accent tokens carry their measured ratio in the CSS comments (MycoMuse: "--accent 6.08:1 on white"). Low-contrast brand colours (Ulric orange 2.96:1, Mandala periwinkle 3.23:1, gold 2.68:1) are only used for large type, fills under dark text, or decoration. - Tap targets are 44px or more (19–53 rules per site). Controls are 48px. - `:focus-visible` rings on everything (42–78 rules per site), for example `outline:2px solid var(--plum);outline-offset:3px` [MM]. - `prefers-reduced-motion` handled (21–28 blocks per site). Motion never hides content. - A skip link on every site, `lang="en"`, `text-wrap:balance` on headings, real checkboxes, `aria-disabled` on carousel arrows at the ends, and `inert` on inactive slides. - "nothing depends on hover" [MM]. Browser floor: Chrome 79 ("the studio gets read from a Tesla car browser") [C]. **Performance (measured from the box on Oct 18, 2026, phone viewport, unthrottled, so treat these as relative numbers):** | Site | LCP | CLS | Requests | Transferred | |---|---|---|---|---| | ulric.studio | 0.95 s | 0.006 | 51 | 602 KB | | mandalamed.com | 0.88 s | 0.023 | 44 | 227 KB | | orcounselors.com | 1.05 s | 0 | 173 | 1.86 MB (mostly lazy avatars) | | mycomusecolorado.com | 1.70 s | 0 | 40 | 1.41 MB (1.08 MB hero video) | | mindmorphcolorado.com | 0.79 s | 0.021 | 41 | 760 KB | Targets to hold: CLS under 0.05 (metric-matched fallback fonts; fixed heights on rows that load late); LCP under 2.5 s on a mid phone; self-host or preconnect fonts; lazy-load everything below the fold; webp/avif with `srcset`; no third-party font request on Ulric. **Mobile-first rules.** 1. Write the phone CSS first, then add `min-width:600px` and `min-width:921px` layers. 2. Keep every element on the phone and stack it tighter. Don't hide content. 3. One line, never two, for labels, stats and announcement bars. Size them to fit, and put the important words first. 4. Rows of cards become sideways snap rows with the next card peeking in. No arrows below 900px: "a finger swipes" [U]. 5. Use a fixed header on phones (iOS sticky bug), `viewport-fit=cover`, and `env(safe-area-inset-*)`. 6. The phone menu fills the screen and ends on the Book pill. 7. Hairlines are .5px on 2x and 3x screens. --- ## 8. Do and don't | Do | Don't | |---|---| | Near-black solid buttons, a ghost secondary, and the accent for one mark | Fill buttons or bands with a client's orange or other loud accent ("no orange fill anywhere") | | White or warm paper and ink; a dark floor for the footer | Tinted section floors, gradients (one sanctioned exception on orcounselors) | | Mark one word in the headline (italic or a drawn underline) | Mark several words, or use a different colour for each line | | Hairline rows for FAQs, lists and stats | Boxes, discs, rails or fills around list rows | | Hover as a small shift: a step lighter, or an underline | Zooming photos, recolouring titles, moving rows on hover | | Numbers with a source and a date ("as of Oct 2026") | Unsourced outcome, traffic or ranking claims | | 911 and 988 as real `tel:` and `sms:` links under every clinical search | Crisis info as plain text or hidden in a footer only | | White text on periwinkle or orange only at large size | Small text on a 3:1 accent | | Motion as an extra, off under reduced motion, content visible without JS | Content hidden until an animation runs; auto-advancing carousels without a pause | | A sideways swipe row with a peek on phones | Cutting off or ellipsizing the important words; arrows on phones | | Booking in the practice's own tool (Jane, IntakeQ, SimplePractice) | Collecting health information in website forms | --- ## 9. Brief template for design teams Copy, fill in, and send back with the first concepts. ``` PROJECT [Client name] · [practice type] · [city, state] LICENSED IN [states] · Telehealth in: [states or "none"] AUDIENCE [who is looking, what state they are in when they arrive] PRIMARY ACTION Book via [Jane / SimplePractice / IntakeQ / Ulric booking / phone] Exact CTA label: "[Book an appointment]" INSURANCE [in network with ... / private pay only / superbills]; say it in one sentence CRISIS LINE Yes, on every clinical page and under every search (911 / 988 links) PRIVACY No health information collected on the site. Privacy policy + [state law page] BRAND INPUTS Logo file; 2 accent colours SAMPLED FROM THE LOGO; display face + reading face Ground: [white / warm paper]. Footer: dark floor or ground colour PHOTOGRAPHY [real practitioners / real space / landscape set]; hero film or still PAGES Home, Services (x n), Practitioners (x n), New patients, Insurance, Telehealth, FAQ, Contact, Privacy VOICE SAMPLES 3 sentences the client actually says or writes HOUSE RULES Ulric house style (DESIGN.md sections 1, 2, 8): 600/921 mobile-first, 44px targets, pill buttons 48px, 6/10/14 radii, hairlines not boxes, one marked headline word, accents as marks only DELIVERABLES 390px and 1440px comps for home + one inner page; token sheet in tokens.css names (--accent, --accent-2, --ink, --serif, --sans ...) ACCEPTANCE Contrast >= 4.5:1 body; no layout shift on font swap; works with JS off; reduced motion respected; every claim has a source ``` ## Prompt for AI design agents ``` You are designing for Ulric (Eric Richers, Eugene, Oregon) or one of his clients. Follow DESIGN.md exactly. - Mobile first: write 390px first, add min-width 600px and 921px. Keep every element on phones; stack it tighter. - Ink on paper. Ground #ffffff or a warm paper; text near-black. Two accents sampled from the client logo, used only for buttons, links, rules, focus rings and one marked word. Never a tinted section floor, never a gradient. - Type: one characterful display face + one quiet reading face; UI labels in the reading face (or Inter). Headline = eyebrow (dot or bar + tracked caps) + display H1 with ONE marked word (italic or drawn underline) + one-sentence lede. - Shape: radii 6 / 10 / 14 and 999px pills; controls 48px (hero 56-60px); tap targets >= 44px. - Structure with hairlines and whitespace, not boxes. Hover = small shift only. No picture zoom. - Motion: fade-up 22px over .7s cubic-bezier(.2,.6,.2,1), 90ms stagger; all off under prefers-reduced-motion; content visible without JS. - Clinical sites: "Not medical advice. In an emergency call 911; in a crisis call or text 988." with tel:/sms: links under every search; AI guide discloses "cannot give medical advice"; booking stays in Jane / SimplePractice / IntakeQ; no health data in site forms; insurance and telehealth stated plainly by state. - Voice: first person, plain, specific, modest. No superlatives, no outcome or ranking claims. Every number has a source and date. - Ulric's own brand only: Newsreader + Inter, ink #191917 on paper #faf9f5, orange #d97757 (deep #b25838, hover #a14f31, dark #e08a6d). Don't put Ulric orange on client sites. Deliver tokens using the names in tokens.css and show 390px and 1440px. ``` --- ## 10. Per-site mini cases - **Mandala Medicine & Wellness**, mandalamed.com (Portland integrative clinic; Lotus theme). Cream #F9F6EE / olive #383D31 / button ink #1E2119 / gold #C58C51 / periwinkle #6D90CA / sage #5F8B73. DM Sans 800 display at .96 line-height and -.04em; Alegreya Sans body at 17px; Alegreya italic lede; Tenor Sans caps; Inter for UI. Signatures: the "I need help with" Finder sheet, the drawn underline on "healing", the italic service marquee, the white-on-periwinkle accident band, practitioner portraits with 16px corners, Jane booking. - **orcounselors.com**, the Oregon Counselors directory (Alder theme). Page #FAFAF8 / ink #0E2A1B / pill #14532D / moss #1C6B3C / mint #E6F5EC / dawn #F7EFDF. Golos Text 800 display, Inter body, Lora italic keyword "fits". Signatures: the search with chip filters, two-line provider card headers, the Verified badge, "Book via SimplePractice", the iPhone app band, and a 16px radius. - **MycoMuse**, mycomusecolorado.com (Masha Steiner-Renoir, licensed psilocybin facilitation, CO + OR). White / ink #141513 / night #111310 / leaf-ink #4f6b1e / leaf #a4bc50 / violet-ink #6c5478. Marcellus 400 display, Karla body. Signatures: the film hero with a leaf underline under "Steady", the 21+ age gate, the "Asked, and answered plainly" FAQ, its own booking engine, and "no outcome is promised". - **MindMorph**, www.mindmorphcolorado.com (holistic psychiatry, Lakewood CO; telehealth CO + OR). White / ink #161314 / night #121012 / plum #6a3c5f / sage-leaf #c3d3a3 / lime #a4bc50 (hero only). Spectral display, Montserrat body. It is the sister file of MycoMuse: same structure tokens, different brand block ("A sister site (MycoMuse) copies this file and changes values here, never names"). Signatures: the forest-light hero, plum pills, insurance by state, IntakeQ booking. - **Ulric**, ulric.studio. Paper #faf9f5 / ink #191917 / orange #d97757 / deep #b25838 / hover #a14f31 / dark #e08a6d / paper-2 #f0eee6. Newsreader (italic accents) + Inter, self-hosted with metric-matched fallbacks. Signatures: the eyebrow with an orange bar, the italic orange keyword, sourced stats, device-framed work, numbered relay pricing tiers, a dark footer floor, and the side index. --- ## What I couldn't capture - The Mandala brand book (IsaMadeThis_MandalaMedicine_BrandBook.pdf) is on Eric's Mac and wasn't available; Mandala values come from its live CSS. - MycoMuse's 21+ age gate and the cookie and consent banners were hidden in my own browser so I could screenshot the page behind them. I didn't click them. For MycoMuse I also removed a `rise-hold` class in my browser so the hero text would show. The gate itself isn't documented visually. - I didn't go through any booking flow past its first screen (Jane, IntakeQ, SimplePractice and MycoMuse /book stay read-only), any logged-in dashboard or CMS, the iOS apps, or the walkthrough videos. - The orcounselors /providers results list is rendered by JS, and my element crop of its cards failed, so the provider cards are shown from the home page "Verified providers" section and the full-page /providers screenshot. - Ulric has no OS-level dark mode that I could trigger (`prefers-color-scheme: dark` did nothing). The `--d-*` values are used by its `.dark` sections (footer, CTA band, featured tier). - The performance numbers come from one unthrottled run from the box. They are not lab or field (CrUX) data. - The project pages on /work that have no live site (Jev, Clip Calendar, ADU Builder and others) were captured only as their ulric.studio case pages.