[Design systems](/design-systems/) / DeepIntent # DeepIntent design system deepintent.com Read from DeepIntent's public website by Clinical Terminal. Not reviewed by DeepIntent. Copy it and paste it into Claude as inspiration. Corrections or removal: ![DeepIntent homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101593394.jpg?alt=media) ## Palette - Ground \#F5F5F5 \--colors--soft-white - Ink \#091F34 - Accent on the ground \#0B53FF - Primary \#0B53FF \--colors--cobalt - On primary \#FFFFFF \--opacity--white-5 - Dark \#091F34 \--colors--deep-blue-dark - Site background \#F5F5F5 \--colors--soft-white ## Color ramps Opacity Neutral Darkest 5 \#010203 10 \#010203 15 \#010203 20 \#010203 30 \#010203 40 \#010203 50 \#010203 60 \#010203 Opacity White 5 \#FFFFFF 10 \#FFFFFF 15 \#FFFFFF 30 \#FFFFFF 50 \#FFFFFF ## Other named colors - \--colors--peppermint #79FACB - \--colors--cobalt #0B53FF - \--colors--white #FFFFFF - \--colors--neutral-darkest #010203 - \--colors--deep-blue #0C2741 - \--colors--peppermint-light #A1FBDA - \--colors--peppermint-lighter #E4FEF4 - \--colors--peppermint-dark #60C8A2 - \--colors--cobalt-darkest #03184C - \--colors--cobalt-dark #0842CC - \--colors--citrus #DAFB92 - \--colors--soft-white #F5F5F5 - \--colors--deep-blue-darkest #030B13 - \--colors--citrus-light #E5FCB2 - \--colors--soft-white-lighter #FDFDFD - \--colors--deep-blue-dark #091F34 - \--colors--cobalt-light #5486FF - \--colors--cobalt-lighter #CEDCFF - \--colors--cobalt-lightest #E6EDFF - \--colors--neutral-lightest #F2F2F2 - \--colors--neutral-lighter #D8D9D9 - \--colors--cobalt-darker #042166 - \--colors--neutral-darker #1A1B1C - \--colors--deep-blue-light #54677A - \--colors--neutral-light #B2B3B3 - \--colors--neutral #808081 - \--colors--neutral-dark #4D4D4E - \--colors--peppermint-lightest #F1FEF9 - \--colors--peppermint-darker #306451 - \--colors--peppermint-darkest #244B3C - \--colors--deep-blue-lightest #E6E9EC - \--colors--deep-blue-lighter #CED3D9 - \--colors--deep-blue-darker #040F1A - \--colors--soft-white-light #F8F8F8 - \--colors--soft-white-dark #C4C4C4 - \--colors--soft-white-darker #626262 - \--colors--soft-white-darkest #494949 - \--colors--citrus-lightest #FBFEF4 - \--colors--citrus-lighter #F7FEE9 - \--colors--citrus-dark #AEC874 - \--colors--citrus-darker #57643A - \--colors--citrus-darkest #414B2B - \--colors--soft-white-lightest #FEFEFE ## Type Headings Manrope DeepIntent at a glance Body Manrope Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.5rem · 40pxDeepIntent - 2.25rem · 36pxDeepIntent - 2rem · 32pxDeepIntent - 1.5rem · 24pxDeepIntent - 1.25rem · 20pxDeepIntent - 1.125rem · 18pxDeepIntent - 1rem · 16pxDeepIntent - .875rem · 14pxDeepIntent ## Shape & depth Cards and panels: 16px corners · buttons and chips: 999px. ### Corner radii - 1rem used in 14 rules - 100px used in 11 rules - 50% used in 7 rules - 999px used in 7 rules - 100% used in 6 rules - 16px used in 6 rules - .25rem used in 6 rules - 8px used in 5 rules - 2px used in 3 rules - 20px used in 3 rules ### Shadows - 0 4px 16px #0c27411f used in 4 rules - -4px 4px 12px #0003 used in 2 rules - 0 1px 2px #14233c0a, 0 24px 48px -32px #14233c1a used in 2 rules - 0 1px 2px #14233c0a, 0 24px 48px -32px #14233c2e used in 2 rules - 0 0 0 1px #0000001a, 0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule ### Gradients - linear-gradient(to right, #0000 0%, #000 20% 80%, #0000 100%) used in 4 rules - linear-gradient(#0000, #000, #000) used in 2 rules - linear-gradient(#0000 50%, #0c2741f2 86%) used in 1 rule - linear-gradient(35deg, #0c2741ba, #0c274133) used in 1 rule - linear-gradient(0deg, #000, #fff) used in 1 rule - linear-gradient(0deg, #fff, #000) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 992px ## Voice Tone: professional. Energy: low. Written for marketers. ## 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%2F101593394.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "DeepIntent" domain: "deepintent.com" colors: primary: "#0B53FF" onPrimary: "#FFFFFF" dark: "#091F34" background: "#F5F5F5" ground: mode: light hex: "#F5F5F5" ink: "#091F34" accent: "#0B53FF" fonts: heading: "Manrope" body: "Manrope" radius: card: "16px" button: "999px" --- # Design System — DeepIntent > Read from DeepIntent's public website (deepintent.com) by Clinical Terminal. Not reviewed by DeepIntent. > Use it as inspiration: borrow the ideas, not DeepIntent's name, logo or identity. ## Ground - **Light ground** (#F5F5F5), from DeepIntent's site background #F5F5F5. Pages and panels sit on it. - Main text: #091F34 (15.32:1 on the ground). - Secondary text is #091F34 at 88% / 76% / 60%; hairlines and plate borders #091F34 at 16%. ## Color - **Accent on the ground: #0B53FF** (5.21:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0B53FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.68:1). - Quote every hex exactly as written above. ## Type - Headlines: **Manrope**. Body: **Manrope**. Both on Google Fonts. ## Shape - Cards and panels: 16px corners. Buttons and chips: 999px. ## Voice - Tone: professional. Energy: low. Written for marketers. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Opacity Neutral Darkest** (`--opacity--neutral-darkest-N`): 5 `#010203` · 10 `#010203` · 15 `#010203` · 20 `#010203` · 30 `#010203` · 40 `#010203` · 50 `#010203` · 60 `#010203` - **Opacity White** (`--opacity--white-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF` ### Other named colors - `--colors--peppermint`: `#79FACB` - `--colors--cobalt`: `#0B53FF` - `--colors--white`: `#FFFFFF` - `--colors--neutral-darkest`: `#010203` - `--colors--deep-blue`: `#0C2741` - `--colors--peppermint-light`: `#A1FBDA` - `--colors--peppermint-lighter`: `#E4FEF4` - `--colors--peppermint-dark`: `#60C8A2` - `--colors--cobalt-darkest`: `#03184C` - `--colors--cobalt-dark`: `#0842CC` - `--colors--citrus`: `#DAFB92` - `--colors--soft-white`: `#F5F5F5` - `--colors--deep-blue-darkest`: `#030B13` - `--colors--citrus-light`: `#E5FCB2` - `--colors--soft-white-lighter`: `#FDFDFD` - `--colors--deep-blue-dark`: `#091F34` - `--colors--cobalt-light`: `#5486FF` - `--colors--cobalt-lighter`: `#CEDCFF` - `--colors--cobalt-lightest`: `#E6EDFF` - `--colors--neutral-lightest`: `#F2F2F2` - `--colors--neutral-lighter`: `#D8D9D9` - `--colors--cobalt-darker`: `#042166` - `--colors--neutral-darker`: `#1A1B1C` - `--colors--deep-blue-light`: `#54677A` - `--colors--neutral-light`: `#B2B3B3` - `--colors--neutral`: `#808081` - `--colors--neutral-dark`: `#4D4D4E` - `--colors--peppermint-lightest`: `#F1FEF9` - `--colors--peppermint-darker`: `#306451` - `--colors--peppermint-darkest`: `#244B3C` - `--colors--deep-blue-lightest`: `#E6E9EC` - `--colors--deep-blue-lighter`: `#CED3D9` - `--colors--deep-blue-darker`: `#040F1A` - `--colors--soft-white-light`: `#F8F8F8` - `--colors--soft-white-dark`: `#C4C4C4` - `--colors--soft-white-darker`: `#626262` - `--colors--soft-white-darkest`: `#494949` - `--colors--citrus-lightest`: `#FBFEF4` - `--colors--citrus-lighter`: `#F7FEE9` - `--colors--citrus-dark`: `#AEC874` - `--colors--citrus-darker`: `#57643A` - `--colors--citrus-darkest`: `#414B2B` - `--colors--soft-white-lightest`: `#FEFEFE` ### Typefaces - Manrope !important ### Type scale (most-used sizes) `2.5rem` · `2.25rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `14px` · `.8125rem` · `.75rem` · `.625rem` ### Letter-spacing `.05em` (6) · `.08em` (6) · `.02em` (4) · `.06em` (4) · `-.0225rem` (3) · `-.045em` (2) ### Corner radii (most-used) `1rem` · `100px` · `50%` · `999px` · `100%` · `16px` · `.25rem` · `8px` · `2px` · `20px` ### Shadows - `0 4px 16px #0c27411f` - `-4px 4px 12px #0003` - `0 1px 2px #14233c0a, 0 24px 48px -32px #14233c1a` - `0 1px 2px #14233c0a, 0 24px 48px -32px #14233c2e` - `0 0 0 1px #0000001a, 0 1px 3px #0000001a` - `0 0 3px #3336` ### Gradients - `linear-gradient(to right, #0000 0%, #000 20% 80%, #0000 100%)` - `linear-gradient(#0000, #000, #000)` - `linear-gradient(#0000 50%, #0c2741f2 86%)` - `linear-gradient(35deg, #0c2741ba, #0c274133)` - `linear-gradient(0deg, #000, #fff)` - `linear-gradient(0deg, #fff, #000)` ### Breakpoints 479px · 767px · 768px · 991px · 992px ```