[Design systems](/design-systems/) / Oracle Health # Oracle Health design system oracle.com Read from Oracle Health's public website by Clinical Terminal. Not reviewed by Oracle Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Oracle Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101143787.jpg?alt=media) ## Palette - Ground \#FFFFFF \--txtcolor - Ink \#161513 - Accent on the ground \#C74634 - Primary \#C74634 - On primary \#FFFFFF \--txtcolor - Secondary accent \#006B8F - Dark \#161513 \--obttn2brdr - Site background \#FFFFFF \--txtcolor ## Other named colors - \--form-focusonlgt #227E9E - \--form-focusondrk #227E9E - \--form-error #D63B25 - \--form-txtinput #D63B25 - \--txtcolor #FFFFFF - \--linkcolor #F0CC71 - \--obttn1brdr #000000 - \--obttn1bg #312D2A - \--obttn1clr #FFFFFF - \--obttn1clrhvr #FFFFFF - \--obttn1bghvr #3A3632 - \--obttn1bgact #47423E - \--obttn2brdr #161513 - \--obttn2clr #161513 - \--obttn2clrhvr #161513 - \--obttn2bghvr #161513 - \--obttn2bgact #161513 - \--obttn3brdr #000000 - \--obttn3bg #161513 - \--obttn3clr #161513 - \--obttn3bghvr #161513 - \--obttn3clrhvr #161513 - \--obttn3bgact #161513 - \--obttn1brdr-inv #000000 - \--obttn1bg-inv #FFFFFF - \--obttn1clr-inv #161513 - \--obttn1clrhvr-inv #FFFFFF - \--obttn1bghvr-inv #161513 - \--obttn1bgact-inv #161513 - \--obttn2brdr-inv #FFFFFF - \--obttn2clr-inv #FFFFFF - \--obttn2clrhvr-inv #161513 - \--obttn2bghvr-inv #FFFFFF - \--obttn2bgact-inv #FFFFFF - \--obttn3brdr-inv #000000 - \--obttn3bg-inv #F5F4F2 - \--obttn3clr-inv #FFFFFF - \--obttn3bghvr-inv #FFFFFF - \--obttn3clrhvr-inv #161513 - \--obttn3bgact-inv #FFFFFF - \--obttnbgdis #FBF9F8 - \--obttnbrdrdis #E4E1DD - \--obttnclrdis #AEA8A2 - \--thm-base #F1EFED - \--thm-accent #C2D4D4 - \--thm-primary #2A2F2F - \--thm-secondary #464F4F - \--thm-medium #697778 ## Type Headings Archivo · closest free match for OracleSansVF Oracle Health at a glance Body Archivo · closest free match for OracleSansVF Clear, readable paragraphs for clinicians, buyers and patients alike. - 4rem · 64pxOracle Health - 3.2rem · 51.2pxOracle Health - 3rem · 48pxOracle Health - 2.4rem · 38.4pxOracle Health - 2.2rem · 35.2pxOracle Health - 2rem · 32pxOracle Health - 1.8rem · 28.8pxOracle Health - 1.6rem · 25.6pxOracle Health ## Shape & depth Cards and panels: 4px corners · buttons and chips: 4px. ### Corner radii - .4rem used in 17 rules - 4px used in 9 rules - 50% used in 6 rules - 6px used in 4 rules - 8px used in 3 rules - 12px used in 2 rules - 3px used in 2 rules - 20px used in 1 rule - .6rem used in 1 rule - .8rem used in 1 rule ### Shadows - 0px 0px 16px 0px rgba(0,0,0,.3) used in 3 rules - 0 .4rem 2rem rgba(0,0,0,.15) used in 3 rules - 0 .8rem 1.6rem rgba(0,0,0,.24) used in 1 rule - 0px 5px 20px rgba(0,0,0,.2) used in 1 rule Breakpoints: 392px · 403px · 429px · 512px · 577px · 599px · 600px · 648px · 727px · 740px · 760px · 768px ## 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%2F101143787.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Oracle Health" domain: "oracle.com" colors: primary: "#C74634" onPrimary: "#FFFFFF" dark: "#161513" accent: "#006B8F" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#161513" accent: "#C74634" fonts: heading: "Archivo" body: "Archivo" radius: card: "4px" button: "4px" --- # Design System — Oracle Health > Read from Oracle Health's public website (oracle.com) by Clinical Terminal. Not reviewed by Oracle Health. > Use it as inspiration: borrow the ideas, not Oracle Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Oracle Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #161513 (18.25:1 on the ground). - Secondary text is #161513 at 88% / 76% / 60%; hairlines and plate borders #161513 at 16%. ## Color - **Accent on the ground: #C74634** (4.82:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #C74634** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.82:1). - Secondary accent #006B8F: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Oracle Health's site uses OracleSansVF / OracleSansVF; these are the closest free look-alikes. ## Shape - Cards and panels: 4px corners. Buttons and chips: 4px. ## 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 - `--form-focusonlgt`: `#227E9E` - `--form-focusondrk`: `#227E9E` - `--form-error`: `#D63B25` - `--form-txtinput`: `#D63B25` - `--txtcolor`: `#FFFFFF` - `--linkcolor`: `#F0CC71` - `--obttn1brdr`: `#000000` - `--obttn1bg`: `#312D2A` - `--obttn1clr`: `#FFFFFF` - `--obttn1clrhvr`: `#FFFFFF` - `--obttn1bghvr`: `#3A3632` - `--obttn1bgact`: `#47423E` - `--obttn2brdr`: `#161513` - `--obttn2clr`: `#161513` - `--obttn2clrhvr`: `#161513` - `--obttn2bghvr`: `#161513` - `--obttn2bgact`: `#161513` - `--obttn3brdr`: `#000000` - `--obttn3bg`: `#161513` - `--obttn3clr`: `#161513` - `--obttn3bghvr`: `#161513` - `--obttn3clrhvr`: `#161513` - `--obttn3bgact`: `#161513` - `--obttn1brdr-inv`: `#000000` - `--obttn1bg-inv`: `#FFFFFF` - `--obttn1clr-inv`: `#161513` - `--obttn1clrhvr-inv`: `#FFFFFF` - `--obttn1bghvr-inv`: `#161513` - `--obttn1bgact-inv`: `#161513` - `--obttn2brdr-inv`: `#FFFFFF` - `--obttn2clr-inv`: `#FFFFFF` - `--obttn2clrhvr-inv`: `#161513` - `--obttn2bghvr-inv`: `#FFFFFF` - `--obttn2bgact-inv`: `#FFFFFF` - `--obttn3brdr-inv`: `#000000` - `--obttn3bg-inv`: `#F5F4F2` - `--obttn3clr-inv`: `#FFFFFF` - `--obttn3bghvr-inv`: `#FFFFFF` - `--obttn3clrhvr-inv`: `#161513` - `--obttn3bgact-inv`: `#FFFFFF` - `--obttnbgdis`: `#FBF9F8` - `--obttnbrdrdis`: `#E4E1DD` - `--obttnclrdis`: `#AEA8A2` - `--thm-base`: `#F1EFED` - `--thm-accent`: `#C2D4D4` - `--thm-primary`: `#2A2F2F` - `--thm-secondary`: `#464F4F` - `--thm-medium`: `#697778` - `--thm-accent-alt`: `#8B9D9E` - `--mode-tint`: `#F1EFED` - `--txtinvert`: `#FFFFFF` - `--linkinvert`: `#F0CC71` - `--modebg`: `#FFFFFF` - `--modebg-darker`: `#442616` - `--clr-accent`: `#DEB068` - `--bc-color`: `#6F6964` - `--bc-bg`: `#161513` - `--gradtop`: `#FFFFFF` - `--lbx-closeclr`: `#FFFFFF` - `--lbx-scrim`: `#000000` - `--otbl-hl-bg`: `#F1EFED` - `--otbl-bdr`: `#D4CFCA` - `--playlist-active`: `#D4CFCA` - `--u38-bg`: `#FFFFFF` - `--u38-bg-l1`: `#F1EFED` - `--u38-text`: `#161513` - `--u38-text-secondary`: `#5C5651` - `--u38-border`: `#161513` - `--u38-hover-bg`: `#161513` - `--u38-active-bg`: `#161513` - `--u38-overlay-bg`: `#000000` - `--u38-active-accent`: `#C2D4D4` - `--u38-active-accent-bg`: `#C2D4D4` ### Typefaces - OracleSansVF (`--oraclesans`) - OracleSansFB - NotoSansArabicLF - NotoSansArabicWF - NotoSansHebrewLF - NotoSansHebrewWF - OracleSansVFCyGr ### Type scale (most-used sizes) `4rem` · `3.2rem` · `3rem` · `2.4rem` · `2.2rem` · `2rem` · `1.8rem` · `1.6rem` · `1.4rem` · `1.375rem` · `1.2rem` · `14px` ### Letter-spacing `-0.5px` (1) · `.05em` (1) ### Corner radii (most-used) `.4rem` · `4px` · `50%` · `6px` · `8px` · `12px` · `3px` · `20px` · `.6rem` · `.8rem` ### Shadows - `0px 0px 16px 0px rgba(0,0,0,.3)` - `0 .4rem 2rem rgba(0,0,0,.15)` - `0 .8rem 1.6rem rgba(0,0,0,.24)` - `0px 5px 20px rgba(0,0,0,.2)` ### Breakpoints 392px · 403px · 429px · 512px · 577px · 599px · 600px · 648px · 727px · 740px · 760px · 768px · 840px · 860px · 861px · 991px · 1019px · 1020px · 1068px · 1192px · 1202px · 1240px · 1286px · 1359px · 1360px · 1394px · 1482px · 1574px · 1648px · 1676px · 1743px · 1744px · 1892px · 1936px · 1940px · 2208px · 2212px · 2480px · 2752px · 3024px · 3296px ```