[Design systems](/design-systems/) / Titan Health # Titan Health design system titanhealth.com Read from Titan Health's public website by Clinical Terminal. Not reviewed by Titan Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Titan Health logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923914.svg?alt=media) ## Palette - Ground \#FFFFFF \--sds-color-text-neutral-selected-on-bold - Ink \#171F66 - Accent on the ground \#394EFF - Primary \#394EFF \--sds-color-text-spaceship-primary - On primary \#FFFFFF \--sds-color-text-neutral-selected-on-bold - Dark \#171F66 - Site background \#FFFFFF \--sds-color-text-neutral-selected-on-bold ## Other named colors - \--sds-color-text-neutral-primary #2B2B2D - \--sds-color-text-neutral-secondary #575758 - \--sds-color-text-neutral-tertiary #6F6E6F - \--sds-color-text-neutral-selected-primary #2B2B2D - \--sds-color-text-neutral-selected-on-minimal #2B2B2D - \--sds-color-text-neutral-selected-on-subtle #2B2B2D - \--sds-color-text-neutral-selected-on-moderate #2B2B2D - \--sds-color-text-neutral-selected-on-bold #FFFFFF - \--sds-color-text-neutral-selected-on-contrast #FFFFFF - \--sds-color-text-neutral-on-minimal #2B2B2D - \--sds-color-text-neutral-on-subtle #2B2B2D - \--sds-color-text-neutral-on-moderate #2B2B2D - \--sds-color-text-neutral-on-bold #FFFFFF - \--sds-color-text-neutral-on-contrast #FFFFFF - \--sds-color-text-neutral-on-strong #FFFFFF - \--sds-color-text-neutral-on-minimal-opacity #2B2B2D - \--sds-color-text-neutral-on-subtle-opacity #2B2B2D - \--sds-color-text-neutral-on-moderate-opacity #2B2B2D - \--sds-color-text-neutral-on-minimal-variant #6F6E6F - \--sds-color-text-neutral-on-subtle-variant #6F6E6F - \--sds-color-text-neutral-on-moderate-variant #575758 - \--sds-color-text-neutral-on-strong-variant #CBCBCC - \--sds-color-text-neutral-on-contrast-variant #919091 - \--sds-color-text-inverted-primary #FFFFFF - \--sds-color-text-inverted-secondary #FFFFFF - \--sds-color-text-inverted-selected-primary #FFFFFF - \--sds-color-text-inverted-selected-on-minimal #FFFFFF - \--sds-color-text-inverted-selected-on-subtle #FFFFFF - \--sds-color-text-inverted-selected-on-moderate #FFFFFF - \--sds-color-text-inverted-on-minimal #FFFFFF - \--sds-color-text-inverted-on-subtle #FFFFFF - \--sds-color-text-inverted-on-moderate #FFFFFF - \--sds-color-text-inverted-on-minimal-variant #FFFFFF - \--sds-color-text-inverted-on-subtle-variant #FFFFFF - \--sds-color-text-spaceship-primary #394EFF - \--sds-color-text-spaceship-selected-primary #394EFF - \--sds-color-text-spaceship-selected-on-minimal #2C3DCE - \--sds-color-text-spaceship-selected-on-subtle #2C3DCE - \--sds-color-text-spaceship-selected-on-moderate #121D76 - \--sds-color-text-spaceship-selected-on-bold #FFFFFF - \--sds-color-text-spaceship-on-minimal #394EFF - \--sds-color-text-spaceship-on-subtle #2C3DCE - \--sds-color-text-spaceship-on-moderate #1F2DA0 - \--sds-color-text-spaceship-on-bold #FFFFFF - \--sds-color-text-spaceship-on-contrast #FFFFFF - \--sds-color-text-spaceship-on-strong #FFFFFF - \--sds-color-text-spaceship-on-minimal-opacity #394EFF - \--sds-color-text-spaceship-on-subtle-opacity #2C3DCE ## Type Headings Archivo · closest free match for GB Proxima Nova Titan Health at a glance Body Archivo · closest free match for GB Proxima Nova Clear, readable paragraphs for clinicians, buyers and patients alike. - 4.5rem · 72pxTitan Health - 3rem · 48pxTitan Health - 2.375rem · 38pxTitan Health - 2rem · 32pxTitan Health - 1.625rem · 26pxTitan Health - 1.25rem · 20pxTitan Health - 1.125rem · 18pxTitan Health - 1rem · 16pxTitan Health ## Shape & depth Cards and panels: 0px corners · buttons and chips: 24px. ### Corner radii - 16px used in 2 rules - 50% used in 1 rule - 8px used in 1 rule ### Shadows - -1.35em 2.25em 0 0 currentColor,1.35em 2.25em 0 0 currentColor used in 5 rules - 0 0 0 0 currentColor,0 0 0 0 currentColor used in 1 rule ### Gradients - radial-gradient(ellipse 80% 90% at 70% 40%,#9038ff8c 0,#394eff59 35%,#0000 60%) used in 1 rule - radial-gradient(ellipse 70% 80% at 60% 55%,#394eff80 0,#2e3ecc4d 40%,#0000 65%) used in 1 rule - radial-gradient(ellipse 90% 70% at 50% 35%,#9038ff99 0,#394eff59 40%,#0000 60%) used in 1 rule - radial-gradient(ellipse 80% 60% at 45% 55%,#394eff73 0,#0000 55%) used in 1 rule - linear-gradient(90deg,#fff 10%,#fff 40%,#fffc 60%,#fffc 90%) used in 1 rule Breakpoints: 479px · 480px · 767px · 768px · 979px · 980px · 1199px · 1200px · 1440px · 1800px ## Voice Tone: professional. Energy: low. 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%2F100923914.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Titan Health" domain: "titanhealth.com" colors: primary: "#394EFF" onPrimary: "#FFFFFF" dark: "#171F66" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#171F66" accent: "#394EFF" fonts: heading: "Archivo" body: "Archivo" radius: card: "0px" button: "24px" --- # Design System — Titan Health > Read from Titan Health's public website (titanhealth.com) by Clinical Terminal. Not reviewed by Titan Health. > Use it as inspiration: borrow the ideas, not Titan Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Titan Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #171F66 (14.74:1 on the ground). - Secondary text is #171F66 at 88% / 76% / 60%; hairlines and plate borders #171F66 at 16%. ## Color - **Accent on the ground: #394EFF** (5.66:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #394EFF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.66:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Titan Health's site uses GB Proxima Nova / GB Proxima Nova; these are the closest free look-alikes. ## Shape - Cards and panels: 0px corners. Buttons and chips: 24px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--sds-color-text-neutral-primary`: `#2B2B2D` - `--sds-color-text-neutral-secondary`: `#575758` - `--sds-color-text-neutral-tertiary`: `#6F6E6F` - `--sds-color-text-neutral-selected-primary`: `#2B2B2D` - `--sds-color-text-neutral-selected-on-minimal`: `#2B2B2D` - `--sds-color-text-neutral-selected-on-subtle`: `#2B2B2D` - `--sds-color-text-neutral-selected-on-moderate`: `#2B2B2D` - `--sds-color-text-neutral-selected-on-bold`: `#FFFFFF` - `--sds-color-text-neutral-selected-on-contrast`: `#FFFFFF` - `--sds-color-text-neutral-on-minimal`: `#2B2B2D` - `--sds-color-text-neutral-on-subtle`: `#2B2B2D` - `--sds-color-text-neutral-on-moderate`: `#2B2B2D` - `--sds-color-text-neutral-on-bold`: `#FFFFFF` - `--sds-color-text-neutral-on-contrast`: `#FFFFFF` - `--sds-color-text-neutral-on-strong`: `#FFFFFF` - `--sds-color-text-neutral-on-minimal-opacity`: `#2B2B2D` - `--sds-color-text-neutral-on-subtle-opacity`: `#2B2B2D` - `--sds-color-text-neutral-on-moderate-opacity`: `#2B2B2D` - `--sds-color-text-neutral-on-minimal-variant`: `#6F6E6F` - `--sds-color-text-neutral-on-subtle-variant`: `#6F6E6F` - `--sds-color-text-neutral-on-moderate-variant`: `#575758` - `--sds-color-text-neutral-on-strong-variant`: `#CBCBCC` - `--sds-color-text-neutral-on-contrast-variant`: `#919091` - `--sds-color-text-inverted-primary`: `#FFFFFF` - `--sds-color-text-inverted-secondary`: `#FFFFFF` - `--sds-color-text-inverted-selected-primary`: `#FFFFFF` - `--sds-color-text-inverted-selected-on-minimal`: `#FFFFFF` - `--sds-color-text-inverted-selected-on-subtle`: `#FFFFFF` - `--sds-color-text-inverted-selected-on-moderate`: `#FFFFFF` - `--sds-color-text-inverted-on-minimal`: `#FFFFFF` - `--sds-color-text-inverted-on-subtle`: `#FFFFFF` - `--sds-color-text-inverted-on-moderate`: `#FFFFFF` - `--sds-color-text-inverted-on-minimal-variant`: `#FFFFFF` - `--sds-color-text-inverted-on-subtle-variant`: `#FFFFFF` - `--sds-color-text-spaceship-primary`: `#394EFF` - `--sds-color-text-spaceship-selected-primary`: `#394EFF` - `--sds-color-text-spaceship-selected-on-minimal`: `#2C3DCE` - `--sds-color-text-spaceship-selected-on-subtle`: `#2C3DCE` - `--sds-color-text-spaceship-selected-on-moderate`: `#121D76` - `--sds-color-text-spaceship-selected-on-bold`: `#FFFFFF` - `--sds-color-text-spaceship-on-minimal`: `#394EFF` - `--sds-color-text-spaceship-on-subtle`: `#2C3DCE` - `--sds-color-text-spaceship-on-moderate`: `#1F2DA0` - `--sds-color-text-spaceship-on-bold`: `#FFFFFF` - `--sds-color-text-spaceship-on-contrast`: `#FFFFFF` - `--sds-color-text-spaceship-on-strong`: `#FFFFFF` - `--sds-color-text-spaceship-on-minimal-opacity`: `#394EFF` - `--sds-color-text-spaceship-on-subtle-opacity`: `#2C3DCE` - `--sds-color-text-spaceship-on-moderate-opacity`: `#1F2DA0` - `--sds-color-text-spaceship-on-strong-variant`: `#ABCAFF` - `--sds-color-text-spaceship-on-contrast-variant`: `#5C83FF` - `--sds-color-text-info-primary`: `#0F6BD0` - `--sds-color-text-info-on-minimal`: `#0F6BD0` - `--sds-color-text-info-on-subtle`: `#0054A9` - `--sds-color-text-info-on-moderate`: `#003F80` - `--sds-color-text-info-on-bold`: `#FFFFFF` - `--sds-color-text-info-on-contrast`: `#FFFFFF` - `--sds-color-text-info-on-strong`: `#FFFFFF` - `--sds-color-text-info-on-minimal-opacity`: `#0F6BD0` - `--sds-color-text-info-on-subtle-opacity`: `#0054A9` - `--sds-color-text-info-on-moderate-opacity`: `#003F80` - `--sds-color-text-info-on-strong-variant`: `#B1CBFF` - `--sds-color-text-info-on-contrast-variant`: `#5D8FE0` - `--sds-color-text-success-primary`: `#007F39` - `--sds-color-text-success-on-minimal`: `#007F39` - `--sds-color-text-success-on-subtle`: `#00652C` - `--sds-color-text-success-on-moderate`: `#004B1F` - `--sds-color-text-success-on-bold`: `#FFFFFF` - `--sds-color-text-success-on-contrast`: `#FFFFFF` - `--sds-color-text-success-on-strong`: `#FFFFFF` - `--sds-color-text-success-on-minimal-opacity`: `#007F39` - `--sds-color-text-success-on-subtle-opacity`: `#00652C` - `--sds-color-text-success-on-moderate-opacity`: `#004B1F` - `--sds-color-text-success-on-strong-variant`: `#9BDAA8` - `--sds-color-text-success-on-contrast-variant`: `#40A25D` - `--sds-color-text-warning-primary`: `#C04900` - `--sds-color-text-warning-on-minimal`: `#C04900` - `--sds-color-text-warning-on-subtle`: `#993900` - `--sds-color-text-warning-on-moderate`: `#742900` - `--sds-color-text-warning-on-bold`: `#501A00` - `--sds-color-text-warning-on-contrast`: `#FFFFFF` - `--sds-color-text-warning-on-strong`: `#FFFFFF` - `--sds-color-text-warning-on-minimal-opacity`: `#993900` - `--sds-color-text-warning-on-subtle-opacity`: `#993900` - `--sds-color-text-warning-on-moderate-opacity`: `#742900` - `--sds-color-text-warning-on-strong-variant`: `#FFF3CB` - `--sds-color-text-warning-on-contrast-variant`: `#F06700` - `--sds-color-text-danger-primary`: `#D91300` - `--sds-color-text-danger-on-minimal`: `#D91300` - `--sds-color-text-danger-on-subtle`: `#AE0D00` - `--sds-color-text-danger-on-moderate`: `#840800` - `--sds-color-text-danger-on-bold`: `#FFFFFF` - `--sds-color-text-danger-on-contrast`: `#FFFFFF` - `--sds-color-text-danger-on-strong`: `#FFFFFF` - `--sds-color-text-danger-on-minimal-opacity`: `#D91300` - `--sds-color-text-danger-on-subtle-opacity`: `#AE0D00` - `--sds-color-text-danger-on-moderate-opacity`: `#840800` - `--sds-color-text-danger-on-strong-variant`: `#FFBAAE` - `--sds-color-text-danger-on-contrast-variant`: `#FF5239` - `--sds-color-icon-neutral-primary`: `#2B2B2D` - `--sds-color-icon-neutral-secondary`: `#575758` - `--sds-color-icon-neutral-tertiary`: `#6F6E6F` - `--sds-color-icon-neutral-selected-primary`: `#2B2B2D` - `--sds-color-icon-neutral-selected-on-minimal`: `#2B2B2D` - `--sds-color-icon-neutral-selected-on-subtle`: `#2B2B2D` - `--sds-color-icon-neutral-selected-on-moderate`: `#2B2B2D` - `--sds-color-icon-neutral-selected-on-bold`: `#FFFFFF` - `--sds-color-icon-neutral-selected-on-contrast`: `#FFFFFF` - `--sds-color-icon-neutral-on-minimal`: `#2B2B2D` - `--sds-color-icon-neutral-on-subtle`: `#2B2B2D` - `--sds-color-icon-neutral-on-moderate`: `#2B2B2D` - `--sds-color-icon-neutral-on-bold`: `#FFFFFF` - `--sds-color-icon-neutral-on-contrast`: `#FFFFFF` - `--sds-color-icon-neutral-on-strong`: `#FFFFFF` - `--sds-color-icon-neutral-on-minimal-opacity`: `#2B2B2D` - `--sds-color-icon-neutral-on-subtle-opacity`: `#2B2B2D` - `--sds-color-icon-neutral-on-moderate-opacity`: `#2B2B2D` - `--sds-color-icon-neutral-on-minimal-variant`: `#6F6E6F` - `--sds-color-icon-neutral-on-subtle-variant`: `#6F6E6F` - `--sds-color-icon-neutral-on-moderate-variant`: `#575758` - `--sds-color-icon-neutral-on-strong-variant`: `#CBCBCC` - `--sds-color-icon-neutral-on-contrast-variant`: `#919091` - `--sds-color-icon-neutral-on-bold-variant`: `#FFFFFF` - `--sds-color-icon-inverted-primary`: `#FFFFFF` - `--sds-color-icon-inverted-secondary`: `#FFFFFF` - `--sds-color-icon-inverted-selected-primary`: `#FFFFFF` - `--sds-color-icon-inverted-selected-on-minimal`: `#FFFFFF` - `--sds-color-icon-inverted-selected-on-subtle`: `#FFFFFF` - `--sds-color-icon-inverted-selected-on-moderate`: `#FFFFFF` - `--sds-color-icon-inverted-on-minimal`: `#FFFFFF` - `--sds-color-icon-inverted-on-subtle`: `#FFFFFF` - `--sds-color-icon-inverted-on-moderate`: `#FFFFFF` - `--sds-color-icon-inverted-on-minimal-variant`: `#FFFFFF` - `--sds-color-icon-inverted-on-subtle-variant`: `#FFFFFF` - `--sds-color-icon-spaceship-primary`: `#394EFF` - `--sds-color-icon-spaceship-selected-primary`: `#394EFF` - `--sds-color-icon-spaceship-selected-on-minimal`: `#2C3DCE` - `--sds-color-icon-spaceship-selected-on-subtle`: `#2C3DCE` - `--sds-color-icon-spaceship-selected-on-moderate`: `#121D76` - `--sds-color-icon-spaceship-selected-on-bold`: `#FFFFFF` - `--sds-color-icon-spaceship-on-minimal`: `#394EFF` - `--sds-color-icon-spaceship-on-subtle`: `#2C3DCE` - `--sds-color-icon-spaceship-on-moderate`: `#1F2DA0` - `--sds-color-icon-spaceship-on-bold`: `#FFFFFF` - `--sds-color-icon-spaceship-on-contrast`: `#FFFFFF` - `--sds-color-icon-spaceship-on-strong`: `#FFFFFF` - `--sds-color-icon-spaceship-on-minimal-opacity`: `#394EFF` - `--sds-color-icon-spaceship-on-subtle-opacity`: `#2C3DCE` - `--sds-color-icon-spaceship-on-moderate-opacity`: `#1F2DA0` - `--sds-color-icon-spaceship-on-subtle-variant`: `#394EFF` - `--sds-color-icon-spaceship-on-moderate-variant`: `#2C3DCE` - `--sds-color-icon-spaceship-on-strong-variant`: `#ABCAFF` - `--sds-color-icon-spaceship-on-contrast-variant`: `#5C83FF` - `--sds-color-icon-spaceship-primary-variant`: `#5C83FF` - `--sds-color-icon-info-primary`: `#0F6BD0` - `--sds-color-icon-info-on-minimal`: `#0F6BD0` - `--sds-color-icon-info-on-subtle`: `#0054A9` - `--sds-color-icon-info-on-moderate`: `#003F80` - `--sds-color-icon-info-on-bold`: `#FFFFFF` - `--sds-color-icon-info-on-contrast`: `#FFFFFF` - `--sds-color-icon-info-on-strong`: `#FFFFFF` - `--sds-color-icon-info-on-minimal-opacity`: `#0F6BD0` - `--sds-color-icon-info-on-subtle-opacity`: `#0054A9` - `--sds-color-icon-info-on-moderate-opacity`: `#003F80` - `--sds-color-icon-info-on-subtle-variant`: `#0F6BD0` - `--sds-color-icon-info-on-moderate-variant`: `#0054A9` - `--sds-color-icon-info-on-strong-variant`: `#B1CBFF` - `--sds-color-icon-info-on-contrast-variant`: `#5D8FE0` - `--sds-color-icon-info-primary-variant`: `#5D8FE0` - `--sds-color-icon-success-primary`: `#007F39` - `--sds-color-icon-success-on-minimal`: `#007F39` - `--sds-color-icon-success-on-subtle`: `#00652C` - `--sds-color-icon-success-on-moderate`: `#004B1F` - `--sds-color-icon-success-on-bold`: `#FFFFFF` - `--sds-color-icon-success-on-contrast`: `#FFFFFF` - `--sds-color-icon-success-on-strong`: `#FFFFFF` - `--sds-color-icon-success-on-minimal-opacity`: `#007F39` - `--sds-color-icon-success-on-subtle-opacity`: `#00652C` - `--sds-color-icon-success-on-moderate-opacity`: `#004B1F` - `--sds-color-icon-success-on-subtle-variant`: `#007F39` - `--sds-color-icon-success-on-moderate-variant`: `#00652C` - `--sds-color-icon-success-on-strong-variant`: `#9BDAA8` - `--sds-color-icon-success-on-contrast-variant`: `#40A25D` - `--sds-color-icon-success-primary-variant`: `#40A25D` - `--sds-color-icon-warning-primary`: `#C04900` - `--sds-color-icon-warning-on-minimal`: `#C04900` - `--sds-color-icon-warning-on-subtle`: `#993900` - `--sds-color-icon-warning-on-moderate`: `#742900` - `--sds-color-icon-warning-on-bold`: `#501A00` - `--sds-color-icon-warning-on-contrast`: `#FFFFFF` - `--sds-color-icon-warning-on-strong`: `#FFFFFF` - `--sds-color-icon-warning-on-minimal-opacity`: `#993900` - `--sds-color-icon-warning-on-subtle-opacity`: `#993900` - `--sds-color-icon-warning-on-moderate-opacity`: `#742900` - `--sds-color-icon-warning-on-subtle-variant`: `#C04900` - `--sds-color-icon-warning-on-moderate-variant`: `#993900` - `--sds-color-icon-warning-on-strong-variant`: `#FFF3CB` - `--sds-color-icon-warning-on-contrast-variant`: `#F06700` - `--sds-color-icon-warning-primary-variant`: `#F06700` - `--sds-color-icon-danger-primary`: `#D91300` - `--sds-color-icon-danger-on-minimal`: `#D91300` - `--sds-color-icon-danger-on-subtle`: `#AE0D00` - `--sds-color-icon-danger-on-moderate`: `#840800` - `--sds-color-icon-danger-on-bold`: `#FFFFFF` - `--sds-color-icon-danger-on-contrast`: `#FFFFFF` - `--sds-color-icon-danger-on-strong`: `#FFFFFF` - `--sds-color-icon-danger-on-minimal-opacity`: `#D91300` - `--sds-color-icon-danger-on-subtle-opacity`: `#AE0D00` - `--sds-color-icon-danger-on-moderate-opacity`: `#840800` - `--sds-color-icon-danger-on-subtle-variant`: `#D91300` - `--sds-color-icon-danger-on-moderate-variant`: `#AE0D00` - `--sds-color-icon-danger-on-strong-variant`: `#FFBAAE` - `--sds-color-icon-danger-on-contrast-variant`: `#FF5239` - `--sds-color-icon-danger-primary-variant`: `#FF5239` - `--sds-color-background-neutral-selected-base`: `#373716` - `--sds-color-background-neutral-selected-minimal`: `#263726` - `--sds-color-background-neutral-selected-subtle`: `#0D0D0D` - `--sds-color-background-neutral-selected-moderate`: `#07070C` - `--sds-color-background-neutral-selected-bold`: `#6F6E6F` - `--sds-color-background-neutral-selected-contrast`: `#2B2B2D` - `--sds-color-background-neutral-base`: `#FFFFFF` - `--sds-color-background-neutral-minimal`: `#F9F9F9` - `--sds-color-background-neutral-subtle`: `#F2F2F2` - `--sds-color-background-neutral-moderate`: `#E2E2E2` - `--sds-color-background-neutral-bold`: `#6F6E6F` - `--sds-color-background-neutral-strong`: `#404042` - `--sds-color-background-neutral-contrast`: `#2B2B2D` - `--sds-color-background-neutral-minimal-opacity`: `#373716` - `--sds-color-background-neutral-subtle-opacity`: `#263726` - `--sds-color-background-neutral-moderate-opacity`: `#0D0D0D` - `--sds-color-background-neutral-bold-variant`: `#919091` - `--sds-color-background-inverted-selected-base`: `#FFFFFF` - `--sds-color-background-inverted-selected-subtle`: `#FFFFFF` - `--sds-color-background-inverted-selected-contrast`: `#FFFFFF` - `--sds-color-background-inverted-minimal`: `#FFFFFF` - `--sds-color-background-inverted-subtle`: `#FFFFFF` - `--sds-color-background-inverted-moderate`: `#FFFFFF` - `--sds-color-background-inverted-contrast`: `#FFFFFF` - `--sds-color-background-spaceship-selected-base`: `#1E82FF` - `--sds-color-background-spaceship-selected-minimal`: `#0569FF` - `--sds-color-background-spaceship-selected-subtle`: `#026CFF` - `--sds-color-background-spaceship-selected-moderate`: `#005EFF` - `--sds-color-background-spaceship-selected-bold`: `#394EFF` - `--sds-color-background-spaceship-minimal`: `#F6FAFF` - `--sds-color-background-spaceship-subtle`: `#EBF3FF` - `--sds-color-background-spaceship-moderate`: `#CFE3FF` - `--sds-color-background-spaceship-bold`: `#394EFF` - `--sds-color-background-spaceship-strong`: `#1F2DA0` - `--sds-color-background-spaceship-contrast`: `#050D4F` - `--sds-color-background-spaceship-minimal-opacity`: `#1E82FF` - `--sds-color-background-spaceship-subtle-opacity`: `#0569FF` - `--sds-color-background-spaceship-moderate-opacity`: `#026CFF` - `--sds-color-background-info-selected-base`: `#3737FF` - `--sds-color-background-info-selected-minimal`: `#1A45FF` - `--sds-color-background-info-selected-subtle`: `#0E54FF` - `--sds-color-background-info-selected-moderate`: `#0357FF` - `--sds-color-background-info-selected-bold`: `#0F6BD0` - `--sds-color-background-info-minimal`: `#F9F9FF` - `--sds-color-background-info-subtle`: `#EFF2FF` - `--sds-color-background-info-moderate`: `#D6E2FF` - `--sds-color-background-info-bold`: `#0F6BD0` - `--sds-color-background-info-strong`: `#003F80` - `--sds-color-background-info-contrast`: `#001737` - `--sds-color-background-info-minimal-opacity`: `#3737FF` - `--sds-color-background-info-subtle-opacity`: `#1A45FF` - `--sds-color-background-info-moderate-opacity`: `#0E54FF` - `--sds-color-background-success-selected-base`: `#29E20C` - `--sds-color-background-success-selected-minimal`: `#09D918` - `--sds-color-background-success-selected-subtle`: `#07CB2D` - `--sds-color-background-success-selected-moderate`: `#03AF2E` - `--sds-color-background-success-selected-bold`: `#007F39` - `--sds-color-background-success-minimal`: `#F8FAF5` - `--sds-color-background-success-subtle`: `#E9F6E8` - `--sds-color-background-success-moderate`: `#C7ECCC` - `--sds-color-background-success-bold`: `#007F39` - `--sds-color-background-success-strong`: `#004B1F` - `--sds-color-background-success-contrast`: `#001D08` - `--sds-color-background-success-minimal-opacity`: `#29E20C` - `--sds-color-background-success-subtle-opacity`: `#09D918` - `--sds-color-background-success-moderate-opacity`: `#07CB2D` - `--sds-color-background-warning-selected-base`: `#FFC319` - `--sds-color-background-warning-selected-minimal`: `#FFC607` - `--sds-color-background-warning-selected-subtle`: `#FFBC05` - `--sds-color-background-warning-selected-moderate`: `#FFAA02` - `--sds-color-background-warning-selected-bold`: `#F99A00` - `--sds-color-background-warning-minimal`: `#FFF9E8` - `--sds-color-background-warning-subtle`: `#FFF3CB` - `--sds-color-background-warning-moderate`: `#FFE08C` - `--sds-color-background-warning-bold`: `#F99A00` - `--sds-color-background-warning-strong`: `#C04900` - `--sds-color-background-warning-contrast`: `#300C00` - `--sds-color-background-warning-minimal-opacity`: `#FFC319` - `--sds-color-background-warning-subtle-opacity`: `#FFC607` - `--sds-color-background-warning-moderate-opacity`: `#FFBC05` - `--sds-color-background-danger-selected-base`: `#FF501E` - `--sds-color-background-danger-selected-minimal`: `#FF371E` - `--sds-color-background-danger-selected-subtle`: `#FF310B` - `--sds-color-background-danger-selected-moderate`: `#FF2702` - `--sds-color-background-danger-selected-bold`: `#D91300` - `--sds-color-background-danger-minimal`: `#FFF8F6` - `--sds-color-background-danger-subtle`: `#FFEFED` - `--sds-color-background-danger-moderate`: `#FFDAD3` - `--sds-color-background-danger-bold`: `#D91300` - `--sds-color-background-danger-strong`: `#840800` - `--sds-color-background-danger-contrast`: `#380100` - `--sds-color-background-danger-minimal-opacity`: `#FF501E` - `--sds-color-background-danger-subtle-opacity`: `#FF371E` - `--sds-color-background-danger-moderate-opacity`: `#FF310B` - `--sds-color-border-neutral-selected-subtle`: `#07070C` - `--sds-color-border-neutral-selected-bold`: `#2B2B2D` - `--sds-color-border-neutral-minimal`: `#263726` - `--sds-color-border-neutral-minimal-hovered`: `#07070C` - `--sds-color-border-neutral-minimal-pressed`: `#080508` - `--sds-color-border-neutral-subtle`: `#0D0D0D` - `--sds-color-border-neutral-subtle-hovered`: `#080508` - `--sds-color-border-neutral-subtle-pressed`: `#050305` - `--sds-color-border-neutral-moderate`: `#07070C` - `--sds-color-border-neutral-moderate-hovered`: `#050305` - `--sds-color-border-neutral-moderate-pressed`: `#6F6E6F` - `--sds-color-border-neutral-bold`: `#080508` - `--sds-color-border-neutral-strong`: `#050305` - `--sds-color-border-neutral-contrast`: `#2B2B2D` - `--sds-color-border-inverted-selected-subtle`: `#FFFFFF` - `--sds-color-border-inverted-selected-bold`: `#FFFFFF` - `--sds-color-border-inverted-selected-contrast`: `#FFFFFF` - `--sds-color-border-inverted-minimal`: `#FFFFFF` - `--sds-color-border-inverted-minimal-hovered`: `#FFFFFF` - `--sds-color-border-inverted-minimal-pressed`: `#FFFFFF` - `--sds-color-border-inverted-subtle`: `#FFFFFF` - `--sds-color-border-inverted-subtle-hovered`: `#FFFFFF` - `--sds-color-border-inverted-subtle-pressed`: `#FFFFFF` - `--sds-color-border-inverted-moderate`: `#FFFFFF` - `--sds-color-border-inverted-moderate-hovered`: `#FFFFFF` - `--sds-color-border-inverted-moderate-pressed`: `#FFFFFF` - `--sds-color-border-inverted-bold`: `#FFFFFF` - `--sds-color-border-inverted-focused`: `#FFFFFF` - `--sds-color-border-inverted-inner-focused`: `#FFFFFF` - `--sds-color-border-inverted-outer-focused`: `#FFFFFF` - `--sds-color-border-spaceship-selected-subtle`: `#005EFF` - `--sds-color-border-spaceship-selected-bold`: `#394EFF` - `--sds-color-border-spaceship-subtle`: `#026CFF` - `--sds-color-border-spaceship-subtle-hovered`: `#0452FF` - `--sds-color-border-spaceship-subtle-pressed`: `#003DFF` - `--sds-color-border-spaceship-moderate`: `#005EFF` - `--sds-color-border-spaceship-moderate-hovered`: `#003DFF` - `--sds-color-border-spaceship-moderate-pressed`: `#394EFF` - `--sds-color-border-spaceship-bold`: `#0452FF` - `--sds-color-border-spaceship-strong`: `#003DFF` - `--sds-color-border-spaceship-contrast`: `#394EFF` - `--sds-color-border-info-subtle`: `#0E54FF` - `--sds-color-border-info-subtle-hovered`: `#0351E1` - `--sds-color-border-info-subtle-pressed`: `#0250CF` - `--sds-color-border-info-moderate`: `#0357FF` - `--sds-color-border-info-moderate-hovered`: `#0250CF` - `--sds-color-border-info-moderate-pressed`: `#0F6BD0` - `--sds-color-border-info-bold`: `#0351E1` - `--sds-color-border-info-strong`: `#0250CF` - `--sds-color-border-info-contrast`: `#0F6BD0` - `--sds-color-border-success-subtle`: `#07CB2D` - `--sds-color-border-success-subtle-hovered`: `#02982F` - `--sds-color-border-success-subtle-pressed`: `#01812E` - `--sds-color-border-success-moderate`: `#03AF2E` - `--sds-color-border-success-moderate-hovered`: `#01812E` - `--sds-color-border-success-moderate-pressed`: `#007F39` - `--sds-color-border-success-bold`: `#02982F` - `--sds-color-border-success-strong`: `#01812E` - `--sds-color-border-success-contrast`: `#007F39` - `--sds-color-border-success-focused`: `#01812E` - `--sds-color-border-success-inner-focused`: `#40A25D` - `--sds-color-border-success-outer-focused`: `#07CB2D` - `--sds-color-border-warning-subtle`: `#FFBC05` - `--sds-color-border-warning-subtle-hovered`: `#F99A00` - `--sds-color-border-warning-subtle-pressed`: `#F06700` - `--sds-color-border-warning-moderate`: `#FFAA02` - `--sds-color-border-warning-moderate-hovered`: `#F06700` - `--sds-color-border-warning-moderate-pressed`: `#C04900` - `--sds-color-border-warning-bold`: `#F99A00` - `--sds-color-border-warning-strong`: `#F06700` - `--sds-color-border-warning-contrast`: `#C04900` - `--sds-color-border-warning-focused`: `#F06700` - `--sds-color-border-warning-inner-focused`: `#F06700` - `--sds-color-border-warning-outer-focused`: `#FFBC05` - `--sds-color-border-danger-subtle`: `#FF310B` - `--sds-color-border-danger-subtle-hovered`: `#FF2500` - `--sds-color-border-danger-subtle-pressed`: `#FF2101` - `--sds-color-border-danger-moderate`: `#FF2702` - `--sds-color-border-danger-moderate-hovered`: `#FF2101` - `--sds-color-border-danger-moderate-pressed`: `#D91300` - `--sds-color-border-danger-bold`: `#FF2500` - `--sds-color-border-danger-strong`: `#FF2101` - `--sds-color-border-danger-contrast`: `#D91300` - `--sds-color-border-danger-focused`: `#FF5239` - `--sds-color-border-danger-inner-focused`: `#FF5239` - `--sds-color-border-danger-outer-focused`: `#FF310B` - `--sds-color-surface-base`: `#FFFFFF` - `--sds-color-surface-contrast`: `#2B2B2D` - `--sds-color-surface-sunken`: `#17181A` - `--sds-color-surface-raised`: `#FFFFFF` - `--sds-color-surface-overlay`: `#FFFFFF` - `--sds-color-surface-scrim`: `#17181A` - `--sds-color-state-layer-neutral-primary-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-primary-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-primary-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-secondary-hovered`: `#575758` - `--sds-color-state-layer-neutral-secondary-focused`: `#575758` - `--sds-color-state-layer-neutral-secondary-pressed`: `#575758` - `--sds-color-state-layer-neutral-tertiary-hovered`: `#6F6E6F` - `--sds-color-state-layer-neutral-tertiary-focused`: `#6F6E6F` - `--sds-color-state-layer-neutral-tertiary-pressed`: `#6F6E6F` - `--sds-color-state-layer-neutral-selected-primary-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-primary-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-primary-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-minimal-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-minimal-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-minimal-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-subtle-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-subtle-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-subtle-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-moderate-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-moderate-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-moderate-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-selected-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-neutral-selected-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-neutral-selected-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-neutral-selected-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-neutral-selected-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-neutral-selected-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-minimal-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-minimal-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-minimal-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-subtle-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-subtle-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-subtle-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-moderate-hovered`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-moderate-focused`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-moderate-pressed`: `#2B2B2D` - `--sds-color-state-layer-neutral-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-neutral-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-primary-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-primary-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-primary-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-secondary-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-secondary-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-secondary-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-primary-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-primary-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-primary-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-minimal-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-minimal-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-minimal-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-subtle-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-subtle-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-subtle-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-moderate-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-moderate-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-selected-on-moderate-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-minimal-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-minimal-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-minimal-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-subtle-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-subtle-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-subtle-pressed`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-moderate-hovered`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-moderate-focused`: `#FFFFFF` - `--sds-color-state-layer-inverted-on-moderate-pressed`: `#FFFFFF` - `--sds-color-state-layer-spaceship-primary-hovered`: `#394EFF` - `--sds-color-state-layer-spaceship-primary-focused`: `#394EFF` - `--sds-color-state-layer-spaceship-primary-pressed`: `#394EFF` - `--sds-color-state-layer-spaceship-selected-primary-hovered`: `#394EFF` - `--sds-color-state-layer-spaceship-selected-primary-focused`: `#394EFF` - `--sds-color-state-layer-spaceship-selected-primary-pressed`: `#394EFF` - `--sds-color-state-layer-spaceship-selected-on-minimal-hovered`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-minimal-focused`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-minimal-pressed`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-subtle-hovered`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-subtle-focused`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-subtle-pressed`: `#2C3DCE` - `--sds-color-state-layer-spaceship-selected-on-moderate-hovered`: `#121D76` - `--sds-color-state-layer-spaceship-selected-on-moderate-focused`: `#121D76` - `--sds-color-state-layer-spaceship-selected-on-moderate-pressed`: `#121D76` - `--sds-color-state-layer-spaceship-selected-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-spaceship-selected-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-spaceship-selected-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-minimal-hovered`: `#394EFF` - `--sds-color-state-layer-spaceship-on-minimal-focused`: `#394EFF` - `--sds-color-state-layer-spaceship-on-minimal-pressed`: `#394EFF` - `--sds-color-state-layer-spaceship-on-subtle-hovered`: `#2C3DCE` - `--sds-color-state-layer-spaceship-on-subtle-focused`: `#2C3DCE` - `--sds-color-state-layer-spaceship-on-subtle-pressed`: `#2C3DCE` - `--sds-color-state-layer-spaceship-on-moderate-hovered`: `#1F2DA0` - `--sds-color-state-layer-spaceship-on-moderate-focused`: `#1F2DA0` - `--sds-color-state-layer-spaceship-on-moderate-pressed`: `#1F2DA0` - `--sds-color-state-layer-spaceship-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-spaceship-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-info-primary-hovered`: `#0F6BD0` - `--sds-color-state-layer-info-primary-focused`: `#0F6BD0` - `--sds-color-state-layer-info-primary-pressed`: `#0F6BD0` - `--sds-color-state-layer-info-on-minimal-hovered`: `#0F6BD0` - `--sds-color-state-layer-info-on-minimal-focused`: `#0F6BD0` - `--sds-color-state-layer-info-on-minimal-pressed`: `#0F6BD0` - `--sds-color-state-layer-info-on-subtle-hovered`: `#0054A9` - `--sds-color-state-layer-info-on-subtle-focused`: `#0054A9` - `--sds-color-state-layer-info-on-subtle-pressed`: `#0054A9` - `--sds-color-state-layer-info-on-moderate-hovered`: `#003F80` - `--sds-color-state-layer-info-on-moderate-focused`: `#003F80` - `--sds-color-state-layer-info-on-moderate-pressed`: `#003F80` - `--sds-color-state-layer-info-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-info-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-info-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-info-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-info-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-info-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-info-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-info-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-info-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-success-primary-hovered`: `#007F39` - `--sds-color-state-layer-success-primary-focused`: `#007F39` - `--sds-color-state-layer-success-primary-pressed`: `#007F39` - `--sds-color-state-layer-success-on-minimal-hovered`: `#007F39` - `--sds-color-state-layer-success-on-minimal-focused`: `#007F39` - `--sds-color-state-layer-success-on-minimal-pressed`: `#007F39` - `--sds-color-state-layer-success-on-subtle-hovered`: `#00652C` - `--sds-color-state-layer-success-on-subtle-focused`: `#00652C` - `--sds-color-state-layer-success-on-subtle-pressed`: `#00652C` - `--sds-color-state-layer-success-on-moderate-hovered`: `#004B1F` - `--sds-color-state-layer-success-on-moderate-focused`: `#004B1F` - `--sds-color-state-layer-success-on-moderate-pressed`: `#004B1F` - `--sds-color-state-layer-success-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-success-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-success-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-success-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-success-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-success-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-success-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-success-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-success-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-warning-primary-hovered`: `#C04900` - `--sds-color-state-layer-warning-primary-focused`: `#C04900` - `--sds-color-state-layer-warning-primary-pressed`: `#C04900` - `--sds-color-state-layer-warning-on-minimal-hovered`: `#C04900` - `--sds-color-state-layer-warning-on-minimal-focused`: `#C04900` - `--sds-color-state-layer-warning-on-minimal-pressed`: `#C04900` - `--sds-color-state-layer-warning-on-subtle-hovered`: `#993900` - `--sds-color-state-layer-warning-on-subtle-focused`: `#993900` - `--sds-color-state-layer-warning-on-subtle-pressed`: `#993900` - `--sds-color-state-layer-warning-on-moderate-hovered`: `#742900` - `--sds-color-state-layer-warning-on-moderate-focused`: `#742900` - `--sds-color-state-layer-warning-on-moderate-pressed`: `#742900` - `--sds-color-state-layer-warning-on-bold-hovered`: `#501A00` - `--sds-color-state-layer-warning-on-bold-focused`: `#501A00` - `--sds-color-state-layer-warning-on-bold-pressed`: `#501A00` - `--sds-color-state-layer-warning-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-warning-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-warning-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-warning-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-warning-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-warning-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-danger-primary-hovered`: `#D91300` - `--sds-color-state-layer-danger-primary-focused`: `#D91300` - `--sds-color-state-layer-danger-primary-pressed`: `#D91300` - `--sds-color-state-layer-danger-on-minimal-hovered`: `#D91300` - `--sds-color-state-layer-danger-on-minimal-focused`: `#D91300` - `--sds-color-state-layer-danger-on-minimal-pressed`: `#D91300` - `--sds-color-state-layer-danger-on-subtle-hovered`: `#AE0D00` - `--sds-color-state-layer-danger-on-subtle-focused`: `#AE0D00` - `--sds-color-state-layer-danger-on-subtle-pressed`: `#AE0D00` - `--sds-color-state-layer-danger-on-moderate-hovered`: `#840800` - `--sds-color-state-layer-danger-on-moderate-focused`: `#840800` - `--sds-color-state-layer-danger-on-moderate-pressed`: `#840800` - `--sds-color-state-layer-danger-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-danger-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-danger-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-danger-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-danger-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-danger-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-danger-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-danger-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-danger-on-strong-pressed`: `#FFFFFF` - `--sds-color-text-brand-primary`: `#394EFF` - `--sds-color-text-brand-on-minimal`: `#394EFF` - `--sds-color-text-brand-on-subtle`: `#2C3DCE` - `--sds-color-text-brand-on-moderate`: `#1F2DA0` - `--sds-color-text-brand-on-bold`: `#FFFFFF` - `--sds-color-text-brand-on-strong`: `#FFFFFF` - `--sds-color-text-brand-on-contrast`: `#FFFFFF` - `--sds-color-text-brand-on-strong-variant`: `#ABCAFF` - `--sds-color-text-brand-on-contrast-variant`: `#5C83FF` - `--sds-color-text-brand-on-minimal-opacity`: `#394EFF` - `--sds-color-text-brand-on-subtle-opacity`: `#2C3DCE` - `--sds-color-text-brand-on-moderate-opacity`: `#1F2DA0` - `--sds-color-text-brand-selected-primary`: `#394EFF` - `--sds-color-text-brand-selected-on-minimal`: `#2C3DCE` - `--sds-color-text-brand-selected-on-subtle`: `#2C3DCE` - `--sds-color-text-brand-selected-on-moderate`: `#121D76` - `--sds-color-text-brand-selected-on-bold`: `#FFFFFF` - `--sds-color-icon-brand-primary`: `#394EFF` - `--sds-color-icon-brand-on-minimal`: `#394EFF` - `--sds-color-icon-brand-on-subtle`: `#2C3DCE` - `--sds-color-icon-brand-on-moderate`: `#1F2DA0` - `--sds-color-icon-brand-on-bold`: `#FFFFFF` - `--sds-color-icon-brand-on-strong`: `#FFFFFF` - `--sds-color-icon-brand-on-contrast`: `#FFFFFF` - `--sds-color-icon-brand-primary-variant`: `#5C83FF` - `--sds-color-icon-brand-on-subtle-variant`: `#394EFF` - `--sds-color-icon-brand-on-moderate-variant`: `#2C3DCE` - `--sds-color-icon-brand-on-strong-variant`: `#ABCAFF` - `--sds-color-icon-brand-on-contrast-variant`: `#5C83FF` - `--sds-color-icon-brand-on-minimal-opacity`: `#394EFF` - `--sds-color-icon-brand-on-subtle-opacity`: `#2C3DCE` - `--sds-color-icon-brand-on-moderate-opacity`: `#1F2DA0` - `--sds-color-icon-brand-selected-primary`: `#394EFF` - `--sds-color-icon-brand-selected-on-minimal`: `#2C3DCE` - `--sds-color-icon-brand-selected-on-subtle`: `#2C3DCE` - `--sds-color-icon-brand-selected-on-moderate`: `#121D76` - `--sds-color-icon-brand-selected-on-bold`: `#FFFFFF` - `--sds-color-background-brand-minimal`: `#F6FAFF` - `--sds-color-background-brand-subtle`: `#EBF3FF` - `--sds-color-background-brand-moderate`: `#CFE3FF` - `--sds-color-background-brand-bold`: `#394EFF` - `--sds-color-background-brand-strong`: `#1F2DA0` - `--sds-color-background-brand-contrast`: `#050D4F` - `--sds-color-background-brand-minimal-opacity`: `#1E82FF` - `--sds-color-background-brand-subtle-opacity`: `#0569FF` - `--sds-color-background-brand-moderate-opacity`: `#026CFF` - `--sds-color-background-brand-selected-base`: `#1E82FF` - `--sds-color-background-brand-selected-minimal`: `#0569FF` - `--sds-color-background-brand-selected-subtle`: `#026CFF` - `--sds-color-background-brand-selected-moderate`: `#005EFF` - `--sds-color-background-brand-selected-bold`: `#394EFF` - `--sds-color-border-brand-subtle`: `#026CFF` - `--sds-color-border-brand-subtle-hovered`: `#0452FF` - `--sds-color-border-brand-subtle-pressed`: `#003DFF` - `--sds-color-border-brand-moderate`: `#005EFF` - `--sds-color-border-brand-moderate-hovered`: `#003DFF` - `--sds-color-border-brand-moderate-pressed`: `#394EFF` - `--sds-color-border-brand-bold`: `#0452FF` - `--sds-color-border-brand-strong`: `#003DFF` - `--sds-color-border-brand-contrast`: `#394EFF` - `--sds-color-border-brand-selected-subtle`: `#005EFF` - `--sds-color-border-brand-selected-bold`: `#394EFF` - `--sds-color-border-focused`: `#394EFF` - `--sds-color-border-inner-focused`: `#5C83FF` - `--sds-color-border-outer-focused`: `#026CFF` - `--sds-color-state-layer-brand-primary-hovered`: `#394EFF` - `--sds-color-state-layer-brand-primary-focused`: `#394EFF` - `--sds-color-state-layer-brand-primary-pressed`: `#394EFF` - `--sds-color-state-layer-brand-on-minimal-hovered`: `#394EFF` - `--sds-color-state-layer-brand-on-minimal-focused`: `#394EFF` - `--sds-color-state-layer-brand-on-minimal-pressed`: `#394EFF` - `--sds-color-state-layer-brand-on-subtle-hovered`: `#2C3DCE` - `--sds-color-state-layer-brand-on-subtle-focused`: `#2C3DCE` - `--sds-color-state-layer-brand-on-subtle-pressed`: `#2C3DCE` - `--sds-color-state-layer-brand-on-moderate-hovered`: `#1F2DA0` - `--sds-color-state-layer-brand-on-moderate-focused`: `#1F2DA0` - `--sds-color-state-layer-brand-on-moderate-pressed`: `#1F2DA0` - `--sds-color-state-layer-brand-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-brand-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-brand-on-bold-pressed`: `#FFFFFF` - `--sds-color-state-layer-brand-on-strong-hovered`: `#FFFFFF` - `--sds-color-state-layer-brand-on-strong-focused`: `#FFFFFF` - `--sds-color-state-layer-brand-on-strong-pressed`: `#FFFFFF` - `--sds-color-state-layer-brand-on-contrast-hovered`: `#FFFFFF` - `--sds-color-state-layer-brand-on-contrast-focused`: `#FFFFFF` - `--sds-color-state-layer-brand-on-contrast-pressed`: `#FFFFFF` - `--sds-color-state-layer-brand-selected-primary-hovered`: `#394EFF` - `--sds-color-state-layer-brand-selected-primary-focused`: `#394EFF` - `--sds-color-state-layer-brand-selected-primary-pressed`: `#394EFF` - `--sds-color-state-layer-brand-selected-on-minimal-hovered`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-minimal-focused`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-minimal-pressed`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-subtle-hovered`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-subtle-focused`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-subtle-pressed`: `#2C3DCE` - `--sds-color-state-layer-brand-selected-on-moderate-hovered`: `#121D76` - `--sds-color-state-layer-brand-selected-on-moderate-focused`: `#121D76` - `--sds-color-state-layer-brand-selected-on-moderate-pressed`: `#121D76` - `--sds-color-state-layer-brand-selected-on-bold-hovered`: `#FFFFFF` - `--sds-color-state-layer-brand-selected-on-bold-focused`: `#FFFFFF` - `--sds-color-state-layer-brand-selected-on-bold-pressed`: `#FFFFFF` ### Typefaces - GB Proxima Nova - Museo Sans ### Type scale (most-used sizes) `4.5rem` · `3rem` · `2.375rem` · `2rem` · `1.625rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.75rem` · `6px` · `4px` ### Letter-spacing `.013rem` (10) · `.25rem` (5) · `-.013rem` (4) · `-.025rem` (2) · `-.163rem` (1) · `-.075rem` (1) ### Corner radii (most-used) `16px` · `50%` · `8px` ### Shadows - `-1.35em 2.25em 0 0 currentColor,1.35em 2.25em 0 0 currentColor` - `0 0 0 0 currentColor,0 0 0 0 currentColor` ### Gradients - `radial-gradient(ellipse 80% 90% at 70% 40%,#9038ff8c 0,#394eff59 35%,#0000 60%)` - `radial-gradient(ellipse 70% 80% at 60% 55%,#394eff80 0,#2e3ecc4d 40%,#0000 65%)` - `radial-gradient(ellipse 90% 70% at 50% 35%,#9038ff99 0,#394eff59 40%,#0000 60%)` - `radial-gradient(ellipse 80% 60% at 45% 55%,#394eff73 0,#0000 55%)` - `linear-gradient(90deg,#fff 10%,#fff 40%,#fffc 60%,#fffc 90%)` ### Breakpoints 479px · 480px · 767px · 768px · 979px · 980px · 1199px · 1200px · 1440px · 1800px ```