[Design systems](/design-systems/) / Firstsource # Firstsource design system firstsource.com Read from Firstsource's public website by Clinical Terminal. Not reviewed by Firstsource. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Firstsource homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923713.jpg?alt=media) ## Palette - Ground \#FFFFFF \--base-color-neutral--white - Ink \#222222 - Accent on the ground \#CC0000 - Primary \#CC0000 \--base-color-system--error-red - On primary \#FFFFFF \--base-color-neutral--white - Secondary accent \#DF6014 \--base-color-brand--orange - Dark \#222222 - Site background \#FFFFFF \--base-color-neutral--white ## Color ramps Base Color Neutral 100 \#E5E5E5 200 \#D4D4D4 300 \#A3A3A3 400 \#737373 500 \#525252 600 \#404040 700 \#262626 800 \#171717 900 \#0A0A0A ## Other named colors - \--base-color-neutral--white #FFFFFF - \--base-color-brand--bright-blue #2746C4 - \--base-color-brand--dark-blue #1E2247 - \--base-color-neutral--black #000000 - \--base-color-brand--mid-blue #13338E - \--base-color-brand--brand-gray #ECF1F5 - \--base-color-brand--orange #DF6014 - \--base-color-brand--light-blue #6CB1DB - \--base-color-system--success-green #0A8400 - \--base-color-system--error-red #CC0000 - \--dot-color #CCCCCC - \--dot-color-active #000000 - \--dot-focus #0F1F3D - \--fs-label #CC0000 ## Type Headings Archivo · closest free match for Neue-Haas-Grotesk-Display-Pro Firstsource at a glance Body Archivo · closest free match for Neue-Haas-Grotesk-Text-Pro Clear, readable paragraphs for clinicians, buyers and patients alike. - 2rem · 32pxFirstsource - 24pxFirstsource - 1.5rem · 24pxFirstsource - 1.25rem · 20pxFirstsource - 18pxFirstsource - 1.125rem · 18pxFirstsource - 16pxFirstsource - 1rem · 16pxFirstsource ## Shape & depth Cards and panels: 8px corners · buttons and chips: 100px. ### Corner radii - 8px used in 6 rules - 50% used in 3 rules - 9999px used in 3 rules - 999px used in 3 rules - 3px used in 2 rules - 100% used in 2 rules - 24px used in 2 rules - 16px used in 1 rule - 4px used in 1 rule - 18px used in 1 rule ### Shadows - none !important used in 3 rules - 0 2px 2px #00000014 used in 2 rules - 0 0 0 3px rgba(30, 34, 71, 0.12) !important used in 2 rules - 0 0 0 1px #0000001a,0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule - 0 0 0 2px #fff used in 1 rule ### Gradients - linear-gradient(90deg,#1e2247,#2746c4) used in 2 rules - linear-gradient(#0000 22%,#000) used in 1 rule - linear-gradient(#fff0,#000 76%) used in 1 rule - linear-gradient(90deg, #1e2247 0%, #2746c4 100%) used in 1 rule Breakpoints: 479px · 600px · 767px · 768px · 991px · 1280px · 1440px · 1920px ## Voice Tone: professional. Energy: medium. Written for enterprises. ## 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%2F100923713.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Firstsource" domain: "firstsource.com" colors: primary: "#CC0000" onPrimary: "#FFFFFF" dark: "#222222" accent: "#DF6014" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#222222" accent: "#CC0000" fonts: heading: "Archivo" body: "Archivo" radius: card: "8px" button: "100px" --- # Design System — Firstsource > Read from Firstsource's public website (firstsource.com) by Clinical Terminal. Not reviewed by Firstsource. > Use it as inspiration: borrow the ideas, not Firstsource's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Firstsource's site background #FFFFFF. Pages and panels sit on it. - Main text: #222222 (15.91:1 on the ground). - Secondary text is #222222 at 88% / 76% / 60%; hairlines and plate borders #222222 at 16%. ## Color - **Accent on the ground: #CC0000** (5.89:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #CC0000** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.89:1). - Secondary accent #DF6014: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Firstsource's site uses Neue-Haas-Grotesk-Display-Pro / Neue-Haas-Grotesk-Text-Pro; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 100px. ## Voice - Tone: professional. Energy: medium. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Base Color Neutral** (`--base-color-neutral--N`): 100 `#E5E5E5` · 200 `#D4D4D4` · 300 `#A3A3A3` · 400 `#737373` · 500 `#525252` · 600 `#404040` · 700 `#262626` · 800 `#171717` · 900 `#0A0A0A` ### Other named colors - `--base-color-neutral--white`: `#FFFFFF` - `--base-color-brand--bright-blue`: `#2746C4` - `--base-color-brand--dark-blue`: `#1E2247` - `--base-color-neutral--black`: `#000000` - `--base-color-brand--mid-blue`: `#13338E` - `--base-color-brand--brand-gray`: `#ECF1F5` - `--base-color-brand--orange`: `#DF6014` - `--base-color-brand--light-blue`: `#6CB1DB` - `--base-color-system--success-green`: `#0A8400` - `--base-color-system--error-red`: `#CC0000` - `--dot-color`: `#CCCCCC` - `--dot-color-active`: `#000000` - `--dot-focus`: `#0F1F3D` - `--fs-label`: `#CC0000` ### Typefaces - neue-haas-grotesk-text-pro (`--font--primary-family`) - neue-haas-grotesk-display-pro (`--font--display-family`) - Neue Haas Grotesk Display ### Type scale (most-used sizes) `2rem` · `24px` · `1.5rem` · `1.25rem` · `18px` · `1.125rem` · `16px` · `1rem` · `15px` · `14px` · `.875rem` · `12px` ### Corner radii (most-used) `8px` · `50%` · `9999px` · `999px` · `3px` · `100%` · `24px` · `16px` · `4px` · `18px` ### Shadows - `none !important` - `0 2px 2px #00000014` - `0 0 0 3px rgba(30, 34, 71, 0.12) !important` - `0 0 0 1px #0000001a,0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` ### Gradients - `linear-gradient(90deg,#1e2247,#2746c4)` - `linear-gradient(#0000 22%,#000)` - `linear-gradient(#fff0,#000 76%)` - `linear-gradient(90deg, #1e2247 0%, #2746c4 100%)` ### Breakpoints 479px · 600px · 767px · 768px · 991px · 1280px · 1440px · 1920px ```