# MySymptom brand guidelines

Version 1.1, October 2026. Identity name: **Turn**.

MySymptom is a free health companion. You ask about a symptom, for yourself, your child, an aging parent or your pet, and get a calm, careful answer that starts with the right level of care. The identity is built to feel the same way: quiet, precise, warm without being cute, and clear about what matters.

![MySymptom horizontal lockup](guidelines/cover.png)

## 1. The idea

**One circle, two halves, one step.**

The symbol is a conversation drawn as one shape. The left half is you, describing what you feel. The right half is the answer, set one step higher: the next step, the right level of care. The even gap between them is the pause where MySymptom listens before it speaks. Together the two halves still make one circle, one whole picture of your health.

There is no cross, no pulse line, no speech-bubble tail and no sparkle. Anyone can draw it from memory: a circle cut in half, with the right half nudged up.

Optional tagline: *Someone to turn to.* It is never part of the lockup.

## 2. The logo family

| Asset | File | Use |
|---|---|---|
| Mark | `logo-mark.svg` | The Ink rounded-square tile with the symbol knocked out. The primary mark: app icon, favicon, avatar, small brand moments. |
| Symbol | `logo-symbol.svg` | The two halves without the tile. Large editorial use and the symbol lockup. |
| Wordmark | `logo-wordmark.svg`, `logo-wordmark-small.svg` | "MySymptom" in outlined Geist Bold with custom spacing. The small cut is for a cap height under 14 px (horizontal lockups 24 px tall and below). |
| Horizontal lockup | `logo-horizontal.svg`, `logo-horizontal-small.svg` | The primary lockup: tile plus wordmark. |
| Stacked lockup | `logo-stacked.svg` | Tile above the wordmark, for square and centered layouts. |
| Symbol lockup (alternate) | `logo-horizontal-symbol.svg` | Approved alternate for the site header and large editorial use. |
| App icons | `app-icon.svg`, `app-icon-dark.svg`, `app-icon-ios.svg`, `app-icon-maskable.svg` | Rounded tile, dark tile (Bone with a Night symbol), full-bleed iOS source, Android maskable. |
| Small sizes | `favicon.svg`, `favicon-16.svg`, `favicon-20.svg`, `favicon-24.svg`, `favicon-28.svg`, `favicon-32.svg` (and `-dark`) | Hand-fitted drawings for 16 to 32 px. `favicon.svg` swaps to the dark version in dark browser UI. |

Every logo file comes in three versions: the default (Ink `#10141E`, for light surfaces), `-dark` (Bone `#F1EEE9`, for dark surfaces) and `-mono` (black `#000000`, for one-color print, embossing and partners). Every SVG carries `role="img"` and a `<title>`, which is its accessible name (no `aria-label` as well, so screen readers do not announce the name twice).

**Knock-out or filled.** The `logo-mark` files knock the symbol out of the tile: the symbol is transparent and the surface shows through, so the mark always reads as one color. The app icons and favicons fill the symbol instead, because they sit on backgrounds we do not control: Canvas `#FBFAF9` on an Ink tile, and Night `#0D1017` on a Bone tile for every dark-surface icon (`app-icon-dark`, the `-dark` favicons and `favicon.svg` in dark UI).

The SVG masters in this folder carry only a `viewBox`, for the web. The copies in the download also carry a `width` and `height`, so they open at a sensible size in Slides, Keynote and mail clients.

PNG exports are in `png/`: transparent masters at 512 px, lockups at 160 to 640 px tall, the 1024 px app icons and the favicon rasters.

## 3. Construction

![Construction of the symbol and the tile](guidelines/construction.png)

**Symbol.** Built on a 12-unit module (1u = 12 master units).

| Part | Value |
|---|---|
| Circle diameter | 10u (radius 60) |
| Gap between the halves | 1u (12) |
| Step, right half up | 2u (24) |
| Fillet where each flat side meets its arc | 1/3u (4) |
| Symbol box | 11u wide, 12u tall (132 by 144) |

Every control point of the master sits on the grid. The symbol is point-symmetric: turned 180 degrees it lands on itself, so its center of mass is exactly the center of its box. That is why it is centered exactly, not nudged, inside the tile.

**Tile.** One rounded square is shared by the mark, the app icon, the favicon and the social avatar: a 160 grid, corner radius 36, 60% corner smoothing (a continuous curve, not a plain rounded rectangle). The symbol is 90 of 160 units tall in the tile (56%), which is 576 px in the 1024 px app icon (48 px per module). The mark is one path with `fill-rule="evenodd"`, so the symbol is a true knock-out.

Never mirror the symbol, rotate it, close the gap, invert the step or change its proportions.

## 4. Optical sizes

![Optical sizes in light and dark](guidelines/sizes.png)

Small sizes use hand-fitted drawings so the gap and the step never close up on the pixel grid. A drawing is only crisp at exactly its own pixel size, so the components never scale one: below 33 px, `LogoMark` and the horizontal lockups snap to the nearest hand-fitted size (ties round up), and the lockups draw the hand-fitted tile or symbol too. Use 16, 20, 24, 28 or 32 px when you set a size.

| Size | Radius | Gap | Step | Notes |
|---|---|---|---|---|
| 16 px | 4 px | 2 px | 2 px | Integer coordinates: `M7 5A4 4 0 0 0 7 13Z M9 3A4 4 0 0 1 9 11Z`. Each half is 4 px wide. Also the drawing in `favicon.svg`, which stays crisp at 16 and 32 device pixels. |
| 20 px | 5 px | 2 px | 2 px | The smallest horizontal lockup. |
| 24 px | 6 px | 2 px | 2 px | Flat edges and extremes on whole pixels. |
| 28 px | 6 px | 2 px | 4 px | The site header. Back to the master's 1:2 gap-to-step ratio. |
| 32 px | 7 px | 2 px | 4 px | |
| Master | 5u | 1u | 2u | Above 32 px. |

The symbol lockup has its own hand-fitted symbols at 20, 24, 28 and 32 px (the symbol spans the full lockup height; at 24 px the master lands on whole pixels exactly).

![Optical sizes in dark UI, with the favicon in a dark tab strip](guidelines/sizes-dark.png)

## 5. Lockups

**Horizontal (primary).** Tile height = 1.75 times the cap height, centered on the cap band (cap line to baseline). Gap from the tile to the M stem = 0.30 times the tile height.

![Horizontal lockup spacing](guidelines/lockup.png)

**Stacked.** Tile above the wordmark. Gap from the tile to the cap line = 0.30 times the tile height. The tile is 2.5 times the cap height and centered on the optical center of the word (the heavy M pulls the visual center left of the bounding box, so the tile moves a quarter module left).

![Stacked lockup spacing](guidelines/stacked.png)

**Symbol lockup (alternate).** The bare symbol beside the wordmark: the right half rises to the cap line, the left half drops to the descender line, so the mark spans exactly the vertical range of the word. Gap = 3 modules of the symbol. Approved for the site header and large editorial use.

![Symbol lockup, light and dark](guidelines/symbol-lockup.png)

**Wordmark.** Geist Bold, outlined, tracking -30 units (-0.03em), plus three hand-kerned pairs: My -12, yS +6, pt +8 (units of 1/1000 em). The small cut opens tracking to -10 units. One rule decides it everywhere (the React components, the build scripts and these files): the small cut is used when the wordmark's rendered cap height is under 14 px, which is a horizontal lockup 24 px tall or less. Never retype the wordmark in live text: use the files or the React component.

## 6. Clear space and minimum size

![Clear space and minimum sizes](guidelines/clear-space.png)

| Asset | Clear space on every side |
|---|---|
| Mark and tile lockups | 1/4 of the tile height |
| Symbol and symbol lockup | 3 modules of the symbol (the same as the symbol-to-word gap) |

| Asset | Minimum size |
|---|---|
| Mark | 16 px, hand-fitted drawing only |
| Horizontal lockup | 20 px tall (small cut at 24 px and below) |
| Symbol lockup | 20 px tall |
| Stacked lockup | 64 px tall |
| Wordmark alone | 14 px tall |

The React components clamp to these minimums.

## 7. Color

The logo is always one color, with no exceptions. In the product and on the site, color is reserved for meaning: the care levels, which have their own glyphs (below) and never touch the logo.

![Palette and contrast](guidelines/palette.png)

### Core palette

| Name | HEX | HSL | Use | Contrast |
|---|---|---|---|---|
| Ink | `#10141E` | 223 30% 9% | Logo, type, primary actions | 17.7:1 on Canvas |
| Canvas | `#FBFAF9` | 30 20% 98% | Page background | 17.7:1 as text on Ink |
| Bone | `#F1EEE9` | 38 22% 93% | Logo on dark, dark-mode actions | 16.4:1 on Night |
| Night | `#0D1017` | 222 28% 7% | Dark canvas | 18.3:1 with Canvas |
| Graphite | `#5C6370` | 219 10% 40% | Secondary text on light surfaces | 5.8:1 on Canvas, 6.0:1 on white |

Graphite is 3.2:1 on Night, so never use it for text on dark surfaces. For secondary text on Night use `#ADB2BC` (hsl 220 10% 72%, 8.9:1).

### Care colors

These map one to one to the product tokens and never appear in the logo. Every light value passes WCAG AA for normal text on Canvas (as in the table) and on white, and every dark tint passes on Night.

| Token | Level | Light | HSL | On Canvas | Dark tint | HSL | On Night |
|---|---|---|---|---|---|---|---|
| `--care-emergency` | Call 911 now, Go to the ER now | `#B81E28` | 356 72% 42% | 6.2:1 | `#F04C57` | 356 85% 62% | 5.3:1 |
| `--care-urgent` | Get seen today, Call your doctor today | `#BD490F` | 20 85% 40% | 4.9:1 | `#F48134` | 24 90% 58% | 7.3:1 |
| `--care-soon` | Book a visit | `#986206` | 38 92% 31% | 4.9:1 | `#F6B828` | 42 92% 56% | 10.7:1 |
| `--care-selfcare` | Care for it at home | `#28714F` | 152 48% 30% | 5.7:1 | `#4EBC85` | 150 45% 52% | 8.0:1 |

**Not on Bone.** Bone `#F1EEE9` is a surface too (the user's message bubble). On Bone, urgent `#BD490F` is 4.4:1 and soon `#986206` is 4.4:1, just under AA for normal text (emergency is 5.6:1 and self-care 5.1:1). Never set care-colored text on Bone: put the care label on Canvas or white, or use the darker `--care-*-text` tokens for colored text.

There is no fifth "info" color in the brand system. If the UI needs an informational blue, it stays a UI token and never touches the mark.

### Care glyphs (product only)

![Care glyphs](guidelines/care-system.png)

Care levels have their own status glyph, the `CareMark` component. It is not the logo and does not borrow the symbol, so the logo stays one color everywhere. Shape carries the level as well as color, so the levels stay distinct for people with color-vision deficiencies (red emergency and orange urgent look alike to many of them at 16 px):

| Tone | Glyph | Levels |
|---|---|---|
| Emergency | Alert disc with the "!" knocked out | Call 911 now, Go to the ER now |
| Urgent | Three of three bars | Get seen today, Call your doctor today |
| Soon | Two of three bars | Book a visit |
| Self-care | One of three bars | Care for it at home |

- Only in the product, at 16, 20 or 24 px (hand-fitted, whole-pixel bars), always next to the written care-level label. Color is never the only signal.
- Lit parts take `hsl(var(--care-<tone>))`; unlit bars use the text color at 20%.
- Never on marketing pages, OG images, the favicon or the app icon.
- Never as a celebration: the self-care state is calm, not a reward.

## 8. Typography

![Type scale](guidelines/type.png)

Geist Sans for display and UI, Geist Mono for numeric readouts. Both are SIL Open Font License.

| Role | Weight | Size / line | Tracking |
|---|---|---|---|
| Display | 700 | 64/66 (44 to 76 by viewport) | -0.035em |
| Display small | 700 | 44/48 | -0.03em |
| Title | 600 | 28/34 | -0.02em |
| Headline | 600 | 20/28 | -0.01em |
| Body | 400 | 17/26 (16/24 in dense UI) | 0 |
| Caption | 500 | 13/18 | 0 |
| Readouts | Geist Mono 400 | matches context | 0, tabular figures |

Sentence case everywhere. Text never goes below 12 px, and safety copy never below 13 px.

## 9. Motion

Optional principle: when an answer arrives, the right half settles up 2u over 240 ms, ease-out, transform only. Nothing moves under `prefers-reduced-motion`. Never loop the mark as a progress indicator: the wait for an analysis stays honest.

## 10. Do and don't

![Don'ts](guidelines/donts.png)

Do:

- Use Ink on light surfaces, Bone on dark surfaces and black for one-color print.
- Keep the clear space and the minimum sizes.
- Use the files or the components, never a redraw.

Don't:

- Mirror the symbol or flip the step.
- Rotate it.
- Close the gap or change the proportions.
- Recolor the logo, including with care colors or gradients. There are no exceptions: care levels use the care glyphs.
- Outline it, or add shadows, glows or other effects. This includes product shots: the app icon is shown flat.
- Put the symbol in a circle container. The Android maskable icon and the social avatar are full-bleed squares that the platform crops to a circle; nothing is drawn for the circle, so they are not exceptions.
- Stretch or squash it.
- Place it on busy photos.
- Retype the wordmark or pair the symbol with another name.
- Use a half-filled circle as a UI control. Theme toggles use a sun and a moon, so the mark never looks like a button.

![One-color versions](guidelines/one-color.png)

![In context: the marketing header](guidelines/in-context.png)

## 11. Favicons and app icons

Files at the site root: `favicon.ico` (16 and 32 hand-fitted, 48 from the master), `favicon.svg` (16 grid, swaps to a Bone tile with a Night symbol in dark UI), `favicon.png` (48 by 48), `apple-touch-icon.png` (180, Ink, full bleed, no transparency), `icon-192.png` and `icon-512.png` (rounded tile, transparent corners: `purpose: "any"` only, never `maskable`) and `icon-maskable-512.png` (full bleed, symbol 46% tall inside the 80% safe circle).

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#FBFAF9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0D1017" media="(prefers-color-scheme: dark)">
```

```json
"name": "MySymptom",
"short_name": "MySymptom",
"theme_color": "#FBFAF9",
"background_color": "#FBFAF9",
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
  { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
```

Use `MySymptom` (never "MySymptom AI") for `application-name`, `apple-mobile-web-app-title` and the manifest name, and `#10141E` for `msapplication-TileColor`.

## 12. Social images

| File | Size | Page |
|---|---|---|
| `og-default.png` (also `og-image.png`) | 1200 x 630 | Fallback for every page |
| `og-home.png` | 1200 x 630 | Home |
| `og-ask.png` | 1200 x 630 | Ask |
| `og-today.png` | 1200 x 630 | Today and tracking |
| `og-pets.png` | 1200 x 630 | Pets |
| `og-blog.png` | 1200 x 630 | Blog |
| `og-symptoms.png` | 1200 x 630 | Symptom guides |
| `og-about.png` | 1200 x 630 | About |
| `og-safety.png` | 1200 x 630 | Safety |
| `social/x-header.png` | 1500 x 500 | X profile header (content clears the avatar) |
| `social/linkedin-banner.png` | 1584 x 396 | LinkedIn personal profile background (content clears the profile photo) |
| `social/linkedin-company-cover.png` | 1128 x 191 | LinkedIn company page cover |
| `social/social-avatar.png` | 800 x 800 | Profile picture: full-bleed Ink with the bare symbol at 52% of the side, so it reads at 32 to 48 px feed sizes. The networks' circle crop is a mask, not a container. |

OG images live at the site root (`/og-*.png`) and are served from the canonical host, `https://www.mysymptom.ai/og-*.png`. They show the logo (top left), one short headline, one supporting line and one real piece of the interface, with the page URL at the bottom left; the content sits centered between them. Supporting lines that carry meaning are 28 px or larger, so they survive a 300 px wide link preview. Never put a date or a weekday on a share image. No stats, awards, testimonials or ratings, ever.

## 13. In code

```tsx
import { Logo, LogoMark, CareMark } from "@/ui/brand";

<Logo size={28} />                                // horizontal tile lockup, hand-fitted tile at 28 px
<Logo size={24} shape="symbol" variant="mono" />   // header alternate, follows the text color
<Logo layout="stacked" size={120} />
<LogoMark size={32} />                             // hand-fitted drawing at 16, 20, 24, 28 and 32 px
<LogoMark size={20} shape="symbol" title="" />     // decorative: hidden from screen readers
<CareMark tone="urgent" size={20} />               // product only, next to "Get seen today"
```

- `variant="color"` (the default) uses `var(--brand-logo)`: Ink in the light theme, Bone in the dark theme. `variant="inverse"` uses `var(--brand-logo-inverse)`, the opposite tone, for an Ink band in light or a Bone band in dark. `variant="mono"` uses `currentColor`. The tokens ship in `src/ui/brand/brand.css`, which the component imports: defaults on `:root`, dark values under `.dark`, `[data-theme="dark"]` and the system dark preference. Every rule there has zero specificity, so the design system can redefine the same tokens in `src/index.css`.
- `size` is the rendered height in px. Below 33 px it snaps to the nearest hand-fitted size (mark 16, 20, 24, 28, 32; horizontal lockups 20, 24, 28, 32), and it is clamped to the minimum sizes in section 6. The wordmark switches to its small cut when its cap height is under 14 px.
- `title` is the accessible name (default "MySymptom"), set as `role="img"` plus `aria-label` with no `<title>` element, so it is announced once and shows no hover tooltip. Pass `""` when the logo sits next to visible brand text: the SVG is then `aria-hidden`.
- `CareMark` reads `hsl(var(--care-<tone>))`, so it follows the light and dark care tokens. It snaps to 16, 20 or 24 px.
- `ogImageFor(pathname)` in `src/ui/brand/og.ts` returns the absolute share image for a route on the canonical host (`/` gets `og-home.png`, `/blog/...` gets `og-blog.png`, anything unlisted gets `og-default.png`). `src/components/SEO.tsx` uses it whenever a page does not pass its own `ogImage`.

## 14. Before launch

Have a person run a trademark and visual-similarity search on divided-circle and semicircle marks in Nice classes 9, 42 and 44 (and against Patreon's former mark) before filing or printing at scale.

## 15. Regenerating the kit

Everything in this folder is generated from `scripts/brand/` in the repository:

```sh
python3 scripts/brand/build.py                  # SVGs, PNGs, favicons, social, guidelines, zip, React geometry
python3 scripts/brand/build.py --sheet out.png  # also writes a one-page overview of the whole kit
```

It needs Python 3 with Pillow and fontTools, and Google Chrome for rendering. Geist is included under the SIL Open Font License: the download's `fonts/` folder has Geist Regular, Medium, SemiBold and Bold as `.ttf` (install these for Keynote, Slides, Figma or Word) and `.woff2` (web), Geist Mono Regular and Medium as `.woff2`, and the license. The full family is at https://github.com/vercel/geist-font/releases.