--- generator: clinical-terminal-brand-kit company: "RAAPID INC" domain: "raapidinc.com" colors: primary: "#F56E5D" onPrimary: "#000000" dark: "#212121" accent: "#033A7C" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#212121" accent: "#CB4739" fonts: heading: "Lato" body: "Lato" radius: card: "6px" button: "0px" --- # Design System — RAAPID INC > Read from RAAPID INC's public website (raapidinc.com) by Clinical Terminal. Not reviewed by RAAPID INC. > Use it as inspiration: borrow the ideas, not RAAPID INC's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from RAAPID INC's site background #FFFFFF. Pages and panels sit on it. - Main text: #212121 (16.1:1 on the ground). - Secondary text is #212121 at 88% / 76% / 60%; hairlines and plate borders #212121 at 16%. ## Color - **Accent on the ground: #CB4739** (4.67:1), adjusted from RAAPID INC's primary #F56E5D so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #F56E5D** for filled shapes (buttons, chips, bars), with #000000 text on it (7.27:1). - Secondary accent #033A7C: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Lato**. Body: **Lato**. Both on Google Fonts. ## Shape - Cards and panels: 6px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--wpds-color-background-surface-neutral`: `#FCFCFC` - `--wpds-color-background-surface-neutral-strong`: `#FFFFFF` - `--wpds-color-background-surface-neutral-weak`: `#F4F4F4` - `--wpds-color-background-surface-brand`: `#ECF0FA` - `--wpds-color-background-surface-success`: `#C6F7CD` - `--wpds-color-background-surface-success-weak`: `#EBFFED` - `--wpds-color-background-surface-info`: `#DEEBFA` - `--wpds-color-background-surface-info-weak`: `#F3F9FF` - `--wpds-color-background-surface-warning`: `#FDE6BE` - `--wpds-color-background-surface-warning-weak`: `#FFF7E1` - `--wpds-color-background-surface-caution`: `#FEE995` - `--wpds-color-background-surface-caution-weak`: `#FFF9CA` - `--wpds-color-background-surface-error`: `#F6E6E3` - `--wpds-color-background-surface-error-weak`: `#FFF6F5` - `--wpds-color-background-interactive-neutral-strong`: `#2D2D2D` - `--wpds-color-background-interactive-neutral-strong-active`: `#1E1E1E` - `--wpds-color-background-interactive-neutral-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-neutral-weak-active`: `#EDEDED` - `--wpds-color-background-interactive-brand-strong`: `#3858E9` - `--wpds-color-background-interactive-brand-strong-active`: `#2E49D9` - `--wpds-color-background-interactive-brand-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-brand-weak-active`: `#E6EAF4` - `--wpds-color-background-interactive-error-active`: `#FFF6F5` - `--wpds-color-background-interactive-error-strong`: `#CC1818` - `--wpds-color-background-interactive-error-strong-active`: `#B90000` - `--wpds-color-background-interactive-error-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-error-weak-active`: `#F6E6E3` - `--wpds-color-background-track-neutral-weak`: `#F0F0F0` - `--wpds-color-background-track-neutral`: `#DBDBDB` - `--wpds-color-background-thumb-neutral-weak`: `#8D8D8D` - `--wpds-color-background-thumb-neutral-weak-active`: `#6E6E6E` - `--wpds-color-background-thumb-brand`: `#3858E9` - `--wpds-color-background-thumb-brand-active`: `#3858E9` - `--wpds-color-background-thumb-brand-disabled`: `#DBDBDB` - `--wpds-color-background-thumb-neutral-weak-disabled`: `#DBDBDB` - `--wpds-color-foreground-content-neutral`: `#1E1E1E` - `--wpds-color-foreground-content-neutral-weak`: `#707070` - `--wpds-color-foreground-content-success`: `#002900` - `--wpds-color-foreground-content-success-weak`: `#008030` - `--wpds-color-foreground-content-info`: `#001B4F` - `--wpds-color-foreground-content-info-weak`: `#006BD7` - `--wpds-color-foreground-content-warning`: `#2E1900` - `--wpds-color-foreground-content-warning-weak`: `#926300` - `--wpds-color-foreground-content-caution`: `#281D00` - `--wpds-color-foreground-content-caution-weak`: `#826A00` - `--wpds-color-foreground-content-error`: `#470000` - `--wpds-color-foreground-content-error-weak`: `#CC1818` - `--wpds-color-foreground-interactive-neutral`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-active`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-neutral-strong`: `#F0F0F0` - `--wpds-color-foreground-interactive-neutral-strong-active`: `#F0F0F0` - `--wpds-color-foreground-interactive-neutral-strong-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-neutral-weak`: `#707070` - `--wpds-color-foreground-interactive-neutral-weak-active`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-weak-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-brand`: `#3858E9` - `--wpds-color-foreground-interactive-brand-active`: `#0B0070` - `--wpds-color-foreground-interactive-brand-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-brand-strong`: `#EFF0F2` - `--wpds-color-foreground-interactive-brand-strong-active`: `#EFF0F2` - `--wpds-color-foreground-interactive-brand-strong-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-error`: `#CC1818` - `--wpds-color-foreground-interactive-error-active`: `#470000` - `--wpds-color-foreground-interactive-error-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-error-strong`: `#F2EFEF` - `--wpds-color-foreground-interactive-error-strong-active`: `#F2EFEF` - `--wpds-color-foreground-interactive-error-strong-disabled`: `#8D8D8D` - `--wpds-color-stroke-surface-neutral`: `#DBDBDB` - `--wpds-color-stroke-surface-neutral-weak`: `#F0F0F0` - `--wpds-color-stroke-surface-neutral-strong`: `#8D8D8D` - `--wpds-color-stroke-surface-brand`: `#B0BBD6` - `--wpds-color-stroke-surface-brand-strong`: `#3858E9` - `--wpds-color-stroke-surface-success`: `#94D29E` - `--wpds-color-stroke-surface-success-strong`: `#008030` - `--wpds-color-stroke-surface-info`: `#A9C6E7` - `--wpds-color-stroke-surface-info-strong`: `#006BD7` - `--wpds-color-stroke-surface-warning`: `#E1BC7C` - `--wpds-color-stroke-surface-warning-strong`: `#926300` - `--wpds-color-stroke-surface-caution`: `#CFC28D` - `--wpds-color-stroke-surface-caution-strong`: `#826A00` - `--wpds-color-stroke-surface-error`: `#DAB1AA` - `--wpds-color-stroke-surface-error-strong`: `#CC1818` - `--wpds-color-stroke-interactive-neutral`: `#8D8D8D` - `--wpds-color-stroke-interactive-neutral-active`: `#6E6E6E` - `--wpds-color-stroke-interactive-neutral-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-neutral-strong`: `#6E6E6E` - `--wpds-color-stroke-interactive-brand`: `#3858E9` - `--wpds-color-stroke-interactive-brand-active`: `#2337C8` - `--wpds-color-stroke-interactive-brand-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-error`: `#CC1818` - `--wpds-color-stroke-interactive-error-active`: `#9D0000` - `--wpds-color-stroke-interactive-error-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-error-strong`: `#CC1818` - `--wpds-color-stroke-focus`: `#3858E9` - `--e-global-color-primary`: `#5280FF` - `--e-global-color-secondary`: `#62D6DA` - `--e-global-color-text`: `#1D1E1C` - `--e-global-color-accent`: `#FF6A5E` - `--e-n-carousel-arrow-normal-color`: `#EBEBEB` - `--e-n-carousel-dots-normal-color`: `#F56E5D` - `--e-search-form-toggle-color`: `#033A7C` - `--e-search-form-toggle-background-color`: `#FFFFFF` - `--e-social-icon-icon-color`: `#FFFFFF` - `--iti-hover-color`: `#000000` - `--iti-border-color`: `#CCCCCC` - `--iti-dialcode-color`: `#999999` - `--iti-dropdown-bg`: `#FFFFFF` - `--iti-arrow-color`: `#555555` - `--divider-color`: `#E7E2E2` ### Typefaces - Lato (`--e-global-typography-primary-font-family`) — on Google Fonts - Montserrat — on Google Fonts - Tahoma ### Type scale (most-used sizes) `32px` · `30px` · `22px` · `20px` · `1.2rem` · `18px` · `16px` · `1rem` · `15px` · `14px` · `12px` · `10px` ### Letter-spacing `.5px` (1) ### Corner radii (most-used) `3px` · `50%` · `5px` · `4px` · `9999px` · `6px` · `2px` · `10px` · `15px` · `1px` ### Shadows - `none!important` - `6px 10px 21px -10px #5280ff` - `1px 1px 3px 0 rgba(2,2,2,.23)` - `inset 0 -1px 0 #0000001a` - `0 0 10px 0 rgba(0,0,0,.5)` - `1px -7px 40px -5px rgba(68,68,68,.56)` ### Gradients - `linear-gradient(#fff 0 0)` - `linear-gradient(135deg,#5282ff 0,#62d6da 100%)` - `linear-gradient(90deg,#f3f3f3,#66dad8)` - `linear-gradient(90deg,#66dad8,#f3f3f3)` - `linear-gradient(135deg,rgb(6, 147, 227) 0%,rgb(155, 81, 224) 100%)` - `linear-gradient(135deg,rgb(122, 220, 180) 0%,rgb(0, 208, 130) 100%)` ### Breakpoints 500px · 575px · 576px · 640px · 641px · 767px · 768px · 769px · 782px · 992px · 1024px · 1025px · 1200px