[Design systems](/design-systems/) / Cognizant # Cognizant design system cognizant.com Read from Cognizant's public website by Clinical Terminal. Not reviewed by Cognizant. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Cognizant homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923682.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#000048 - Accent on the ground \#262663 - Primary \#262663 - On primary \#FFFFFF \--white - Secondary accent \#26EFE9 \--accent3-medium - Highlight \#2F96A9 - Dark \#000048 \--primary - Site background \#FFFFFF \--white ## Other named colors - \--primary #000048 - \--primary-hover #000048 - \--accent1-light #85A0F9 - \--accent1-medium #7373D8 - \--accent1-dark #2E308E - \--accent2-light #92BBE6 - \--accent2-lighter #E5EFF9 - \--accent2-medium #6AA2DC - \--accent2-dark #2F78C4 - \--accent2-darker #2866A7 - \--accent3-light #97F5F7 - \--accent3-medium #26EFE9 - \--accent3-dark #06C7CC - \--white #FFFFFF - \--gray-lightest #F5F5F2 - \--gray-lighter #E8E8E6 - \--gray-light #D0D0CE - \--gray-medium #97999B - \--gray-dark #53565A - \--red #B81F2D - \--link-hover-color-light #C9FBFA - \--button-hover-bgcolor #A8F9F6 - \--tint-accent2-light #DEEBF8 - \--tint-hover-color #9DC2E9 ## Type Headings Archivo · closest free match for Gellix Cognizant at a glance Body Archivo · closest free match for Gellix Clear, readable paragraphs for clinicians, buyers and patients alike. - 4.2rem · 67.2pxCognizant - 3.15rem · 50.4pxCognizant - 2.35rem · 37.6pxCognizant - 2rem · 32pxCognizant - 1.8rem · 28.8pxCognizant - 1.35rem · 21.6pxCognizant - 20pxCognizant - 1.25rem · 20pxCognizant ## Shape & depth Cards and panels: 10px corners · buttons and chips: 10px. ### Corner radii - .75rem used in 2 rules - 0.5rem used in 1 rule - 0.25rem used in 1 rule - .5rem used in 1 rule ### Shadows - none !important used in 1 rule ### Gradients - linear-gradient(35deg,#2d2d8f 10%,#006fba 50%,#21fceb 94%) used in 4 rules - linear-gradient(35deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%) used in 2 rules - linear-gradient(45deg, #5e93ef 10%, #c7ed88 65%, #eee2a0 85%, #efe34a) used in 1 rule - linear-gradient(150deg,#5e93ef 10%,#c7ed88 65%,#eee2a0 85%,#efe34a) used in 1 rule - radial-gradient(at 95% 7%,#45bcc9 0,rgba(69,188,201,.001) 60%) used in 1 rule - radial-gradient(at 95% 93%,#fae500 0,rgba(250,229,0,.001) 60%) used in 1 rule Breakpoints: 599px · 600px · 1023px · 1024px · 1200px ## Voice Tone: professional. Energy: medium. Written for enterprises. ## 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%2F100923682.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Cognizant" domain: "cognizant.com" colors: primary: "#262663" onPrimary: "#FFFFFF" dark: "#000048" accent: "#26EFE9" highlight: "#2F96A9" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000048" accent: "#262663" fonts: heading: "Archivo" body: "Archivo" radius: card: "10px" button: "10px" --- # Design System — Cognizant > Read from Cognizant's public website (cognizant.com) by Clinical Terminal. Not reviewed by Cognizant. > Use it as inspiration: borrow the ideas, not Cognizant's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Cognizant's site background #FFFFFF. Pages and panels sit on it. - Main text: #000048 (19.2:1 on the ground). - Secondary text is #000048 at 88% / 76% / 60%; hairlines and plate borders #000048 at 16%. ## Color - **Accent on the ground: #262663** (13.64:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #262663** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (13.64:1). - Secondary accent #26EFE9: charts and a second data series only. - Highlight #2F96A9 (from Cognizant's logo gradient): sparing emphasis, never body text. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Cognizant's site uses Gellix / Gellix; these are the closest free look-alikes. ## Shape - Cards and panels: 10px corners. Buttons and chips: 10px. ## Voice - Tone: professional. Energy: medium. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--primary`: `#000048` - `--primary-hover`: `#000048` - `--accent1-light`: `#85A0F9` - `--accent1-medium`: `#7373D8` - `--accent1-dark`: `#2E308E` - `--accent2-light`: `#92BBE6` - `--accent2-lighter`: `#E5EFF9` - `--accent2-medium`: `#6AA2DC` - `--accent2-dark`: `#2F78C4` - `--accent2-darker`: `#2866A7` - `--accent3-light`: `#97F5F7` - `--accent3-medium`: `#26EFE9` - `--accent3-dark`: `#06C7CC` - `--white`: `#FFFFFF` - `--gray-lightest`: `#F5F5F2` - `--gray-lighter`: `#E8E8E6` - `--gray-light`: `#D0D0CE` - `--gray-medium`: `#97999B` - `--gray-dark`: `#53565A` - `--red`: `#B81F2D` - `--link-hover-color-light`: `#C9FBFA` - `--button-hover-bgcolor`: `#A8F9F6` - `--tint-accent2-light`: `#DEEBF8` - `--tint-hover-color`: `#9DC2E9` ### Typefaces - Gellix (`--body-font-family`) - Gellix !important ### Type scale (most-used sizes) `4.2rem` · `3.15rem` · `2.35rem` · `2rem` · `1.8rem` · `1.35rem` · `20px` · `1.25rem` · `.75rem` · `0.75rem` · `.6rem` ### Corner radii (most-used) `.75rem` · `0.5rem` · `0.25rem` · `.5rem` ### Shadows - `none !important` ### Gradients - `linear-gradient(35deg,#2d2d8f 10%,#006fba 50%,#21fceb 94%)` - `linear-gradient(35deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%)` - `linear-gradient(45deg, #5e93ef 10%, #c7ed88 65%, #eee2a0 85%, #efe34a)` - `linear-gradient(150deg,#5e93ef 10%,#c7ed88 65%,#eee2a0 85%,#efe34a)` - `radial-gradient(at 95% 7%,#45bcc9 0,rgba(69,188,201,.001) 60%)` - `radial-gradient(at 95% 93%,#fae500 0,rgba(250,229,0,.001) 60%)` ### Breakpoints 599px · 600px · 1023px · 1024px · 1200px ```