[Design systems](/design-systems/) / Droidal # Droidal design system droidal.com Read from Droidal's public website by Clinical Terminal. Not reviewed by Droidal. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Droidal homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923696.jpg?alt=media) ## Palette - Ground \#FFFFFF \--droidal-white - Ink \#242424 - Accent on the ground \#007ABB - Primary \#009FE3 \--droidal-blue - On primary \#000000 \--droidal-black - Dark \#242424 - Site background \#FFFFFF \--droidal-white ## Other named colors - \--e-global-color-primary #6EC1E4 - \--e-global-color-secondary #54595F - \--e-global-color-text #7A7A7A - \--e-global-color-accent #61CE70 - \--droidal-blue #009FE3 - \--droidal-white #FFFFFF - \--droidal-black #000000 - \--droidal-near-black #0E0E0E - \--drd-bg #000000 - \--drd-text #FFFFFF - \--drd-blue #009FE3 - \--drd-accent-from #00BBF2 - \--drd-accent-to #01536C - \--drd-hairline #FFFFFF - \--drd-tile-bg #FFFFFF - \--drd-tile-bg-hover #FFFFFF ## Type Headings Archivo · closest free match for Asen Pro Droidal at a glance Body Archivo · closest free match for Asen Pro Clear, readable paragraphs for clinicians, buyers and patients alike. - 20pxDroidal - 18pxDroidal - 17pxDroidal - 16pxDroidal - 15pxDroidal - 14pxDroidal - 13pxDroidal - 12pxDroidal ## Shape & depth Cards and panels: 6px corners · buttons and chips: 999px. ### Corner radii - 999px used in 23 rules - 50% used in 11 rules - 16px used in 9 rules - 14px used in 9 rules - 12px used in 8 rules - 8px used in 8 rules - 20px used in 6 rules - 3px used in 5 rules - 18px used in 5 rules - 13px used in 4 rules ### Shadows - none !important used in 15 rules - 0 24px 60px rgba(0,0,0,.48) !important used in 4 rules - 1px 1px 4px rgba(0,0,0,.2) used in 3 rules - 0 0 1px 0 #888 used in 3 rules - 0 18px 44px rgba(0,0,0,.42) used in 2 rules - inset 0 0 12px rgba(255,255,255,.18) used in 2 rules ### Gradients - linear-gradient(180deg,#01536c 0%,#00bbf2 100%) used in 5 rules - linear-gradient(180deg,rgba(0,0,0,.22) 0%,#000 100%) used in 2 rules - linear-gradient(180deg,#009fe3 0%,#009fe3 100%) used in 2 rules - linear-gradient(90deg,#009fe3 0%,#009fe3 34%,#ff86e9 62%,#009fe3 100%) used in 2 rules - linear-gradient(180deg,#009fe3 0%,#009fe3 50%,#f486ff 100%) used in 2 rules - linear-gradient(180deg,#009fe3 0%,#009fe3 50%,#fff 100%) used in 2 rules Breakpoints: 360px · 420px · 430px · 479px · 480px · 500px · 560px · 600px · 767px · 768px · 782px · 991px ## Voice Tone: professional. Energy: medium. 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%2F100923696.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Droidal" domain: "droidal.com" colors: primary: "#009FE3" onPrimary: "#000000" dark: "#242424" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#242424" accent: "#007ABB" fonts: heading: "Archivo" body: "Archivo" radius: card: "6px" button: "999px" --- # Design System — Droidal > Read from Droidal's public website (droidal.com) by Clinical Terminal. Not reviewed by Droidal. > Use it as inspiration: borrow the ideas, not Droidal's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Droidal's site background #FFFFFF. Pages and panels sit on it. - Main text: #242424 (15.52:1 on the ground). - Secondary text is #242424 at 88% / 76% / 60%; hairlines and plate borders #242424 at 16%. ## Color - **Accent on the ground: #007ABB** (4.67:1), adjusted from Droidal's primary #009FE3 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #009FE3** for filled shapes (buttons, chips, bars), with #000000 text on it (7.07:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Droidal's site uses Asen Pro / Asen Pro; these are the closest free look-alikes. ## Shape - Cards and panels: 6px corners. Buttons and chips: 999px. ## Voice - Tone: professional. Energy: medium. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--e-global-color-primary`: `#6EC1E4` - `--e-global-color-secondary`: `#54595F` - `--e-global-color-text`: `#7A7A7A` - `--e-global-color-accent`: `#61CE70` - `--droidal-blue`: `#009FE3` - `--droidal-white`: `#FFFFFF` - `--droidal-black`: `#000000` - `--droidal-near-black`: `#0E0E0E` - `--drd-bg`: `#000000` - `--drd-text`: `#FFFFFF` - `--drd-blue`: `#009FE3` - `--drd-accent-from`: `#00BBF2` - `--drd-accent-to`: `#01536C` - `--drd-hairline`: `#FFFFFF` - `--drd-tile-bg`: `#FFFFFF` - `--drd-tile-bg-hover`: `#FFFFFF` ### Typefaces - Roboto (`--e-global-typography-primary-font-family`) — on Google Fonts - Roboto Slab (`--e-global-typography-secondary-font-family`) — on Google Fonts - Asen Pro (`--droidal-font-primary`) - inherit !important - Poppins — on Google Fonts ### Type scale (most-used sizes) `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px` · `9px` · `8px` ### Letter-spacing `1px` (11) · `1.2px` (10) · `1.6px` (9) · `.34em` (9) · `2.5px` (7) · `.38em` (7) ### Corner radii (most-used) `999px` · `50%` · `16px` · `14px` · `12px` · `8px` · `20px` · `3px` · `18px` · `13px` ### Shadows - `none !important` - `0 24px 60px rgba(0,0,0,.48) !important` - `1px 1px 4px rgba(0,0,0,.2)` - `0 0 1px 0 #888` - `0 18px 44px rgba(0,0,0,.42)` - `inset 0 0 12px rgba(255,255,255,.18)` ### Gradients - `linear-gradient(180deg,#01536c 0%,#00bbf2 100%)` - `linear-gradient(180deg,rgba(0,0,0,.22) 0%,#000 100%)` - `linear-gradient(180deg,#009fe3 0%,#009fe3 100%)` - `linear-gradient(90deg,#009fe3 0%,#009fe3 34%,#ff86e9 62%,#009fe3 100%)` - `linear-gradient(180deg,#009fe3 0%,#009fe3 50%,#f486ff 100%)` - `linear-gradient(180deg,#009fe3 0%,#009fe3 50%,#fff 100%)` ### Breakpoints 360px · 420px · 430px · 479px · 480px · 500px · 560px · 600px · 767px · 768px · 782px · 991px · 992px · 1024px · 1025px · 1180px · 1181px · 1200px · 1366px · 1367px · 1400px · 1440px · 1600px ```