[Design systems](/design-systems/) / Ailevate # Ailevate design system ailevate.com Read from Ailevate's public website by Clinical Terminal. Not reviewed by Ailevate. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Ailevate homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100125.jpg?alt=media) ## Palette - Ground \#FAFAFA \--color-white - Ink \#525457 - Accent on the ground \#CB4615 - Primary \#D95326 \--background-hero-tertiary - On primary \#000000 - Dark \#525457 - Site background \#FAFAFA \--color-white ## Other named colors - \--color-white #FAFAFA - \--color-ink #18191B - \--color-ink-muted #646568 - \--color-ink-subtle #827D82 - \--color-ink-description #101318 - \--color-panel #F2F2F2 - \--color-panel-soft #F0EEEE - \--color-border-soft #E6E5E5 - \--color-border-muted #CDCBCC - \--color-dark #323135 - \--color-dark-deep #18191B - \--color-darkest #0C0D0D - \--color-footer #0C0D0D - \--background-hero-primary #BBABBE - \--background-hero-secondary #ACBCD3 - \--background-hero-tertiary #D95326 - \--color-orange #D95326 - \--color-orange-hover #C2491F - \--color-orange-soft #FBE7DE - \--color-orange-tint #F3D3C4 - \--color-purple #81558A - \--color-purple-tint #E1D7E3 - \--color-blue #668FCC - \--color-blue-deep #142D52 - \--color-blue-cta-accent #8EBDE4 - \--color-blue-soft #ACBCD3 - \--color-teal-soft #ABBEAB - \--color-pink-soft #D6B6B3 - \--selection-bg #D95326 - \--nav-link-hover-color #FFFFFF - \--nav-link-active-color #FAFAFA - \--contracts-accent-color #ACBCD3 - \--contracts-accent-glow #ACBCD3 - \--color-ink-700 #323135 ## Type Headings Manrope · closest free match for Satoshi Ailevate at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 28pxAilevate - 24pxAilevate - 20pxAilevate - 18pxAilevate - 16pxAilevate - 14pxAilevate - 13pxAilevate - 11pxAilevate ## Shape & depth Cards and panels: 2px corners · buttons and chips: 6px. ### Corner radii - 8px used in 3 rules - 2px used in 2 rules - 10px used in 2 rules - 14px used in 2 rules - 16px used in 1 rule - 9px used in 1 rule - 12px used in 1 rule ### Shadows - 0 4px 12px #0f11150f,0 12px 24px #0f111514 used in 3 rules - inset 0 1px #ffffff0f,0 8px 24px #0000002e used in 1 rule - inset 0 1px #ffffff14,0 14px 36px #00000047 used in 1 rule - 0 1px 2px #0f11150a,0 4px 12px #0f11150a used in 1 rule - inset 0 -1px #eb5d290f used in 1 rule - 0 0 0 1px #0f111514 used in 1 rule ### Gradients - linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%) used in 2 rules - linear-gradient(180deg, #18191b 0%, #323135 100%) used in 1 rule - linear-gradient(180deg,#d95326 -100%,#fde7d3) used in 1 rule - linear-gradient(135deg,#ffffff0b,#ffffff04) used in 1 rule - radial-gradient(ellipse 560px 315px at 100% 0%,#eb5d2924,#eb5d2900 65%) used in 1 rule - radial-gradient(ellipse 420px 275px at 0% 100%,#8266ac29,#8266ac00 65%) used in 1 rule Breakpoints: 600px · 860px · 1180px · 1440px ## 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%2F100125.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Ailevate" domain: "ailevate.com" colors: primary: "#D95326" onPrimary: "#000000" dark: "#525457" background: "#FAFAFA" ground: mode: light hex: "#FAFAFA" ink: "#525457" accent: "#CB4615" fonts: heading: "Manrope" body: "Inter" radius: card: "2px" button: "6px" --- # Design System — Ailevate > Read from Ailevate's public website (ailevate.com) by Clinical Terminal. Not reviewed by Ailevate. > Use it as inspiration: borrow the ideas, not Ailevate's name, logo or identity. ## Ground - **Light ground** (#FAFAFA), from Ailevate's site background #FAFAFA. Pages and panels sit on it. - Main text: #525457 (7.28:1 on the ground). - Secondary text is #525457 at 88% / 76% / 60%; hairlines and plate borders #525457 at 16%. ## Color - **Accent on the ground: #CB4615** (4.55:1), adjusted from Ailevate's primary #D95326 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #D95326** for filled shapes (buttons, chips, bars), with #000000 text on it (5.22:1). - Quote every hex exactly as written above. ## Type - Headlines: **Manrope**. Body: **Inter**. Both on Google Fonts. - Ailevate's site uses Satoshi / Inter; these are the closest free look-alikes. ## Shape - Cards and panels: 2px corners. Buttons and chips: 6px. ## Voice - Tone: professional. Energy: medium. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--color-white`: `#FAFAFA` - `--color-ink`: `#18191B` - `--color-ink-muted`: `#646568` - `--color-ink-subtle`: `#827D82` - `--color-ink-description`: `#101318` - `--color-panel`: `#F2F2F2` - `--color-panel-soft`: `#F0EEEE` - `--color-border-soft`: `#E6E5E5` - `--color-border-muted`: `#CDCBCC` - `--color-dark`: `#323135` - `--color-dark-deep`: `#18191B` - `--color-darkest`: `#0C0D0D` - `--color-footer`: `#0C0D0D` - `--background-hero-primary`: `#BBABBE` - `--background-hero-secondary`: `#ACBCD3` - `--background-hero-tertiary`: `#D95326` - `--color-orange`: `#D95326` - `--color-orange-hover`: `#C2491F` - `--color-orange-soft`: `#FBE7DE` - `--color-orange-tint`: `#F3D3C4` - `--color-purple`: `#81558A` - `--color-purple-tint`: `#E1D7E3` - `--color-blue`: `#668FCC` - `--color-blue-deep`: `#142D52` - `--color-blue-cta-accent`: `#8EBDE4` - `--color-blue-soft`: `#ACBCD3` - `--color-teal-soft`: `#ABBEAB` - `--color-pink-soft`: `#D6B6B3` - `--selection-bg`: `#D95326` - `--nav-link-hover-color`: `#FFFFFF` - `--nav-link-active-color`: `#FAFAFA` - `--contracts-accent-color`: `#ACBCD3` - `--contracts-accent-glow`: `#ACBCD3` - `--color-ink-700`: `#323135` ### Typefaces - Inter (`--font-sans`) — on Google Fonts - Satoshi (`--font-title`) - JetBrains Mono (`--font-code`) — on Google Fonts ### Type scale (most-used sizes) `28px` · `24px` · `20px` · `18px` · `16px` · `14px` · `13px` · `11px` · `10.5px` · `10px` ### Letter-spacing `.14em` (4) · `-.0045em` (3) · `-.025em` (3) · `-.005em` (2) · `-.01em` (2) · `-.035em` (1) ### Corner radii (most-used) `8px` · `2px` · `10px` · `14px` · `16px` · `9px` · `12px` ### Shadows - `0 4px 12px #0f11150f,0 12px 24px #0f111514` - `inset 0 1px #ffffff0f,0 8px 24px #0000002e` - `inset 0 1px #ffffff14,0 14px 36px #00000047` - `0 1px 2px #0f11150a,0 4px 12px #0f11150a` - `inset 0 -1px #eb5d290f` - `0 0 0 1px #0f111514` ### Gradients - `linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)` - `linear-gradient(180deg, #18191b 0%, #323135 100%)` - `linear-gradient(180deg,#d95326 -100%,#fde7d3)` - `linear-gradient(135deg,#ffffff0b,#ffffff04)` - `radial-gradient(ellipse 560px 315px at 100% 0%,#eb5d2924,#eb5d2900 65%)` - `radial-gradient(ellipse 420px 275px at 0% 100%,#8266ac29,#8266ac00 65%)` ### Breakpoints 600px · 860px · 1180px · 1440px ```