Ulric · Eugene, Oregon · Design system handoff · Oct 2026
Make it feel like Eric made it.
This is the style handoff for Ulric and its clients, for outside design teams and AI design agents. Every value here was read from the live sites’ CSS, measured in a headless browser, and captured at 1440px and 390px. Nothing is invented.
These five come from the code and the copy, not from adjectives. Each one is backed by Eric’s own notes in the stylesheets (comments signed “Eric, 2026-10-…”) or by live page text.
Ink on paper. The brand color marks things; it is never the background.
Every page is near-black ink on white or warm paper. The accents are sampled from the client’s logo and kept for buttons, links, rules and small marks. Ulric itself is #191917 on #faf9f5, with orange kept for one italic word, the eyebrow bar and the call button.
“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.”mindmorphcolorado.com · tokens.css
“One colour logic for every button … no orange fill anywhere. A solid button is near-black with white type on a light ground.”mandalamed.com · style.css
One voice in the headline: a characterful display face with one marked word.
Every hero runs eyebrow → big display headline with exactly one marked word → one-sentence lede. Ulric marks forty-four-year in orange Newsreader italic. Mandala draws a gold underline under “healing”, orcounselors sets “fits” in Lora italic, and MycoMuse and MindMorph draw a keyword underline (--kw-dur:700ms; --kw-w:2.5px).
“the hero’s entrance: each line rises in turn, then the keyword’s underline draws”mindmorphcolorado.com · tokens.css
Hairlines, not boxes. Nothing moves that doesn’t need to.
Structure comes from thin rules and whitespace. Hover is a small shift. Photos don’t zoom, rows don’t move, and gradients are out (orcounselors allows one, by name). On 2x screens the hairline drops to .5px.
“no box, no border, no fill, on every row.”ulric.studio · swipe.css
“No boxes, discs, rails or fills.”mandalamed.com · lotus.css (FAQ)
“Nothing else moves: no picture zoom, no play-button growth.”orcounselors.com · alder-cards.css
Built for the phone first, and measured to the pixel.
Phone CSS comes first, with layers added at 600px and 921px. Targets are 44px or more, every control is 48px, labels stay on one line, fallback fonts are metric-matched against layout shift, and motion never hides content.
“PRACTITIONERS + 160 GOOGLE REVIEWS + BEST OF PORTLAND measure 293px at 360 against 320px of room”mandalamed.com · home-extras.css
“MOTION NEVER GATES CONTENT.”UlricCMS core · motion.css
Say only what’s true, and show where it came from.
Stats carry a source and a date, prices are published, every clinical search carries the 911/988 line, and the AI guide discloses itself. The copy is first-person and plain, and it never promises outcomes.
“Sources: Google · ulric.studio/work · ulric.studio/about, as of Oct 2026”ulric.studio · hero
“Facilitation is not medical care or psychotherapy, and no outcome is promised.”mycomusecolorado.com · hero
“An AI assistant that answers from our own pages. It cannot give medical advice.”mandalamed.com · Guide
02 · House style vs client flex
What stays, and what changes.
The client themes share one STRUCTURE block word for word. The MindMorph file says: “A sister site (MycoMuse) copies this file and changes values here, never names.” Colour and type change per client; the structure doesn’t.
Constant (Ulric house)
Flexes per client
Mobile-first breakpoints at 600px and 921px (“Mobile first; one breakpoint at 921px”, Alder)
Palette: two accents sampled from the logo
Gutter of 20px on phones, then 32–40px; column 1120–1280px
Typefaces: one display face and one reading face per client
Ink on white or warm paper; accents as marks; a near-black floor for footer and dark bands
Ground: warm cream (Mandala, Ulric), cool off-white (orcounselors), pure white (MycoMuse, MindMorph)
Hero: full-bleed photo or film, dark scrim, eyebrow + H1 with one marked word + one-line lede + Book pill + Ask pill + crisis line
Corners at 6 / 10 / 14px plus the pill; photos slightly rounded
Photo corner: 6px (MycoMuse, MindMorph) or 16px (Mandala, orcounselors)
Sticky frosted header with Book on the right; full-screen phone menu ending on Book
Announcement bar (Mandala, MindMorph) or none
Stats row: serif number over a one-line tracked label, no box
Brand extras: Tenor Sans licence caps (Mandala), Verified badge (orcounselors)
Phone card rows swipe sideways with a peek; grids from 600px
—
Hairline FAQ with a thin plus that turns into a minus; answer around 65ch
—
Core motion: fade-up 22px, image settle, line rise, keyword draw; all off under reduced motion
—
Guide chat bottom-right; Finder/Ask search with 911/988 links
—
Type pairing rule. One face with character for display (often a serif), one quiet face for reading, and the reading face or Inter for “what a visitor presses (menu, buttons, links that stand alone)” (mandalamed.com style.css). orcounselors keeps a third face, Lora, for its h2s and its italic keyword.
The same hero, five brands (390px)
UlricMandalaorcounselorsMycoMuseMindMorph
03 · Tokens
The values, as shipped.
Every hex below is copied from a :root block. Contrast ratios are computed from those hex values. Machine-readable copies with a source per value: tokens.json and tokens.css.
Color · Ulric
Source: ulric.studio/themes/ulric/assets/style.css (:root). Orange is 2.96:1 on paper, so it is used for display italics, bars and fills under ink text (ink on orange is 5.64:1), never for small text. Small orange text uses --accent-deep.
Client faces in these specimens load from Google Fonts when you are online and fall back to system faces offline. Ulric’s faces are bundled in fonts/.
Ulric scale (style.css)
--fs-display clamp(44px,6.2vw,88px)Proof, in production.
--fs-h1 clamp(40px,5vw,72px)Proof, in production.
--fs-h2 clamp(32px,3.6vw,52px)Proof, in production.
--fs-h3 clamp(22px,2vw,28px)Proof, in production.
--fs-lede clamp(18px,1.5vw,21px)Proof, in production.
--fs-body 16pxProof, in production.
--fs-small 14pxProof, in production.
--fs-caption 13pxProof, in production.
--fs-eyebrow 12pxProof, in production.
Headings use weight 400, line-height 1.04 and tracking −.022em; the eyebrow is 12px, 600, uppercase, .15em. On the client sites (shared tokens.css) the scale is 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) · hero clamp(4.1rem,4.6vw+.6rem,5.4rem), with body line-height 1.65.
Spacing
Ulric --s-1 … --s-11 (style.css)
--s-1 4
--s-2 8
--s-3 12
--s-4 16
--s-5 24
--s-6 32
--s-7 48
--s-8 64
--s-9 80
--s-10 96
--s-11 128
Client sites: 8 · 12 · 16 · 24 · 32 · 48, with sections of 64px rising to 96px from 921px (MindMorph, MycoMuse). Mandala sections run 72 → 120px; the orcounselors rhythm runs 72 → 120px (88px on its home page).
Layout
Ulric · max 1120px · gutter clamp(20px,5vw,48px) · header 73px
House · max 1180px · gutter 20px, then 32px from 600px · header 68px, then 80px
Hover and press · .15–.2s ease; Mandala’s link dots draw in “under 300 ms”
Press play to preview each one. Nothing plays under reduced motion.
fade-up
line rise
keyword draw
image settle
“MOTION NEVER GATES CONTENT. Every hidden state below is scoped to html.fx … reduced motion, ?nofx=1, no IntersectionObserver … land in the same place: the page, fully visible, unanimated.” (core motion.css)
04 · Components & patterns
Parts you will see everywhere.
Each pair shows the same component at 1440px and 390px, cropped from the live page. Click any image to open it full size.
Header & navigation
Sticky and frosted, with Book on the right. On phones it holds the logo, a search icon, a short Book pill and the menu button, and it is fixed rather than sticky at 920px and below (“iOS Safari lets a sticky header scroll away”, MindMorph). The phone menu fills the screen and ends on the Book pill.
1440
390
Mandala header: logo, text links, Find help veil pill, Book online pillmandalamed.com
MindMorph header: announcement bar + frosted header + plum pillmindmorphcolorado.com
Hero
Full-bleed media under a dark scrim, with the text anchored low on the left. Eyebrow, then H1 with one marked word, then a one-sentence lede, then Book plus an Ask pill, then the crisis line. On phones nothing is removed: “everything stays, it just stacks tighter”.
1440
390
MycoMuse hero: film, eyebrow, Marcellus H1 with a drawn leaf underline, Book + Ask pill, crisis linemycomusecolorado.com (viewport)
1440
390
orcounselors hero: Golos H1 with a Lora italic keyword, search + chip filters, isometric illustrationorcounselors.com (viewport)
Cards
A 4/3 photo with slightly rounded corners, a serif title, two or three lines of body, then the accent “Read more →”. On phones the row swipes sideways with the next card peeking in (“a deliberate peek that says it scrolls”, orcounselors).
1440
390
MindMorph service cards: 4/3 photo, serif title, three-line summary, Read more →mindmorphcolorado.com
1440
390
Mandala practitioner cards: portrait, DM Sans name + tiny Tenor caps licence, tracked rolemandalamed.com
1440
390
MycoMuse offering cards on hairlinesmycomusecolorado.com
Provider directory & search
One field with an example query, a round go button, and quick-filter chips in “one row at every width”. Provider cards: “a 56px circle on the left and, beside it, exactly two lines that never wrap”, then insurance, fee, Verified, Accepting and “Book via SimplePractice”.
1440
390
orcounselors search: one field, round go button, one-row chip filters that scrollorcounselors.com
1440
390
orcounselors Verified providers: two-line headers, insurance, fee, Verified, Book via SimplePracticeorcounselors.com
One verb, “Book”, in the header, the hero, the end of every service page and the phone menu. On a light ground it is a solid near-black (or brand-dark) pill; on dark it is white; the secondary is a ghost. Hover is “a small shift … never a new colour”. The scheduler itself stays in Jane, IntakeQ or SimplePractice.
1440
390
MindMorph location block: Book an appointment pill + Get directions ghostmindmorphcolorado.com
1440
390
MycoMuse /book: its own booking engine, day columns of time chips (view only)mycomusecolorado.com/book
1440
390
Ulric closing CTA on the dark floor: orange call pill + ghost “Ask the studio assistant”ulric.studio
Testimonials
Quotes are set in the display italic, sit under hairlines, and carry the name, role, place and where the review lives. Ulric adds a sourced rating line: “★★★★★ 5.0 on Google · Read the reviews on Google →”.
Stats rows: “a large serif number over a small tracked Inter label. No fill, no tint, no blur, no borders.” Steps and checklists are short, numbered and plain: “Four steps to a first session”.
1440
390
Mandala first-visit checklistmandalamed.com
1440
390
orcounselors “Four steps to a first session”orcounselors.com
FAQ
Rows between hairlines, the question in the display face at 500, a thin plus that turns into a minus, and the answer at about 65ch. “No boxes, discs, rails or fills.”
1440
390
MycoMuse “Asked, and answered plainly”: hairline rows, thin plusmycomusecolorado.com
Forms
Labels sit above the inputs, inputs are 48px, and checkboxes are real: “22px, 2px dark border, 3px corners … the whole label row is the 44px tap target”. One primary pill. No health questions in website forms.
MycoMuse footer on the dark floor #111310mycomusecolorado.com
1440
390
orcounselors footer on the page colour, with “Built by Ulric”orcounselors.com
1440
390
Ulric footer floorulric.studio
Ulric-only patterns
A thin orange scroll-progress bar, a vertical side index on wide screens, device-framed work, numbered tiers (“01 · The Blitz”), and “Full breakdown →” links in accent-deep.
1440
390
Ulric pricing: numbered relay tiers, featured Sprint on the dark surface with the orange CTAulric.studio/pricing
1440
390
Ulric “Proof, in production.”: device frames for the workulric.studio
04b · Carousel & image rule
Everything scrolls sideways.
The one row pattern for galleries, services, team, listings and articles, after orcounselors.com and Mandala (both after openai.com). Live below: drag it, swipe it, or use the arrows. Files: ucar.css + ucar.js (no dependencies).
Selected work
Sites Eric built.
Homepages cropped square so every card gets the same frame.
Portland clinicMandala MedicineStatewide directoryOregon CounselorsColorado practiceMindMorphFacilitator siteMycoMuseRealtor + IDXLauren Rose RealtyLocal staysStay EugeneClient siteGraceClient siteCalled to Heal
The rules
Five rules for rows.
Text cards use the same track, a soft tint and 16px corners.
01
Square or 4:5
Every content image is cropped to 1:1 (phones) or 4:5 (desktop cards). Never a long or tall strip.
02
Text on top
On phones the title sits over the top of the square photo on a soft dark gradient. On desktop it moves to the bottom.
03
Arrows + drag
Round soft-fill arrows sit top-right and fade out at either end. Mouse drag, touch swipe and arrow keys all work.
04
Peek
Cards are about 85% of the phone width so the next one always peeks in. That is the cue that it scrolls.
05
No grids of photos
Galleries, services, team, listings and articles all use the same row. A long grid or stack of photos is never shown to a client.
Image cropping rule
All content images are square (1:1) or 4:5, never long. Export 1200×1200 and 600×600 webp with srcset, crop on faces first, then smart (entropy/saliency) crop, then center; fix EXIF rotation and sharpen lightly. If a photo is under about 480px on its short side, or flat and blank, drop it instead of stretching it. Heroes are the one exception: a cover photo behind a dark scrim.
Header & nav rule
Menu items never wrap: short labels, white-space:nowrap, extras grouped into dropdowns (hover, focus or click; Esc closes; arrow keys move). Below 1100px, or any time the links would not fit, the header collapses to a hamburger whose three rules turn into an X; the panel unrolls from under the header with links climbing in, accordion submenus and a sticky CTA at the bottom (after Mandala). Files: unav.css + unav.js.
05 · Therapy & health sites
Safe, private, calm.
Crisis line wherever 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 discloses itself
Its first line: “An AI assistant that answers from our own pages. It cannot give medical advice.” (Mandala; MindMorph says “this site’s pages”).
Privacy: no health data on the site
Called to Heal: “a build that keeps health information off the website entirely” (ulric.studio/work). Mandala: a Consumer Health Data Privacy Policy (Washington My Health My Data Act) and “Privacy choices”. orcounselors: “You decide what to share and when.” MindMorph’s case study says “no patient record on the site” and that chats are deleted after 30 days; that comes from the case study and I didn’t check it on the live site.
Booking stays in the practice’s tool
Jane at Mandala (mandalamedicine.janeapp.com) · IntakeQ at MindMorph · SimplePractice per provider on orcounselors (“Book via SimplePractice”) · MycoMuse on Ulric’s own booking module with Google Calendar sync. The work page says: “Booking stays in Jane.” / “Booking stays in IntakeQ.”
Insurance, stated plainly
Mandala /insurance lists coverage by practitioner. MindMorph “Insurance & Payment Options” is by state (“Veterans welcome: in network with TRICARE West, VA Community Care preferred provider”). orcounselors has insurance filters, OHP included. MycoMuse: “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 Colorado and Oregon telehealth location pages · a Telehealth chip on orcounselors.
Licensure, verification, eligibility
orcounselors: “A badge means a checked license. No cost to search.” Mandala sets licence letters after each name in Tenor caps. MycoMuse: “NMCF Licensed facilitator, Colorado and Oregon” and a 21+ age gate.
Calm tone
No outcome promises (“no outcome is promised”). Lead with the person’s need (“What do you treat?”, “What is going on?”, “Four steps to a first session”). Hedge the clinical copy (“may help”, “Once a doctor or urgent care has checked you…”).
1440
390
MindMorph insurance by statemindmorphcolorado.com/insurance-payment-options
1440
390
orcounselors: “A badge means a checked license.”orcounselors.com
1440
390
Mandala telehealth pagemandalamed.com/telehealth
06 · Imagery, iconography, voice
Real people. Plain words.
Photography
Real practitioners in the real space, in warm natural light with plants (Mandala portraits).
A film of the facilitator speaking, as the hero (MycoMuse).
Pacific Northwest and Colorado landscapes for services: forest stairs, mountains, dusk water (MindMorph).
Eric himself on Ulric (the trail photos in the hero phone).
A dark scrim under hero type. Content photos have slightly rounded corners, thumbnails are 4/3 and a lone photo is 3/2.
Delivery: webp with srcset, the hero poster preloaded with fetchpriority="high", a separate phone crop.
Illustration only where it explains (orcounselors’ isometric figures on a light wash).
Icons
Inline SVG line icons in the text colour, stroke 1.5–2.2 (most often 1.6–2.0; orcounselors 1.75).
Small chevrons and → arrows end links; a dot or short bar comes before eyebrows.
Mandala’s car is “drawn in the text colour”, and its careers icons are “gold drawings”.
Voice and tone
First person, plain, specific, modest. Headlines read like sentences a person would say. Every number has a source and a date. No superlatives, guarantees, outcome or ranking claims, or jargon. A metaphor is fine when it’s carried all the way through (Blitz → Sprint → Relay → Marathon; “Put the baton in good hands.”).
“Proof, in production.”
“Engineer by upbringing. Counselor by training.”
“Every good studio keeps cats.”
“you are never in deeper than the phase you are in.” (pricing)
“Hi, I’m Masha.” · “Asked, and answered plainly”
“Claim your profile. It is free.”
“Start with your insurance card or a plain question.”
“Guided by skilled clinicians who care deeply about your wellbeing.”
1440
390
Ulric “Build. Brand. Advise. Run.”ulric.studio
07 · Accessibility, performance, mobile-first
The bar is already in the code.
Accessibility
Text contrast of at least 4.5:1, with the measured ratio in the token comments (“--accent 6.08:1 on white”, MycoMuse).
Low-contrast brand colours (Ulric orange 2.96:1, Mandala periwinkle 3.23:1, gold 2.68:1) only for large type, fills under ink, or decoration.
Targets of 44px or more (19–53 rules per site); controls are 48px.
:focus-visible rings everywhere (42–78 rules per site).
prefers-reduced-motion handled (21–28 blocks per site); motion never hides content.
A skip link and lang="en" on every site; balanced headings; real checkboxes; aria-disabled arrows; inert inactive slides.
“nothing depends on hover.” Browser floor: Chrome 79 (“the studio gets read from a Tesla car browser”).
Mobile-first rules
Write the phone first; add min-width:600px and min-width:921px.
Keep every element on phones and stack it tighter.
One line, never two, for labels, stats and announcement bars; important words first.
Card rows swipe with a peek; no arrows under 900px (“a finger swipes”).
Fixed header on phones; viewport-fit=cover and safe-area insets.
The phone menu fills the screen and ends on Book.
Hairlines are .5px on 2x and 3x screens.
Performance, as measured
One phone-viewport run from the box on Oct 18, 2026, unthrottled. Use these for comparison, not as lab or field data.
Site
LCP
CLS
Requests
Transferred
Note
ulric.studio
0.95s
0.006
51
602 KB
self-hosted fonts, no third-party font request
mandalamed.com
0.88s
0.023
44
227 KB
31 of 37 images lazy
orcounselors.com
1.05s
0
173
1.86 MB
195 lazy provider images
mycomusecolorado.com
1.70s
0
40
1.41 MB
1.08 MB is the hero film
mindmorphcolorado.com
0.79s
0.021
41
760 KB
metric-matched fallbacks
Targets to hold: CLS under 0.05 (metric-matched fallback fonts, fixed heights on rows that load late). LCP under 2.5s on a mid-range phone. Self-host or preconnect fonts. Lazy-load everything below the fold. Use webp/avif with srcset and preload the hero poster.
08 · Do and don’t
Twelve calls Eric has already made.
Near-black solid buttons, a ghost secondary, and the accent for one mark
Fill buttons or bands with a loud accent (“no orange fill anywhere”)
White or warm paper with ink; a dark floor for the footer
Tinted section floors or gradients (orcounselors allows one, by name)
Mark one word in the headline: italic, or a drawn underline
Mark several words, or colour each line differently
Hairline rows for FAQs, lists and stats
Boxes, discs, rails or fills around rows
Hover as a small shift: a step lighter, or an underline
Zooming photos, recolouring titles, moving rows
Numbers with a source and a date
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 only in the footer
White on periwinkle or orange only at large size
Small text on a 3:1 accent
Motion as an extra; content visible without JS; off under reduced motion
Content hidden until an animation runs; auto-advance with no pause
A sideways swipe row with a peek on phones
Ellipsizing the important words; arrows on phones
Booking in Jane, IntakeQ or SimplePractice
Health questions in website forms
Ulric orange only on Ulric
Ulric orange on a client site
Do: Mandala’s “What do you treat?” uses hairline groups and veil chips, a near-black ink button and no fills.Do: one accent action on a dark floor, with a ghost secondary and one line of copy.
I haven’t drawn “don’t” mockups. Each don’t above is a rule written in the sites’ own CSS comments; see DESIGN.md §8 for the sources.
09 · Brief template & AI prompt
Hand this to the next team.
Brief template for design teams
Fill it in and send it 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
Paste it as the system or first message, with DESIGN.md and tokens.css attached.
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 cases
Five sites, one hand.
One panel per site: home at both widths, palette, type, signature moves, and a strip of inner pages at 390px.
Integrative clinic on East Burnside, Portland. Lotus theme over the base theme; moved off Wix in nine days (ulric.studio/work).
1440
390
Mandala Medicine & Wellness homemandalamed.com
--cream (page)#F9F6EE
--olive (ink)#383D3110.34:1
--btn-ink#1E2119white 16:1
--paper#F1ECE0
--grey (line)#DDD9D2
--gold / --copper#C58C51decorative
--peri#6D90CAlarge white type only
--sage#5F8B73
--blue / --muted#5F6C804.93:1
A sanctuary for healingDM Sans 500/700/800 · display
Guided by skilled cliniciansAlegreya Sans · body 17px; Alegreya italic lede; Tenor caps; Inter UI
Signature moves: The Finder sheet, the drawn underline on “healing”, the italic service marquee, the white-on-periwinkle accident band, 16px photo corners, Jane booking.
The Oregon Counselors directory, built and run by Eric. Alder theme.
1440
390
orcounselors.com homeorcounselors.com
--al-page#FAFAF8
--al-ink#0E2A1B14.71:1
--al-pill#14532Dwhite 9.11:1
--al-moss#1C6B3C
--al-brand#3D8850
--al-sage#A8DEB5
--al-paper (mint)#E6F5EC
--al-dawn#F7EFDF
--al-body#4A55687.2:1
Find a counselorGolos Text 800 · display
who fits.Lora (h2 + italic keyword) · Inter body 16px
Signature moves: Search with chip filters, two-line provider card headers, the Verified badge, “Book via SimplePractice”, the iPhone app band, a 16px radius.
Preparation, a facilitated session and integrationKarla 400/500/600 · body 16px
Signature moves: Film hero with a leaf underline, the 21+ age gate, the “Asked, and answered plainly” FAQ, its own booking engine, “no outcome is promised”.
Holistic psychiatry in Lakewood, Colorado, with telehealth across Colorado and Oregon. Sister tokens file to MycoMuse. (mindmorph.mycomusecolorado.com redirects here.)
1440
390
MindMorph homewww.mindmorphcolorado.com
--white#ffffff
--ink#16131418.46:1
--night#121012
--plum = --accent#6a3c5fwhite 8.66:1
--plum-deep#532e4a
--sage-leaf#c3d3a311.88:1 on night
--sage-ink = --accent-2#55653b6.34:1
--lime#a4bc50hero only
--quiet#68626a5.93:1
Integrative psychiatrySpectral 300–500 · display
Ketamine & Spravato therapyMontserrat 400–700 · body 16px
Eric Richers’ studio, Eugene, Oregon. Newsreader and Inter, self-hosted.
1440
390
Ulric homeulric.studio
--ink#19191716.71:1 on paper
--paper / --bg#faf9f5
--paper-2 / --cream#f0eee6
--stone / --muted#69675f5.38:1
--accent#d977572.96:1, large/marks only
--accent-deep#b258384.59:1
--accent-hover#a14f315.71:1 w/ white
--d-accent#e08a6d7.04:1 on #141413
--d-bg#141413
--d-surface#211f1c
--manilla#ebdbbc
--kraft#d4a27f
Software with a forty-four-year head start.Newsreader 400–500 + italic · display
Fixed prices, published up front.Inter 400–600 · body
Signature moves: An orange bar before each eyebrow, the italic orange keyword, sourced stats, device-framed work, numbered relay pricing tiers, the dark footer floor, the side index.
Every project listed on ulric.studio/work was opened, plus the other live client sites they link to. Viewport captures at 1440px (390px versions are in img/); click for full size.
The Mandala brand book (IsaMadeThis_MandalaMedicine_BrandBook.pdf) is on Eric’s Mac and wasn’t available. Mandala values come from the live CSS.
MycoMuse’s 21+ gate and the consent banners were hidden in my own browser only, so I could capture the page behind them. I didn’t click them, so the gate itself isn’t shown. On MycoMuse I also removed a rise-hold class locally so the hero text would render.
No booking flow past its first screen, no logged-in dashboard or CMS, no iOS apps, no walkthrough videos. I submitted no forms.
The orcounselors /providers results render in JS and my card crop failed, so provider cards are shown from the home page “Verified providers” section.
Ulric has no OS-level dark mode I could trigger. Its --d-* tokens style the .dark sections (footer, CTA, featured tier).
Performance comes from one unthrottled run from the box, not field data.
/work projects with no live site (Jev, Clip Calendar, ADU Builder and others) were captured only as their case pages.
