Everything you need to make something that looks like GrowMyPractice. Logo, color, type, layout, motion and video, in one place.
02 Start here
Two kinds of rules live in here. Knowing which is which will save you a round of revisions.
The logo files and their geometry. The color values. The three typefaces. The contrast rules. These carry the brand's identity and they're enforced in code on our own site, so work that drifts from them won't match anything else we ship.
Composition, pacing, photo selection, how a section breathes, where a stat lands. We've written down what tends to work. If you've got a stronger idea inside the fixed rules, we want to see it.
If you only read one page, read the color contrast rule. Sage comes in two tones and picking the wrong one for your background is the single most common way work comes back for a fix.
Tech software precision with editorial warmth. Clean, confident, lots of air, bold display type, a warm off-white canvas broken up by full-bleed near-black bands, one sage accent doing all the personality work, and serif italics for soul. We're not a soft wellness brand. We're not a cold software brand either.
03 Logo
One leaf, one wordmark, three arrangements. Every file in the download is fully outlined, so you don't need our font installed to place the logo.
Use this everywhere you can. Navigation, headers, footers, email signatures, video lower-thirds. Aspect ratio is 7.849 : 1.
For square and near-square spaces. Avatars, video end cards, ads, merchandise. Aspect ratio is 2.070 : 1.
Favicons, app icons, profile pictures, and anywhere the wordmark would drop below its minimum size. The leaf is a single path. Please never redraw it or substitute a similar-looking leaf. A hand-drawn version reads as a blob and it's the fastest way to make something look off-brand.
04 Logo
Four variants of every lockup. Pick by the surface you're placing it on, not by preference.
| Variant | Leaf | Wordmark | Put it on |
|---|---|---|---|
| light | #5F6E50 | #1C1B17 | Cream, white, light photography. This is the default. |
| dark | #B2BF9B | #FFFFFF | Near-black #17160F and other dark surfaces. |
| ink | #1C1B17 | #1C1B17 | One color, light backgrounds only. Print, embroidery, single-color partner walls. |
| reverse | #FDFCF8 | #FDFCF8 | One color, dark backgrounds and photography only. |
The leaf changes color between light and dark surfaces, and that's deliberate. The darker sage doesn't hold up on a dark background. Measured contrast is 3.31 to 1, which fails the 4.5 minimum we hold ourselves to. On dark, always use the lighter sage.
Clearspace equals one leaf width on all four sides
Nothing enters that box. No type, no rules, no photo edges, no other logos. When in doubt, give it more room. This brand is built on air.
| Asset | Screen | Below that | |
|---|---|---|---|
| Horizontal lockup | 120px wide | 32mm | Switch to the stacked lockup |
| Stacked lockup | 64px wide | 18mm | Switch to the mark alone |
| Mark alone | 16px tall | 5mm | Nothing. That's the floor. |
05 Logo
Short list, and we do enforce it.
06 Color
The palette is deliberately small. Sage carries all of the personality, which only works because nothing competes with it.
07 Color
Body-size text has to clear 4.5 to 1. These are measured, not estimated.
Both failures look fine on a big monitor in a bright room. They fall apart on a phone in daylight, which is where most of our audience actually reads. That's why the rule is measured and not left to taste.
For reference, ink on cream measures 16.79 to 1 and the on-dark text color on a dark band measures 14.15 to 1. There's plenty of headroom in the text colors. Sage is the one you have to watch.
08 Color
No blue, no orange, no teal, no second green. If a design needs another color to work, the design needs rethinking.
Contrast between cream and the dark band. A change in type size. Whitespace. A hairline rule. Sage at different weights. These carry more hierarchy than a new color ever would, and they keep the work looking like ours.
Charts sometimes need to separate more than two series. Use a single ink-to-sage ramp: muted gray-greens moving up to full sage at the point that matters. Never a rainbow scale.
An earlier version of our brand had four accent colors. Clay, a deep green, an orange, and sage. That book is retired. If you've been sent anything using an orange #E55A2B or a pale sage #A2A892, it's out of date and you should ask us for the current files.
09 Type
All three are free under the Open Font License and they're in the download. You can install and embed them.
It emphasizes a phrase inside a headline or carries a pull-quote. Never a full sentence, never body copy, never upright. Color it sage when it sits inside a headline.
Always, with tabular figures switched on. Plex Mono draws a dot inside its zero and that can't be turned off, so a large figure set in it looks broken.
Uppercase labels on data. Table headers, metric captions, tags, eyebrows on charts. Around 10.5 to 13px with wide letter-spacing.
10 Type
| Role | Desktop | Weight | Tracking | Notes |
|---|---|---|---|---|
| Display hero | 74px | 700 | -0.04em | Homepage hero only |
| Page H1 | 62px | 700 | -0.04em | One per page |
| Section H2 | 48px | 700 | -0.035em | Cap around 26 characters |
| H3 | 24px | 600 | -0.02em | |
| Lede | 20px | 400 | 0 | Sits under a headline |
| Body | 15 to 17px | 400 | 0 | Line height 1.5 to 1.6 |
| Eyebrow | 12px | 600 | 0.22em | Uppercase, sage |
| Mono label | 10.5 to 11px | 500 | 0.06 to 0.1em | Uppercase |
Headlines sit on two lines of roughly equal length. On the web we cap the width and let the browser balance it. In a static design, break it by hand. Three lines reads as clutter.
Section headlines and page titles end without a period, italic fragments included. Ledes, body copy and labels keep their punctuation as normal.
One sage italic phrase per headline at most, and not on every headline. When every headline has one, it stops meaning anything and starts looking like a tic.
11 Layout
The page alternates warm cream sections with full-bleed near-black bands. That contrast is the main structural move we have, so it's worth spending carefully.
Save them for the moments with the most conviction. The proof, the measurement story, the final call to action. Three or four in a long page. If everything's dark, the contrast stops doing any work.
Most sections open with a small uppercase sage eyebrow, then the headline, then the lede. The eyebrow sits 27px above the headline. It's a small number that shows up on every surface we make, so it's worth matching.
| Property | Desktop | Mobile |
|---|---|---|
| Section inner width | 1080px (1180px wide variant) | full bleed minus padding |
| Section padding | 104px vertical, 56px horizontal | 60px vertical, 20px horizontal |
| Breakpoint | above 820px | 820px and below |
| Corner radius | buttons 10px · cards 16px · panels 20px | same |
| Hairlines | 1px, 12% ink on light | 1px, 14% cream on dark |
Shadows are soft, low and wide. Nothing hard-edged, nothing dark. A card lifts off the page by a few percent, not by a visible drop shadow.
12 Interface
Sage is for links and accents. It's not the default button color, which surprises people.
| Level | On light | On dark |
|---|---|---|
| Primary | Ink fill, cream text | Cream fill, ink text |
| Secondary | Transparent, hairline border, ink text | Transparent, hairline border, cream text |
| Tertiary | Sage text link, no fill | Sage light text link, no fill |
One primary action per view. Weight 600, radius 10px, and the label never wraps.
13 Data
We tell clients we're measurable and not a black box. This is where that shows up visually.
Sample figures for layout only. Never reuse them as real results.
The headline figure is a dollar amount or a return, not a raw count of enquiries. Counts are supporting context at most. A number without money attached doesn't answer the question the reader actually has.
One ink-to-sage ramp. Lines run from muted up to full sage at the moment that matters. Hairline rows in tables, mono column headers, and figures right-aligned with tabular numerals so the columns line up.
If a figure is modelled rather than measured, say so on the same screen. Write the assumptions next to it. And never put a client's real revenue figures or an unapproved quote on anything public.
14 Imagery
Warm, human, documentary. Real practice spaces and real clinicians. Faces turned into the frame rather than out of it. Pull the saturation down a little so photography sits comfortably next to cream instead of shouting over it.
Glossy stock. Handshakes. Diverse-team-around-a-laptop. Anyone in scrubs pointing at a tablet. Cold blue medical photography. Anything with a lens flare. If it looks like it came from a stock library, it probably reads that way to our audience too.
Minimal line icons and check marks, in sage or ink, one consistent stroke weight. No filled multicolor icon sets, no illustration styles borrowed from software marketing sites, no emoji standing in for icons.
We work with therapy practices, psychiatry groups and treatment centers. Photography should feel like the inside of a calm, well-run practice. It shouldn't feel clinical, and it shouldn't feel like a wellness spa either.
15 Motion and video
The same instinct runs through interface motion and video. Nothing bounces, nothing spins, nothing asks for a round of applause.
Hover and press transitions land around 0.14 seconds. Menus fade and rise over about 0.15 seconds. Anything a person triggers should feel like it already happened. No bounce, no elastic easing, no parallax, no scroll-jacking.
Cuts over transitions. When you need a transition, a short cross-dissolve or a hard cut on a beat. No whip pans, no glitch effects, no zoom punches on every third word, no kinetic type flying in from off-screen.
Our audience is clinicians and practice owners. They're deciding whether we look like people who'd handle their money carefully. Restless editing reads as a hard sell, and it costs us more trust than the extra energy gains.
| Use | Duration | Easing |
|---|---|---|
| Hover and press | 0.14s | ease-out |
| Menu, dropdown | 0.15s | ease-out, fade plus 7px rise |
| On-screen text in | 0.25 to 0.35s | ease-out, fade plus small rise |
| Cross-dissolve | 0.2 to 0.4s | linear |
| Logo end card hold | 1.5 to 2.5s | static |
Respect reduced-motion settings on anything that runs in a browser. If someone has asked their system to calm animation down, honour it.
16 Motion and video
Four shapes cover everything we run. Build the master at the largest size and cut down, rather than upscaling later.
| Item | Spec |
|---|---|
| Frame rate | Match the source. 24, 25 or 30fps. Keep it consistent inside a single piece. |
| Color | Rec. 709, 8-bit minimum for delivery |
| Codec | H.264 MP4 for delivery. ProRes or the project master for handback. |
| Audio | Normalize to about -14 LUFS. True peak no higher than -1 dBTP. |
| Backgrounds | Cream #FDFCF8 or near-black #17160F. Not pure white, not pure black. |
17 Motion and video
Most of our audience watches with the sound off, on a phone, between sessions. Captions aren't optional and they're not an afterthought.
| Item | Spec |
|---|---|
| Caption typeface | Schibsted Grotesk, weight 700 |
| Minimum size, vertical | 54px on a 1080-wide frame, which is 5% of frame width |
| Minimum size, landscape | 42px on a 1920-wide frame |
| Lines on screen | Two at most, around 32 characters each |
| Color | White on a near-black plate, or ink on a cream plate |
| Emphasis | Sage light for the emphasized phrase on dark, sage on light. One phrase per card. |
| Plate | Solid near-black at around 86% opacity, 8px radius. Never a drop shadow on bare type. |
| Lower third | Name in Schibsted 600, role beneath in Plex Mono uppercase, sage light. 3px sage left rule. |
Burn captions in. Platform auto-captions pick their own font and put them wherever they like, which puts our type outside our control and often outside the safe area. Also supply a separate SRT for accessibility where the platform accepts one.
Never set a caption in Newsreader. The italic serif is for a phrase inside a headline in a designed layout. At video sizes on a phone it loses legibility fast.
18 Motion and video
Start on the substance. A branded animation at the front costs us the first two seconds, which is exactly when someone decides whether to keep watching. Put the mark small and static in a corner if you need attribution early.
Cream or near-black field. Stacked lockup centered, sized to about 22% of frame width. One line of Schibsted 600 beneath it if there's a call to action. Hold it still. No spin, no shimmer, no particles.
The leaf fades up over 0.3 seconds with a small rise, around 8px at 1080 wide. The wordmark follows 0.1 seconds later, same treatment. Then it holds. That's the whole thing.
Never draw the leaf on with a stroke, never rotate or grow it, never have it sprout or unfurl. It's a mark, not a mascot.
19 Motion and video
Warm and slightly lifted. Pull saturation down a touch, especially greens and skin. Lift the blacks a little so nothing crushes to pure black, matching the near-black we use everywhere else. No teal-and-orange, no heavy film emulation, no vignettes.
Sparse and warm. Felt piano, soft synth pads, light acoustic texture. It sits under the voice and never competes. No driving corporate builds, no trap hats, no big drop at the reveal. If a viewer notices the track, it's too loud.
Let shots breathe. Around two to four seconds a shot in short form, longer in explainers. A pause after a real number is more persuasive than a cut. We'd rather a piece feel calm and a little slow than busy.
Soft key from one side, real room behind rather than a seamless backdrop, camera at eye height. Frame slightly off-center with the eyeline into the open side. Practice spaces, offices and homes all work. A studio cyclorama doesn't, because it stops looking like a person and starts looking like an advert.
21 Voice
Design is half the brand. Work that looks right and sounds wrong still comes back for a rewrite.
Owners of therapy practices, psychiatry groups and treatment centers. Clinicians first, business people second. Many of them find marketing genuinely uncomfortable and worry it'll compromise how they practice. Write like a peer who worked something out, not like an agency presenting.
Never "leads." Say "people reaching out" or "client enquiries." Skip funnel, pipeline, conversion rate and scale. Clinical language is welcome, because they live in it. Marketing language makes them close the tab.
We describe ourselves as an operator, not an agency. When a piece needs a foil, "most agencies" is the one we use.
22 Applied
When this book and a live surface disagree, the live site is what we actually ship. It's the worked example of every rule in here.
growmypractice.ai · hero
Sage uppercase eyebrow, 27px of air, then a two-line headline with one italic sage phrase, then a lede at a narrower measure.
One filled ink button and one hairline ghost. No sage fill anywhere near the main action.
The hero occupies about half the viewport and the rest is deliberately empty. That restraint is most of the brand.
Cream and near-black bands alternating down the page
23 Applied
The same system on a small canvas and on a document.
LinkedIn carousel · 1080 × 1350
Case study · print and PDF
24 Summary
25 Files
One archive with the logos, the fonts and the license. Grab it and you've got what you need to start.
Fonts. Schibsted Grotesk, Newsreader and IBM Plex Mono are all free under the SIL Open Font License and all three are on Google Fonts. The archive includes Schibsted Grotesk with its license file. Keep the license with the fonts if you pass them on.
26 Colophon
New palette built around a darker sage that actually passes contrast. New type system: Schibsted Grotesk, Newsreader and IBM Plex Mono, replacing Manrope and DM Serif Display. The four-accent palette is gone, leaving sage alone. The logo geometry is unchanged, but every file was re-cut in the new colors with the wordmark converted to outlines. Motion and video guidance is new in this version.
If something isn't covered here, ask rather than guess. A two-minute question is cheaper than a round of revisions.
Elan Siedband
elan@growmypractice.ai
| Field | Value |
|---|---|
| Version | 3.0 |
| Effective | 8 September 2026 |
| Replaces | 2.0, dated 15 May 2026 |
| Reference build | growmypractice.ai |
| Typefaces | Schibsted Grotesk · Newsreader · IBM Plex Mono |
20 Static
Social sizes and margins
Same system, smaller canvas. The main adjustment is that type has to get proportionally bigger.
A headline on a 1080px canvas wants to be around 60 to 76px, not the 48px it would be on a web page. Set it, then look at it as a thumbnail. If you can't read the first line at thumbnail size, it's too small. One idea per card, and let the whitespace do what it does on the site.