RonanRx — Brand Sheet & Asset Downloads

Fig. 01 · Color

One palette, two registers

Never add a color. Aliases resolve to these hexes; they never introduce a new one.

Light register — documents and content pages (the default)

Background#EDF6F9

Page ground. Light mint-white.

--color-bg

Background alt#E3EBEE

Alternate band, recessed surface.

--color-bg-alt

Line#D0DDE2

Hairlines, dividers, card borders.

--color-line

Ink#00434A

Primary text. Also the dark-band ground — this hex is the hinge between registers.

--color-ink

Ink muted#3F6B70

All supporting text, eyebrows, captions, table headers.

--color-ink-muted

Brand#006D77

The single accent. Links, primary CTA fill, positive status.

--color-brand

Mint tint#DCECEF

Selected and callout surface fill.

--color-mint-tint

Sage#83C5BE

Accent on dark grounds. On light it is border and decoration only — never text.

--color-sage

Danger#A94E4E

Rx-required pill, compliance callouts, form-error state.

--color-danger

Paper#FFFFFF

Print and one-off knockouts only. Never a page background.

--color-paper

Dark cinematic register

For video heroes, films, wall bands, immersive pages.

Editorial art direction — not a dark-mode toggle, and never a user preference. A page is authored in one register or the other.

Deep ground#032025

Full-cinematic page background. Alt #022C31.

Deep ground step#04252A

Alternate dark surface.

Band ground#00434A

Dark bands inside light pages — hero, trust band.

Ink on dark#EDF6F9

Headings and body on dark. Dim 66%, faint 42%.

Accent on dark#83C5BE

Eyebrows, numbered steps, progress scrubbers.

Hairline on darkSAGE · 18%

Rules and dividers on cinematic ground. On a #00434A band, grids use #EDF6F9 at 22%.

Hard rule: never pure black on screen. Not as a background, not as text, not as a rule or a shadow. The dark surfaces are #00434A (band) and #032025 (deep cinematic ground). Dark teal is fine; true black is not.

Usage rules

One brand teal. No second accent hue. No per-clinic or per-campaign theming.
Sage is the dark-ground accent voice. On light grounds it hits only 1.8:1 — border and decoration only, never text.
Text never sits on raw footage. Use the scrim tints rgba(2,24,28,α) or rgba(0,32,37,α) over video and photography.
One dark band per document-register page, maximum.
The cream and forest palette is retired. If you see it in an old artifact, it is legacy, not a reference.

Contrast — computed, WCAG 2.1

Pair	Ratio	Grade
Ink #00434A on background #EDF6F9	10.1:1	AAA
Ink on background-alt #E3EBEE	9.1:1	AAA
Ink-muted #3F6B70 on background	5.4:1	AA
Brand #006D77 on background	5.5:1	AA
Brand on mint-tint #DCECEF	5.0:1	AA
#EDF6F9 on the #00434A band	10.1:1	AAA
#EDF6F9 on #032025	15.5:1	AAA
Sage #83C5BE on #00434A	5.6:1	AA — text OK
Sage on #032025	8.6:1	AAA — text OK
Danger #A94E4E on background	4.9:1	AA at body size
Sage on any light ground	1.8:1	Decorative only

Fig. 02 · Typography

Three families, one scale

Self-hosted only. Never depend on Google Fonts at runtime — the .woff2 files ship in this package.

Role	Family	Weights
Display and body	Newsreader	300, 400, 500, italic
UI, data, wordmark	Geist	500, 600, 700, 900
Mono — identifiers	Geist Mono	500, 700

Scale

No ad-hoc clamp() outside this table.

Tier	Family	Wt	Size	Line	Tracking
Display cinematic	serif	300	clamp(3.5rem, 8.5vw, 7.5rem)	0.98	-0.022em
Hero on video, h1	serif	300	clamp(2.75rem, 6vw, 5.5rem)	1.02	-0.02em
Display XL	serif	300	clamp(3.25rem, 6vw, 5.5rem)	1.04	-0.018em
Display M — cinematic	serif	300	clamp(2.25rem, 4.2vw, 3.75rem)	1.06	-0.015em
Display M — document h2	serif	400	clamp(2rem, 3.2vw, 2.75rem)	1.12	-0.01em
Title	serif	400	24px	1.25	-0.005em
Lead	serif	400	clamp(1.25rem, 1.6vw, 1.5rem)	1.5	0
Body	serif	400	17px	1.65	0
UI	sans	500	16px	1.4	0.005em
Eyebrow — uppercase	sans	600	12px	1.3	0.18em
Mono	mono	500	11px	1.4	0.06–0.14em
Stat	serif	400	clamp(2.5rem, 4vw, 3.5rem)	1	-0.025em

Specimens

Display XL · Newsreader 300

Every batch, a record.

Section h2 · Newsreader 400

Compounded for one patient at a time

Lead · Newsreader 400

A pharmacy built around the prescription, not the production line — every unit traceable to the doctor who signed for it.

Title · Newsreader 400

Chain of custody

Body · Newsreader 400 · 17px

Main prose and card body sit at seventeen pixels with a 1.65 line height. The serif does the reading work; the sans handles interface and data. Italics are for inline emphasis spans only, never a whole headline.

UI · Geist 500

Start a prescription

Eyebrow · Geist 600 · 0.18em

Pharmacy · Manufacturing

Mono · Geist Mono 500 · 11px

ILLUSTRATIVE RECORD · NO PHI · GATE · DOCTOR_APPROVES · LOT 4417-B

Stat · Newsreader 400

48 hr

Type rules

Serif italics for inline emphasis spans only, never whole headlines.
Display and Title headlines use text-wrap: balance. An orphaned last word is a bug, not a preference.
Eyebrows are always uppercase, always the single Eyebrow tier, always 0.18em tracking.
The mono microcopy voice is load-bearing: image captions, no-PHI tags, gate labels, lot and Rx identifiers, film kickers. Geist Mono for all of it — never set body copy in mono.
Stat numerals are serif weight 400. The negative tracking does the work, not a heavier weight.
Two-tone emphasis: wrap the receding clause at 58% opacity rather than reaching for a second color.
A mixed-unit stat ("48 hr", "2 wk") softens tracking to -0.015em.

Fig. 03 · Wordmark

Locked construction

Not subject to redesign. The geometry below is fixed; only the two color renderings change.

Element	Family	Weight	Tracking	Notes
“RONAN”	Geist	800 ExtraBold	0	72px in the lockup. Reads at all widths.
“RX” badge	Geist Mono	700 Bold	0.22em	Set at 36px — exactly half of RONAN. Knockout on a 4px-radius rect. Badge is 51 tall, equal to RONAN cap height, aligned cap-line to baseline.
“PHARMACY · MANUFACTURING”	Geist Mono	500	0.22em	All caps, 0.6 opacity, optional below the lockup. Rarely needed.

Color rendering follows the surface

ON LIGHT · TEXT AND RECT FILL #00434A · “RX” KNOCKS OUT IN #EDF6F9

ON DARK · TEXT AND RECT FILL #EDF6F9 · “RX” KNOCKS OUT IN THE PAGE GROUND — #00434A ON A BAND, #032025 ON A DEEP CINEMATIC PAGE

The knockout is the point. The badge should read as a hole punched through to the ground behind it, not as a colored box sitting on top. That means the “RX” letters take the exact hex of whatever surface the lockup sits on.

Sizing and placement

Navigation lockup ≈ 132 × 25. Footer lockup ≈ 112 × 21.
Clear space on all four sides: no less than the height of the RX badge.
Never place the wordmark on pure black. The only dark fields are #00434A and #032025.

Do

Use ronanrx-wordmark-on-light.svg and ronanrx-wordmark-on-dark.svg as-is, referenced with an <img> tag.
Match the RX knockout to the actual page ground when the lockup moves to a new surface.
Scale proportionally. The badge-to-cap-height relationship is fixed.

Don't

Inline the on-dark SVG into an HTML document. It is an Illustrator export carrying an unscoped <style> block with generic .st0….st4 class names that leak into the page and can invert the badge. Use presentation attributes when inlining.
Rebuild the lockup by typing it. The tracking, the badge geometry, and the 36/72 size ratio are all specified.
Recolor, outline, add a gradient, add a shadow, rotate, or set it in any family other than Geist and Geist Mono.
Place it on a busy photograph without a scrim.

Fig. 04 · Space

Everything divides by four

Every padding, gap, margin, icon size, radius, container width, and image dimension.

Token	px	Token	px	Token	px
--space-1	4	--space-5	24	--space-9	96
--space-2	8	--space-6	32	--space-10	128
--space-3	12	--space-7	48	--space-11	160
--space-4	16	--space-8	64

Rhythm and containers

Section padding-block: 96–128px desktop · 48px tablet · 32px mobile. Prefer section padding over a top margin on the heading.
Containers: 1152px for prose, hero, and two-column. 1280px for the six-cell grid, full-bleed bands, and cinematic pages. 24px gutters.
Radii: card 12px · sheet 16px · control 8px · chip 4px. The wordmark badge is 4px.
Exempt from the grid: 1–2px motion micro-lifts, em letter-spacing, the 999px true pill, sub-4px borders, unitless line heights, and the type sizes fixed by the scale (17px body, 11px mono).

Fig. 05 · Components

A small, flat kit

No shadows anywhere. Hover states deepen; they never lighten.

Buttons

Start a prescription See how it works

Min-height 48px, nav buttons 40px. Padding 12px 28px, radius 4px, Geist 500 at 1rem. Active state translates down 1px. Primary fills brand #006D77 and hovers to ink #00434A — deeper, never lighter. Ghost is transparent, hovering to mint-tint. On-image CTA fills #EDF6F9 with #00434A text.

Status pills

In network In review Rx required

One primitive: 1px border, 4px radius (a chip, not a full pill), Geist 600 at 0.6875rem, 0.14em tracking, uppercase. This is the home for regulatory phrasing. A fourth variant, translucent teal with a backdrop blur, exists for chips sitting over imagery.

Cards

Editorial card

Background matches the page, 1px line border, 4px radius. Hover lifts 1px and the border shifts to brand. No shadow.

48 hr

Median turnaround

The recommended card variant adds a 4px brand top border and a concrete pill tab — “FOR MOST DOCTORS”, never a generic “RECOMMENDED PATH”. Use it once per page. Stat cards have no background and no border, only a 2px brand top accent rule.

Context callout

Mint-tint background, 1px sage left rule, radius 0 4px 4px 0, padding 16px 20px, Lead-tier copy, max 60 characters. Calm, plain English.

Section archetypes — compose, don't invent

Three-up plan cards — three equal columns, one recommended variant. For routes and program types, never pricing tiers.
Six-cell editorial grid — 3×2 desktop, 48px gap, a top hair-rule per cell, status pill plus serif Title plus dek. An image-led lead variant provides the asymmetric break.
Three-step cards with miniatures — roughly 5:7, a 1:1 visual block on background-alt, mono numeral plus serif title plus body capped at 28 characters.
Split headline and stat cards — 12-column row. Left is a Display headline with one italic-brand emphasis phrase, plus Lead and CTA. Right is three stat cards and a doctor pull-quote — the fourth slot is always a quote, never a fourth stat.
Editorial pull-quote — full-width single-quote break, left-aligned, Display quote plus eyebrow and attribution. Defaults to a background-alt band.
Dark trust band — full-bleed on ink #00434A, sage eyebrows, #EDF6F9 text, hairline grids at 22% white. One per light page, maximum.

Fig. 06 · Downloads

Every asset, individually

SVG is the master for anything on screen. PDF is the master for print and Illustrator. The PNGs are conveniences rendered from those same files — reach for them only where vector isn't an option.

Outlined wordmarks — start here

The lockups below have their letterforms converted to outlines, so they render correctly on any machine whether or not Geist is installed. The live-text versions further down are lighter and editable, but they need the fonts. If in doubt, take these.

Outlined — on light

Transparent ground, ink #00434A glyphs, #EDF6F9 knockout. No font dependency.

SVG PDF PNG 3×

Outlined — on dark

On a #00434A band ground, #EDF6F9 glyphs, teal knockout. No font dependency.

SVG PDF PNG 3×

Outlined — tight crop

The light lockup cropped to the ink, for when you're setting your own clear space. No font dependency.

SVG PDF PNG 3×

Outlined — RX badge

The badge alone, outlined. Favicons, app icons, small marks. No font dependency.

SVG PDF PNG 3×

Live-text wordmarks

Smaller files and editable type, but the glyphs are real text — they need Geist and Geist Mono installed, or they silently fall back to a default sans.

Wordmark — on light

The primary lockup. Presentation attributes only, so it is safe to inline in HTML.

SVG PNG 1× 2× 3×

Wordmark — on dark

For dark surfaces. Use as an <img>; do not inline it — see Fig. 03. The PNGs carry a baked-in #00434A ground.

SVG PDF PNG 1× 2× 3×

Logo — tight crop

The light lockup cropped tight to the glyphs. Presentation attributes only; safe to inline.

SVG PNG 1× 2× 3×

Mark — RX badge

The badge on its own. Favicons, app icons, and anywhere the full lockup won't read.

SVG PNG 1× 2× 3×

Social avatars

Avatar — square

For platforms that crop to a square or rounded rectangle.

SVG PNG 1× 2× 3×

Avatar — circle

For platforms that crop to a circle.

SVG PNG 1× 2× 3×

Fonts

Self-host these. Never load them from Google Fonts at runtime.

Newsreader

Variable, weights 300–500. Display and body. Roman and italic are separate files.

Roman .woff2 Italic .woff2

Geist

Variable, weights 100–900. UI, data, and the wordmark itself.

Variable .woff2

Geist Mono

Variable, weights 100–900. Identifiers, captions, and the mono microcopy voice.

Variable .woff2

Everything at once

Full package

All logos, all PNG sizes, all four fonts, a README, and an offline copy of this sheet with the fonts embedded — one file, nothing loads from the network.

Download .zip

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. The RonanRx wordmark and marks are not — they are ours, and this page is a working handoff, not a grant of use.

Download the assets

One palette, two registers

Light register — documents and content pages (the default)

Usage rules

Contrast — computed, WCAG 2.1

Three families, one scale

Scale

Specimens

Type rules

Locked construction

Color rendering follows the surface

Sizing and placement

Do

Don't

Everything divides by four

Rhythm and containers

A small, flat kit

Buttons

Status pills

Cards

Editorial card

Context callout

Section archetypes — compose, don't invent

Every asset, individually

Outlined wordmarks — start here

Live-text wordmarks

Social avatars

Fonts

Everything at once

Full package

Licensing