Revenue Synergy design system

revenuesynergy.com

Read from Revenue Synergy's public website by Clinical Terminal. Not reviewed by Revenue Synergy. Copy it and paste it into Claude as inspiration.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --white
• Ink

  #334155
• Accent on the ground

  #1E3A8A
• Primary

  #1E3A8A

  --blue-900
• On primary

  #FFFFFF

  --white
• Secondary accent

  #0EA5E9

  --teal-500
• Dark

  #334155

  --gray-700
• Site background

  #FFFFFF

  --white

Color ramps

Other named colors

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

Type

• 1.25rem · 20pxRevenue Synergy
• 1.125rem · 18pxRevenue Synergy
• 1rem · 16pxRevenue Synergy
• .95rem · 15.2pxRevenue Synergy
• .9rem · 14.4pxRevenue Synergy
• .875rem · 14pxRevenue Synergy
• .85rem · 13.6pxRevenue Synergy
• .8rem · 12.8pxRevenue Synergy

Shape & depth

Cards and panels: 8px corners · buttons and chips: 8px.

Corner radii

• 50%

  used in 19 rules
• 3px

  used in 3 rules
• 8px

  used in 3 rules
• 6px

  used in 1 rule
• 2px

  used in 1 rule
• 4px

  used in 1 rule
• 16px

  used in 1 rule
• 12px

  used in 1 rule
• 20px

  used in 1 rule

Shadows

• 0 0 0 3px rgba(14,165,233,.1)

  used in 2 rules
• 0 2px 6px rgba(14,165,233,.3)

  used in 2 rules
• 0 0 0 8px rgba(16,185,129,0)

  used in 1 rule
• 0 8px 25px rgba(14,165,233,.3)

  used in 1 rule
• 0 0 20px rgba(14,165,233,.3)

  used in 1 rule
• 0 0 0 6px rgba(16,185,129,0)

  used in 1 rule

Gradients

• linear-gradient(to right,transparent,black 10%,black 90%,transparent)

  used in 2 rules
• linear-gradient(135deg,#1e3a8a,#1e40af)

  used in 2 rules
• linear-gradient(to right,transparent,black 5%,black 95%,transparent)

  used in 2 rules
• linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%)

  used in 1 rule
• radial-gradient(ellipse at 70% 50%,rgba(14,165,233,.15) 0,transparent 60%)

  used in 1 rule
• radial-gradient(ellipse at 30% 80%,rgba(30,58,138,.2) 0,transparent 50%)

  used in 1 rule

Breakpoints: 480px · 768px · 1024px

Voice

Tone: professional. Energy: low. Written for businesses.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
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