Skip to main content
We following color tokens from Google’s Material Design. This means you can have consistent theming when using the TrustStack web components, as well as those available from Google. You can use the Material Theme Builder to generate your own theme. Specify a color palette, and export. Use the provided variables in your CSS file to apply the theme to your components. Below is an example color palette from the Material Theme Builder, based on the TrustStack’s primary brand color (#E75A7C) 
:root {
  --md-sys-color-primary: #8e4957;
  --md-sys-color-surface-tint: #8e4957;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffd9de;
  --md-sys-color-on-primary-container: #713340;
  --md-sys-color-secondary: #75565b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffd9de;
  --md-sys-color-on-secondary-container: #5c3f44;
  --md-sys-color-tertiary: #795831;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffddbb;
  --md-sys-color-on-tertiary-container: #5f411c;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-background: #fff8f7;
  --md-sys-color-on-background: #22191b;
  --md-sys-color-surface: #fff8f7;
  --md-sys-color-on-surface: #22191b;
  --md-sys-color-surface-variant: #f3dddf;
  --md-sys-color-on-surface-variant: #524345;
  --md-sys-color-outline: #847375;
  --md-sys-color-outline-variant: #d6c2c4;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #382e2f;
  --md-sys-color-inverse-on-surface: #feedee;
  --md-sys-color-inverse-primary: #ffb2be;
  --md-sys-color-primary-fixed: #ffd9de;
  --md-sys-color-on-primary-fixed: #3a0716;
  --md-sys-color-primary-fixed-dim: #ffb2be;
  --md-sys-color-on-primary-fixed-variant: #713340;
  --md-sys-color-secondary-fixed: #ffd9de;
  --md-sys-color-on-secondary-fixed: #2c1519;
  --md-sys-color-secondary-fixed-dim: #e4bdc2;
  --md-sys-color-on-secondary-fixed-variant: #5c3f44;
  --md-sys-color-tertiary-fixed: #ffddbb;
  --md-sys-color-on-tertiary-fixed: #2b1700;
  --md-sys-color-tertiary-fixed-dim: #ebbe90;
  --md-sys-color-on-tertiary-fixed-variant: #5f411c;
  --md-sys-color-surface-dim: #e7d6d7;
  --md-sys-color-surface-bright: #fff8f7;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fff0f1;
  --md-sys-color-surface-container: #fbeaeb;
  --md-sys-color-surface-container-high: #f5e4e5;
  --md-sys-color-surface-container-highest: #f0dee0;
}