---
generator: clinical-terminal-brand-kit
company: "Revenue Synergy"
domain: "revenuesynergy.com"
colors:
  primary: "#1E3A8A"
  onPrimary: "#FFFFFF"
  dark: "#334155"
  accent: "#0EA5E9"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#334155"
  accent: "#1E3A8A"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "8px"
  button: "8px"
---

# Design System — Revenue Synergy

> Read from Revenue Synergy's public website (revenuesynergy.com) by Clinical Terminal. Not reviewed by Revenue Synergy.
> Use it as inspiration: borrow the ideas, not Revenue Synergy's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Revenue Synergy's site background #FFFFFF. Pages and panels sit on it.
- Main text: #334155 (10.35:1 on the ground).
- Secondary text is #334155 at 88% / 76% / 60%; hairlines and plate borders #334155 at 16%.

## Color
- **Accent on the ground: #1E3A8A** (10.36:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1E3A8A** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (10.36:1).
- Secondary accent #0EA5E9: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.

## Shape
- Cards and panels: 8px corners. Buttons and chips: 8px.

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Blue** (`--blue-N`): 50 `#EFF6FF` · 100 `#DBEAFE` · 500 `#3B82F6` · 600 `#2563EB` · 700 `#1D4ED8` · 800 `#1E40AF` · 900 `#1E3A8A`
- **Teal** (`--teal-N`): 100 `#E0F2FE` · 300 `#7DD3FC` · 400 `#38BDF8` · 500 `#0EA5E9`
- **Gray** (`--gray-N`): 50 `#F8FAFC` · 100 `#F1F5F9` · 200 `#E2E8F0` · 300 `#CBD5E1` · 400 `#94A3B8` · 500 `#64748B` · 600 `#475569` · 700 `#334155` · 800 `#1E293B` · 900 `#0F172A`

### Other named colors

- `--white`: `#FFFFFF`
- `--green-500`: `#10B981`
- `--green-400`: `#34D399`
- `--purple-600`: `#7C3AED`
- `--amber-500`: `#F59E0B`
- `--gold-500`: `#C9982E`
- `--gold-400`: `#D4A843`

### Typefaces

- Inter (`--font-family`) — on Google Fonts

### Type scale (most-used sizes)

`1.25rem` · `1.125rem` · `1rem` · `.95rem` · `.9rem` · `.875rem` · `.85rem` · `.8rem` · `.75rem` · `.7rem` · `.65rem` · `10px`

### Letter-spacing

`.08em` (3) · `-.02em` (2) · `.05em` (1) · `2px` (1) · `.06em` (1) · `.5px` (1)

### Corner radii (most-used)

`50%` · `3px` · `8px` · `6px` · `2px` · `4px` · `16px` · `12px` · `20px`

### Shadows

- `0 0 0 3px rgba(14,165,233,.1)`
- `0 2px 6px rgba(14,165,233,.3)`
- `0 0 0 8px rgba(16,185,129,0)`
- `0 8px 25px rgba(14,165,233,.3)`
- `0 0 20px rgba(14,165,233,.3)`
- `0 0 0 6px rgba(16,185,129,0)`

### Gradients

- `linear-gradient(to right,transparent,black 10%,black 90%,transparent)`
- `linear-gradient(135deg,#1e3a8a,#1e40af)`
- `linear-gradient(to right,transparent,black 5%,black 95%,transparent)`
- `linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%)`
- `radial-gradient(ellipse at 70% 50%,rgba(14,165,233,.15) 0,transparent 60%)`
- `radial-gradient(ellipse at 30% 80%,rgba(30,58,138,.2) 0,transparent 50%)`

### Breakpoints

480px · 768px · 1024px