Visual Identity
The design system that makes OSD instantly recognisable — colour, type, gradient, and the principles that hold them together.
Premium is in what you leave out, not what you add.
Design philosophy
The OSD visual system follows the same principle as the clinical philosophy: considered simplicity. Every visual element earns its place. The aesthetic is editorial — a magazine feature, not a healthcare brochure. The goal is not to signal wellness with greens and rounded corners, or luxury with black and gold. OSD's visual language reads as warm, intelligent, and unhurried — because that is what the practice actually is.
Five principles govern all visual decisions, from a WhatsApp message header to a 48-page brochure. They are not preferences. They are constraints. Deviation requires a reason that these constraints cannot supply.
The Warm Editorial Gradient — house signature
The Warm Editorial Gradient is the unmistakable OSD surface, approved with the April 2026 brand system. It reads as skin, candle, and wood — never clinical. When a viewer encounters it, they should recognise OSD before they have read a single word. The gradient uses two stacked layers: a radial warmth rising from the upper-left quadrant (30%/30%), and a vertical linear overlay that deepens toward the base and keeps type legible across the full surface.
The core stays at 30%/30% — upper-left — in all three variations. The light always comes from the same direction. Type on the gradient is always cream (#F5F1EA), never white (#FFFFFF). Headlines are in the serif family — Display above 48px, Serif below. Coral accents may appear sparingly as kickers or small markers. Never as large flat blocks on the gradient. Working reference: OSD-Signature-Gradient-Template.html.
Colour palette
The Two-Cuts Rule
This is the single most important typographic rule in the system. Noto Serif comes in two distinct cuts — Display and text. They look related but they are drawn differently. The Display cut has thin hairlines and open counters designed for the billboard: at 96px it sings, at 24px it disappears. The text cut has a sturdier skeleton that holds structure at body-adjacent sizes. The 48px threshold is where they swap.
The same weight number reads lighter on Display than on Serif because the cuts are drawn differently. That is the point. Encode the threshold once, apply it everywhere.
PDF brochure exception — 46px Display: The A4 portrait PDF brochure format (1080px canvas) uses Noto Serif Display at 46px for all H2 and H3 section headings. This is a deliberate exception established April 2026. At print scale, Display at 46px holds legibility and the visual distinction from body copy is sufficient. This exception applies to print canvas contexts only — web editorial section headings below 48px remain in Noto Serif (text cut). See the master template at OSD-PDF-Brochure-TEMPLATE.html.
Two registers
OSD operates in two distinct visual registers. Both respect the Two-Cuts Rule, but their weight and size conventions are different. The register is determined by context, not preference.
Spacing scale
All spacing in OSD design work — margin, padding, gap — derives from the eight-token scale. No arbitrary values. If a gap requires a number outside this scale, the layout needs to be reconsidered, not the scale.
Master PDF brochure template
The canonical starting point for all OSD PDF brochures, printed collateral, and Keynote presentations is the master template at OSD-PDF-Brochure-TEMPLATE.html — version 2.0, rebuilt 24 April 2026 and derived from the SmileUp™ Veneers Digital Patient Guide v2 (the current north star for OSD patient-facing print work). Open it first before building any new PDF or print piece.
The template encodes the full print token set (including the --teal shorthand alias and the expanded photo-fallback palette with .ph-craft and .ph-clinic), all component classes (service tag, section labels, photo strips, stat bars, bullet lists, back cover), and fourteen page-type skeletons with [REPLACE: …] markers: cover, welcome letter, opening, founded on a belief, the three pillars, differentiators 01 through 04, the place, the people, questions worth asking, what to expect, and back cover. Not every guide needs every page; delete what isn't used.
Two v2 systems worth calling out. First, a deck-wide image grading rule is codified inside the template as CSS documentation — raw or log-footage sources get filter:saturate(1.25) contrast(1.08); fully graded portraits get filter:saturate(0.75) contrast(0.9); soft-graded team or clinic shots get 0.8 / 0.9; deep-muted environment wides get 0.7 / 0.9. Pull log footage up, pull graded down. Every photo in a deck should read consistent with the cover treatment.
Second, the doctor card spec in the People grid has been upgraded to a flex-column layout with margin-top: auto on the credentials rule. This anchors the horizontal rule to the bottom of every card regardless of how long or short each bio runs — fixing the ragged alignment that appeared whenever bios varied in length. The card now carries an italic persona line (Noto Serif italic 13px teal) between the role and the bio: one human sentence, not a credential.
Print via Chrome → Cmd+P → Margins: None → Background graphics. Full page-type inventory, grading reference, and card specification are maintained as a separate designer playbook.
Canonical reference
This chapter orients; the specification lives elsewhere. Two companion documents sit alongside it.
The machine-readable canonical source is OSD-Brand-Bible-LLMS.md — updated April 2026 with the full PDF brochure type scale and master template reference. The rendered companion is the Brand Guide, an A3 landscape editorial document covering the complete design token system, reproduction values (RGB, CMYK, Pantone), and channel application rules. Where this chapter and the canonical MD differ, the MD takes precedence.