A ring and a bowl. The O does the work. Dark Green and Sage sit 1.8° apart in hue — same color family, different lightness. That is why it holds together, and why it does not change.
Keep the height of the O clear on every side. Nothing enters it.
Wordmark: 96px wide on screen, 25mm in print. Below that, use the app icon.
No rounded corners on the 1024 or the 512. Apple and Google apply their own mask. Pre-rounding double-rounds it.
Recolor it. Stretch it. Add a shadow. Put Terracotta in it. Rotate it. Outline it.
Click any swatch to copy its hex. The mark is three colors. Everything else exists to serve it — the neutrals all carry the mark's hue at a whisper of chroma, which is what stops the page reading as "gray with green bits on it."
Locked. These three are the logo. They do not change.
Urgent only. If everything is urgent, nothing is.
Sage cannot be type at 3.9:1. These are the variants that can.
Every one carries the mark's hue (135°) at a whisper of chroma. That is what makes the page feel like one thing.
This is the part that matters. A palette is paint; this is instructions. Every number below is the real contrast ratio, computed when this page was built. Green passes at normal text size. Amber is large text only. Gray with a ✕ means never.
| White | Paper | Sage Wash | Terracotta Wash | Dark Green | Ink | |
|---|---|---|---|---|---|---|
| Ink | 17.02 | 15.66 | 14.73 | 15.1 | 1.45 | 1.0 |
| Graphite | 11.24 | 10.35 | 9.73 | 9.97 | 1.04 | 1.51 |
| Muted | 5.31 | 4.89 | 4.6 | 4.71 | 2.21 | 3.2 |
| Sage Text | 5.36 | 4.93 | 4.64 | 4.75 | 2.19 | 3.18 |
| Terracotta Text | 5.22 | 4.8 | 4.52 | 4.63 | 2.25 | 3.26 |
| White | 1.0 | 1.09 | 1.16 | 1.13 | 11.72 | 17.02 |
| Cloud | 1.21 | 1.11 | 1.05 | 1.07 | 9.68 | 14.06 |
| Slate | 2.29 | 2.1 | 1.98 | 2.03 | 5.13 | 7.45 |
| Sage Light | 1.91 | 1.76 | 1.66 | 1.7 | 6.13 | 8.89 |
| Sage | 3.88 | 3.57 | 3.36 | 3.44 | 3.02 | 4.39 |
| Terracotta | 3.45 | 3.17 | 2.99 | 3.06 | 3.4 | 4.93 |
Fills, icons, focus rings, the O bowl. It is 3.88:1 on white — it cannot be type. Use Sage Text.
Bars, dots, badges. 3.45:1 on white. Use Terracotta Text when it must read.
5.13:1 on Dark Green. But 2.29:1 on white — on light, use Muted.
The missed call. The lost job. Roughly 0.04% of the pixels in any layout. If it is everywhere, it means nothing.
Two families. Rubik shouts, Inter explains. No third font, ever.
800 / 66pxHero800 / 44pxSection700 / 20pxCard title400 / 17pxLede400 / 16pxBody400 / 14pxCaption · Muted600 / 12pxEyebrow · Sage TextAlways. Rubik 800, tight tracking (-0.01em).
Inter, sentence case, 1.6 line height. Uppercase body is unreadable.
Never Sage. At 12px, Sage is 3.57:1 and fails.
One primary per screen. If two things are primary, neither is.
These are the colors to set in the HighLevel form builder. The label always shows — that is the rule that everything else depends on.
The label is the accessible name. It never disappears into the field.
2.29:1 — deliberately quiet. It is an example, not an instruction. Never put required information here.
The one place Sage touches interaction. Visible on every surface.
5.22:1. The border goes Terracotta, the message goes Terracotta Text.
It vanishes the moment someone types, and screen readers do not announce it reliably.
Still being worked out — what's below is a placeholder, not a locked spec. The one thing that is decided: either the channels explain it, or the inbox does — never both at full volume.
The phone alone, full six-row inbox. For anything small and fast: SMS, social, link previews. Channels would turn to mush at that size.
Channels feeding a merged trunk into a simplified three-row phone. For sell sheets, email, slides — anywhere someone sits with it. The inbox only has to confirm what the channels promised.
The missed call. Never two. The whole composition is built so your eye lands there first.
The phone shows the problem. The card shows the money. Never ship the phone without it.
Channels plus a full inbox is a diagram, not a key visual. That was the mistake in the early drafts.
Email is a different universe and it will break anything you assume.
Gmail and Outlook strip it. Every mark, icon, and visual becomes a PNG at 2x. No exceptions.
Tables only. role="presentation", inline styles, 600px wide.
Never bake copy into an image. Images-off is common, and the email still has to sell.
Outlook ignores padding on anchors. Use the v:roundrect fallback.
Gmail clips past that and hides your CTA behind "view entire message."
Media library, absolute URLs. Local paths render as broken boxes for every recipient.