[Design systems](/design-systems/) / Revenue Synergy # 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. Corrections or removal: ![Revenue Synergy homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923871.jpg?alt=media) ## 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 Blue 50 \#EFF6FF 100 \#DBEAFE 500 \#3B82F6 600 \#2563EB 700 \#1D4ED8 800 \#1E40AF 900 \#1E3A8A Teal 100 \#E0F2FE 300 \#7DD3FC 400 \#38BDF8 500 \#0EA5E9 Gray 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 ## Type Headings Inter Revenue Synergy at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923871.md?alt=media). ``` --- 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 ```