# RonanRx — brand package

Everything you need to produce on-brand RonanRx work. Start with the brand sheet.

**→ Open `ronanrx-brand-sheet.html` in any browser.**

It is a single self-contained file: the fonts are embedded, nothing loads from the network, and it
renders identically offline. Print it to PDF from the browser if you want a hard copy — the print
styles are set up for it.

## The short version

The aesthetic is **deep-teal cinematic editorial pharma**: dark-teal ink on a light mint-white
ground for documents, a deep cinematic register for full-bleed video and photography, an editorial
serif paired with a modern geometric sans, restrained motion.

### Colors — light register (the default)

| Role | Hex |
| --- | --- |
| Background | `#EDF6F9` |
| Background alt | `#E3EBEE` |
| Line / hairline | `#D0DDE2` |
| Ink (primary text) | `#00434A` |
| Ink muted (supporting text) | `#3F6B70` |
| Brand (the single accent) | `#006D77` |
| Mint tint (callout fill) | `#DCECEF` |
| Sage (dark-ground accent) | `#83C5BE` |
| Danger | `#A94E4E` |
| Paper (print / knockout only) | `#FFFFFF` |

### Colors — dark cinematic register

| Role | Hex |
| --- | --- |
| Deep page ground | `#032025` (alt `#022C31`) |
| Deep ground step | `#04252A` |
| Band ground | `#00434A` |
| Ink on dark | `#EDF6F9` |
| Accent on dark | `#83C5BE` |

### Type

| Role | Family | Weights |
| --- | --- | --- |
| Display + body | Newsreader | 300, 400, 500, italic |
| UI, data, wordmark | Geist | 500, 600, 700, 900 |
| Mono (identifiers) | Geist Mono | 500, 700 |

Body is 17px / 1.65. The full scale is in the brand sheet, §Fig. 02.

## Four rules that matter most

1. **Never add a color.** One brand teal, no second accent hue, no per-campaign theming.
2. **Never pure black.** The dark surfaces are `#00434A` and `#032025`. Dark teal is fine; true
   black is not — not as a background, not as text, not as a shadow.
3. **Sage `#83C5BE` is a dark-ground color.** On light grounds it only reaches 1.8:1 contrast, so it
   is border and decoration only, never text.
4. **The wordmark construction is locked.** Don't retype it, recolor it, or rebuild it. Use the
   supplied SVGs. The "RX" badge is a knockout — its letters take the exact hex of whatever surface
   the lockup sits on, so it reads as a hole punched through to the ground.

## Files

```
ronanrx-brand-sheet.html            the full system — read this first
logos/
  outlined/                         ** START HERE ** glyphs converted to outlines —
                                    no font needed. SVG + PDF + 3x PNG, light and dark.
  ronanrx-wordmark-on-light.svg     live-text lockup, light surfaces (safe to inline)
  ronanrx-wordmark-on-dark.svg      live-text lockup, dark surfaces (use as <img>, do NOT inline*)
  ronanrx-logo.svg                  tight-cropped light lockup (safe to inline)
  ronanrx-mark.svg                  the RX badge alone — favicons, small marks
  ronanrx-social-avatar-square.svg  social avatar, square
  ronanrx-social-avatar-circle.svg  social avatar, circle
  png/                              1x / 2x / 3x renders of each of the above
fonts/
  Newsreader-Latin.woff2            variable, roman
  Newsreader-Italic-Latin.woff2     variable, italic
  Geist-Variable.woff2              variable
  GeistMono-Variable.woff2          variable
```

\* `ronanrx-wordmark-on-dark.svg` is an Illustrator export carrying an unscoped `<style>` block with
generic `.st0`…`.st4` class names. Referenced with `<img src>` it is perfectly fine. **Inlined** into
an HTML document, those class names leak into the page, collide with any other Illustrator SVG, and
can invert the badge into invisibility. If you need it inline, use presentation attributes — see the
light twin for the pattern.

## Outlined vs live-text logos — read this first

`logos/outlined/` holds the wordmark with its **letterforms converted to paths**. Those render
correctly anywhere, with or without the fonts installed. **Use them unless you have a reason not to.**

The files directly in `logos/` are the originals, and their glyphs are **live text** referencing Geist
and Geist Mono by name. Open one on a machine without those fonts and it silently falls back to a
default sans — the wordmark looks approximately right and is wrong. Install the fonts from `fonts/`
before using them, or just take the outlined set.

## PNG note

`logos/png/` holds 1×, 2×, and 3× renders of every SVG, for tools that can't take vector. The
on-light, tight-crop, and mark PNGs have transparent backgrounds. The **on-dark PNGs carry a baked-in
`#00434A` ground** — that comes from the source file, so if you need the dark lockup over a different
teal surface, use the SVG.

SVG is the master for anything on screen; the PDF is the master for print and Illustrator.

## Fonts and licensing

Newsreader is under the SIL Open Font License. Geist and Geist Mono are released by Vercel, also
under the SIL OFL. Both are free to embed and redistribute in this package and in anything produced
from it. Self-host them — never load them from Google Fonts at runtime.

## Questions

Ask before improvising. The palette and the wordmark are locked; the section archetypes in Fig. 05
are meant to be composed, not extended. If a case isn't covered, that's worth a conversation rather
than a guess.
