@gainsight-hub/design-tokens 0.2.2 → 0.2.4

package/dist/tokens.d.ts

@@ -149,6 +149,8 @@ export const ColorSkeletonDefault: string;
 /** highlight color used in animated skeleton states to simulate loading progress */
 export const ColorSkeletonSubtle: string;
 export const FontFamilySans: string;
+export const FontFamilyHeading: string;
+export const FontFamilyButton: string;
 export const FontFamilyMono: string;
 export const FontWeightRegular: number;
 export const FontWeightMedium: number;
@@ -200,63 +202,48 @@ export const Elevation1: string;
 export const Elevation2: string;
 /** high elevation used for top-level surfaces above other floating elements */
 export const Elevation3: string;
-export const TextHeroFontFamily: string;
 export const TextHeroFontWeight: number;
 export const TextHeroFontSize: string;
 export const TextHeroLineHeight: number;
-export const TextHeadingSmallFontFamily: string;
 export const TextHeadingSmallFontWeight: number;
 export const TextHeadingSmallFontSize: string;
 export const TextHeadingSmallLineHeight: number;
-export const TextHeadingMediumFontFamily: string;
 export const TextHeadingMediumFontWeight: number;
 export const TextHeadingMediumFontSize: string;
 export const TextHeadingMediumLineHeight: number;
-export const TextHeadingLargeFontFamily: string;
 export const TextHeadingLargeFontWeight: number;
 export const TextHeadingLargeFontSize: string;
 export const TextHeadingLargeLineHeight: number;
-export const TextHeadingXlargeFontFamily: string;
 export const TextHeadingXlargeFontWeight: number;
 export const TextHeadingXlargeFontSize: string;
 export const TextHeadingXlargeLineHeight: number;
-export const TextBodySmallFontFamily: string;
 export const TextBodySmallFontWeight: number;
 export const TextBodySmallFontSize: string;
 export const TextBodySmallLineHeight: number;
-export const TextBodyMediumFontFamily: string;
 export const TextBodyMediumFontWeight: number;
 export const TextBodyMediumFontSize: string;
 export const TextBodyMediumLineHeight: number;
-export const TextBodyLargeFontFamily: string;
 export const TextBodyLargeFontWeight: number;
 export const TextBodyLargeFontSize: string;
 export const TextBodyLargeLineHeight: number;
-export const TextNavigationFontFamily: string;
 export const TextNavigationFontWeight: number;
 export const TextNavigationFontSize: string;
 export const TextNavigationLineHeight: string;
-export const TextMenuFontFamily: string;
 export const TextMenuFontWeight: number;
 export const TextMenuFontSize: string;
 export const TextMenuLineHeight: string;
-export const TextButtonFontFamily: string;
 export const TextButtonFontWeight: number;
 export const TextButtonFontSize: string;
 export const TextButtonLineHeight: string;
-export const TextLabelSmallFontFamily: string;
 export const TextLabelSmallFontWeight: number;
 export const TextLabelSmallFontSize: string;
 export const TextLabelSmallLineHeight: string;
-export const TextLabelMediumFontFamily: string;
 export const TextLabelMediumFontWeight: number;
 export const TextLabelMediumFontSize: string;
 export const TextLabelMediumLineHeight: string;
-export const TextCaptionFontFamily: string;
 export const TextCaptionFontWeight: number;
 export const TextCaptionFontSize: string;
 export const TextCaptionLineHeight: string;
-export const TextCodeFontFamily: string;
 export const TextCodeFontWeight: number;
 export const TextCodeFontSize: string;
 export const TextCodeLineHeight: number;
@@ -470,6 +457,22 @@ export const NavigationDropdownContent: string;
 export const NavigationBorderTop: string;
 /** Bottom border of navigation. */
 export const NavigationBorderBottom: string;
+/** Sidebar widget placeholder background color. */
+export const SidebarBackground: string;
+/** Sidebar widget placeholder border radius. */
+export const SidebarBorderRadius: string;
+/** Sidebar widget placeholder border color. */
+export const SidebarBorderColor: string;
+/** Sidebar widget placeholder border width. */
+export const SidebarBorderWidth: string;
+/** Sidebar widget placeholder box shadow. */
+export const SidebarShadow: string;
+/** Sidebar widget title text color. */
+export const SidebarTitleColor: string;
+/** Sidebar widget title font family. */
+export const SidebarTitleFontFamily: string;
+/** Sidebar widget title font weight. */
+export const SidebarTitleFontWeight: number;
 /** Default widget title color. */
 export const WidgetTitle: string;
 /** Default widget subtitle color. */

package/dist/tokens.js

@@ -4,16 +4,16 @@
 
 export const BorderWidth100 = "1px";
 export const BorderWidth200 = "2px";
-export const ColorBrand100 = "#E9F2FF";
-export const ColorBrand200 = "#CCE0FF";
-export const ColorBrand300 = "#85B8FF";
-export const ColorBrand400 = "#579DFF";
-export const ColorBrand500 = "#388BFF";
-export const ColorBrand600 = "#1D7AFC";
-export const ColorBrand700 = "#0C66E4";
-export const ColorBrand800 = "#0055CC";
-export const ColorBrand900 = "#09326C";
-export const ColorBrand1000 = "#1C2B41";
+export const ColorBrand100 = "#F2F0FF";
+export const ColorBrand200 = "#DCD8FD";
+export const ColorBrand300 = "#B3ACF6";
+export const ColorBrand400 = "#978FEF";
+export const ColorBrand500 = "#877EE7";
+export const ColorBrand600 = "#7970DB";
+export const ColorBrand700 = "#645DC6";
+export const ColorBrand800 = "#544DB2";
+export const ColorBrand900 = "#2F2C63";
+export const ColorBrand1000 = "#28273F";
 export const ColorNeutral0 = "#FFFFFF";
 export const ColorNeutral100 = "#FAFAFA";
 export const ColorNeutral200 = "#F4F5F6";
@@ -57,7 +57,7 @@ export const ColorRed400 = "#f86a68";
 export const ColorRed500 = "#f15050";
 export const ColorRed600 = "#e23d3d";
 export const ColorRed700 = "#c92c2f";
-export const ColorRed800 = "#ae2426";
+export const ColorRed800 = "#ae2424";
 export const ColorRed900 = "#5d1a1c";
 export const ColorRed1000 = "#421f21";
 export const ColorYellow100 = "#fff7d6";
@@ -70,14 +70,14 @@ export const ColorYellow700 = "#946f00";
 export const ColorYellow800 = "#7f5f01";
 export const ColorYellow900 = "#533f04";
 export const ColorYellow1000 = "#332e1b";
-export const ColorActionPrimaryDefault = "#0C66E4"; // default color used for the most prominent call-to-action in the interface
-export const ColorActionPrimaryHover = "#0055CC"; // color used when a primary action is hovered
-export const ColorActionPrimaryPressed = "#09326C"; // color used when a primary action is actively pressed
+export const ColorActionPrimaryDefault = "#645DC6"; // default color used for the most prominent call-to-action in the interface
+export const ColorActionPrimaryHover = "#544DB2"; // color used when a primary action is hovered
+export const ColorActionPrimaryPressed = "#2F2C63"; // color used when a primary action is actively pressed
 export const ColorActionNeutralDefault = "#FFFFFF"; // color used for less prominent actions that support the primary action
 export const ColorActionNeutralHover = "#FAFAFA"; // color used when a secondary action is hovered
 export const ColorActionNeutralPressed = "#F4F5F6"; // color used when a secondary action is actively pressed
 export const ColorActionDestructiveDefault = "#c92c2f"; // color used for actions that perform irreversible or potentially harmful operations
-export const ColorActionDestructiveHover = "#ae2426"; // color used when a destructive action is hovered
+export const ColorActionDestructiveHover = "#ae2424"; // color used when a destructive action is hovered
 export const ColorActionDestructivePressed = "#5d1a1c"; // color used when a destructive action is actively pressed
 export const ColorSurfacePage = "#FAFAFA"; // application canvas background used behind all UI surfaces
 export const ColorSurfaceDefault = "#FFFFFF"; // default container surface for standard UI sections (cards, panels, content areas)
@@ -99,10 +99,10 @@ export const ColorStatusInformationBold = "#0c66e4"; // high-emphasis color used
 export const ColorStatusDangerBold = "#c92c2f"; // high-emphasis color used for neutral informational messages
 export const ColorCommunityAnswered = "#1f8444"; // color used to indicate that a question or thread has received an accepted answer
 export const ColorCommunityUnanswered = "#696E7C"; // color used to indicate that a question or thread has not yet received a response
-export const ColorCommunityHighlighted = "#0C66E4"; // color used to highlight content that is featured or editorially promoted
-export const ColorCommunityPinned = "#0C66E4"; // color used to indicate content that is pinned and prioritized in listings
-export const ColorLinkDefault = "#0C66E4"; // default color used for interactive text links
-export const ColorLinkHover = "#0055CC"; // color used for interactive text links on hover
+export const ColorCommunityHighlighted = "#645DC6"; // color used to highlight content that is featured or editorially promoted
+export const ColorCommunityPinned = "#645DC6"; // color used to indicate content that is pinned and prioritized in listings
+export const ColorLinkDefault = "#645DC6"; // default color used for interactive text links
+export const ColorLinkHover = "#544DB2"; // color used for interactive text links on hover
 export const ColorFocusRing = "#388bff"; // default color used for focus rings on interactive elements
 export const ColorOverlayBackdrop = "#2b33467a"; // semi-transparent color displayed behind modals to obscure background content
 export const ColorOverlayInteractiveHover = "#2b33460a"; // overlay color applied to interactive elements to indicate a hover state
@@ -110,6 +110,8 @@ export const ColorOverlayInteractivePressed = "#2b334614"; // overlay color appl
 export const ColorSkeletonDefault = "#F4F5F6"; // base color used for loading placeholders while content is being fetched
 export const ColorSkeletonSubtle = "#2b33460a"; // highlight color used in animated skeleton states to simulate loading progress
 export const FontFamilySans = "Roboto";
+export const FontFamilyHeading = "Roboto";
+export const FontFamilyButton = "Roboto";
 export const FontFamilyMono = "Roboto Mono";
 export const FontWeightRegular = 400;
 export const FontWeightMedium = 500;
@@ -163,63 +165,48 @@ export const Elevation2 =
   "0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)"; // medium elevation used for floating surfaces above regular content
 export const Elevation3 =
   "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)"; // high elevation used for top-level surfaces above other floating elements
-export const TextHeroFontFamily = "Roboto";
 export const TextHeroFontWeight = 700;
 export const TextHeroFontSize = "2rem";
 export const TextHeroLineHeight = 1.25;
-export const TextHeadingSmallFontFamily = "Roboto";
 export const TextHeadingSmallFontWeight = 500;
 export const TextHeadingSmallFontSize = "1.25rem";
 export const TextHeadingSmallLineHeight = 1.25;
-export const TextHeadingMediumFontFamily = "Roboto";
 export const TextHeadingMediumFontWeight = 500;
 export const TextHeadingMediumFontSize = "1.5rem";
 export const TextHeadingMediumLineHeight = 1.25;
-export const TextHeadingLargeFontFamily = "Roboto";
 export const TextHeadingLargeFontWeight = 700;
 export const TextHeadingLargeFontSize = "1.75rem";
 export const TextHeadingLargeLineHeight = 1.25;
-export const TextHeadingXlargeFontFamily = "Roboto";
 export const TextHeadingXlargeFontWeight = 700;
 export const TextHeadingXlargeFontSize = "2rem";
 export const TextHeadingXlargeLineHeight = 1.25;
-export const TextBodySmallFontFamily = "Roboto";
 export const TextBodySmallFontWeight = 400;
 export const TextBodySmallFontSize = "0.875rem";
 export const TextBodySmallLineHeight = 1.5;
-export const TextBodyMediumFontFamily = "Roboto";
 export const TextBodyMediumFontWeight = 400;
 export const TextBodyMediumFontSize = "1rem";
 export const TextBodyMediumLineHeight = 1.5;
-export const TextBodyLargeFontFamily = "Roboto";
 export const TextBodyLargeFontWeight = 400;
 export const TextBodyLargeFontSize = "1.25rem";
 export const TextBodyLargeLineHeight = 1.5;
-export const TextNavigationFontFamily = "Roboto";
 export const TextNavigationFontWeight = 400;
 export const TextNavigationFontSize = "0.875rem";
 export const TextNavigationLineHeight = "1.25rem";
-export const TextMenuFontFamily = "Roboto";
 export const TextMenuFontWeight = 400;
 export const TextMenuFontSize = "0.875rem";
 export const TextMenuLineHeight = "1.25rem";
-export const TextButtonFontFamily = "Roboto";
 export const TextButtonFontWeight = 500;
 export const TextButtonFontSize = "0.875rem";
 export const TextButtonLineHeight = "1.25rem";
-export const TextLabelSmallFontFamily = "Roboto";
 export const TextLabelSmallFontWeight = 500;
 export const TextLabelSmallFontSize = "0.875rem";
 export const TextLabelSmallLineHeight = "1.25rem";
-export const TextLabelMediumFontFamily = "Roboto";
 export const TextLabelMediumFontWeight = 500;
 export const TextLabelMediumFontSize = "1rem";
 export const TextLabelMediumLineHeight = "1.5rem";
-export const TextCaptionFontFamily = "Roboto";
 export const TextCaptionFontWeight = 400;
 export const TextCaptionFontSize = "0.75rem";
 export const TextCaptionLineHeight = "1rem";
-export const TextCodeFontFamily = "Roboto Mono";
 export const TextCodeFontWeight = 400;
 export const TextCodeFontSize = "1rem";
 export const TextCodeLineHeight = 1.5;
@@ -229,9 +216,9 @@ export const ButtonRadius = "8px"; // Border radius used for all button variants
 export const ButtonBorderWidth = "1px"; // Border width used for all button variants.
 export const ButtonFontWeight = 500; // Font weight used for button labels across all variants.
 export const ButtonTextTransform = "none"; // Text transform applied to button labels (e.g., none/uppercase).
-export const ButtonPrimaryBackgroundDefault = "#0C66E4"; // Primary button background in default state.
-export const ButtonPrimaryBackgroundHover = "#0055CC"; // Primary button background on hover.
-export const ButtonPrimaryBackgroundPressed = "#09326C"; // Primary button background on press.
+export const ButtonPrimaryBackgroundDefault = "#645DC6"; // Primary button background in default state.
+export const ButtonPrimaryBackgroundHover = "#544DB2"; // Primary button background on hover.
+export const ButtonPrimaryBackgroundPressed = "#2F2C63"; // Primary button background on press.
 export const ButtonPrimaryContentDefault = "#FFFFFF"; // Primary button label/icon color in default state.
 export const ButtonPrimaryContentHover = "#FFFFFF"; // Primary button label/icon color on hover.
 export const ButtonPrimaryContentPressed = "#FFFFFF"; // Primary button label/icon color on press.
@@ -250,7 +237,7 @@ export const ButtonSecondaryBorderHover = "#DEDFE2"; // Secondary button border
 export const ButtonSecondaryBorderPressed = "#DEDFE2"; // Secondary button border color on press.
 export const ButtonSecondaryShadow = "none"; // Secondary button shadow (none).
 export const ButtonDestructiveBackgroundDefault = "#c92c2f"; // Destructive button background in default state.
-export const ButtonDestructiveBackgroundHover = "#ae2426"; // Destructive button background on hover.
+export const ButtonDestructiveBackgroundHover = "#ae2424"; // Destructive button background on hover.
 export const ButtonDestructiveBackgroundPressed = "#5d1a1c"; // Destructive button background on press.
 export const ButtonDestructiveContentDefault = "#FFFFFF"; // Destructive button label/icon color in default state.
 export const ButtonDestructiveContentHover = "#FFFFFF"; // Destructive button label/icon color on hover.
@@ -271,9 +258,9 @@ export const ButtonVoteBorderPressed = "#DEDFE2"; // Vote button border color on
 export const ButtonVoteShadowDefault = "none"; // Vote button shadow in default state (none).
 export const ButtonVoteShadowHover = "none"; // Vote button shadow on hover (none).
 export const ButtonVoteShadowPressed = "none"; // Vote button shadow on press (none).
-export const ButtonVoteSelectedBackgroundDefault = "#0C66E4"; // Vote button background when selected (default).
-export const ButtonVoteSelectedBackgroundHover = "#0055CC"; // Vote button background when selected (hovered).
-export const ButtonVoteSelectedBackgroundPressed = "#09326C"; // Vote button background when selected (pressed).
+export const ButtonVoteSelectedBackgroundDefault = "#645DC6"; // Vote button background when selected (default).
+export const ButtonVoteSelectedBackgroundHover = "#544DB2"; // Vote button background when selected (hovered).
+export const ButtonVoteSelectedBackgroundPressed = "#2F2C63"; // Vote button background when selected (pressed).
 export const ButtonVoteSelectedContentDefault = "#FFFFFF"; // Vote button content color when selected (default).
 export const ButtonVoteSelectedContentHover = "#FFFFFF"; // Vote button content color when selected (hovered).
 export const ButtonVoteSelectedContentPressed = "#FFFFFF"; // Vote button content color when selected (pressed).
@@ -292,11 +279,11 @@ export const CardBackgroundDefault = "#FFFFFF"; // Card background in default st
 export const CardBackgroundHover = "#FFFFFF"; // Card background on hover.
 export const CardBackgroundPressed = "#FFFFFF"; // Card background on press.
 export const CardTitleDefault = "#2B3346"; // Card title color in default state.
-export const CardTitleHover = "#0C66E4"; // Card title color on hover (link styling).
+export const CardTitleHover = "#645DC6"; // Card title color on hover (link styling).
 export const CardTitlePressed = "#2B3346"; // Card title color on press.
 export const CardContentDefault = "#2B3346"; // Card body/content color in default state.
 export const CardContentHover = "#2B3346"; // Card body/content color on hover.
-export const CardContentPressed = "#0055CC"; // Card body/content color on press (link hovered styling).
+export const CardContentPressed = "#544DB2"; // Card body/content color on press (link hovered styling).
 export const CardShadowDefault = "none"; // Card shadow in default state (none).
 export const CardShadowHover =
   "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Card shadow on hover.
@@ -316,11 +303,11 @@ export const FeedItemBackgroundDefault = "#FFFFFF"; // Feed item background in d
 export const FeedItemBackgroundHover = "#FFFFFF"; // Feed item background on hover.
 export const FeedItemBackgroundPressed = "#FFFFFF"; // Feed item background on press.
 export const FeedItemTitleDefault = "#2B3346"; // Feed item title color in default state.
-export const FeedItemTitleHover = "#0C66E4"; // Feed item title color on hover (link styling).
-export const FeedItemTitlePressed = "#0055CC"; // Feed item title color on press (link hovered styling).
+export const FeedItemTitleHover = "#645DC6"; // Feed item title color on hover (link styling).
+export const FeedItemTitlePressed = "#544DB2"; // Feed item title color on press (link hovered styling).
 export const FeedItemContentDefault = "#2B3346"; // Feed item content color in default state.
 export const FeedItemContentHover = "#2B3346"; // Feed item content color on hover.
-export const FeedItemContentPressed = "#0055CC"; // Feed item content color on press (link hovered styling).
+export const FeedItemContentPressed = "#544DB2"; // Feed item content color on press (link hovered styling).
 export const FeedItemShadowDefault = "none"; // Feed item shadow in default state (none).
 export const FeedItemShadowHover =
   "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Feed item shadow on hover.
@@ -332,6 +319,14 @@ export const NavigationDropdownBackground = "#FFFFFF"; // Navigation dropdown ba
 export const NavigationDropdownContent = "#2B3346"; // Navigation dropdown content color.
 export const NavigationBorderTop = "#00000000"; // Top border of navigation (transparent).
 export const NavigationBorderBottom = "#DEDFE2"; // Bottom border of navigation.
+export const SidebarBackground = "#FFFFFF"; // Sidebar widget placeholder background color.
+export const SidebarBorderRadius = "8px"; // Sidebar widget placeholder border radius.
+export const SidebarBorderColor = "#DEDFE2"; // Sidebar widget placeholder border color.
+export const SidebarBorderWidth = "1px"; // Sidebar widget placeholder border width.
+export const SidebarShadow = "none"; // Sidebar widget placeholder box shadow.
+export const SidebarTitleColor = "#2B3346"; // Sidebar widget title text color.
+export const SidebarTitleFontFamily = "Roboto"; // Sidebar widget title font family.
+export const SidebarTitleFontWeight = 500; // Sidebar widget title font weight.
 export const WidgetTitle = "#2B3346"; // Default widget title color.
 export const WidgetSubtitle = "#2B3346"; // Default widget subtitle color.
 export const WidgetBackground = "#FAFAFA"; // Default widget background.
@@ -348,16 +343,16 @@ export const WidgetIntroductionContent = "#2B3346"; // Introduction widget body/
 export const WidgetIntroductionIconBackground = "#1f8444"; // Introduction widget icon container background.
 export const WidgetIntroductionIconContent = "#FFFFFF"; // Introduction widget icon color.
 export const WidgetIntroductionCloseContent = "#696E7C"; // Introduction widget close button color.
-export const ThemeBrand100 = "#E9F2FF";
-export const ThemeBrand200 = "#CCE0FF";
-export const ThemeBrand300 = "#85B8FF";
-export const ThemeBrand400 = "#579DFF";
-export const ThemeBrand500 = "#388BFF";
-export const ThemeBrand600 = "#1D7AFC";
-export const ThemeBrand700 = "#0C66E4";
-export const ThemeBrand800 = "#0055CC";
-export const ThemeBrand900 = "#09326C";
-export const ThemeBrand1000 = "#1C2B41";
+export const ThemeBrand100 = "#F2F0FF";
+export const ThemeBrand200 = "#DCD8FD";
+export const ThemeBrand300 = "#B3ACF6";
+export const ThemeBrand400 = "#978FEF";
+export const ThemeBrand500 = "#877EE7";
+export const ThemeBrand600 = "#7970DB";
+export const ThemeBrand700 = "#645DC6";
+export const ThemeBrand800 = "#544DB2";
+export const ThemeBrand900 = "#2F2C63";
+export const ThemeBrand1000 = "#28273F";
 export const ThemeNeutral0 = "#FFFFFF";
 export const ThemeNeutral100 = "#FAFAFA";
 export const ThemeNeutral200 = "#F4F5F6";

package/dist/tokens.json

@@ -7,16 +7,16 @@
   },
   "color": {
     "brand": {
-      "100": "#E9F2FF",
-      "200": "#CCE0FF",
-      "300": "#85B8FF",
-      "400": "#579DFF",
-      "500": "#388BFF",
-      "600": "#1D7AFC",
-      "700": "#0C66E4",
-      "800": "#0055CC",
-      "900": "#09326C",
-      "1000": "#1C2B41"
+      "100": "#F2F0FF",
+      "200": "#DCD8FD",
+      "300": "#B3ACF6",
+      "400": "#978FEF",
+      "500": "#877EE7",
+      "600": "#7970DB",
+      "700": "#645DC6",
+      "800": "#544DB2",
+      "900": "#2F2C63",
+      "1000": "#28273F"
     },
     "neutral": {
       "0": "#FFFFFF",
@@ -68,7 +68,7 @@
       "500": "#f15050",
       "600": "#e23d3d",
       "700": "#c92c2f",
-      "800": "#ae2426",
+      "800": "#ae2424",
       "900": "#5d1a1c",
       "1000": "#421f21"
     },
@@ -86,9 +86,9 @@
     },
     "action": {
       "primary": {
-        "default": "#0C66E4",
-        "hover": "#0055CC",
-        "pressed": "#09326C"
+        "default": "#645DC6",
+        "hover": "#544DB2",
+        "pressed": "#2F2C63"
       },
       "neutral": {
         "default": "#FFFFFF",
@@ -97,7 +97,7 @@
       },
       "destructive": {
         "default": "#c92c2f",
-        "hover": "#ae2426",
+        "hover": "#ae2424",
         "pressed": "#5d1a1c"
       }
     },
@@ -138,12 +138,12 @@
     "community": {
       "answered": "#1f8444",
       "unanswered": "#696E7C",
-      "highlighted": "#0C66E4",
-      "pinned": "#0C66E4"
+      "highlighted": "#645DC6",
+      "pinned": "#645DC6"
     },
     "link": {
-      "default": "#0C66E4",
-      "hover": "#0055CC"
+      "default": "#645DC6",
+      "hover": "#544DB2"
     },
     "focus": {
       "ring": "#388bff"
@@ -163,6 +163,8 @@
   "font": {
     "family": {
       "sans": "Roboto",
+      "heading": "Roboto",
+      "button": "Roboto",
       "mono": "Roboto Mono"
     },
     "weight": {
@@ -237,7 +239,6 @@
   "text": {
     "hero": {
       "font": {
-        "family": "Roboto",
         "weight": 700,
         "size": "2rem"
       },
@@ -246,7 +247,6 @@
     "heading": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1.25rem"
         },
@@ -254,7 +254,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1.5rem"
         },
@@ -262,7 +261,6 @@
       },
       "large": {
         "font": {
-          "family": "Roboto",
           "weight": 700,
           "size": "1.75rem"
         },
@@ -270,7 +268,6 @@
       },
       "xlarge": {
         "font": {
-          "family": "Roboto",
           "weight": 700,
           "size": "2rem"
         },
@@ -280,7 +277,6 @@
     "body": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "0.875rem"
         },
@@ -288,7 +284,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "1rem"
         },
@@ -296,7 +291,6 @@
       },
       "large": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "1.25rem"
         },
@@ -305,7 +299,6 @@
     },
     "navigation": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.875rem"
       },
@@ -313,7 +306,6 @@
     },
     "menu": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.875rem"
       },
@@ -321,7 +313,6 @@
     },
     "button": {
       "font": {
-        "family": "Roboto",
         "weight": 500,
         "size": "0.875rem"
       },
@@ -330,7 +321,6 @@
     "label": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "0.875rem"
         },
@@ -338,7 +328,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1rem"
         },
@@ -347,7 +336,6 @@
     },
     "caption": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.75rem"
       },
@@ -355,7 +343,6 @@
     },
     "code": {
       "font": {
-        "family": "Roboto Mono",
         "weight": 400,
         "size": "1rem"
       },
@@ -379,9 +366,9 @@
     },
     "primary": {
       "background": {
-        "default": "#0C66E4",
-        "hover": "#0055CC",
-        "pressed": "#09326C"
+        "default": "#645DC6",
+        "hover": "#544DB2",
+        "pressed": "#2F2C63"
       },
       "content": {
         "default": "#FFFFFF",
@@ -416,7 +403,7 @@
     "destructive": {
       "background": {
         "default": "#c92c2f",
-        "hover": "#ae2426",
+        "hover": "#ae2424",
         "pressed": "#5d1a1c"
       },
       "content": {
@@ -454,9 +441,9 @@
       },
       "selected": {
         "background": {
-          "default": "#0C66E4",
-          "hover": "#0055CC",
-          "pressed": "#09326C"
+          "default": "#645DC6",
+          "hover": "#544DB2",
+          "pressed": "#2F2C63"
         },
         "content": {
           "default": "#FFFFFF",
@@ -491,13 +478,13 @@
     },
     "title": {
       "default": "#2B3346",
-      "hover": "#0C66E4",
+      "hover": "#645DC6",
       "pressed": "#2B3346"
     },
     "content": {
       "default": "#2B3346",
       "hover": "#2B3346",
-      "pressed": "#0055CC"
+      "pressed": "#544DB2"
     },
     "shadow": {
       "default": "none",
@@ -530,13 +517,13 @@
       },
       "title": {
         "default": "#2B3346",
-        "hover": "#0C66E4",
-        "pressed": "#0055CC"
+        "hover": "#645DC6",
+        "pressed": "#544DB2"
       },
       "content": {
         "default": "#2B3346",
         "hover": "#2B3346",
-        "pressed": "#0055CC"
+        "pressed": "#544DB2"
       },
       "shadow": {
         "default": "none",
@@ -557,6 +544,22 @@
       "bottom": "#DEDFE2"
     }
   },
+  "sidebar": {
+    "background": "#FFFFFF",
+    "border": {
+      "radius": "8px",
+      "color": "#DEDFE2",
+      "width": "1px"
+    },
+    "shadow": "none",
+    "title": {
+      "color": "#2B3346",
+      "font": {
+        "family": "Roboto",
+        "weight": 500
+      }
+    }
+  },
   "widget": {
     "title": "#2B3346",
     "subtitle": "#2B3346",
@@ -589,16 +592,16 @@
   },
   "theme": {
     "brand": {
-      "100": "#E9F2FF",
-      "200": "#CCE0FF",
-      "300": "#85B8FF",
-      "400": "#579DFF",
-      "500": "#388BFF",
-      "600": "#1D7AFC",
-      "700": "#0C66E4",
-      "800": "#0055CC",
-      "900": "#09326C",
-      "1000": "#1C2B41"
+      "100": "#F2F0FF",
+      "200": "#DCD8FD",
+      "300": "#B3ACF6",
+      "400": "#978FEF",
+      "500": "#877EE7",
+      "600": "#7970DB",
+      "700": "#645DC6",
+      "800": "#544DB2",
+      "900": "#2F2C63",
+      "1000": "#28273F"
     },
     "neutral": {
       "0": "#FFFFFF",