diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css
index 63c65c796f..2824a37f7d 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -9,7 +9,7 @@ SHintPopper {
   pointer-events: none;
 
   background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
-  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
   padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
   border-radius: var(--intergalactic-rounded-small, 4px);
diff --git a/semcore/d3-chart/src/Dots.jsx b/semcore/d3-chart/src/Dots.jsx
index 45cb3ef953..fda729d3d1 100644
--- a/semcore/d3-chart/src/Dots.jsx
+++ b/semcore/d3-chart/src/Dots.jsx
@@ -23,7 +23,7 @@ function Dots(props) {
     scale,
     duration = 500,
     transparent,
-    radius: radiusBase = 4,
+    radius: radiusBase = 3,
     resolveColor,
     patterns,
     onClick,
@@ -97,7 +97,7 @@ function Dots(props) {
       typeof display === 'function'
         ? display(i, i === activeIndex, !isPrev && !isNext)
         : display || i === activeIndex || (!isPrev && !isNext);
-    const radius = radiusBase * (active ? 5 / 4 : 1);
+    const radius = radiusBase * (active ? 4 / 3 : 1);
     if (!d3.defined()(d)) return acc;
     if (!visible) return acc;
 
diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx
index 89013cfc6d..e1a6c482b0 100644
--- a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx
@@ -25,7 +25,7 @@ import type { LegendTableProps } from '../ChartLegend/LegendTable/LegendTable.ty
 
 export type ChartState = {
   dataDefinitions: Array<LegendItem & { columns: React.ReactNode[] }>;
-  highlightedLine: number;
+  highlightedItem: number;
   withTrend: boolean;
 
   plotWidth: number;
@@ -65,7 +65,7 @@ export abstract class AbstractChart<
       this.observer = new ResizeObserver(this.handleResize);
     }
 
-    this.setHighlightedLine = this.setHighlightedLine.bind(this);
+    this.setHighlightedItem = this.setHighlightedItem.bind(this);
     this.handleChangeVisible = this.handleChangeVisible.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
@@ -75,7 +75,7 @@ export abstract class AbstractChart<
 
     this.state = {
       dataDefinitions: this.getDefaultDataDefinitions(),
-      highlightedLine: -1,
+      highlightedItem: -1,
       withTrend: false,
       plotWidth: 0,
       plotHeight: 0,
@@ -329,8 +329,8 @@ export abstract class AbstractChart<
     return valueScale;
   }
 
-  protected setHighlightedLine(index: number) {
-    this.setState({ highlightedLine: index });
+  protected setHighlightedItem(index: number) {
+    this.setState({ highlightedItem: index });
   }
 
   protected handleChangeVisible(id: string, isVisible: boolean) {
@@ -352,11 +352,11 @@ export abstract class AbstractChart<
   }
 
   protected handleMouseEnter(id: string) {
-    this.setHighlightedLine(this.state.dataDefinitions.findIndex((line) => line.id === id));
+    this.setHighlightedItem(this.state.dataDefinitions.findIndex((line) => line.id === id));
   }
 
   protected handleMouseLeave() {
-    this.setHighlightedLine(-1);
+    this.setHighlightedItem(-1);
   }
 
   protected resolveColor(id: string, index: number) {
@@ -404,13 +404,14 @@ export abstract class AbstractChart<
       return null;
     }
 
-    const { dataDefinitions, withTrend } = this.state;
+    const { dataDefinitions, withTrend, highlightedItem } = this.state;
     const lProps = {
       ...this.defaultLegendProps(),
       ...legendProps,
     };
 
-    const commonLegendProps: LegendFlexProps | LegendTableProps = {
+    const commonLegendProps: (LegendFlexProps | LegendTableProps) & { highlightedItem: State['highlightedItem'] } = {
+      highlightedItem,
       'dataHints': this.dataHints,
       'items': dataDefinitions,
       'size': lProps.size,
diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.tsx b/semcore/d3-chart/src/component/Chart/AreaChart.tsx
index 2c9a0203c0..2064f54957 100644
--- a/semcore/d3-chart/src/component/Chart/AreaChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/AreaChart.tsx
@@ -67,7 +67,7 @@ class AreaChartComponent extends AbstractChart<
 
   renderChart() {
     const { groupKey, curve, showDots, stacked, onClickArea } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     if (stacked) {
       return (
@@ -80,7 +80,7 @@ class AreaChartComponent extends AbstractChart<
                   y={item.id}
                   key={item.id}
                   color={item.color}
-                  transparent={highlightedLine !== -1 && highlightedLine !== index}
+                  transparent={highlightedItem !== -1 && highlightedItem !== index}
                   curve={curve}
                   onClick={onClickArea}
                 >
@@ -101,7 +101,7 @@ class AreaChartComponent extends AbstractChart<
             y={item.id}
             key={item.id}
             color={item.color}
-            transparent={highlightedLine !== -1 && highlightedLine !== index}
+            transparent={highlightedItem !== -1 && highlightedItem !== index}
             curve={curve}
             onClick={onClickArea}
           >
diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx
index aa8e761a11..f360aaa717 100644
--- a/semcore/d3-chart/src/component/Chart/BarChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/BarChart.tsx
@@ -85,7 +85,7 @@ class BarChartComponent extends AbstractChart<
 
   renderChart() {
     const { groupKey, type = 'group', invertAxis } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     if (dataDefinitions.length === 1) {
       const item = dataDefinitions[0];
@@ -116,7 +116,7 @@ class BarChartComponent extends AbstractChart<
 
               const commonBarComponentProps: BarProps = {
                 color: item.color,
-                transparent: highlightedLine !== -1 && highlightedLine !== index,
+                transparent: highlightedItem !== -1 && highlightedItem !== index,
                 onClick: this.handleClickBar,
               };
 
@@ -143,7 +143,7 @@ class BarChartComponent extends AbstractChart<
 
               const commonBarComponentProps: BarProps = {
                 color: item.color,
-                transparent: highlightedLine !== -1 && highlightedLine !== index,
+                transparent: highlightedItem !== -1 && highlightedItem !== index,
                 onClick: this.handleClickBar,
               };
 
diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx
index 00cc8d1124..7d2f994e5f 100644
--- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx
@@ -230,7 +230,7 @@ class CigaretteChartComponent extends AbstractChart<
   renderChart() {
     const { invertAxis, data, uid, duration, patterns, onClick } =
       this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
     const { plotWidth, plotHeight } = this;
 
     this.offset = 0;
@@ -277,7 +277,7 @@ class CigaretteChartComponent extends AbstractChart<
               direction={invertAxis ? 'horizontal' : 'vertical'}
               onClick={onClick}
               hovered={
-                highlightedLine === index ? true : highlightedLine === -1 ? undefined : false
+                highlightedItem === index ? true : highlightedItem === -1 ? undefined : false
               }
             />
           );
@@ -333,7 +333,7 @@ class CigaretteChartComponent extends AbstractChart<
                   <HoverRect.Tooltip.Dot mr={2} color={item.color}>
                     {item.label}
                   </HoverRect.Tooltip.Dot>
-                  { showPercentColumn && <Text textAlign='end' color='text-secondary'>{this.percentValue(data, item.id)}</Text> }
+                  { showPercentColumn && <Text textAlign='end' color='text-secondary-invert'>{this.percentValue(data, item.id)}</Text> }
                   <Text textAlign='end' bold>{this.tooltipValueFormatter(data[item.id])}</Text>
                 </STooltipChildrenWrapper>,
               ),
@@ -356,7 +356,7 @@ class CigaretteChartComponent extends AbstractChart<
                           <HoverRect.Tooltip.Dot mr={2} color={item.color} style={style}>
                             {item.label}
                           </HoverRect.Tooltip.Dot>
-                          { showPercentColumn && <Text textAlign='end' color='text-secondary' style={style}>{this.percentValue(data, item.id)}</Text> }
+                          { showPercentColumn && <Text textAlign='end' color='text-secondary-invert' style={style}>{this.percentValue(data, item.id)}</Text> }
                           <Text textAlign='end' bold style={style}>{this.tooltipValueFormatter(data[item.id])}</Text>
                         </React.Fragment>
                       )
@@ -406,7 +406,7 @@ class CigaretteChartComponent extends AbstractChart<
     return (
       <>
         <Box mt={2} mr={2}>Total</Box>
-        { showPercentValueInTooltip && total !== 0 && <Text mt={2} textAlign='end' color='text-secondary'>{Number.isNaN(total) ? NOT_A_VALUE : '100%'}</Text> }
+        { showPercentValueInTooltip && total !== 0 && <Text mt={2} textAlign='end' color='text-secondary-invert'>{Number.isNaN(total) ? NOT_A_VALUE : '100%'}</Text> }
         <Text mt={2} textAlign='end' bold>{Number.isNaN(total) ? NOT_A_VALUE : total}</Text>
       </>
     );
diff --git a/semcore/d3-chart/src/component/Chart/DonutChart.tsx b/semcore/d3-chart/src/component/Chart/DonutChart.tsx
index 4cbf344fce..eb0f8d5f88 100644
--- a/semcore/d3-chart/src/component/Chart/DonutChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/DonutChart.tsx
@@ -59,7 +59,7 @@ class DonutChartComponent extends AbstractChart<
 
   renderChart() {
     const { innerRadius, halfsize, innerLabel, onClickPie } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     const checkedLegendItems = dataDefinitions.filter((item) => item.checked);
 
@@ -73,7 +73,7 @@ class DonutChartComponent extends AbstractChart<
               dataKey={item.id}
               name={item.label}
               color={item.color}
-              active={highlightedLine === index}
+              active={highlightedItem === index}
             />
           );
         })}
diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx
index 7bcdaf5ec6..a94285d7b6 100644
--- a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx
@@ -114,7 +114,7 @@ class HistogramChartComponent extends AbstractChart<
 
   renderChart() {
     const { groupKey, invertAxis } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     if (this.isStack) {
       return (
@@ -124,7 +124,7 @@ class HistogramChartComponent extends AbstractChart<
 
             const commonBarComponentProps: BarProps = {
               color: item.color,
-              transparent: highlightedLine !== -1 && highlightedLine !== index,
+              transparent: highlightedItem !== -1 && highlightedItem !== index,
             };
 
             if (invertAxis) {
diff --git a/semcore/d3-chart/src/component/Chart/LineChart.tsx b/semcore/d3-chart/src/component/Chart/LineChart.tsx
index 18c199aa18..368021a8c2 100644
--- a/semcore/d3-chart/src/component/Chart/LineChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/LineChart.tsx
@@ -68,7 +68,7 @@ class LineChartComponent extends AbstractChart<
 
   protected renderChart() {
     const { groupKey, curve, showDots, area, areaCurve, onClickLine } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     return dataDefinitions.map((item, index) => {
       return (
@@ -78,7 +78,7 @@ class LineChartComponent extends AbstractChart<
             y={item.id}
             key={item.id}
             color={item.color}
-            transparent={highlightedLine !== -1 && highlightedLine !== index}
+            transparent={highlightedItem !== -1 && highlightedItem !== index}
             curve={curve}
             onClick={onClickLine}
           >
diff --git a/semcore/d3-chart/src/component/Chart/VennChart.tsx b/semcore/d3-chart/src/component/Chart/VennChart.tsx
index a9c150a0b8..8e1e142db8 100644
--- a/semcore/d3-chart/src/component/Chart/VennChart.tsx
+++ b/semcore/d3-chart/src/component/Chart/VennChart.tsx
@@ -71,7 +71,7 @@ class VennChartComponent extends AbstractChart<
 
   renderChart() {
     const { data, onClickVennItem } = this.asProps;
-    const { dataDefinitions, highlightedLine } = this.state;
+    const { dataDefinitions, highlightedItem } = this.state;
 
     const checkedLegendItems = dataDefinitions.filter((item) => item.checked);
     const checkedLegendItemsMap = checkedLegendItems.reduce<Record<string, LegendItem>>(
@@ -102,7 +102,7 @@ class VennChartComponent extends AbstractChart<
               dataKey={item.id}
               name={item.label}
               color={item.color}
-              transparent={highlightedLine !== -1 && highlightedLine !== index}
+              transparent={highlightedItem !== -1 && highlightedItem !== index}
             />
           );
         })}
diff --git a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx
index 9ec2cdff53..c07d15bf7c 100644
--- a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx
+++ b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx
@@ -5,11 +5,14 @@ import type { LegendProps } from './BaseLegend.type';
 import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type';
 import { makeDataHintsHandlers } from '../../a11y/hints';
 
+type InnerProps = {
+  highlightedItem?: number;
+};
 export abstract class BaseLegend<
   P extends LegendProps,
   E extends readonly ((...args: any[]) => any)[] = never[],
   DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never,
-> extends Component<P, E, never, {}, {}, DP> {
+> extends Component<P, E, never, InnerProps, {}, DP> {
   componentDidMount() {
     this.setHints();
   }
@@ -43,7 +46,7 @@ export abstract class BaseLegend<
     _: {},
     index: number,
   ): LegendItemProps & Intergalactic.InternalTypings.ComponentPropsNesting<'div'> {
-    const { shape = 'Checkbox', size = 'm', patterns } = this.asProps;
+    const { shape = 'Checkbox', size = 'm', patterns, highlightedItem } = this.asProps;
     const line = this.getItem(index);
 
     return {
@@ -57,6 +60,7 @@ export abstract class BaseLegend<
       onMouseLeave: this.bindOnMouseLeaveItem(line.id),
       style: { gridRowStart: `${index + 1}`, gridRowEnd: `${index + 2}` },
       patterns,
+      transparent: highlightedItem !== undefined && (highlightedItem !== -1 && highlightedItem !== index),
     };
   }
 
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
index 7e981a8a7a..f62bebd282 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
@@ -2,11 +2,11 @@ SLegendFlex[direction='row'] {
   align-items: flex-start;
   align-content: flex-start;
   flex-wrap: wrap;
-  gap: 8px 16px;
+  gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px);
 }
 
 SLegendFlex[direction='column'] {
   align-items: flex-start;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--intergalactic-spacing-content-gap-large, 8px);
 }
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts
index ec211b3f25..8fdf3b274e 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts
@@ -76,6 +76,8 @@ export type LegendItemProps = LegendItem & {
    * Handler for focus out legend item
    */
   onBlurLegendItem: (id: LegendItemKey) => void;
+  /** Enables element transparency */
+  transparent?: boolean;
 };
 
 export type LegendItemDefaultProps = {
@@ -96,7 +98,7 @@ export type ShapeProps = LegendItem &
     }
   );
 
-export const StaticShapes = ['Circle', 'Line', 'Square', 'Pattern'] as const;
+export const StaticShapes = ['Circle', 'Pattern'] as const;
 
 export type ShapeType = 'Checkbox' | typeof StaticShapes[number];
 
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
index 47bf705c45..7176504bac 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
@@ -11,9 +11,13 @@ SLegendItem[disabled]:hover {
   cursor: default;
 }
 
+SLegendItem[transparent] {
+  opacity: 0.3;
+}
+
 SPointShape[color] {
   background-color: var(--color);
-  margin-right: 8px;
+  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
   flex-shrink: 0;
 }
 
@@ -21,17 +25,18 @@ SPointShape[shape='Circle'][size='l'] {
   width: 16px;
   height: 16px;
   border-radius: 8px;
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SPointShape[shape='Circle'][size='m'] {
   width: 12px;
   height: 12px;
   border-radius: 6px;
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
-SPointShape[shape='Line'][size='l'] {
+/* TODO: Remove */
+/* SPointShape[shape='Line'][size='l'] {
   width: 16px;
   height: 4px;
   border-radius: 3px;
@@ -57,24 +62,24 @@ SPointShape[shape='Square'][size='m'] {
   height: 12px;
   border-radius: 2px;
   margin-top: 4px;
-}
+} */
 
 SPointShape[shape='Pattern'] {
   background-color: transparent;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon {
   line-height: 0;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon[size='l'] {
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon[size='m'] {
-  margin-top: 2px;
+  margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px);
 }
 
 SLabel {
@@ -97,7 +102,7 @@ SCount[size='m'] {
 
 SAdditionalLabel,
 SCount {
-  margin-left: 4px;
+  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SAdditionalLabel {
@@ -113,7 +118,7 @@ SAdditionalLabel::before {
   height: 4px;
   width: 4px;
   border-radius: 2px;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SAdditionalLabel[size='l']::before {
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
index 0dc37cee29..e1c660ebdb 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
@@ -4,8 +4,8 @@ SLegendTable[columns-count] {
   grid-template-columns: auto 0.2fr;
   align-items: center;
   height: fit-content;
-  grid-column-gap: 16px;
-  grid-row-gap: 8px;
+  grid-column-gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SColumnItem[size='l'] {
diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css
index 124b8494cb..f743ccee04 100644
--- a/semcore/d3-chart/src/style/abstract-chart.shadow.css
+++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css
@@ -7,7 +7,7 @@ SChart {
 
 STooltipChildrenWrapper {
   display: grid;
-  column-gap: var(--intergalactic-spacing-2x, 8px);
+  column-gap: var(--intergalactic-spacing-content-gap-large, 8px);
 
   &[columnsCount='2'] {
     grid-template-columns: auto minmax(28px, max-content);
diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css
index 1673ec6ac1..0f2e27cc7f 100644
--- a/semcore/d3-chart/src/style/area.shadow.css
+++ b/semcore/d3-chart/src/style/area.shadow.css
@@ -2,7 +2,14 @@
 
 SArea {
   fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
-  fill-opacity: 0.2;
+  fill-opacity: 0.1;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 0%,
+    rgba(0, 0, 0, 0.48) 60%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.48) 60%, transparent 100%);
 }
 
 SArea[color] {
@@ -20,7 +27,7 @@ SArea[transparent] {
 
 SAreaLine {
   stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
-  stroke-width: 3;
+  stroke-width: 2;
   fill: transparent;
 }
 
@@ -41,7 +48,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6));
+  stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177));
   stroke-dasharray: 4;
 }
 
diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css
index b18b4d76f2..32599fe724 100644
--- a/semcore/d3-chart/src/style/dot.shadow.css
+++ b/semcore/d3-chart/src/style/dot.shadow.css
@@ -10,10 +10,15 @@ SDot {
   stroke-width: 1px;
   stroke: var(--intergalactic-chart-grid-border, #ffffff);
   fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
-  transition-property: cx, cy, x, y;
+  transition-property: cx, cy, x, y, filter;
   transition-timing-function: ease-in-out;
 }
 
+SDot[active] {
+  box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161));
+  filter: drop-shadow(0px 0px 1px oklch(0.176 0.033 175.7 / 0.07)) drop-shadow(0px 1px 3px oklch(0.176 0.033 175.7 / 0.07));
+}
+
 SDot[hide] {
   display: none;
 }
diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css
index cc291b4b45..a5342370a5 100644
--- a/semcore/d3-chart/src/style/line.shadow.css
+++ b/semcore/d3-chart/src/style/line.shadow.css
@@ -2,7 +2,7 @@
 
 SLine {
   fill: transparent;
-  stroke-width: 3;
+  stroke-width: 2;
   stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
   transition-property: d;
   transition-duration: var(--duration);
@@ -23,7 +23,7 @@ SLine[transparent] {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177));
   stroke-dasharray: 4;
 }
 
diff --git a/semcore/d3-chart/src/style/scatterplot.shadow.css b/semcore/d3-chart/src/style/scatterplot.shadow.css
index 77157433e3..214357a293 100644
--- a/semcore/d3-chart/src/style/scatterplot.shadow.css
+++ b/semcore/d3-chart/src/style/scatterplot.shadow.css
@@ -29,7 +29,7 @@ SScatterPlot[transparent] {
 SValue {
   text-anchor: middle;
   font-size: var(--intergalactic-fs-50, 10px);
-  stroke: var(--intergalactic-chart-palette-order-9, oklch(0.58 0.168 278.2));
+  stroke: var(--intergalactic-chart-palette-order-9, oklch(0.53 0.157 279.2));
 }
 
 SValue[color] {
diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css
index 0e5dc23996..920c3f1b34 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -3,40 +3,49 @@
 STooltip {
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
+  font-variant-numeric: tabular-nums;
   position: relative;
-  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
   border-radius: var(--intergalactic-popper-rounded, 6px);
-  border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   box-sizing: border-box;
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
-  padding: var(--intergalactic-spacing-3x, 12px);
+  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 STitle {
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-  margin-bottom: var(--intergalactic-spacing-2x, 8px);
+  color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
+  margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SDotGroup {
   display: flex;
   align-items: center;
+  margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px);
+}
+
+SDotGroup:last-of-type {
+  margin-bottom: 0;
 }
 
 SDot {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SDotCircle[color] {
   background-color: var(--color);
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + 0.15) c h);
 }
 
 
 SFooter {
-  background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
-  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px);
+  background: var(--intergalactic-bg-secondary-invert, oklch(0.969 0.057 140 / 0.118));
+  color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
+  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px);
-  margin: var(--intergalactic-spacing-3x, 12px) calc(-1 * var(--intergalactic-spacing-3x, 12px)) calc(-1 * var(--intergalactic-spacing-3x, 12px));
+  margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px));
 }
\ No newline at end of file
diff --git a/semcore/icon/package.json b/semcore/icon/package.json
index 66419506a0..35a644bb7f 100644
--- a/semcore/icon/package.json
+++ b/semcore/icon/package.json
@@ -1498,6 +1498,26 @@
       "import": "./lib/DesktopChart/m/index.mjs",
       "require": "./lib/DesktopChart/m/index.js"
     },
+    "./DiffDown/l": {
+      "types": "./lib/DiffDown/l/index.d.ts",
+      "import": "./lib/DiffDown/l/index.mjs",
+      "require": "./lib/DiffDown/l/index.js"
+    },
+    "./DiffDown/m": {
+      "types": "./lib/DiffDown/m/index.d.ts",
+      "import": "./lib/DiffDown/m/index.mjs",
+      "require": "./lib/DiffDown/m/index.js"
+    },
+    "./DiffUp/l": {
+      "types": "./lib/DiffUp/l/index.d.ts",
+      "import": "./lib/DiffUp/l/index.mjs",
+      "require": "./lib/DiffUp/l/index.js"
+    },
+    "./DiffUp/m": {
+      "types": "./lib/DiffUp/m/index.d.ts",
+      "import": "./lib/DiffUp/m/index.mjs",
+      "require": "./lib/DiffUp/m/index.js"
+    },
     "./Document/l": {
       "types": "./lib/Document/l/index.d.ts",
       "import": "./lib/Document/l/index.mjs",
diff --git a/semcore/icon/svg/icon/DiffDown/l.svg b/semcore/icon/svg/icon/DiffDown/l.svg
new file mode 100644
index 0000000000..c6482a1812
--- /dev/null
+++ b/semcore/icon/svg/icon/DiffDown/l.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 18.997V9a1.001 1.001 0 0 0-2.003 0v7.58L5.71 4.294a1.001 1.001 0 0 0-1.416 1.417l12.288 12.284h-7.58a1 1 0 0 0-1 1.001 1 1 0 0 0 1 1.001h9.998c.547 0 1.001-.457 1.001-1.001"/></svg>
\ No newline at end of file
diff --git a/semcore/icon/svg/icon/DiffDown/m.svg b/semcore/icon/svg/icon/DiffDown/m.svg
new file mode 100644
index 0000000000..ecf60993f4
--- /dev/null
+++ b/semcore/icon/svg/icon/DiffDown/m.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 12.997V6a1.001 1.001 0 0 0-2.003 0v4.58L3.71 2.294a1.001 1.001 0 0 0-1.416 1.416l8.288 8.285h-4.58a1 1 0 0 0 0 2.003h6.998c.547 0 1.001-.458 1.001-1.002"/></svg>
\ No newline at end of file
diff --git a/semcore/icon/svg/icon/DiffUp/l.svg b/semcore/icon/svg/icon/DiffUp/l.svg
new file mode 100644
index 0000000000..a756e66c82
--- /dev/null
+++ b/semcore/icon/svg/icon/DiffUp/l.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.995 4H8.998a1.001 1.001 0 0 0 0 2.003h7.58L4.292 18.29a1.001 1.001 0 1 0 1.417 1.416L17.994 7.42V15a1 1 0 0 0 1 1 1 1 0 0 0 1.002-1V5.001A1.01 1.01 0 0 0 18.995 4"/></svg>
\ No newline at end of file
diff --git a/semcore/icon/svg/icon/DiffUp/m.svg b/semcore/icon/svg/icon/DiffUp/m.svg
new file mode 100644
index 0000000000..5935ea280e
--- /dev/null
+++ b/semcore/icon/svg/icon/DiffUp/m.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M12.995 2H5.998a1.001 1.001 0 0 0 0 2.003h4.58L2.292 12.29a1.001 1.001 0 1 0 1.417 1.416l8.284-8.288V10a1 1 0 0 0 1 1 1 1 0 0 0 1.002-1V3.001A1.01 1.01 0 0 0 12.995 2"/></svg>
\ No newline at end of file
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index 4c8c8541d5..1b45776c0e 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -220,7 +220,7 @@ STag[theme="secondary-invert"],
 STagContainerClose[theme="secondary-invert"] {
   background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent);
   color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684));
-  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.989 0.019 140 / 0.232));
+  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.994 0.011 140 / 0.283));
 
   &::before,
   &::after {
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index ae1b7b9452..1fc83a56d7 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -22,7 +22,7 @@ STooltip {
 STooltip[theme='invert'] {
   color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
   background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
-  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
 }
 
 STooltip[theme='warning'] {
@@ -52,7 +52,7 @@ SArrow {
 }
 
 SArrow[theme='invert'] {
-  border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
 
   &::before {
     border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
diff --git a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx
index d8a330f786..99a4557539 100644
--- a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx
+++ b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx
@@ -69,9 +69,6 @@ const Demo = () => {
           })}
         </XAxis.Ticks>
       </XAxis>
-      <Line x='time' y='line'>
-        <Line.Dots display />
-      </Line>
       <HoverLine.Tooltip x='time' wMin={100}>
         {({ xIndex }) => {
           return {
@@ -96,6 +93,9 @@ const Demo = () => {
           };
         }}
       </HoverLine.Tooltip>
+      <Line x='time' y='line'>
+        <Line.Dots display />
+      </Line>
     </Plot>
   );
 };
diff --git a/stories/patterns/core/advanced/chart-palette-data.ts b/stories/patterns/core/advanced/chart-palette-data.ts
index ceeef49305..fbaee329db 100644
--- a/stories/patterns/core/advanced/chart-palette-data.ts
+++ b/stories/patterns/core/advanced/chart-palette-data.ts
@@ -14,3 +14,12 @@ export const chartSemanticLines = Array.from({ length: 20 }, (_, i) => ({
   success: Math.abs(Math.sin(Math.exp(i) + 1.5)) * 10,
   warning: Math.abs(Math.sin(Math.exp(i) + 3)) * 10,
 }));
+
+export const chartIntentLines = Array.from({ length: 20 }, (_, i) => ({
+  x: i,
+  commercial: Math.abs(Math.sin(Math.exp(i) + 0.4)) * 10,
+  informational: Math.abs(Math.sin(Math.exp(i) + 1.2)) * 10,
+  navigational: Math.abs(Math.sin(Math.exp(i) + 2.1)) * 10,
+  task: Math.abs(Math.sin(Math.exp(i) + 2.8)) * 10,
+  transactional: Math.abs(Math.sin(Math.exp(i) + 3.6)) * 10,
+}));
diff --git a/stories/patterns/core/advanced/chart-palette.tsx b/stories/patterns/core/advanced/chart-palette.tsx
index 2c0c080657..1a7be0b90d 100644
--- a/stories/patterns/core/advanced/chart-palette.tsx
+++ b/stories/patterns/core/advanced/chart-palette.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@semcore/ui/base-components';
 import { Chart } from '@semcore/ui/d3-chart';
 import React from 'react';
 
-import { chartPaletteLines, chartSemanticLines } from './chart-palette-data';
+import { chartIntentLines, chartPaletteLines, chartSemanticLines } from './chart-palette-data';
 
 const semanticColorMap = {
   critical: 'chart-data-critical',
@@ -10,6 +10,14 @@ const semanticColorMap = {
   warning: 'chart-data-warning',
 };
 
+const intentColorMap = {
+  commercial: 'chart-data-intent-commercial',
+  informational: 'chart-data-intent-informational',
+  navigational: 'chart-data-intent-navigational',
+  task: 'chart-data-intent-task',
+  transactional: 'chart-data-intent-transactional',
+};
+
 const Demo = () => {
   return (
     <Flex direction='column' gap={5}>
@@ -32,6 +40,16 @@ const Demo = () => {
         showLegend
         aria-label='Line chart with critical, success, and warning semantic colors'
       />
+      <Chart.Line
+        data={chartIntentLines}
+        plotWidth={500}
+        plotHeight={200}
+        groupKey='x'
+        xTicksCount={chartIntentLines.length / 2}
+        colorMap={intentColorMap}
+        showLegend
+        aria-label='Line chart with commercial, informational, navigational, task, and transactional intent colors'
+      />
     </Flex>
   );
 };
diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts
index 4f114cfada..5765ec7e39 100644
--- a/tools/theme/src/colors/index.ts
+++ b/tools/theme/src/colors/index.ts
@@ -280,4 +280,4 @@ export const L_INV_ICON_SECONDARY = 0.45;
 /** Border primary    | ⚠️ APCA 15+ on secondary bg */
 export const L_INV_BORDER_PRIMARY = 0.46; // inputs, buttons, spin
 /** Border secondary */
-export const L_INV_BORDER_SECONDARY = 0.35;
+export const L_INV_BORDER_SECONDARY = 0.4;
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index efa843eec2..453aabeecb 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -399,6 +399,10 @@ export const theme: Theme = {
         value: colors.gray['50'].value,
         description: 'Background color of the unavailable Badge.',
       },
+      badge_text_primary_DEFAULT: {
+        value: '{semanticTokens.colors.text_primary_DEFAULT}',
+        description: 'Primary text color for Badge.',
+      },
       badge_text_primary_invert: {
         value: '{semanticTokens.colors.text_primary_invert}',
         description: 'Inverted primary text color for Badge.',
@@ -661,13 +665,41 @@ export const theme: Theme = {
         description: 'Critical data color for charts.',
       },
       chart_data_success: {
-        value: colors.salad['200'].value,
+        value: colors.green['200'].value,
         description: 'Success data color for charts.',
       },
       chart_data_warning: {
         value: colors.orange['200'].value,
         description: 'Warning data color for charts.',
       },
+      chart_data_new: {
+        value: colors.green['200'].value,
+        description: 'Color for the "New" data on the chart.',
+      },
+      chart_data_lost: {
+        value: colors.red['300'].value,
+        description: 'Color for the "Lost" data on the chart.',
+      },
+      chart_data_intent_commercial: {
+        value: colors.violet['300'].value,
+        description: 'Color for the commercial data intent on the chart.',
+      },
+      chart_data_intent_informational: {
+        value: colors.blue['400'].value,
+        description: 'Color for the informational data intent on the chart.',
+      },
+      chart_data_intent_navigational: {
+        value: colors.green['200'].value,
+        description: 'Color for the navigational data intent on the chart.',
+      },
+      chart_data_intent_task: {
+        value: colors.pink['300'].value,
+        description: 'Color for the task data intent on the chart.',
+      },
+      chart_data_intent_transactional: {
+        value: colors.yellow['200'].value,
+        description: 'Color for the transactional data intent on the chart.',
+      },
       chart_grid_bar_chart_base_bg: {
         value: neutral.at(L_BG_LIGHT),
         description: 'Default background color of a bar in the BarChart.',
@@ -692,10 +724,42 @@ export const theme: Theme = {
         value: neutral.at(L_BORDER_SECONDARY),
         description: 'Stripe color for diagonal pattern background.',
       },
-      chart_grid_text_label: {
+      chart_grid_bg_good: {
+        value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.green.200} l c h / 0.1) 0%, oklch(from {baseTokens.colors.green.200} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.green.200} l c h / 0.01) 87.981%)',
+        description: 'Background gradient for chart areas with positive dynamics.',
+      },
+      chart_grid_bg_bad: {
+        value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.red.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.red.300} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.red.300} l c h / 0.01) 87.981%)',
+        description: 'Background gradient for chart areas with negative dynamics.',
+      },
+      chart_grid_bg_highlight: {
+        value: 'linear-gradient(180deg, {baseTokens.colors.gray.50} 0%, {baseTokens.colors.gray.50} 41.827%, {baseTokens.colors.transparent} 100%)',
+        description: 'Background gradient for highlighted chart areas.',
+      },
+      chart_grid_bg_insight: {
+        value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 12.677%, oklch(from {baseTokens.colors.violet.300} l c h / 0.01) 87.981%)',
+        description: 'Background gradient for insight chart areas.',
+      },
+      chart_grid_bg_pattern: {
+        value: 'linear-gradient(0deg, oklch(from {baseTokens.colors.gray.800} l c h / 0.1) 8.532%, {baseTokens.colors.gray.800} 29.015%)',
+        description: 'Pattern gradient for chart grid backgrounds.',
+      },
+      chart_grid_bg_potential: {
+        value: 'linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, {baseTokens.colors.transparent} 100%)',
+        description: 'Background gradient for potential chart areas.',
+      },
+      chart_grid_line_forecast: {
+        value: 'linear-gradient(90deg, {baseTokens.colors.violet.300} 0%, {baseTokens.colors.green.100} 100%)',
+        description: 'Forecast line color on the chart grid.',
+      },
+      chart_grid_text_label_DEFAULT: {
         value: neutral.opaqueAt(L_TEXT_SECONDARY),
         description: 'Text label on the chart grid.',
       },
+      chart_grid_text_label_accent: {
+        value: neutral.opaqueAt(L_TEXT_PRIMARY),
+        description: 'Text label with accent on the chart grid.',
+      },
       chart_grid_x_axis: {
         value: neutral.at(L_BORDER_PRIMARY),
         description: 'X-axis line on the chart grid.',
@@ -735,9 +799,9 @@ export const theme: Theme = {
       chart_palette_order_8: {
         value: colors.mint['200'].value,
         description: '8 color in the default list of colors for charts.',
-      }, // stopped here
+      },
       chart_palette_order_9: {
-        value: colors.blue['400'].value,
+        value: colors.blue['500'].value,
         description: '9 color in the default list of colors for charts.',
       },
       chart_palette_order_10: {
@@ -820,6 +884,10 @@ export const theme: Theme = {
         value: neutral.opaqueAt(L_BG_LIGHT),
         description: 'Background color for the clickable date on the X-axis of the chart grid.',
       },
+      chart_x_axis_accent_tick: {
+        value: neutral.at(L_BG_SECONDARY_ACTIVE),
+        description: 'Background color for the accent tick on the X-axis.',
+      },
       control_checkbox_bg_normal: {
         value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
         description: 'Background color of the Checkbox.',
@@ -2005,6 +2073,14 @@ export const theme: Theme = {
         value: `3px 3px 10px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`,
         description: 'Hover state for the shadow of the Card with hover state.',
       },
+      box_shadow_chart_dot_elevated: {
+        value: `0px 0px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}, 0px 1px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}`,
+        description: 'Shadow of the elevated chart dot.',
+      },
+      box_shadow_chart_elevated: {
+        value: '0px 0px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165), 0px 1px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165)',
+        description: 'Shadow of elevated elements on charts.',
+      },
       box_shadow_control_elevated: {
         value: `0px 0px 1px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}, 0px 1px 3px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`,
         description: 'Shadow of the Switch toggle.',
@@ -3265,6 +3341,15 @@ type SemanticColors = {
       success: Value;
       warning: Value;
       critical: Value;
+      lost: Value;
+      new: Value;
+      intent: {
+        informational: Value;
+        navigational: Value;
+        commercial: Value;
+        transactional: Value;
+        task: Value;
+      };
     };
     palette: {
       order: {
@@ -3303,6 +3388,7 @@ type SemanticColors = {
     };
     grid: {
       line: Value;
+      line_forecast: Value;
       x: {
         axis: Value;
       };
@@ -3314,7 +3400,10 @@ type SemanticColors = {
         };
       };
       text: {
-        label: Value;
+        label: {
+          DEFAULT: Value;
+          accent: Value;
+        };
       };
       bar: {
         chart: {
@@ -3328,11 +3417,20 @@ type SemanticColors = {
         bg: Value;
         pattern: Value;
       };
+      bg: {
+        good: Value;
+        bad: Value;
+        highlight: Value;
+        insight: Value;
+        pattern: Value;
+        potential: Value;
+      };
       border: Value;
     };
     x: {
       axis: {
         accent: {
+          tick: Value;
           period: {
             active: Value;
           };
@@ -3402,6 +3500,7 @@ type SemanticColors = {
     };
     text: {
       primary: {
+        DEFAULT: Value;
         invert: Value;
       };
       secondary: Value;
@@ -3447,6 +3546,12 @@ type SemanticShadows = {
         DEFAULT: Value;
         hover: Value;
       };
+      chart: {
+        elevated: Value;
+        dot: {
+          elevated: Value;
+        };
+      };
       control: {
         elevated: Value;
       };
diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json
index 735ea754a7..b2e477697e 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -877,7 +877,7 @@
   },
   {
     "name": "--intergalactic-border-tooltip-invert",
-    "value": "oklch(0.35 0.006 140)"
+    "value": "oklch(0.4 0.004 140)"
   },
   {
     "name": "--intergalactic-border-table-accent",
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index f0488d8d02..1b07bad22d 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -135,6 +135,12 @@
       "badge"
     ]
   },
+  {
+    "name": "--intergalactic-badge-text-primary",
+    "value": "oklch(0.1 0.03 137 / 0.899)",
+    "description": "Primary text color for Badge.",
+    "components": []
+  },
   {
     "name": "--intergalactic-badge-text-primary-invert",
     "value": "oklch(0.999 0.001 180 / 0.949)",
@@ -356,7 +362,6 @@
     "components": [
       "accordion",
       "bulk-textarea",
-      "d3-chart",
       "drag-and-drop",
       "input",
       "notice",
@@ -383,7 +388,9 @@
     "name": "--intergalactic-bg-secondary-invert",
     "value": "oklch(0.969 0.057 140 / 0.118)",
     "description": "Inverted version of the secondary background of the interface which contains the main data and information.",
-    "components": []
+    "components": [
+      "d3-chart"
+    ]
   },
   {
     "name": "--intergalactic-bg-secondary-success",
@@ -536,7 +543,7 @@
   },
   {
     "name": "--intergalactic-border-secondary-invert",
-    "value": "oklch(0.989 0.019 140 / 0.232)",
+    "value": "oklch(0.994 0.011 140 / 0.283)",
     "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.",
     "components": []
   },
@@ -654,7 +661,7 @@
   },
   {
     "name": "--intergalactic-chart-data-success",
-    "value": "oklch(0.82 0.19 143)",
+    "value": "oklch(0.82 0.15 170)",
     "description": "Success data color for charts.",
     "components": []
   },
@@ -664,6 +671,48 @@
     "description": "Warning data color for charts.",
     "components": []
   },
+  {
+    "name": "--intergalactic-chart-data-new",
+    "value": "oklch(0.82 0.15 170)",
+    "description": "Color for the \"New\" data on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-lost",
+    "value": "oklch(0.74 0.19 22)",
+    "description": "Color for the \"Lost\" data on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-intent-commercial",
+    "value": "oklch(0.74 0.17 303)",
+    "description": "Color for the commercial data intent on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-intent-informational",
+    "value": "oklch(0.58 0.168 278.2)",
+    "description": "Color for the informational data intent on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-intent-navigational",
+    "value": "oklch(0.82 0.15 170)",
+    "description": "Color for the navigational data intent on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-intent-task",
+    "value": "oklch(0.74 0.225 330)",
+    "description": "Color for the task data intent on the chart.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-data-intent-transactional",
+    "value": "oklch(0.82 0.18 80)",
+    "description": "Color for the transactional data intent on the chart.",
+    "components": []
+  },
   {
     "name": "--intergalactic-chart-grid-bar-chart-base-bg",
     "value": "oklch(0.96 0.001 180)",
@@ -714,6 +763,48 @@
       "d3-chart"
     ]
   },
+  {
+    "name": "--intergalactic-chart-grid-bg-good",
+    "value": "linear-gradient(180deg, oklch(from oklch(0.82 0.15 170) l c h / 0.1) 0%, oklch(from oklch(0.82 0.15 170) l c h / 0.09) 12.677%, oklch(from oklch(0.82 0.15 170) l c h / 0.01) 87.981%)",
+    "description": "Background gradient for chart areas with positive dynamics.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-bg-bad",
+    "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.19 22) l c h / 0.1) 0%, oklch(from oklch(0.74 0.19 22) l c h / 0.09) 12.677%, oklch(from oklch(0.74 0.19 22) l c h / 0.01) 87.981%)",
+    "description": "Background gradient for chart areas with negative dynamics.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-bg-highlight",
+    "value": "linear-gradient(180deg, oklch(0.97 0.001 180) 0%, oklch(0.97 0.001 180) 41.827%, rgb(0 0 0 / 0) 100%)",
+    "description": "Background gradient for highlighted chart areas.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-bg-insight",
+    "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 12.677%, oklch(from oklch(0.74 0.17 303) l c h / 0.01) 87.981%)",
+    "description": "Background gradient for insight chart areas.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-bg-pattern",
+    "value": "linear-gradient(0deg, oklch(from oklch(0.23 0.01 140) l c h / 0.1) 8.532%, oklch(0.23 0.01 140) 29.015%)",
+    "description": "Pattern gradient for chart grid backgrounds.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-bg-potential",
+    "value": "linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, rgb(0 0 0 / 0) 100%)",
+    "description": "Background gradient for potential chart areas.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-chart-grid-line-forecast",
+    "value": "linear-gradient(90deg, oklch(0.74 0.17 303) 0%, oklch(0.9 0.11 175) 100%)",
+    "description": "Forecast line color on the chart grid.",
+    "components": []
+  },
   {
     "name": "--intergalactic-chart-grid-text-label",
     "value": "oklch(0.088 0.026 147.7 / 0.583)",
@@ -722,6 +813,12 @@
       "d3-chart"
     ]
   },
+  {
+    "name": "--intergalactic-chart-grid-text-label-accent",
+    "value": "oklch(0.1 0.03 137 / 0.899)",
+    "description": "Text label with accent on the chart grid.",
+    "components": []
+  },
   {
     "name": "--intergalactic-chart-grid-x-axis",
     "value": "oklch(0.88 0.002 175.6)",
@@ -793,7 +890,7 @@
   },
   {
     "name": "--intergalactic-chart-palette-order-9",
-    "value": "oklch(0.58 0.168 278.2)",
+    "value": "oklch(0.53 0.157 279.2)",
     "description": "9 color in the default list of colors for charts.",
     "components": [
       "d3-chart"
@@ -921,6 +1018,12 @@
     "description": "Background color for the clickable date on the X-axis of the chart grid.",
     "components": []
   },
+  {
+    "name": "--intergalactic-chart-x-axis-accent-tick",
+    "value": "oklch(0.96 0.001 180)",
+    "description": "Background color for the accent tick on the X-axis.",
+    "components": []
+  },
   {
     "name": "--intergalactic-control-checkbox-bg-normal",
     "value": "oklch(1 0 0)",
@@ -2740,7 +2843,7 @@
   },
   {
     "name": "--intergalactic-tag-secondary-border-invert",
-    "value": "oklch(0.989 0.019 140 / 0.232)",
+    "value": "oklch(0.994 0.011 140 / 0.283)",
     "description": "Inverted border color of the secondary Tag.",
     "components": [
       "tag"
@@ -3026,6 +3129,7 @@
     "value": "oklch(0.999 0.001 180 / 0.949)",
     "description": "Inverted version of the primary text.",
     "components": [
+      "d3-chart",
       "date-picker",
       "feature-highlight",
       "notice-bubble"
@@ -3058,7 +3162,9 @@
     "name": "--intergalactic-text-secondary-invert",
     "value": "oklch(0.997 0.004 165.9 / 0.684)",
     "description": "Inverted version of the secondary text.",
-    "components": []
+    "components": [
+      "d3-chart"
+    ]
   },
   {
     "name": "--intergalactic-text-success",
@@ -3086,6 +3192,7 @@
     "description": "Inverted version of the default Tooltip background.",
     "components": [
       "base-components",
+      "d3-chart",
       "tooltip"
     ]
   },
@@ -3099,10 +3206,11 @@
   },
   {
     "name": "--intergalactic-tooltip-border-invert",
-    "value": "oklch(0.35 0.006 140)",
+    "value": "oklch(0.4 0.004 140)",
     "description": "Border of the Tooltip with dark theme.",
     "components": [
       "base-components",
+      "d3-chart",
       "tooltip"
     ]
   },
@@ -3217,6 +3325,20 @@
     "description": "Hover state for the shadow of the Card with hover state.",
     "components": []
   },
+  {
+    "name": "--intergalactic-box-shadow-chart-dot-elevated",
+    "value": "0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161)",
+    "description": "Shadow of the elevated chart dot.",
+    "components": [
+      "d3-chart"
+    ]
+  },
+  {
+    "name": "--intergalactic-box-shadow-chart-elevated",
+    "value": "0px 0px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165), 0px 1px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165)",
+    "description": "Shadow of elevated elements on charts.",
+    "components": []
+  },
   {
     "name": "--intergalactic-box-shadow-control-elevated",
     "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)",
@@ -3353,6 +3475,7 @@
       "base-components",
       "bulk-textarea",
       "counter",
+      "d3-chart",
       "dropdown",
       "dropdown-menu",
       "input-tags",
@@ -3393,6 +3516,7 @@
       "bulk-textarea",
       "button",
       "card",
+      "d3-chart",
       "dropdown",
       "fullscreen-modal",
       "input",
@@ -3454,7 +3578,8 @@
     "value": "2px",
     "description": "Extra small gap between content elements inside controls, rows, or columns.",
     "components": [
-      "color-picker"
+      "color-picker",
+      "d3-chart"
     ]
   },
   {
@@ -3464,6 +3589,7 @@
     "components": [
       "base-trigger",
       "bulk-textarea",
+      "d3-chart",
       "date-picker",
       "dropdown-menu",
       "inline-input",
@@ -3482,6 +3608,7 @@
       "button",
       "checkbox",
       "color-picker",
+      "d3-chart",
       "dropdown",
       "dropdown-menu",
       "input",
@@ -3500,6 +3627,7 @@
       "breadcrumbs",
       "button",
       "checkbox",
+      "d3-chart",
       "date-picker",
       "dropdown",
       "fullscreen-modal",
@@ -3516,6 +3644,7 @@
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
       "color-picker",
+      "d3-chart",
       "fullscreen-modal",
       "notice-bubble",
       "pagination"
@@ -3526,6 +3655,7 @@
     "value": "16px",
     "description": "2x large gap between elements, rows, or columns.",
     "components": [
+      "d3-chart",
       "pagination",
       "tab-line"
     ]
diff --git a/website/docs/style/icon/icons-list.js b/website/docs/style/icon/icons-list.js
index 5cb5ce4e2f..12343fd11f 100644
--- a/website/docs/style/icon/icons-list.js
+++ b/website/docs/style/icon/icons-list.js
@@ -1166,6 +1166,34 @@ const iconsList = {
         'платеж',
       ],
     },
+    {
+      name: 'DiffUp',
+      size: ['l', 'm'],
+      group: 'Status',
+      tags: [
+        'diff',
+        'up',
+        'down',
+        'arrow',
+        'direction',
+        'lost',
+        'per cent',
+      ],
+    },
+    {
+      name: 'DiffDown',
+      size: ['l', 'm'],
+      group: 'Status',
+      tags: [
+        'diff',
+        'up',
+        'down',
+        'arrow',
+        'direction',
+        'lost',
+        'per cent',
+      ],
+    },
     {
       name: 'Education',
       size: ['l', 'm'],