CodeRx Design Guide

Use this guide for CodeRx websites, apps, docs, dashboards, marketing PDFs, social posts, generated images, and sales materials.

CodeRx should feel like a modern, credible healthcare data company: technically sharp, clinically grounded, developer-friendly, and refreshingly plainspoken.

Sources for this guide: the live site at coderx.io, the docs repo implementation (src/css/custom.css, src/pages/), The CodeRx Newsletter, and the CodeRx LinkedIn presence.

Brand essence

CodeRx = drug data, simplified.

CodeRx turns messy, fragmented public drug data into clean, analytics-ready data marts for healthcare developers, analysts, researchers, and startups. The brand promise is not “more data”; it is less wrestling with raw data, more useful answers.

Core positioning

Built by pharmacists who code.
Designed for developers, analysts, healthcare data teams, and pharmacy researchers.
Makes complex drug data query-ready without requiring RxNorm expertise.
Unifies sources like RxNorm, FDA NDC, DailyMed, NADAC, RxClass, and FDA UNII.
Emphasizes open standard identifiers, transparent data modeling, and practical analytics.
Provides an affordable, modern alternative to legacy enterprise drug databases.

Taglines (approved)

Context	Line
Primary product	Drug Data, Simplified
Company / LinkedIn	Drug data, simplified
Docs / product ethos	Pharmacists engineering pharmacy
Newsletter / community	The intersection of pharmacists who code and developers who (health)care.

Personality

CodeRx is:

Credible — clinical correctness and data quality matter.
Practical — usable tables, not abstract terminology theory.
Developer-native — SQL, schemas, pipelines, docs, repeatable workflows.
Plainspoken — avoids vendor fog and empty enterprise language.
Witty in moderation — comfortable with pharmacy/data humor when it does not undercut trust.
Generous — teaches how drug data works, even when that complexity is inconvenient.
Founder-led — sounds like a pharmacist-engineer who has lived the pain, not a faceless vendor.

CodeRx is not:

Corporate, sterile, or buzzword-heavy.
Overly playful where buyers need confidence.
Vague about data provenance, update frequency, or limitations.
Flashy at the expense of clarity.
Generic “AI healthcare” SaaS.

Visual identity

Color palette

Canonical brand colors from the live site and logo:

:root {
  /* Brand */
  --coderx-red: #d52d34;
  --coderx-red-dark: #951f24;
  --coderx-red-darker: #7a191d;
  --coderx-red-light: #ea969a;
  --coderx-yellow: #fbcb41;
  --coderx-yellow-dark: #b08e2e;
  --coderx-yellow-light: #fde5a0;
  --coderx-yellow-lightest: #fef1d0;

  /* Surfaces & text (as used on coderx.io) */
  --coderx-ink: #0a0a0a;
  --coderx-charcoal: #1a1a1a;
  --coderx-slate: #525252;
  --coderx-muted: #737373;
  --coderx-border: #e5e5e5;
  --coderx-border-strong: #d4d4d4;
  --coderx-canvas: #f5f5f5;
  --coderx-paper: #ffffff;
  --coderx-on-dark: #a3a3a3;

  /* Soft accents */
  --coderx-soft-red: #fff0f1;
  --coderx-soft-yellow: #fff4c2;

  /* Occasional tertiary (data visuals only) */
  --coderx-teal: #10b981;
}

Dark mode (docs / site) brightens red and yellow for contrast: primary #ff4757, secondary #ffd93d.

How to use color

Color	Role
Red `#d52d34`	Brand signal: logo accents, italic hero emphasis (“Simplified”), featured borders, final CTAs on dark bands, Cal.com brand color, important highlights
Yellow `#fbcb41`	Warm secondary: “Introducing” labels, icon accents, diagram fills, changelog / construction motifs, optimistic contrast
Ink `#0a0a0a`	Primary text, dark section backgrounds, hero primary buttons on light canvases
Canvas `#f5f5f5`	Default light page background (cool neutral — not cream)
Paper `#ffffff`	Cards, tables, docs surfaces
Teal `#10b981`	Optional third series color in multi-series data visuals only (e.g. Ingredients card). Do not promote teal to a core brand color.

Color balance

A good CodeRx composition usually follows:

70–80% white / canvas / neutral space
10–20% ink text and structure
5–10% red accents
5–10% yellow accents

Rhythm on marketing pages: alternate light canvas sections with full-bleed ink (#0a0a0a) bands. Red often frames those dark product bands (as on “The CodeRx Drug Database”).

Avoid:

Large red backgrounds with long white body copy
Cream / parchment as the default canvas (the live brand is cool gray + black, not warm paper)
Neon gradients, purple/indigo SaaS themes, or clinical blue as the dominant color
Flooding UI with red (reserve it for signal moments)

Typography

Live marketing pages prioritize system display stacks for clarity and speed:

/* Display / headings */
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/* Body */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;

/* Data, SQL, NDCs, RXCUIs, filenames */
font-family: "SF Mono", "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", Monaco, monospace;

Brand asset libraries may also include Roboto Bold — acceptable for PDFs, slides, and environments where system SF fonts are unavailable. Prefer one consistent sans across a single artifact; do not mix decorative serifs.

Type style

Headings: bold, compact, tight letter-spacing (-0.02em to -0.03em), high clarity
Body: readable, direct, not over-styled
Favor documentation readability over glossy marketing typography
Monospace for SQL, schemas, NDCs, RxCUIs, file formats (CSV, Parquet)
Italic + red is reserved for the hero word Simplified (and rare parallel emphasis moments)

Heading behavior

Headings should communicate value quickly:

Good:

Drug Data, Simplified
Query-ready drug data marts
No RxNorm expertise required
Built by pharmacists, designed for analytics

Avoid:

Unlock revolutionary healthcare intelligence
The next generation of medication data transformation
An AI-powered paradigm for life sciences enablement

Logo

Assets in this repo (static/img/):

Pill / mark: logo.svg, logo.png
Wordmarks: coderx_text_logo_black.svg, coderx_text_logo_white.svg

The mark is a capsule / pill with code chevrons (< >): yellow half + red half, black outline. It literally encodes “code + Rx.”

Logo usage

Use	Treatment
Headers, decks, social banners	Combined mark + wordmark
Favicons, avatars, app icons	Pill mark alone
Light / canvas backgrounds	Black wordmark + color mark
Dark / red / image backgrounds	White wordmark + color mark (or white mark)
Web / UI	Prefer SVG
Email / social / uncertain SVG support	PNG

Avoid:

Recoloring outside approved red / yellow / black / white treatments
Stretching, rotating, or heavy drop shadows
Placing the red mark on clashing saturated backgrounds
Using the pill as a decorative bullet everywhere on one screen

The wordmark’s x often carries a prescription-style flourish — preserve it; do not redraw as a plain “x.”

Geometric accents

The site uses simple geometric glyphs as brand texture (not emoji):

◈ ◇ ○ — hero badges (weekly updates, pharmacy-ready, open standards)
◆ — product highlight bullets on dark bands

Prefer these (or similar minimal geometry) over emoji in product UI and formal marketing. Emoji are acceptable sparingly on LinkedIn / Substack when the founder voice is clearly social.

Layout and UI

Overall feel

CodeRx interfaces should feel like:

A clean technical documentation site
A trustworthy healthcare analytics product
A lightweight developer tool
A founder-led product with personality, not a faceless enterprise vendor

Layout principles

Clear sections, strong headings, generous spacing, concrete examples
Tables, schema snippets, and real-looking field labels make complexity feel manageable
Make the transformation obvious: raw XML / government files → unified query-ready marts
Restrained polish: 12–16px card radius, soft shadows, 1px borders, cool neutrals
Scanability first — value should be obvious in seconds
On marketing heroes: brand + one headline + one supporting sentence + CTA group + one dominant product visual

Motion

Ship intentional motion, not noise. Patterns already in product:

Soft card carousel / depth shifts for data-mart previews
Staggered row entrance for example fields
Subtle pulse on database / stack visuals
Expand/collapse for process steps

Keep easing restrained (cubic-bezier(0.4, 0, 0.2, 1)), durations ~0.3–0.6s. Prefer presence and hierarchy over decorative flair.

Components

Buttons

On light canvases, primary CTAs are often ink (black), with outline secondary — matching the live homepage hero:

.button-primary-light {
  background: #0a0a0a;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
  padding: 1rem 2rem;
}

.button-secondary-light {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
}

On dark bands and conversion footers, primary CTAs flip to brand red:

.button-primary-dark {
  background: #d52d34;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
}

.button-secondary-dark {
  background: transparent;
  color: #ffffff;
  border: 1px solid #404040;
  border-radius: 4px;
}

Pricing featured CTAs may also use red on light when the card is the conversion focus.

Preferred labels:

Book a Demo
View Pricing
Explore the data marts
Read the docs
Contact Us

Avoid vague CTAs (Learn more, Transform now, Unlock insights) when a specific action exists.

Cards

Use cards for data sources, data marts, audiences, comparisons, and pricing — not as default decoration for every block.

.card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

Featured cards get a red border or soft red shadow (rgba(213, 45, 52, 0.12)). Hover: slight lift (translateY(-2px) to -4px), never loud glow.

Tables and data previews

CodeRx sells trust through structure. Show real-looking columns, SQL, and schema examples whenever possible.

Good motifs:

Query windows and result rows
NDC → drug mappings
Ingredient hierarchies
Weekly update badges
Source → schema diagrams
Before/after: raw vs mart

Keep tables legible. Do not over-decorate them.

Badges

Small badges for status and provenance:

Weekly refresh / weekly updates
SQL-ready / pharmacy-ready
Open standards / Open identifiers
Source names: RxNorm, FDA NDC, DailyMed, NADAC
Formats: CSV / Parquet

Yellow soft badge (labels / intros):

.badge-yellow {
  background: #fbcb41;
  color: #0a0a0a;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
}

Red soft badge (plan popularity, alerts of positive emphasis):

.badge-red {
  background: #d52d34;
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
}

Imagery and illustration

Prefer

Simple diagrams of data flow (sources → pipeline → marts)
Clean product UI / table screenshots
SQL examples and schema excerpts
Minimal pharmacy motifs: pill, capsule, label, package, barcode, bottle silhouette
Construction / changelog visuals for updates or work-in-progress
Light meme / comic moments in newsletter and social when they clarify a point (Charlie Day, “server pharm,” Advil vials) — caption the joke; never let the joke replace the explanation

Avoid

Generic doctor-with-tablet stock photography
Abstract glowing “AI healthcare brain” visuals
Overly clinical hospital photography
Imagery that implies CodeRx stores or sells patient-level PHI (the product is drug reference / analytics data)
Purple nebula / glassmorphism SaaS wallpaper as the main visual idea

Generated images

When generating images for CodeRx:

Anchor on the pill + chevron mark, red/yellow/black/white palette, and cool neutrals.
Prefer diagrams, labeled packages, query UIs, and “messy files → clean tables” metaphors.
Include the wordmark when the image must stand alone as brand.
Avoid putting lots of tiny text in the image; put precise claims in surrounding copy.
For social: one clear idea per image. For PDFs: leave margins, keep tables crisp, use red sparingly for section rules and CTAs.

Voice and tone

CodeRx voice shifts slightly by channel, but the speaker is always the same: a pharmacist who codes, explaining hard things plainly.

Channel dial

Channel	Dial	Notes
Website / pricing	Polished, confident, concise	Problem → product → proof. Short paragraphs. Concrete claims.
Docs / tutorials	Precise, practical, caveat-aware	Lead with the answer and schema. Explain edge cases after the example.
Substack	Educational founder essay	Deep dives, narrative, occasional puns in titles, teach the messy middle.
LinkedIn	Conversational + punchy	Specific numbers, industry absurdity named plainly, soft CTAs, light emoji OK.
Blog (on-site)	Same as Substack	Often mirrors newsletter posts.

Voice attributes

1. Clinically grounded

Sound like you understand pharmacy and drug data quality. Use real terms:

drug products, active and inactive ingredients, NDC-to-drug mappings, dose forms and strengths, brand-to-generic, semantic drug concepts, pricing history, classification systems, RXCUI, excipients

Do not pretend drug data is simple. The point is that CodeRx makes it usable.

2. Developer-friendly

Prefer concrete technical language: SQL, data marts, CSV, Parquet, schema, weekly refresh, pre-joined tables, S3, open standard identifiers.

Include snippets when useful:

SELECT ndc, drug_name, ingredient_name, nadac_per_unit
FROM packages
WHERE ingredient_name = 'metformin';

3. Plainspoken and specific

Good:

Raw drug data is public, but it is not easy to use.

Bad:

Public medication intelligence ecosystems require next-generation transformation enablement.

4. Lightly witty, never unserious

Newsletter and social can play:

Open does not mean easy when it comes to drug data.
Last Christmas, I gave you my marts.
Try before you don’t buy.
Asking for a friend…
PDFs as a way to share data should be as dead as pagers.
server pharm (clearly marked as a joke)

Keep jokes out of accuracy, coverage, security, and pricing reassurance moments.

5. Opinionated about broken defaults

A signature CodeRx move: name healthcare data absurdity with receipts, then show the fix.

Examples from LinkedIn / Substack:

Open ≠ easy (zip-of-zips XML, RRF tables, inconsistent NADAC filenames)
Proprietary identifiers vs open standards (GCN / GPI vs RxNorm) with specific match rates
“Idiot index” pricing critique grounded in free public sources
DEA CSCN published only as PDF — then CodeRx turns it into a pipeline

Be sharp, not cruel. Punch up at systems and vendor lock-in, not at practitioners stuck with them.

Copywriting rules

Prefer concrete claims

Use: Weekly updates, Six integrated public data sources, Pre-joined tables, No XML parsing, Built by pharmacists, Open standard identifiers, CSV and Parquet delivery, Silver / Gold / Platinum

Avoid: Best-in-class, Revolutionary, World-class, Seamless end-to-end, AI-powered (unless an actual AI feature is shipping)

Make the pain vivid

Name the pain buyers already feel:

Parsing XML / nested zip files
Joining inconsistent identifiers
Learning RxNorm SABs, TTYs, and hierarchies
Mapping NDCs to clinical drugs
Tracking marketing status and package changes
Handling price history and pack size
Reconciling labels, ingredients, and classifications

Show the transformation

Pattern:

Instead of [painful raw-data task], CodeRx gives you [ready-to-use outcome].

Keep paragraphs short

Marketing: 1–3 sentence paragraphs, bullets over dense prose, one idea per section.

Docs: practical answer first, caveats after, source and refresh assumptions explicit.

Example copy blocks

Hero (website)

# Drug Data, Simplified

Stop choosing between hard-to-use raw government data and expensive proprietary
databases. CodeRx transforms RxNorm, FDA, DailyMed, and NADAC into ready-to-query
data marts—built by pharmacists, designed for analytics.

[Book a Demo] [View Pricing]

Newsletter / Substack

## Open does not mean easy

Most of the raw ingredients for a useful drug database are public. That does not
mean they are clean, joined, documented, or ready for analytics. CodeRx exists
for the messy middle between “download the file” and “answer the question.”

LinkedIn (punchy proof)

99.3% — that's how consistently CodeRx's RxNorm-based Clinical Drug IDs matched
a client's GCN identifiers across every NDC in their wholesaler data.

Open data doesn't mean lower quality. We think it's the better foundation to build on.

Product one-liner (About / LinkedIn)

CodeRx maintains a comprehensive, analytics-ready drug database that unifies
data from RxNorm, FDA NDC, DailyMed, NADAC, and more into clean, queryable data
marts. Built by pharmacists who understand the complexities of drug data,
designed for developers and analysts who need reliable information without the overhead.

Audience framing

Healthcare data analysts

Emphasize actionable insights, SQL-ready tables, less RxNorm complexity, claims/medication analytics.

Turn complex drug data into actionable insights. No RxNorm expertise required—just query and analyze.

Health tech startups

Emphasize enterprise-grade data at startup-friendly cost, no lock-in, fast implementation, clean schemas.

Get enterprise-grade drug data at a fraction of the cost—no vendor lock-in, no complex contracts, just clean data that works.

Healthcare developers

Emphasize faster medication features, reliable identifiers, fewer edge-case bugs.

Build medication features faster with reliable, well-structured data. Query-ready tables mean less code, fewer bugs.

Pharmacy researchers

Emphasize less file wrangling, more research time, transparent source mapping.

Stop wrestling with raw government files. Spend your time on insights, not parsing XML and learning RxNorm hierarchies.

Recommended page structure

For a CodeRx marketing / landing page:

Hero — headline, one sentence for whom, primary + secondary CTA, product visual
Audience — analysts, startups, developers, researchers
Product promise — unified schema, weekly refresh, query-ready
Proof stats — sources, cadence, cost contrast, “0 XML parsing”
Data sources — RxNorm, FDA NDC, RxClass, DailyMed, NADAC, FDA UNII
Data marts — Packages, Drugs, Ingredients (+ Classes, Excipients, Synonyms)
Comparison — vs other databases / vs raw open data
How it works — Subscribe → Query → Analyze
CTA — Book a Demo / View Pricing

Medium-specific guidance

Websites & web apps

Follow the live cool-neutral + ink band system
Primary conversion action: Book a Demo (Cal.com brand color #d52d34)
Show real field labels (NDC, RXCUI, NADAC) in UI chrome
Docs should stay denser and more tabular than marketing pages

Marketing PDFs / one-pagers

White / canvas background, red rules or yellow callout boxes
One idea per page; put schema or comparison tables on the page, not decorative stock
Include logo, one proof point, one CTA URL (coderx.io)
Avoid multi-column newspaper layouts and purple gradient covers

Generated / social images

Pill mark + short claim + optional red accent word
High contrast; readable at phone width
LinkedIn: can be more narrative; image should still stand alone without tiny paragraphs

Product UI inside apps

Prefer paper surfaces, ink text, red for primary destructive-safe brand actions only when meaning is clear
Yellow for warnings / “in progress” / tips — not errors
Errors should use a distinct system red if brand red is already primary CTA (label clearly)
Dense data: monospace IDs, sticky headers, quiet borders

Do / do not

Do

Lead with clarity and usefulness
Use red and yellow as distinctive but restrained accents
Show tables, schemas, SQL, and source mappings
Explain where data comes from and how often it refreshes
Respect the complexity of drug data
Use pharmacist / developer credibility
Write like a human founder who knows the problem deeply
Alternate light and dark bands for marketing rhythm

Do not

Default to cream + terracotta “AI brochure” looks, or purple SaaS gradients
Overuse generic healthcare stock visuals
Sound like a legacy enterprise vendor
Make claims without product specifics
Use AI buzzwords unless directly relevant
Let puns undercut trust in buyer-critical moments
Hide complexity behind vague phrases
Imply patient data custody the product does not have

Quick checklist

Before publishing CodeRx design or copy, verify:

File location

This guide lives at the root of the CodeRx docs / website repository (docs/DESIGN.md) so product, marketing, and content work share one source of truth. Implementation references:

Brand CSS variables: src/css/custom.css
Marketing layout: src/pages/index.module.css, src/pages/pricing.module.css
Logos: static/img/

Uh oh!

FilesExpand file tree

DESIGN.md

Latest commit

History

DESIGN.md

File metadata and controls

CodeRx Design Guide

Brand essence

Core positioning

Taglines (approved)

Personality

Visual identity

Color palette

How to use color

Color balance

Typography

Type style

Heading behavior

Logo

Logo usage

Geometric accents

Layout and UI

Overall feel

Layout principles

Motion

Components

Buttons

Cards

Tables and data previews

Badges

Imagery and illustration

Prefer

Avoid

Generated images

Voice and tone

Channel dial

Voice attributes

1. Clinically grounded

2. Developer-friendly

3. Plainspoken and specific

4. Lightly witty, never unserious

5. Opinionated about broken defaults

Copywriting rules

Prefer concrete claims

Make the pain vivid

Show the transformation

Keep paragraphs short

Example copy blocks

Audience framing

Healthcare data analysts

Health tech startups

Healthcare developers

Pharmacy researchers

Recommended page structure

Medium-specific guidance

Websites & web apps

Marketing PDFs / one-pagers

Generated / social images

Product UI inside apps

Do / do not

Do

Do not

Quick checklist

File location