[Design systems](/design-systems/) / Parallon # Parallon design system parallon.com Read from Parallon's public website by Clinical Terminal. Not reviewed by Parallon. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Parallon homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100118.jpg?alt=media) ## Palette - Ground \#FFFFFF - Ink \#03173E - Accent on the ground \#CE4913 - Primary \#E05929 - On primary \#000000 - Secondary accent \#0085CA - Dark \#03173E - Site background \#FFFFFF ## Type Headings Archivo · closest free match for Mark Parallon at a glance Body Archivo · closest free match for Mark Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxParallon - 2.5rem · 40pxParallon - 2rem · 32pxParallon - 28pxParallon - 1.5rem · 24pxParallon - 21pxParallon - 1.25rem · 20pxParallon - 1rem · 16pxParallon ## Shape & depth Cards and panels: 5px corners · buttons and chips: 5px. ### Corner radii - 5px used in 19 rules - 9999px used in 12 rules - 50% used in 9 rules - 2px used in 6 rules - 0.25rem used in 3 rules - 100% used in 2 rules - 4px used in 1 rule ### Shadows - 0 0 0 0.125em rgba(224, 89, 41, 0.25) used in 9 rules - 0 0 0 0.125em rgba(0, 133, 202, 0.25) used in 8 rules - 0 0.5em 1em -0.125em rgba(25, 25, 25, 0.1), 0 0px 0 1px rgba(25, 25, 25, 0.02) used in 5 rules - 0 0 0 0.125em rgba(255, 255, 255, 0.25) used in 3 rules - 0 0 0 0.125em rgba(25, 25, 25, 0.25) used in 3 rules - 0 0 0 0.125em rgba(245, 245, 245, 0.25) used in 3 rules ### Gradients - linear-gradient(141deg, rgb(197.6224489796, 33.7097133936, 16.3775510204) 0%, #E05929 71%, rgb(232.7140306122, 132.8234164157, 57.7859693878) 100%) used in 6 rules - linear-gradient(141deg, rgb(0, 124.5874587459, 151) 0%, #0085CA 71%, rgb(0, 111.8729372937, 227.5) 100%) used in 4 rules - linear-gradient(to right, #E05929 30%, hsl(0, 0%, 93%) 30%) used in 3 rules - linear-gradient(to right, #0085CA 30%, hsl(0, 0%, 93%) 30%) used in 2 rules - linear-gradient(to right, #58595A 30%, hsl(0, 0%, 93%) 30%) used in 2 rules - linear-gradient(141deg, rgb(229.5, 229.5, 229.5) 0%, #FFFFFF 71%, white 100%) used in 2 rules Breakpoints: 600px · 768px · 769px · 1023px · 1024px · 1215px · 1216px · 1407px · 1408px ## 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%2F100118.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Parallon" domain: "parallon.com" colors: primary: "#E05929" onPrimary: "#000000" dark: "#03173E" accent: "#0085CA" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#03173E" accent: "#CE4913" fonts: heading: "Archivo" body: "Archivo" radius: card: "5px" button: "5px" --- # Design System — Parallon > Read from Parallon's public website (parallon.com) by Clinical Terminal. Not reviewed by Parallon. > Use it as inspiration: borrow the ideas, not Parallon's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Parallon's site background #FFFFFF. Pages and panels sit on it. - Main text: #03173E (17.56:1 on the ground). - Secondary text is #03173E at 88% / 76% / 60%; hairlines and plate borders #03173E at 16%. ## Color - **Accent on the ground: #CE4913** (4.58:1), adjusted from Parallon's primary #E05929 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #E05929** for filled shapes (buttons, chips, bars), with #000000 text on it (5.63:1). - Secondary accent #0085CA: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Parallon's site uses Mark / Mark; these are the closest free look-alikes. ## Shape - Cards and panels: 5px corners. Buttons and chips: 5px. ## Voice - Tone: professional. Energy: medium. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Typefaces - Mark - monospace !important ### Type scale (most-used sizes) `3rem` · `2.5rem` · `2rem` · `28px` · `1.5rem` · `21px` · `1.25rem` · `1rem` · `14px` · `0.875rem` · `0.75rem` · `0.65625rem` ### Letter-spacing `1px` (1) · `0.1em` (1) ### Corner radii (most-used) `5px` · `9999px` · `50%` · `2px` · `0.25rem` · `100%` · `4px` ### Shadows - `0 0 0 0.125em rgba(224, 89, 41, 0.25)` - `0 0 0 0.125em rgba(0, 133, 202, 0.25)` - `0 0.5em 1em -0.125em rgba(25, 25, 25, 0.1), 0 0px 0 1px rgba(25, 25, 25, 0.02)` - `0 0 0 0.125em rgba(255, 255, 255, 0.25)` - `0 0 0 0.125em rgba(25, 25, 25, 0.25)` - `0 0 0 0.125em rgba(245, 245, 245, 0.25)` ### Gradients - `linear-gradient(141deg, rgb(197.6224489796, 33.7097133936, 16.3775510204) 0%, #E05929 71%, rgb(232.7140306122, 132.8234164157, 57.7859693878) 100%)` - `linear-gradient(141deg, rgb(0, 124.5874587459, 151) 0%, #0085CA 71%, rgb(0, 111.8729372937, 227.5) 100%)` - `linear-gradient(to right, #E05929 30%, hsl(0, 0%, 93%) 30%)` - `linear-gradient(to right, #0085CA 30%, hsl(0, 0%, 93%) 30%)` - `linear-gradient(to right, #58595A 30%, hsl(0, 0%, 93%) 30%)` - `linear-gradient(141deg, rgb(229.5, 229.5, 229.5) 0%, #FFFFFF 71%, white 100%)` ### Breakpoints 600px · 768px · 769px · 1023px · 1024px · 1215px · 1216px · 1407px · 1408px ```