[Design systems](/design-systems/) / Veeva Systems # Veeva Systems design system veeva.com Read from Veeva Systems's public website by Clinical Terminal. Not reviewed by Veeva Systems. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Veeva Systems homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101526002.jpg?alt=media) ## Palette - Ground \#FFFFFF - Ink \#01040B - Accent on the ground \#B45E00 - Primary \#F89C26 - On primary \#01040B - Secondary accent \#F46700 - Dark \#01040B - Site background \#FFFFFF ## Other named colors - \--footer-fix-color #1B2E53 ## Type Headings Poppins Veeva Systems at a glance Body Roboto Clear, readable paragraphs for clinicians, buyers and patients alike. - 42pxVeeva Systems - 36pxVeeva Systems - 30pxVeeva Systems - 28pxVeeva Systems - 24pxVeeva Systems - 22pxVeeva Systems - 20pxVeeva Systems - 1.25rem · 20pxVeeva Systems ## Shape & depth Cards and panels: 15px corners · buttons and chips: 60px. ### Corner radii - 24px used in 37 rules - 40px used in 36 rules - 16px used in 35 rules - 4px used in 34 rules - 60px used in 25 rules - 8px used in 19 rules - 50% used in 17 rules - 20px used in 16 rules - 6px used in 13 rules - 10px used in 9 rules ### Shadows - 0 5px 8px 0 rgba(0,0,0,.15) used in 30 rules - 0 .99px 11.8px 0 rgba(0,0,0,.05),0 2.75px 32.7px 0 rgba(0,0,0,.07),0 6.6px 78.7px 0 rgba(0,0,0,.09),0 22px 80px 0 rgba(0,0,0,.14) used in 23 rules - 0px 12px 24px -10px rgba(0,0,0,0.25) used in 8 rules - inset 0 1px 1px rgba(0,0,0,0.075) used in 8 rules - none !important used in 4 rules - 0 0 0 .25rem rgba(13,110,253,.25) used in 4 rules ### Gradients - linear-gradient(163deg,#f5670e 4.54%,#ff6b00 88.28%) used in 52 rules - linear-gradient(195deg,#1b2f54 10.29%,#01050b 25.48%,#02060d 37.84%,#030710 47.81%,#040a13 55.82%,#060c18 62.3%,#080f1d 67.7%,#0a1223 72.44%,#0c1629 76.97%,#0e1a2f 81.72%,#101d36 87.11%,#13213c 93.6%,#152543 101.61%,#172849 111.57%,#192c4f 123.93%,#1b2f54 139.12%) used in 43 rules - linear-gradient(180deg,#f7981d,#ff6b00) used in 25 rules - 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 15 rules - linear-gradient(146deg,#fff 5.2%,#eef1f5 92.04%) used in 8 rules - linear-gradient(91deg,#449fd7 6.43%,#54dddd 104.88%) used in 6 rules Breakpoints: 400px · 480px · 500px · 550px · 576px · 600px · 650px · 658px · 681px · 700px · 767px · 768px ## 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%2F101526002.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Veeva Systems" domain: "veeva.com" colors: primary: "#F89C26" onPrimary: "#01040B" dark: "#01040B" accent: "#F46700" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#01040B" accent: "#B45E00" fonts: heading: "Poppins" body: "Roboto" radius: card: "15px" button: "60px" --- # Design System — Veeva Systems > Read from Veeva Systems's public website (veeva.com) by Clinical Terminal. Not reviewed by Veeva Systems. > Use it as inspiration: borrow the ideas, not Veeva Systems's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Veeva Systems's site background #FFFFFF. Pages and panels sit on it. - Main text: #01040B (20.52:1 on the ground). - Secondary text is #01040B at 88% / 76% / 60%; hairlines and plate borders #01040B at 16%. ## Color - **Accent on the ground: #B45E00** (4.62:1), adjusted from Veeva Systems's primary #F89C26 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #F89C26** for filled shapes (buttons, chips, bars), with #01040B text on it (9.55:1). - Secondary accent #F46700: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Roboto**. Both on Google Fonts. ## Shape - Cards and panels: 15px corners. Buttons and chips: 60px. ## Voice - Tone: professional. Energy: medium. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--footer-fix-color`: `#1B2E53` ### Typefaces - Poppins — on Google Fonts - Roboto — on Google Fonts - Verdana ### Type scale (most-used sizes) `42px` · `36px` · `30px` · `28px` · `24px` · `22px` · `20px` · `1.25rem` · `18px` · `16px` · `14px` · `12px` ### Letter-spacing `-.03em` (95) · `-.02em` (3) · `2px` (2) · `0.1em` (2) · `-2px` (2) · `.75px` (1) ### Corner radii (most-used) `24px` · `40px` · `16px` · `4px` · `60px` · `8px` · `50%` · `20px` · `6px` · `10px` ### Shadows - `0 5px 8px 0 rgba(0,0,0,.15)` - `0 .99px 11.8px 0 rgba(0,0,0,.05),0 2.75px 32.7px 0 rgba(0,0,0,.07),0 6.6px 78.7px 0 rgba(0,0,0,.09),0 22px 80px 0 rgba(0,0,0,.14)` - `0px 12px 24px -10px rgba(0,0,0,0.25)` - `inset 0 1px 1px rgba(0,0,0,0.075)` - `none !important` - `0 0 0 .25rem rgba(13,110,253,.25)` ### Gradients - `linear-gradient(163deg,#f5670e 4.54%,#ff6b00 88.28%)` - `linear-gradient(195deg,#1b2f54 10.29%,#01050b 25.48%,#02060d 37.84%,#030710 47.81%,#040a13 55.82%,#060c18 62.3%,#080f1d 67.7%,#0a1223 72.44%,#0c1629 76.97%,#0e1a2f 81.72%,#101d36 87.11%,#13213c 93.6%,#152543 101.61%,#172849 111.57%,#192c4f 123.93%,#1b2f54 139.12%)` - `linear-gradient(180deg,#f7981d,#ff6b00)` - `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(146deg,#fff 5.2%,#eef1f5 92.04%)` - `linear-gradient(91deg,#449fd7 6.43%,#54dddd 104.88%)` ### Breakpoints 400px · 480px · 500px · 550px · 576px · 600px · 650px · 658px · 681px · 700px · 767px · 768px · 773px · 780px · 783px · 800px · 840px · 990px · 991px · 992px · 1024px · 1090px · 1200px · 1320px · 1400px · 1600px ```