[Design systems](/design-systems/) / Iodine Software # Iodine Software design system iodinesoftware.com Read from Iodine Software's public website by Clinical Terminal. Not reviewed by Iodine Software. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Iodine Software homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100043.jpg?alt=media) ## Palette - Ground \#FFFFFF \--light - Ink \#000000 - Accent on the ground \#D44000 - Primary \#FF6900 \--quiz-2 - On primary \#000000 - Dark \#000000 - Site background \#FFFFFF \--light ## Color ramps Quiz 1 \#BE141B 2 \#FF6900 3 \#009CDC 4 \#84C661 ## Other named colors - \--blue #009CDC - \--indigo #A82E82 - \--purple #A82E82 - \--pink #A82E82 - \--red #BE141B - \--orange #FF6900 - \--yellow #FCB415 - \--green #84C661 - \--teal #00B5AF - \--cyan #00B5AF - \--gray #ADB5BD - \--gray-dark #343A40 - \--slate #4C5966 - \--gray-bg #647484 - \--gray-light #DEE2E6 - \--primary #FF6900 - \--secondary #4C5966 - \--success #84C661 - \--info #00B5AF - \--warning #FCB415 - \--danger #BE141B - \--light #FFFFFF - \--dark #4C5966 - \--white #FFFFFF - \--orange-light #FFF5ED - \--green-light #F1F9EE - \--blue-light #EBF7FD - \--purple-light #FDEFF9 - \--slate-light #F1F2F3 - \--nav-color #FFFFFF - \--fob-color #D8DDE1 - \--page-theme-color-alt2 #614B8E ## Type Headings Montserrat Iodine Software at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.5rem · 40pxIodine Software - 36pxIodine Software - 2rem · 32pxIodine Software - 1.75rem · 28pxIodine Software - 1.5rem · 24pxIodine Software - 1.25rem · 20pxIodine Software - 18pxIodine Software - 1rem · 16pxIodine Software ## Shape & depth Cards and panels: 0px corners · buttons and chips: 0px. ### Corner radii - 50% used in 45 rules - 40px used in 22 rules - 1rem used in 11 rules - 20px used in 11 rules - 10px used in 8 rules - 30px used in 5 rules - 9999rem used in 4 rules - 3px used in 3 rules - .25rem used in 3 rules - 1.5rem used in 3 rules ### Shadows - inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075) used in 19 rules - none!important used in 17 rules - 0 0 1rem 0 #a82e82 used in 6 rules - 0 0 0 .2rem rgba(255,105,0,.25) used in 4 rules - 0 0 0 .2rem rgba(132,198,97,.25) used in 4 rules - 0 0 0 .2rem rgba(190,20,27,.25) used in 4 rules ### Gradients - linear-gradient(135deg,rgb(255,150,76.5) 16.67%,#ff6900 0,#ff6900 50%,rgb(255,150,76.5) 0,rgb(255,150,76.5) 66.67%,#ff6900 0,#ff6900) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#ff6900 0,rgb(127.5,52.5,0) 100%) used in 2 rules - linear-gradient(135deg,rgb(108.6629213483,127.25,145.8370786517) 16.67%,#4c5966 0,#4c5966 50%,rgb(108.6629213483,127.25,145.8370786517) 0,rgb(108.6629213483,127.25,145.8370786517) 66.67%,#4c5966 0,#4c5966) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#4c5966 0,rgb(21.5617977528,25.25,28.9382022472) 100%) used in 2 rules - linear-gradient(135deg,rgb(175.7651162791,218.2813953488,153.2186046512) 16.67%,#84c661 0,#84c661 50%,rgb(175.7651162791,218.2813953488,153.2186046512) 0,rgb(175.7651162791,218.2813953488,153.2186046512) 66.67%,#84c661 0,#84c661) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#84c661 0,rgb(71.6744186047,123.0930232558,44.4069767442) 100%) used in 2 rules Breakpoints: 350px · 374px · 390px · 400px · 480px · 576px · 639px · 640px · 767px · 768px · 959px · 960px ## Voice Tone: professional. Energy: high. 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%2F100043.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Iodine Software" domain: "iodinesoftware.com" colors: primary: "#FF6900" onPrimary: "#000000" dark: "#000000" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#D44000" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "0px" button: "0px" --- # Design System — Iodine Software > Read from Iodine Software's public website (iodinesoftware.com) by Clinical Terminal. Not reviewed by Iodine Software. > Use it as inspiration: borrow the ideas, not Iodine Software's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Iodine Software's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #D44000** (4.63:1), adjusted from Iodine Software's primary #FF6900 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #FF6900** for filled shapes (buttons, chips, bars), with #000000 text on it (7.27:1). - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts. ## Shape - Cards and panels: 0px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Quiz** (`--quiz-N`): 1 `#BE141B` · 2 `#FF6900` · 3 `#009CDC` · 4 `#84C661` ### Other named colors - `--blue`: `#009CDC` - `--indigo`: `#A82E82` - `--purple`: `#A82E82` - `--pink`: `#A82E82` - `--red`: `#BE141B` - `--orange`: `#FF6900` - `--yellow`: `#FCB415` - `--green`: `#84C661` - `--teal`: `#00B5AF` - `--cyan`: `#00B5AF` - `--gray`: `#ADB5BD` - `--gray-dark`: `#343A40` - `--slate`: `#4C5966` - `--gray-bg`: `#647484` - `--gray-light`: `#DEE2E6` - `--primary`: `#FF6900` - `--secondary`: `#4C5966` - `--success`: `#84C661` - `--info`: `#00B5AF` - `--warning`: `#FCB415` - `--danger`: `#BE141B` - `--light`: `#FFFFFF` - `--dark`: `#4C5966` - `--white`: `#FFFFFF` - `--orange-light`: `#FFF5ED` - `--green-light`: `#F1F9EE` - `--blue-light`: `#EBF7FD` - `--purple-light`: `#FDEFF9` - `--slate-light`: `#F1F2F3` - `--nav-color`: `#FFFFFF` - `--fob-color`: `#D8DDE1` - `--page-theme-color-alt2`: `#614B8E` ### Typefaces - SFMono-Regular (`--font-family-monospace`) - Montserrat — on Google Fonts - Perpetua Titling ### Type scale (most-used sizes) `2.5rem` · `36px` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `18px` · `1rem` · `.9rem` · `14px` · `.75rem` · `12px` ### Letter-spacing `3px` (5) · `2px` (5) · `-4px` (3) · `6px` (2) · `.3rem` (1) · `.25rem` (1) ### Corner radii (most-used) `50%` · `40px` · `1rem` · `20px` · `10px` · `30px` · `9999rem` · `3px` · `.25rem` · `1.5rem` ### Shadows - `inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075)` - `none!important` - `0 0 1rem 0 #a82e82` - `0 0 0 .2rem rgba(255,105,0,.25)` - `0 0 0 .2rem rgba(132,198,97,.25)` - `0 0 0 .2rem rgba(190,20,27,.25)` ### Gradients - `linear-gradient(135deg,rgb(255,150,76.5) 16.67%,#ff6900 0,#ff6900 50%,rgb(255,150,76.5) 0,rgb(255,150,76.5) 66.67%,#ff6900 0,#ff6900)` - `radial-gradient(farthest-corner at 40px 40px,#ff6900 0,rgb(127.5,52.5,0) 100%)` - `linear-gradient(135deg,rgb(108.6629213483,127.25,145.8370786517) 16.67%,#4c5966 0,#4c5966 50%,rgb(108.6629213483,127.25,145.8370786517) 0,rgb(108.6629213483,127.25,145.8370786517) 66.67%,#4c5966 0,#4c5966)` - `radial-gradient(farthest-corner at 40px 40px,#4c5966 0,rgb(21.5617977528,25.25,28.9382022472) 100%)` - `linear-gradient(135deg,rgb(175.7651162791,218.2813953488,153.2186046512) 16.67%,#84c661 0,#84c661 50%,rgb(175.7651162791,218.2813953488,153.2186046512) 0,rgb(175.7651162791,218.2813953488,153.2186046512) 66.67%,#84c661 0,#84c661)` - `radial-gradient(farthest-corner at 40px 40px,#84c661 0,rgb(71.6744186047,123.0930232558,44.4069767442) 100%)` ### Breakpoints 350px · 374px · 390px · 400px · 480px · 576px · 639px · 640px · 767px · 768px · 959px · 960px · 962px · 972px · 991px · 992px · 1024px · 1199px · 1200px · 1220px · 1340px · 1366px · 1440px · 1450px · 1490px · 1528px · 2300px ```