[Design systems](/design-systems/) / Sunknowledge Services Inc. # Sunknowledge Services Inc. design system sunknowledge.com Read from Sunknowledge Services Inc.'s public website by Clinical Terminal. Not reviewed by Sunknowledge Services Inc.. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Sunknowledge Services Inc. homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923899.jpg?alt=media) ## Palette - Ground \#FFFFFF \--akismet-color-white - Ink \#222222 - Accent on the ground \#A86500 - Primary \#FBB315 - On primary \#000000 - Secondary accent \#FBB316 - Dark \#222222 - Site background \#FFFFFF \--akismet-color-white ## Other named colors - \--akismet-color-mid-green #357B49 - \--akismet-color-white #FFFFFF - \--akismet-color-light-grey #F6F7F7 ## Type Headings Montserrat Sunknowledge Services Inc. at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 30pxSunknowledge Services Inc. - 24pxSunknowledge Services Inc. - 20pxSunknowledge Services Inc. - 18pxSunknowledge Services Inc. - 17pxSunknowledge Services Inc. - 16pxSunknowledge Services Inc. - 15pxSunknowledge Services Inc. - 14pxSunknowledge Services Inc. ## Shape & depth Cards and panels: 4px corners · buttons and chips: 3px. ### Corner radii - 50% used in 90 rules - 4px used in 65 rules - 3px used in 62 rules - 2px used in 36 rules - 100% used in 23 rules - 5px used in 21 rules - 6px used in 21 rules - 10px used in 16 rules - 50px used in 14 rules - 1px used in 14 rules ### Shadows - inset 0 1px 1px rgba(0,0,0,0.075) used in 16 rules - none!important used in 12 rules - none !important used in 8 rules - 0 0 5px rgba(0,0,0,.1) used in 8 rules - inset 0 3px 5px rgba(0,0,0,0.125) used in 8 rules - 0 1px 3px rgba(0,0,0,.15) used in 8 rules ### Gradients - linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent) used in 30 rules - linear-gradient(top,#fff 0%,#c4c4c4 100%) used in 4 rules - linear-gradient(top,#fff 0%,#b8b8b8 100%) used in 4 rules - linear-gradient(top,#fff 0%,#dedede 100%) used in 4 rules - linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) used in 4 rules - linear-gradient(to right,rgba(66,10,14,.2),transparent) used in 4 rules Breakpoints: 320px · 380px · 400px · 414px · 419px · 424px · 425px · 430px · 469px · 474px · 480px · 500px ## Voice Tone: professional. Energy: low. 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%2F100923899.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Sunknowledge Services Inc." domain: "sunknowledge.com" colors: primary: "#FBB315" onPrimary: "#000000" dark: "#222222" accent: "#FBB316" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#222222" accent: "#A86500" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "4px" button: "3px" --- # Design System — Sunknowledge Services Inc. > Read from Sunknowledge Services Inc.'s public website (sunknowledge.com) by Clinical Terminal. Not reviewed by Sunknowledge Services Inc.. > Use it as inspiration: borrow the ideas, not Sunknowledge Services Inc.'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Sunknowledge Services Inc.'s site background #FFFFFF. Pages and panels sit on it. - Main text: #222222 (15.91:1 on the ground). - Secondary text is #222222 at 88% / 76% / 60%; hairlines and plate borders #222222 at 16%. ## Color - **Accent on the ground: #A86500** (4.64:1), adjusted from Sunknowledge Services Inc.'s primary #FBB315 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #FBB315** for filled shapes (buttons, chips, bars), with #000000 text on it (11.56:1). - Secondary accent #FBB316: 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: 4px corners. Buttons and chips: 3px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--akismet-color-mid-green`: `#357B49` - `--akismet-color-white`: `#FFFFFF` - `--akismet-color-light-grey`: `#F6F7F7` ### Typefaces - stm - stm!important - Montserrat — on Google Fonts - vc_grid_v1 - inherit !important - Open Sans — on Google Fonts - star - Poppins — on Google Fonts ### Type scale (most-used sizes) `30px` · `24px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px` ### Letter-spacing `-.04em` (40) · `-.4px` (16) · `-.5px` (6) · `-.7px` (6) · `-.3px` (6) · `2px` (4) ### Corner radii (most-used) `50%` · `4px` · `3px` · `2px` · `100%` · `5px` · `6px` · `10px` · `50px` · `1px` ### Shadows - `inset 0 1px 1px rgba(0,0,0,0.075)` - `none!important` - `none !important` - `0 0 5px rgba(0,0,0,.1)` - `inset 0 3px 5px rgba(0,0,0,0.125)` - `0 1px 3px rgba(0,0,0,.15)` ### Gradients - `linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)` - `linear-gradient(top,#fff 0%,#c4c4c4 100%)` - `linear-gradient(top,#fff 0%,#b8b8b8 100%)` - `linear-gradient(top,#fff 0%,#dedede 100%)` - `linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)` - `linear-gradient(to right,rgba(66,10,14,.2),transparent)` ### Breakpoints 320px · 380px · 400px · 414px · 419px · 424px · 425px · 430px · 469px · 474px · 480px · 500px · 568px · 580px · 600px · 619px · 620px · 640px · 667px · 670px · 680px · 719px · 767px · 768px · 781px · 782px · 900px · 920px · 960px · 991px · 992px · 1023px · 1024px · 1025px · 1140px · 1199px · 1200px · 1366px · 1440px · 1460px · 1480px ```