RTW Hub · Workers' comp RTW platform · GA → multi-stateStart where you are →
RTW Hub · marketing design system

A consistent vocabulary, applied everywhere.

Reference for the tokens, type scale, components, and section patterns used across the marketing site. Use this page to verify any new screen against the system before shipping.

§ 01 · Palette

Colors.

Navy
--color-navy
#0A1628
Navy soft
--color-navy-soft
#142239
Teal
--color-teal
#0A6B67
Teal light
--color-teal-light
#0B8078
Ochre
--color-ochre
#D4A017
Sand
--color-sand
#F5EFE4
Ivory
--color-ivory
#FAF8F3
White
--color-white
#FFFFFF
§ 02 · Typography

DM Serif Display + DM Sans.

Display headlines use DM Serif Display. Body, labels, and UI use DM Sans. JetBrains Mono for tabular figures and tags.

display-xlDM Serif Display · clamp(40px, 5.5vw, 72px) · line 1.08
Three layered capabilities, each compounding on the last.
display-lgDM Serif Display · clamp(36px, 4.5vw, 56px) · line 1.10
One formula. Three days-saved scenarios.
display-mdDM Serif Display · clamp(28px, 3vw, 40px) · line 1.15
Replace paper with a same-day digital workflow.
display-smDM Serif Display · clamp(22px, 2vw, 28px) · line 1.20
See sample dashboard
body-lgDM Sans · 18px · line 1.55
Indemnity claims routinely add 3–7 days waiting on physician form turnaround. RTW Hub collapses that window to under 3 days, every time — and most cases see the signed PDF the same day.
body-mdDM Sans · 16px · line 1.55
Same-day signed PDFs eliminate the legacy form-transit delay. Plans start at $199 / month with 15 cases included — savings are $1,680 to $3,920 per case, covering the platform fee on the first day saved.
body-smDM Sans · 14px · line 1.50
Source: Wolf et al., RAND Corporation evaluation of California workers' compensation reporting (PMC6075806).
eyebrowDM Sans · 12px · weight 600 · 0.10em
§ 03 · Section eyebrow
headline-emphasisfont-style: italic + color: var(--color-teal)

Apply to one phrase per headline. Pick the noun, verb, or adjective that carries the value proposition — never function words.

§ 03 · Buttons

Primary, secondary, accent, link.

Every primary CTA ends with a literal “→” glyph. Use the arrow prop on MktButton.

Primary · btn-primaryon light surface · sizes sm / md / lg
Accent · btn-accenton light surface · sizes sm / md / lg
Secondary · btn-secondaryon light surface · sizes sm / md / lg
Link · btn-linkon light surface · sizes sm / md / lg
On dark surfacebtn-primary-inverse · btn-secondary-inverse
§ 04 · Stat pills

Sand default. Ochre for the marquee numbers.

Use sand for inline metrics; ochre is reserved for the highest-emphasis stats. Navy and teal variants are available for use on lighter card surfaces.

Sand · default
$1,680per claim · floor3 dayssaved · floorPilot ready
Ochre · marquee
261 : 1customer ROI · ceilingMost popular
Navy
$3,920per claim · ceilingBeta
Teal
7 dayssaved · ceilingLive
§ 05 · Tier cards

One card pattern, three variants.

Teal, navy, and sand. All cards stretch to equal height and stack to a single column at ≤900px.

Tier 01 · SpeedDay 1

Replace paper with a same-day digital workflow.

The adjuster receives the signed PDF the moment the physician completes it.

Same-day form delivery
Tier 02 · QualityMonths 1–6

Evidence-based guidance at the point of care.

AMA OEM guidance and BLS benchmarks displayed at the moment of decision.

Smart form with AMA + BLS guidance
Tier 03 · AccountabilityMonth 6+

Physician outcomes across your entire panel.

Days-away-from-work, time-to-sign, and restriction patterns by physician.

Panel curation and improvement

The .tier-card classes are also used outside <TierCardRow /> — Hero “Three returns,” Stakeholders 4-up, BandsCallout, Pricing, ROICards scenario row, and the /physicians value-props all build on the same variants.

§ 06 · Section header

Eyebrow, headline, subhead — in that order.

§ 0X · Optional eyebrow label

Section headline with emphasis here.

One subhead paragraph, max ~640px wide, sits below the headline. Keep it tight — one sentence is usually enough.

markupheader.section-header > .eyebrow + .display-xl + .body-lg.section-header__sub
§ 07 · Principles

Do this, not that.

Do

Use teal + italic on one phrase per headline.

Don't

Don't apply emphasis to more than one phrase per headline.

Do

Punctuate with full-bleed navy or teal sections every 2–3 sections.

Don't

Don't stack two same-color sections back-to-back.

Do

Use ochre stat pills for the marquee numbers (261:1 ROI, $3,920 ceiling).

Don't

Don't use ochre as a card or section background.

Do

Use --shadow-card for cards; --shadow-hover for elevated CTAs.

Don't

Don't add gradients or extra drop shadows beyond the system.

Do

Stick to DM Serif Display + DM Sans + JetBrains Mono.

Don't

Don't introduce a third typeface.