[Design systems](/design-systems/) / Axuall # Axuall design system axuall.com Read from Axuall's public website by Clinical Terminal. Not reviewed by Axuall. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Axuall logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100009230.png?alt=media) ## Palette - Ground \#FFFFFF \--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2 - Ink \#5847B1 - Accent on the ground \#755EEC - Primary \#755EEC \--token-40d2a9ee-026d-4e83-a2e4-e0e0bcea8ef9 - On primary \#FFFFFF \--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2 - Dark \#5847B1 \--token-8f8dc9f2-7bc1-40d4-b853-c8714560cf9c - Site background \#FFFFFF \--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2 ## Other named colors - \--token-6a4c20cd-b2aa-4518-9ba5-a317fd22f556 #767676 - \--token-6afad4ef-4f81-4866-8b36-f90afb609b0e #282829 - \--token-8f8dc9f2-7bc1-40d4-b853-c8714560cf9c #5847B1 - \--token-0c733b85-0f3c-4608-88d6-a26c99294064 #EBEBEB - \--token-cb7ab437-9b40-49c0-be09-99738286f555 #FBFBFB - \--token-384c9150-b0de-49cd-86b3-355e86786bae #00A5AE - \--token-94ae4360-52c9-4db1-b94f-1bfc2d9c40f4 #FF9E1B - \--token-d32ee9cf-0e12-4b06-965a-09bc9afebc3a #FF5151 - \--token-09e08b46-484d-4957-a18d-d3234571caa5 #EF3340 - \--token-fd0504ab-1658-4094-b01b-03fb2be7a937 #BF2933 - \--token-4d98d9c9-e837-4a0b-9b0a-21fd30db5295 #FFC658 - \--token-88a7d11b-d85e-4e79-b770-57e3d6a32dc5 #E8B450 - \--token-d590ca93-6e32-446c-9d82-1c56ad0af56f #1AC678 - \--token-5737bd5c-325d-4af0-9c32-d50acfe5cc1a #128D55 - \--token-0031668e-19de-41bf-95e7-0c68e0762278 #1E88E5 - \--token-dbe3ab5f-350e-4aee-86f9-87bd2af39a0c #3A74B8 - \--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2 #FFFFFF - \--token-37b3a6c8-27ef-464c-876c-cec6c98f3ccf #F0F0F0 - \--token-47c35c16-4555-453f-8f8a-e85354c5c567 #292153 - \--token-40d2a9ee-026d-4e83-a2e4-e0e0bcea8ef9 #755EEC - \--token-f7d9502f-0b4a-4dc1-9e33-ecd39f4a6ac3 #F1EFFD - \--token-3c43e087-adfc-4466-8945-2f52a403e9ae #B59AFF - \--token-1ef9e3a0-a7df-44ca-bec3-2c6070b20405 #FFFFFF - \--token-bfafb4ac-ba8a-4bd0-a2da-5f8ec6eb534b #68CC58 - \--token-9b9340e7-7d5e-4793-a4dd-fdfbc2aa3821 #8FC7C9 - \--token-d1979f86-6fd6-41d7-8c0a-3cd69dbe46ab #F5F6F8 - \--token-3ec989df-9786-408c-b056-9bd73dfe62d2 #1E1E1E - \--token-5d8d4ac2-5db4-4a42-90be-3419bbc266da #4B4B4B ## Type Headings Inter Axuall at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 32pxAxuall - 22pxAxuall - 16pxAxuall - 14pxAxuall - 12pxAxuall ## Shape & depth Cards and panels: 10px corners · buttons and chips: 99px. ### Corner radii - 10px used in 6 rules - 16px used in 3 rules - 8px used in 1 rule - 30px used in 1 rule ### Shadows - 0 .602187px .602187px -1.25px #0000002e,0 2.28853px 2.28853px -2.5px #00000029,0 10px 10px -3.75px #0000000f used in 2 rules Breakpoints: 810px · 1200px ## Voice Tone: professional. Energy: low. Written for patients and healthcare professionals. ## 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%2F100009230.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Axuall" domain: "axuall.com" colors: primary: "#755EEC" onPrimary: "#FFFFFF" dark: "#5847B1" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#5847B1" accent: "#755EEC" fonts: heading: "Inter" body: "Inter" radius: card: "10px" button: "99px" --- # Design System — Axuall > Read from Axuall's public website (axuall.com) by Clinical Terminal. Not reviewed by Axuall. > Use it as inspiration: borrow the ideas, not Axuall's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Axuall's site background #FFFFFF. Pages and panels sit on it. - Main text: #5847B1 (7.12:1 on the ground). - Secondary text is #5847B1 at 88% / 76% / 60%; hairlines and plate borders #5847B1 at 16%. ## Color - **Accent on the ground: #755EEC** (4.6:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #755EEC** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.6:1). - Quote every hex exactly as written above. ## Type - Headlines: **Inter**. Body: **Inter**. Both on Google Fonts. ## Shape - Cards and panels: 10px corners. Buttons and chips: 99px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--token-6a4c20cd-b2aa-4518-9ba5-a317fd22f556`: `#767676` - `--token-6afad4ef-4f81-4866-8b36-f90afb609b0e`: `#282829` - `--token-8f8dc9f2-7bc1-40d4-b853-c8714560cf9c`: `#5847B1` - `--token-0c733b85-0f3c-4608-88d6-a26c99294064`: `#EBEBEB` - `--token-cb7ab437-9b40-49c0-be09-99738286f555`: `#FBFBFB` - `--token-384c9150-b0de-49cd-86b3-355e86786bae`: `#00A5AE` - `--token-94ae4360-52c9-4db1-b94f-1bfc2d9c40f4`: `#FF9E1B` - `--token-d32ee9cf-0e12-4b06-965a-09bc9afebc3a`: `#FF5151` - `--token-09e08b46-484d-4957-a18d-d3234571caa5`: `#EF3340` - `--token-fd0504ab-1658-4094-b01b-03fb2be7a937`: `#BF2933` - `--token-4d98d9c9-e837-4a0b-9b0a-21fd30db5295`: `#FFC658` - `--token-88a7d11b-d85e-4e79-b770-57e3d6a32dc5`: `#E8B450` - `--token-d590ca93-6e32-446c-9d82-1c56ad0af56f`: `#1AC678` - `--token-5737bd5c-325d-4af0-9c32-d50acfe5cc1a`: `#128D55` - `--token-0031668e-19de-41bf-95e7-0c68e0762278`: `#1E88E5` - `--token-dbe3ab5f-350e-4aee-86f9-87bd2af39a0c`: `#3A74B8` - `--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2`: `#FFFFFF` - `--token-37b3a6c8-27ef-464c-876c-cec6c98f3ccf`: `#F0F0F0` - `--token-47c35c16-4555-453f-8f8a-e85354c5c567`: `#292153` - `--token-40d2a9ee-026d-4e83-a2e4-e0e0bcea8ef9`: `#755EEC` - `--token-f7d9502f-0b4a-4dc1-9e33-ecd39f4a6ac3`: `#F1EFFD` - `--token-3c43e087-adfc-4466-8945-2f52a403e9ae`: `#B59AFF` - `--token-1ef9e3a0-a7df-44ca-bec3-2c6070b20405`: `#FFFFFF` - `--token-bfafb4ac-ba8a-4bd0-a2da-5f8ec6eb534b`: `#68CC58` - `--token-9b9340e7-7d5e-4793-a4dd-fdfbc2aa3821`: `#8FC7C9` - `--token-d1979f86-6fd6-41d7-8c0a-3cd69dbe46ab`: `#F5F6F8` - `--token-3ec989df-9786-408c-b056-9bd73dfe62d2`: `#1E1E1E` - `--token-5d8d4ac2-5db4-4a42-90be-3419bbc266da`: `#4B4B4B` ### Typefaces - Inter — on Google Fonts - Inter Variable - Fragment Mono - Switzer - Inter Placeholder - Inter Variable Placeholder - Switzer Placeholder ### Type scale (most-used sizes) `32px` · `22px` · `16px` · `14px` · `12px` ### Letter-spacing `-.04em` (3) · `-.02em` (1) ### Corner radii (most-used) `10px` · `16px` · `8px` · `30px` ### Shadows - `0 .602187px .602187px -1.25px #0000002e,0 2.28853px 2.28853px -2.5px #00000029,0 10px 10px -3.75px #0000000f` ### Breakpoints 810px · 1200px ```