[Design systems](/design-systems/) / Cadence # Cadence design system cadence.care Read from Cadence's public website by Clinical Terminal. Not reviewed by Cadence. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Cadence homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100007279.jpg?alt=media) ## Palette - Ground \#FBFBFA \--color-surface-background - Ink \#0A162E - Accent on the ground \#364E7A - Primary \#364E7A \--color-text-secondary - On primary \#FFFFFF \--color-text-inverse - Secondary accent \#1628E0 \--color-text-brand - Dark \#0A162E \--color-text-primary - Site background \#FBFBFA \--color-surface-background ## Other named colors - \--color-text-primary #0A162E - \--color-text-secondary #364E7A - \--color-text-subtle #4E6488 - \--color-text-inverse #FFFFFF - \--color-text-brand #1628E0 - \--color-surface-background #FBFBFA - \--color-surface-panel #FFFDF9 - \--color-surface-raised #F2F2F0 - \--color-surface-muted #EEEDEA - \--color-surface-brand-bright #1628E0 - \--color-surface-brand-muted #0E1C9A - \--color-surface-inverse #142440 - \--color-border-subtle #D4DAE8 - \--color-border-default #B4BED0 - \--color-border-strong #8E9DB8 - \--color-button-primary-background #1628E0 - \--color-button-primary-text #FFFFFF - \--color-button-primary-hover #1222C0 - \--color-button-primary-active #0E1C9A - \--color-accent-primary #1628E0 - \--color-accent-secondary #007FA8 - \--color-accent-tertiary #8B1FD8 - \--color-accent-warm #C45200 - \--color-accent-positive #0D8C35 - \--color-accent-alert #CC2030 - \--color-accent-primary-soft #96AAF4 - \--color-accent-primary-softer #DAE0F1 - \--color-post-author-card #D3E3F2 - \--color-cta-warm #FFF8DF - \--color-shadow #1F2D4C - \--color-surface-warm-grey-200 #E5E3DF ## Type Headings Archivo · closest free match for Noi Grotesk Cadence at a glance Body Archivo · closest free match for Noi Grotesk Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.5rem · 40pxCadence - 2rem · 32pxCadence - 1.5rem · 24pxCadence - 1rem · 16pxCadence - .95rem · 15.2pxCadence - .875rem · 14pxCadence - .8125rem · 13pxCadence - .75rem · 12pxCadence ## Shape & depth Cards and panels: 12px corners · buttons and chips: 16px. ### Corner radii - 50% used in 22 rules - 1rem used in 15 rules - .75rem used in 4 rules - 4px used in 4 rules - 999px used in 3 rules - 8px used in 3 rules - 1px used in 2 rules - 12px used in 2 rules - 1.5rem used in 2 rules - 99px used in 2 rules ### Shadows - 0 18px 36px #10204229 used in 2 rules - 0 12px 40px #10204224,0 2px 10px #1020420f used in 1 rule - 0 12px 40px #1020421a,0 2px 10px #1020420a used in 1 rule - 0 0 #fdf3ea used in 1 rule - 0 0 0 5px #fdf3ea used in 1 rule - 0 1px 14px #2b3d4e18 used in 1 rule ### Gradients - linear-gradient(#000 0% 25%,#0000 50%) used in 2 rules - linear-gradient(270deg,#00000080,#0000) used in 1 rule - linear-gradient(90deg,#00000080,#0000) used in 1 rule - linear-gradient(#0000,#00000080) used in 1 rule - linear-gradient(#00000080,#0000) used in 1 rule - radial-gradient(circle at 32% 18%,#efdfce75,#0000 24rem) used in 1 rule ## 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%2F100007279.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Cadence" domain: "cadence.care" colors: primary: "#364E7A" onPrimary: "#FFFFFF" dark: "#0A162E" accent: "#1628E0" background: "#FBFBFA" ground: mode: light hex: "#FBFBFA" ink: "#0A162E" accent: "#364E7A" fonts: heading: "Archivo" body: "Archivo" radius: card: "12px" button: "16px" --- # Design System — Cadence > Read from Cadence's public website (cadence.care) by Clinical Terminal. Not reviewed by Cadence. > Use it as inspiration: borrow the ideas, not Cadence's name, logo or identity. ## Ground - **Light ground** (#FBFBFA), from Cadence's site background #FBFBFA. Pages and panels sit on it. - Main text: #0A162E (17.38:1 on the ground). - Secondary text is #0A162E at 88% / 76% / 60%; hairlines and plate borders #0A162E at 16%. ## Color - **Accent on the ground: #364E7A** (8.02:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #364E7A** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (8.31:1). - Secondary accent #1628E0: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Cadence's site uses Noi Grotesk / Noi Grotesk; these are the closest free look-alikes. ## Shape - Cards and panels: 12px corners. Buttons and chips: 16px. ## 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 - `--color-text-primary`: `#0A162E` - `--color-text-secondary`: `#364E7A` - `--color-text-subtle`: `#4E6488` - `--color-text-inverse`: `#FFFFFF` - `--color-text-brand`: `#1628E0` - `--color-surface-background`: `#FBFBFA` - `--color-surface-panel`: `#FFFDF9` - `--color-surface-raised`: `#F2F2F0` - `--color-surface-muted`: `#EEEDEA` - `--color-surface-brand-bright`: `#1628E0` - `--color-surface-brand-muted`: `#0E1C9A` - `--color-surface-inverse`: `#142440` - `--color-border-subtle`: `#D4DAE8` - `--color-border-default`: `#B4BED0` - `--color-border-strong`: `#8E9DB8` - `--color-button-primary-background`: `#1628E0` - `--color-button-primary-text`: `#FFFFFF` - `--color-button-primary-hover`: `#1222C0` - `--color-button-primary-active`: `#0E1C9A` - `--color-accent-primary`: `#1628E0` - `--color-accent-secondary`: `#007FA8` - `--color-accent-tertiary`: `#8B1FD8` - `--color-accent-warm`: `#C45200` - `--color-accent-positive`: `#0D8C35` - `--color-accent-alert`: `#CC2030` - `--color-accent-primary-soft`: `#96AAF4` - `--color-accent-primary-softer`: `#DAE0F1` - `--color-post-author-card`: `#D3E3F2` - `--color-cta-warm`: `#FFF8DF` - `--color-shadow`: `#1F2D4C` - `--color-surface-warm-grey-200`: `#E5E3DF` ### Typefaces - Noi Grotesk (`--font-body`) - Source Serif 4 (`--font-serif`) — on Google Fonts - Aeonik Mono (`--font-mono`) - Source Code Pro - Noi Variable - Inter — on Google Fonts ### Type scale (most-used sizes) `2.5rem` · `2rem` · `1.5rem` · `1rem` · `.95rem` · `.875rem` · `.8125rem` · `.75rem` · `.7rem` · `.625rem` · `10px` · `.55rem` ### Letter-spacing `-.01em` (5) · `-.02em` (3) · `-.04em` (1) · `-.03em` (1) · `-.005em` (1) · `.02em` (1) ### Corner radii (most-used) `50%` · `1rem` · `.75rem` · `4px` · `999px` · `8px` · `1px` · `12px` · `1.5rem` · `99px` ### Shadows - `0 18px 36px #10204229` - `0 12px 40px #10204224,0 2px 10px #1020420f` - `0 12px 40px #1020421a,0 2px 10px #1020420a` - `0 0 #fdf3ea` - `0 0 0 5px #fdf3ea` - `0 1px 14px #2b3d4e18` ### Gradients - `linear-gradient(#000 0% 25%,#0000 50%)` - `linear-gradient(270deg,#00000080,#0000)` - `linear-gradient(90deg,#00000080,#0000)` - `linear-gradient(#0000,#00000080)` - `linear-gradient(#00000080,#0000)` - `radial-gradient(circle at 32% 18%,#efdfce75,#0000 24rem)` ```