[Design systems](/design-systems/) / Quadax, Inc. # Quadax, Inc. design system quadax.com Read from Quadax, Inc.'s public website by Clinical Terminal. Not reviewed by Quadax, Inc.. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Quadax, Inc. homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923849.jpg?alt=media) ## Palette - Ground \#FFFFFF \--plauditQueryLoop\_\_popover--background - Ink \#1A1A1A - Accent on the ground \#A06C00 - Primary \#FFC72C \--color\_gold - On primary \#1A1A1A \--color\_text-dark - Dark \#1A1A1A \--color\_text-dark - Site background \#FFFFFF \--plauditQueryLoop\_\_popover--background ## Other named colors - \--plauditQueryLoop\_\_popover--background #FFFFFF - \--ep-c-white #FFFFFF - \--ep-c-medium-white #EEEEEE - \--ep-c-white-gray #CCCCCC - \--ep-c-white-red #FFE8ED - \--ep-c-white-yellow #FDEECA - \--ep-c-medium-gray #626262 - \--ep-c-light-gray #999999 - \--ep-c-black #000000 - \--ep-c-medium-red #D73C38 - \--ep-c-dark-red #B93431 - \--ep-c-medium-dark-blue #0073AA - \--ep-status-ok #6AA000 - \--ep-status-warning #E3E600 - \--ep-default-icon-color #82878C - \--color\_blue #005CC5 - \--color\_gold #FFC72C - \--color\_blue-gray #F2F6FA - \--color\_alice-blue #E8F0FA - \--color\_horizontal-rule #DADFE5 - \--color\_text-dark #1A1A1A - \--color\_text-light #FFFFFF - \--color\_heading-dark #102D51 - \--color\_heading-light #FFFFFF - \--color\_eyebrow-dark #005CC5 - \--color\_eyebrow-light #FFFFFF - \--color\_link-underline-dark #FF9600 - \--color\_button-outline-light #FFFFFF - \--color\_button-outline-hover-light #D4DFEE - \--color\_button-outline-active-light #A6BDDE - \--color\_arrow-link-light #FFFFFF - \--color\_form-asterisk-light #FFFFFF - \--gf-ctrl-border-color #8EA6C2 - \--gf-form-validation-bg-color #FDF9F9 - \--gf-ctrl-desc-border-color-consent #1D1F33 - \--gf-ctrl-outline-color-focus #8EA6C2 - \--gf-ctrl-border-color-focus #CCCCCC - \--gradient\_fog\_color-1 #FFFFFF - \--gradient\_fog\_color-2 #E8F0FA - \--gradient\_blue\_color-1 #005CC5 - \--gradient\_blue\_color-2 #004B9F - \--color\_blue-0 #00326A ## Type Headings Montserrat Quadax, Inc. at a glance Body Open Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 48pxQuadax, Inc. - 36pxQuadax, Inc. - 28pxQuadax, Inc. - 24pxQuadax, Inc. - 1.3333rem · 21.3328pxQuadax, Inc. - 18pxQuadax, Inc. - 1.0667rem · 17.0672pxQuadax, Inc. - 16pxQuadax, Inc. ## Shape & depth Cards and panels: 4px corners · buttons and chips: 0px. ### Corner radii - 9999px used in 5 rules - 500px used in 3 rules - 12px used in 2 rules - 6px used in 1 rule - 4px used in 1 rule - 100% used in 1 rule ### Shadows - 2px 2px 6px 2px rgba(0,50,106,.09) used in 2 rules - 0 2px 4px 2px rgba(0,50,106,.05) used in 2 rules - 0 0 12px 0 rgba(0,50,106,.14) used in 1 rule - 0 0 8px 0 rgba(0,0,0,.2) used in 1 rule ### Gradients - linear-gradient(#000,#000) used in 6 rules - linear-gradient(0deg,transparent,#000 5px) used in 4 rules - linear-gradient(90deg,transparent,#000 360px) used in 2 rules - linear-gradient(180deg,transparent,#000 80px) used in 2 rules - linear-gradient(135deg,#00d084,#0693e3) used in 1 rule - linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe) used in 1 rule Breakpoints: 600px · 781px · 782px · 960px ## Voice Tone: professional. Energy: medium. Written for businesses. ## 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%2F100923849.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Quadax, Inc." domain: "quadax.com" colors: primary: "#FFC72C" onPrimary: "#1A1A1A" dark: "#1A1A1A" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#1A1A1A" accent: "#A06C00" fonts: heading: "Montserrat" body: "Open Sans" radius: card: "4px" button: "0px" --- # Design System — Quadax, Inc. > Read from Quadax, Inc.'s public website (quadax.com) by Clinical Terminal. Not reviewed by Quadax, Inc.. > Use it as inspiration: borrow the ideas, not Quadax, Inc.'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Quadax, Inc.'s site background #FFFFFF. Pages and panels sit on it. - Main text: #1A1A1A (17.4:1 on the ground). - Secondary text is #1A1A1A at 88% / 76% / 60%; hairlines and plate borders #1A1A1A at 16%. ## Color - **Accent on the ground: #A06C00** (4.53:1), adjusted from Quadax, Inc.'s primary #FFC72C so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #FFC72C** for filled shapes (buttons, chips, bars), with #1A1A1A text on it (11.15:1). - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Open Sans**. Both on Google Fonts. ## Shape - Cards and panels: 4px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: medium. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--plauditQueryLoop__popover--background`: `#FFFFFF` - `--ep-c-white`: `#FFFFFF` - `--ep-c-medium-white`: `#EEEEEE` - `--ep-c-white-gray`: `#CCCCCC` - `--ep-c-white-red`: `#FFE8ED` - `--ep-c-white-yellow`: `#FDEECA` - `--ep-c-medium-gray`: `#626262` - `--ep-c-light-gray`: `#999999` - `--ep-c-black`: `#000000` - `--ep-c-medium-red`: `#D73C38` - `--ep-c-dark-red`: `#B93431` - `--ep-c-medium-dark-blue`: `#0073AA` - `--ep-status-ok`: `#6AA000` - `--ep-status-warning`: `#E3E600` - `--ep-default-icon-color`: `#82878C` - `--color_blue`: `#005CC5` - `--color_gold`: `#FFC72C` - `--color_blue-gray`: `#F2F6FA` - `--color_alice-blue`: `#E8F0FA` - `--color_horizontal-rule`: `#DADFE5` - `--color_text-dark`: `#1A1A1A` - `--color_text-light`: `#FFFFFF` - `--color_heading-dark`: `#102D51` - `--color_heading-light`: `#FFFFFF` - `--color_eyebrow-dark`: `#005CC5` - `--color_eyebrow-light`: `#FFFFFF` - `--color_link-underline-dark`: `#FF9600` - `--color_button-outline-light`: `#FFFFFF` - `--color_button-outline-hover-light`: `#D4DFEE` - `--color_button-outline-active-light`: `#A6BDDE` - `--color_arrow-link-light`: `#FFFFFF` - `--color_form-asterisk-light`: `#FFFFFF` - `--gf-ctrl-border-color`: `#8EA6C2` - `--gf-form-validation-bg-color`: `#FDF9F9` - `--gf-ctrl-desc-border-color-consent`: `#1D1F33` - `--gf-ctrl-outline-color-focus`: `#8EA6C2` - `--gf-ctrl-border-color-focus`: `#CCCCCC` - `--gradient_fog_color-1`: `#FFFFFF` - `--gradient_fog_color-2`: `#E8F0FA` - `--gradient_blue_color-1`: `#005CC5` - `--gradient_blue_color-2`: `#004B9F` - `--color_blue-0`: `#00326A` ### Typefaces - Open Sans (`--font_family`) — on Google Fonts - Montserrat (`--font_family-heading`) — on Google Fonts ### Type scale (most-used sizes) `48px` · `36px` · `28px` · `24px` · `1.3333rem` · `18px` · `1.0667rem` · `16px` · `1rem` · `.9333rem` · `13px` · `12px` ### Letter-spacing `.15em` (1) ### Corner radii (most-used) `9999px` · `500px` · `12px` · `6px` · `4px` · `100%` ### Shadows - `2px 2px 6px 2px rgba(0,50,106,.09)` - `0 2px 4px 2px rgba(0,50,106,.05)` - `0 0 12px 0 rgba(0,50,106,.14)` - `0 0 8px 0 rgba(0,0,0,.2)` ### Gradients - `linear-gradient(#000,#000)` - `linear-gradient(0deg,transparent,#000 5px)` - `linear-gradient(90deg,transparent,#000 360px)` - `linear-gradient(180deg,transparent,#000 80px)` - `linear-gradient(135deg,#00d084,#0693e3)` - `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)` ### Breakpoints 600px · 781px · 782px · 960px ```