AKASA design system
akasa.com
Read from AKASA's public website by Clinical Terminal. Not reviewed by AKASA. Copy it and paste it into Claude as inspiration.
Corrections or removal: agent@clinicalterminal.com
Palette
- Ground#FFFFFF--token-e65d3206-e962-4815-ada9-65e1c1cb8004
- Ink#1D334D
- Accent on the ground#1D334D
- Primary#1D334D--token-70271ca8-2e0e-4797-baf8-3f3159963f93
- On primary#FFFFFF--token-e65d3206-e962-4815-ada9-65e1c1cb8004
- Secondary accent#E7314E--token-cdb00753-17e7-442a-b865-e59c52778b64
- Dark#1D334D--token-70271ca8-2e0e-4797-baf8-3f3159963f93
- Site background#FFFFFF--token-e65d3206-e962-4815-ada9-65e1c1cb8004
Other named colors
- --token-70271ca8-2e0e-4797-baf8-3f3159963f93 #1D334D
- --token-cdb00753-17e7-442a-b865-e59c52778b64 #E7314E
- --token-991d9116-a9e4-481a-a0e4-456a232b4e79 #86D9E9
- --token-45e03799-a415-448f-928f-df21a72c514e #00B5C2
- --token-7e2b1952-2625-4a68-bb7a-e341a0faef9e #7C909B
- --token-c7af658e-82c3-4303-a3ff-d769483cb2a1 #4A5ECC
- --token-194c10c3-0c05-47c8-8430-53f28ce7806f #FF9661
- --token-7b05bbe7-13fe-47fd-aead-4eb6eaba8b4f #B8D982
- --token-0faeb179-4845-4210-9864-ec5746d8ebb4 #000000
- --token-d106202b-bc1b-4bf7-b26e-f3930c194656 #F0F0F0
- --token-e65d3206-e962-4815-ada9-65e1c1cb8004 #FFFFFF
- --token-0732798b-df5b-4142-aebe-adad2a3fc07e #8ED1FC
- --token-6db12fdb-335e-4b7b-89c5-69559bef4e92 #FFFFFF
- --token-acab95db-3870-4e42-8284-819df70e63f8 #E94B5A
- --token-f0490ee5-9012-4e0f-b6ae-781196e07319 #EF6197
Type
Headings
Montserrat
AKASA at a glance
Body
Montserrat
Clear, readable paragraphs for clinicians, buyers and patients alike.
- 48pxAKASA
- 38pxAKASA
- 31pxAKASA
- 16pxAKASA
- 12pxAKASA
Shape & depth
Cards and panels: 9px corners · buttons and chips: 9px.
Corner radii
- 10pxused in 6 rules
- 100%used in 3 rules
- 14pxused in 1 rule
- 4pxused in 1 rule
- 26pxused in 1 rule
- 8pxused in 1 rule
Shadows
- 0 .636954px .636954px -.9375px #0000001c,0 1.9316px 1.9316px -1.875px #0000001a,0 5.10612px 5.10612px -2.8125px #00000017,0 16px 16px -3.75px #0000000aused in 1 rule
- inset 0 1px #ffffff29used in 1 rule
- 3px 3px 45px #0000001cused in 1 rule
- 4px 4px 45px #0000001cused in 1 rule
- -1px 1px 15px #00000040used in 1 rule
Breakpoints: 809px · 810px · 1199px · 1200px
Voice
Tone: bold. Energy: high. Written for businesses.
DESIGN.md
The file Copy design system puts on your clipboard. Open the raw file.
--- generator: clinical-terminal-brand-kit company: "AKASA" domain: "akasa.com" colors: primary: "#1D334D" onPrimary: "#FFFFFF" dark: "#1D334D" accent: "#E7314E" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#1D334D" accent: "#1D334D" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "9px" button: "9px" --- # Design System — AKASA > Read from AKASA's public website (akasa.com) by Clinical Terminal. Not reviewed by AKASA. > Use it as inspiration: borrow the ideas, not AKASA's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from AKASA's site background #FFFFFF. Pages and panels sit on it. - Main text: #1D334D (12.86:1 on the ground). - Secondary text is #1D334D at 88% / 76% / 60%; hairlines and plate borders #1D334D at 16%. ## Color - **Accent on the ground: #1D334D** (12.86:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1D334D** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.86:1). - Secondary accent #E7314E: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts. ## Shape - Cards and panels: 9px corners. Buttons and chips: 9px. ## Voice - Tone: bold. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--token-70271ca8-2e0e-4797-baf8-3f3159963f93`: `#1D334D` - `--token-cdb00753-17e7-442a-b865-e59c52778b64`: `#E7314E` - `--token-991d9116-a9e4-481a-a0e4-456a232b4e79`: `#86D9E9` - `--token-45e03799-a415-448f-928f-df21a72c514e`: `#00B5C2` - `--token-7e2b1952-2625-4a68-bb7a-e341a0faef9e`: `#7C909B` - `--token-c7af658e-82c3-4303-a3ff-d769483cb2a1`: `#4A5ECC` - `--token-194c10c3-0c05-47c8-8430-53f28ce7806f`: `#FF9661` - `--token-7b05bbe7-13fe-47fd-aead-4eb6eaba8b4f`: `#B8D982` - `--token-0faeb179-4845-4210-9864-ec5746d8ebb4`: `#000000` - `--token-d106202b-bc1b-4bf7-b26e-f3930c194656`: `#F0F0F0` - `--token-e65d3206-e962-4815-ada9-65e1c1cb8004`: `#FFFFFF` - `--token-0732798b-df5b-4142-aebe-adad2a3fc07e`: `#8ED1FC` - `--token-6db12fdb-335e-4b7b-89c5-69559bef4e92`: `#FFFFFF` - `--token-acab95db-3870-4e42-8284-819df70e63f8`: `#E94B5A` - `--token-f0490ee5-9012-4e0f-b6ae-781196e07319`: `#EF6197` ### Typefaces - Inter — on Google Fonts - Montserrat — on Google Fonts - Zilla Slab - Fragment Mono - Montserrat Placeholder - Montserrat Bold - Montserrat SemiBold - Montserrat Medium ### Type scale (most-used sizes) `48px` · `38px` · `31px` · `16px` · `12px` ### Letter-spacing `.01em` (3) ### Corner radii (most-used) `10px` · `100%` · `14px` · `4px` · `26px` · `8px` ### Shadows - `0 .636954px .636954px -.9375px #0000001c,0 1.9316px 1.9316px -1.875px #0000001a,0 5.10612px 5.10612px -2.8125px #00000017,0 16px 16px -3.75px #0000000a` - `inset 0 1px #ffffff29` - `3px 3px 45px #0000001c` - `4px 4px 45px #0000001c` - `-1px 1px 15px #00000040` ### Breakpoints 809px · 810px · 1199px · 1200px