Your health story
begins today.
The Sonata brand and product kit, rendered. Everything on this page resolves to a value in the kit, so what you see here is what an agent gets when you point it at the folder.
Two kits
What's inside
The delivery is two sections and a guidelines document. The brand kit is the identity and marcom layer. The product kit is the React component library. Both are built from one set of values.
Brand kit
Identity and marcom
Positioning, voice and concepts. Brandmark, color, typography, layout, effects, graphic elements, art direction and motion. The tokens as plain CSS, the three faces as woff2, the logos and the flowers.
Product kit
Component library
Twelve components in TypeScript, on a generated Tailwind theme. Badge, Button, Bullet, Card, Checkbox, Dropdown, NumberBullet, ProgressBar, PromoCode, Stages, TextField and Toggle.
Verbal
Positioning
Sonata is prevention-first healthcare. It gives a person their complete biological picture, reads it with them, and turns it into what to do next.
Complete biological dataset
The full picture, not a panel of proxies.
AI health insights
The dataset read and interpreted, continuously.
Digital consultation
A person to talk it through with.
Point of view
Prevention beats treatment. The useful moment is before something goes wrong.
Point of view
Your biology is knowable. The data already exists in the body.
Point of view
A story, not a score. A continuous narrative about one person over time.
Verbal
Voice
Sonata speaks the way a good clinician speaks to someone they know: warm, direct, unhurried, and specific about what happens next.
The italic rule
Review your info.
Italics fall on possessive adjectives, and nothing else. One word in a headline. It is what makes a sentence about the reader rather than about the product.
We are
Warm. Direct. Calm. Specific. Confident.
We are not
Chatty. Blunt. Detached. Technical for its own sake. Certain about a diagnosis.
Verbal
Concepts
The lines the brand has set, and the patterns behind them. A new line is written to the pattern, not to a fresh idea.
Headline
Your health story begins today.
Possessive adjective, plural noun about the person, verb of beginning, time word.
Eyebrow
Prevention-first care
Eyebrows name the category, not the benefit. No article.
Instruction
Review your info.
A verb and an object. No "please", no "let's".
Qualifier
All plans are HSA/FSA eligible. Plans do not replace primary care.
The two travel together wherever plans are priced.
Visual
Brandmark
Three marks: the logotype, the symbol, and the lockup that joins them. The symbol is ten equal circles forming a simplified structure of the human body.
Clear space
Logotype and lockup: the height of the logo, on all sides.
Minimum size
Logotype 200px. Symbol 20px.
Over imagery
White, with the exclusion blend mode.
Visual
Typography
Three faces, each with a job. EB Garamond for headlines, Funnel Sans for body and interface, JetBrains Mono for eyebrows and detail. The job picks the face, never the look of a given line.
Headline
EB Garamond
Warmth and humanity.
Body
Funnel Sans
Clarity and structure.
Detail
JetBrains Mono
Precision.
Visual
Color
White is the canvas. Black carries high visibility in small amounts. Cosmic Latte is the defining brand color, used sparingly. Green, in limited use, introduces a calm and optimistic tone. Click any swatch to copy its value.
Core
Gray
Accent
Gradient
Status
Visual
Art direction
A flower resolves from subject to ambient ground across three states. Content sits on the second or the third, never the first.
Stage one
The original image, on its own ground.
Stage two
Remove the background. Warm the color.
Stage three
70% opacity, with a Cosmic Latte overlay.
Visual
Layout
One grid, four containers, and a spacing scale built on 4 pixels. A limited set of options is what makes two sessions produce the same layout.
Desktop
1440px
12 columns, 80px margin, 24px gutter
Mobile
393px
4 columns, 24px margin, 16px gutter
Spacing
| space-1 | 4px | 0.25rem | |
| space-2 | 8px | 0.5rem | |
| space-3 | 12px | 0.75rem | |
| space-4 | 16px | 1rem | |
| space-5 | 20px | 1.25rem | |
| space-6 | 24px | 1.5rem | |
| space-8 | 32px | 2rem | |
| space-10 | 40px | 2.5rem | |
| space-12 | 48px | 3rem | |
| space-16 | 64px | 4rem | |
| space-20 | 80px | 5rem | |
| space-24 | 96px | 6rem | |
| space-32 | 128px | 8rem | |
| space-40 | 160px | 10rem | |
| space-48 | 192px | 12rem | |
| space-56 | 224px | 14rem | |
| space-64 | 256px | 16rem |
Container
| container-sm | 640px |
| container-md | 768px |
| container-lg | 1024px |
| container-xl | 1280px |
Radius
| radius-none | 0px | |
| radius-xs | 4px | |
| radius-s | 8px | |
| radius-m | 12px | |
| radius-l | 16px |
Visual
Effects
Depth comes from shadow, blur and inner light, never from a heavier border or a darker fill. Seven named effects, each with a job.
Visual
Motion
Every move the system makes, running at the numbers it ships with. Point at a specimen to play it, or use its replay control. The brand has one signature move, and the hero above is running it.
A colour and shadow change under the pointer. Size never moves.
The surface gives by six percent, and returns on release.
Twelve pixels up, into full opacity, as a thing enters.
Opacity out. Nothing travels on the way off.
Height and opacity together, for a thing opening in place.
A list rises 60ms per row, and the delay stops growing at row 6.
The signature move at specimen scale. Three states, run in order: full, blurred, field.
Under reduced motion the field state renders directly and everything cross fades into place.
Product
Components
Twelve components in TypeScript. The specimens below are the same values the library ships, rendered in plain CSS.
Badge
Button
Button states
Number bullet
Text field
Card
Private Blood Panel
Samples collected by lab
Your care plan was approved by your clinician.
Dr. Emily Carter, Internal Medicine
Product
Tokens
Every color token in the system, generated from the same source as the kit's CSS. The type, spacing, radius and effect tokens sit in the sections above. Click a row to copy its value.
| Token | Value | Group |
|---|---|---|
| --white | #FFFFFF | core |
| --black-900 | #2B2B2B | core |
| --cosmic-latte-100 | #FFF8E7 | core |
| --cosmic-latte-50 | #FFFBF3 | core |
| --cosmic-latte-25 | #FFFDF9 | core |
| --gray-50 | #F5F5F5 | gray |
| --gray-100 | #EDEDED | gray |
| --gray-200 | #E6E6E6 | gray |
| --gray-300 | #DBDBDB | gray |
| --gray-400 | #C7C7C7 | gray |
| --gray-500 | #B8B8B8 | gray |
| --gray-600 | #999999 | gray |
| --gray-700 | #666666 | gray |
| --gray-800 | #3D3D3D | gray |
| --gray-900 | #2B2B2B | gray |
| --white-80 | #FFFFFFCC | alpha |
| --white-50 | #FFFFFF80 | alpha |
| --black-900-80 | #2B2B2BCC | alpha |
| --black-900-50 | #2B2B2B80 | alpha |
| --black-900-20 | #2B2B2B33 | alpha |
| --sonata-blue | #1547C6 | brand |
| --lavender-500 | #9B7BFF | accent |
| --lavender-400 | #D1C3FA | accent |
| --lavender-300 | #EDE4FB | accent |
| --taupe-500 | #94775B | accent |
| --taupe-400 | #BDA48D | accent |
| --taupe-300 | #E7D5C5 | accent |
| --mint-500 | #1FBF8C | accent |
| --mint-400 | #7BD8BA | accent |
| --mint-300 | #CCEFE4 | accent |
| --amber-500 | #F78649 | accent |
| --amber-400 | #FFA97A | accent |
| --amber-300 | #FFDAC6 | accent |
| --coral-500 | #FF735F | accent |
| --coral-400 | #FF9B8D | accent |
| --coral-300 | #FFC9C1 | accent |
| --azure-500 | #369AF1 | accent |
| --azure-400 | #77C0FF | accent |
| --azure-300 | #D5EBFF | accent |
| --teal-500 | #3AC7CE | accent |
| --teal-400 | #88DEE2 | accent |
| --teal-300 | #CFF6F8 | accent |
| --error-red | #D62121 | status |