This is a design-system canon. It tells any designer, developer, or partner exactly how OSD looks — and, quietly, why. Language, voice, and positioning live in Brand/Brand_Anatomy.md. This guide is for pixels, print, and the quiet decisions in between.
This is the editorial register's emotional anchor — and the single line you should be able to feel in every OSD surface before you have read a word on it. Yours carries the unhurried intimacy of the consultation room. Masterfully crafted carries nineteen years of the same approach, refined.
The brand does not shout. It describes, it informs, and then it steps back. What it leaves out is as important as what it puts in. Restraint is a form of confidence.
Anything produced in this system — a brochure, a slide, a landing page, a business card, a price list — should, at a glance, feel warm, unhurried, and human. If it feels clinical or loud or rushed, it is off-brand, regardless of how closely the hex codes match.
The signature is built from two layers, stacked. A vertical darkening overlay anchors the type and keeps it legible. A warm radial core — skin, to ember, to ground — lives at upper-left, exactly at 30 percent horizontal, 30 percent vertical. The light always comes from the same direction. That is the signature. Do not move it.
The two layers are non-negotiable. If the gradient gets flattened into a solid, it loses everything — the warmth, the directionality, the sense that light is falling across skin. The two-layer stack is the point.
The signature is the default. Two sisters exist for specific contexts. All three follow the same two-layer logic, same 30% / 30% core position, same overlay rhythm. Never introduce a fourth.
Ten stops on a single steel-teal spine. Teal-600 — #505B5C — is the primary brand colour. It is the one hex every designer, developer, and print vendor should be able to recall from memory. The scale exists so that every other teal decision is derived, not improvised.
| 600 — Hero | Primary brand colour. Wordmark, key identity moments, headline colour on cream, CTA outlines in UI. Memorise this one. |
| 700 · 800 · 900 | Editorial headlines on cream, deeper accent moments, serif display in print. Darker when restraint is called for. |
| 500 | Hover states in UI. Kicker overlays on darker surfaces. Secondary labels. |
| 300 · 200 · 100 · 50 | Backgrounds and tints for internal panels. Never patient-facing hero work — use cream instead. |
For press and signage reproducing the legacy wordmark, the original Pantone values are preserved as a print-only fallback. Digital and on-screen work uses the teal scale above.
| Logo Teal | Pantone 321C · 70C 10M 30Y 15K · #35999F |
| Logo Magenta | Pantone 221C · 30C 100M 60Y 15K · #9F1E49 |
| Token | Hex | Use for |
|---|---|---|
| --coral | #E07A5F | Primary CTAs · Edit & Create in UI · Editorial kickers and underlines · Conversion moments |
| --coral-dark | #C96A50 | Hover state for coral. Only in interactive contexts. |
| --coral-light | #FEF2EE | Coral background tint — success or highlight panels in admin contexts only. |
Coral is used sparingly. It marks attention — a kicker, an underline, a primary action. Never a large flat block on a cream or gradient surface. Restraint keeps it powerful.
| Token | Hex | Use for |
|---|---|---|
| --cream | #F5F1EA | Patient-facing default. Page backgrounds on brochures, landing pages, email. Text colour on the Warm Editorial Gradient. Quote-card surfaces. |
| --cream-deep | #EDE6D9 | Alternate section backgrounds. Pull-quote panels. Sidebars in editorial layouts. |
Revised 14 April 2026. Cream moved from #DFD5BB to #F5F1EA — from biscuit to whisper. The new cream holds its neutrality against the Warm Editorial Gradient and reads as paper, not parchment.
Cool neutrals are reserved for internal and dashboard contexts. Patient-facing default background is cream #F5F1EA, not cool neutral-50. This is non-negotiable for brochure, landing page, and email hero work.
Tailwind Stone palette, unchanged. Use for CRM, dashboards, treatment-coordinator tools, and any internal surface. Stone-950 is the page background; stone-300 is the primary text.
Invisalign Black Diamond markers. Miss Universe Singapore partnership. Award and credential callouts. Never a background. Never a CTA.
Internal dashboards and CRM only. Never appears on patient-facing surfaces — the editorial register does not carry green, amber, or blue status indicators.
Cream on patient pages. Stone on dashboards. Never the other way around.
Every OSD brand colour exists in both RGB (screen) and CMYK (print). On screen, work in RGB — the hex token is the source of truth. In print, work in CMYK — ask your vendor to proof against their profile. Both values are canonical. Do not interpolate.
| Token | RGB Hex | CMYK | Pantone (closest) |
|---|---|---|---|
| Teal 900 | #2D3536 | 17 · 2 · 0 · 79 | 432 C |
| Teal 800 | #3A4748 | 19 · 1 · 0 · 72 | 432 C |
| Teal 700 | #475152 | 13 · 1 · 0 · 68 | 5467 C |
| Teal 600 · Primary | #505B5C | 13 · 1 · 0 · 64 | 5467 C |
| Teal 500 | #6A7A7A | 13 · 0 · 0 · 52 | 444 C |
| Teal 400 | #8A9A9A | 10 · 0 · 0 · 40 | 444 C |
| Teal 300 | #A8B5B5 | 7 · 0 · 0 · 29 | 5527 C |
| Teal 200 | #C5CFCF | 5 · 0 · 0 · 19 | 5523 C |
| Teal 100 | #E2E8E8 | 3 · 0 · 0 · 9 | 656 C |
| Teal 50 | #F3F5F5 | 1 · 0 · 0 · 4 | 656 C |
| Token | RGB Hex | CMYK | Pantone (closest) |
|---|---|---|---|
| Coral Dark | #C96A50 | 0 · 47 · 60 · 21 | 7417 C |
| Coral · Accent | #E07A5F | 0 · 46 · 58 · 12 | 7416 C |
| Coral Light | #FEF2EE | 0 · 5 · 6 · 0 | 11-0603 TCX |
| Cream · Surface | #F5F1EA | 0 · 2 · 4 · 4 | 11-0907 TCX |
| Cream Deep | #EDE6D9 | 0 · 3 · 8 · 7 | 12-0710 TCX |
| Layer | RGB Hex | CMYK | Pantone (closest) |
|---|---|---|---|
| Skin (inner) | #C8A88A | 0 · 16 · 31 · 22 | 7528 C |
| Ember (mid) | #8A7060 | 0 · 19 · 30 · 46 | 7533 C |
| Ground (outer) | #3E342B | 0 · 16 · 31 · 76 | 440 C |
Two-layer gradient: 180° darkening overlay + 30%/30% radial core. Flatten only as a last resort. For print vendors, request a custom-profile proof of the gradient as a continuous-tone image — not as a stepped build.
| Token | RGB Hex | CMYK | Pantone (closest) |
|---|---|---|---|
| Gold (credential) | #C9A962 | 0 · 16 · 51 · 21 | 7555 C |
| Neutral 900 | #2A2A2A | 0 · 0 · 0 · 84 | Black 6 C |
| Neutral 700 | #444444 | 0 · 0 · 0 · 73 | Cool Grey 11 C |
| Stone 950 | #0C0A09 | 0 · 17 · 25 · 95 | Black 7 C |
| Stone 900 | #1C1917 | 0 · 11 · 18 · 89 | Black 7 C |
| Stone 50 | #FAFAF9 | 0 · 0 · 0 · 2 | 11-0601 TCX |
| Mark | RGB Hex | CMYK | Pantone |
|---|---|---|---|
| Logo Teal (legacy) | #35999F | 70 · 10 · 30 · 15 | 321 C |
| Logo Magenta (legacy) | #9F1E49 | 30 · 100 · 60 · 15 | 221 C |
For press and signage reproducing the legacy wordmark only. Digital and on-screen work uses the Teal scale above.
The working rule. Every OSD asset declares its colour space up front. Screen work (websites, dashboards, social, email, PDF-for-screen) is RGB — hex is canonical. Print work (brochures, business cards, large-format, event collateral) is CMYK — ask your vendor to proof against their profile (Fogra 51 for European offset, GRACoL for US sheet-fed). The CMYK values above are uncalibrated conversions from the RGB source. Always proof before production.
Orchard Scotts Dental operates in two distinct visual registers. The serif — Noto Serif Display — is used differently in each. This is the central concept of the April 2026 update, and the single most common place brand systems rot.
Editorial register is patient-facing. Brochures, landing pages, social, email, hero moments. It uses Noto Serif Display at 300 (light) for displays, 400 for sections, and italic 300 for pull quotes. It breathes.
UI register is internal. Dashboards, CRM, admin tools. It uses Noto Serif Display at 600/700 for display moments at 24 px and up, and Noto Sans for everything else. It works.
The two registers share a font family and almost nothing else. A patient should never see the UI register. An internal user should never be asked to do their daily work inside the editorial register. Cross-contamination is how this comes undone.
As it would appear in a SmileUp brochure or landing page hero.
Every size in the editorial scale has a single correct weight.
| Element | Font | Weight | Size |
|---|---|---|---|
| Hero headlines | Noto Serif Display | 300 | 36–96pt |
| Section headlines | Noto Serif Display | 400 | 28–44pt |
| Pull quotes | Noto Serif Display | 300 italic | 20pt+ |
| Body | Noto Sans | 400 | 14.5–16px |
| Kickers / labels | Noto Sans | 500 | 10–12px |
Line-height 1.7–1.75 for body. Kickers letterspaced 0.18em–0.24em, uppercase, coral. Pull quotes sit against a 2pt coral left rule or a cream-deep inset.
At 300, the serifs open up and the strokes become thin enough to feel like breath rather than assertion. That is exactly the quality the editorial register needs.
As it would appear in the OSD CRM or Performance Dashboard.
| Element | Font | Weight | Size |
|---|---|---|---|
| Display headings | Noto Serif Display | 600 · 700 | 24pt+ |
| UI headings | Noto Sans | 600 | 14–20px |
| Body | Noto Sans | 400 | 13–14px |
| Labels · buttons | Noto Sans | 500 · 600 | 12–14px |
Noto Serif Display is optimised for larger sizes. Below 24 pt, the refined serifs become muddy — fall back to Noto Sans. Line-height 1.5–1.6 for density.
The single most important sentence in this guide.
No patient ever sees the UI register.
No internal user ever sees the editorial register as their daily workspace.
Cross-contamination is the #1 way brand systems rot.
Must include weight 300 and italic 300 — needed for the editorial headlines on the Warm Editorial Gradient and across all patient-facing hero work. Replace any older import that only loaded 600/700.
| --radius-sm · 4px | Buttons · inputs |
| --radius-md · 6px | Cards · dropdowns |
| --radius-lg · 8px | Modals · panels |
| --radius-xl · 12px | Large cards |
Primary coral for conversion and action. Ghost transparent with teal border for secondary. Outline for tertiary. Radius 4 px. Font weight 500. Never mix.
Semantic colours at 15–18% opacity background with full-saturation text. Used in CRM and admin only. Never appears on patient-facing surfaces.
Neutral-300 border, neutral-50 fill, focus state in teal-500 with 2 px soft ring. Dark-theme variant uses stone-800 fill, stone-700 border.
.panel--editorialCream background. Zero radius. Warm editorial shadow. 64 px vertical, 72 px horizontal padding. This is the patient-facing card — the one that sits on a gradient hero or a cream-deep section.
New in April 2026. Replaces the rounded UI card for any patient-facing layout. Never use in dashboards or CRM — the UI register keeps its rounded cards.
Stone-900 background, stone-800 border, 8 px radius, 16 px padding. Dark-theme default for dashboard panels. Hover adds subtle stone-700 border brighten.
Seven thousand veneers. Nineteen years. The same considered approach, refined one patient at a time. If this resonates, we should talk.
Major revision following OSD-014 SmileUp brochure review. Kenneth approved the Warm Editorial Gradient and confirmed the cream direction on 14 April 2026. This is the canonical reference from this date forward.
#DFD5BB (biscuit) to #F5F1EA (whisper). Old hex retired.--cream-deep (#EDE6D9) added as a section-alternate..panel--editorial) added, with warmer editorial shadow tint.Initial Brand Guide published. Establishes teal-600 (#505B5C) as primary brand colour, coral (#E07A5F) as accent, and Noto Serif Display / Noto Sans as the type system. Includes philosophy, visual language, tone of voice, positioning, and language rules. These sections now live in Brand/Brand_Anatomy.md — the April 2026 Brand Guide is focused exclusively on the design system.
Nineteen years refining a single approach. This guide exists so the next nineteen years can be equally consistent — surface by surface, line by line, brochure by brochure, page by page.