diff --git a/README.md b/README.md
index 00bb8e8..b1a22a4 100644
--- a/README.md
+++ b/README.md
@@ -325,6 +325,29 @@ type MenuItem = {
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
+| Name                                           | Description           |
+|-:----------------------------------------------|-:---------------------|
+| Action panel variables                         |                       |
+| `--dashkit-action-panel-color`                 | Background color      |
+| `--dashkit-action-panel-border-color`          | Border color          |
+| `--dashkit-action-panel-border-radius`         | Border radius         |
+| Action panel item variables                    |                       |
+| `--dashkit-action-panel-item-color`            | Backgroud color       |
+| `--dashkit-action-panel-item-text-color`       | Text color            |
+| `--dashkit-action-panel-item-color-hover`      | Hover backgroud color |
+| `--dashkit-action-panel-item-text-color-hover` | Hover text color      |
+| Overlay variables                              |                       |
+| `--dashkit-overlay-border-color`               | Border color          |
+| `--dashkit-overlay-color`                      | Background color      |
+| `--dashkit-overlay-opacity`                    | Opacity               |
+| Grid item variables                            |                       |
+| `--dashkit-grid-item-edit-opacity`             | Opacity               |
+| `--dashkit-grid-item-border-radius`            | Border radius         |
+| Placeholder variables                          |                       |
+| `--dashkit-placeholder-color`                  | Background color      |
+| `--dashkit-placeholder-opacity`                | Opacity               |
+
+
 ## Development
 
 ### Build & watch
diff --git a/src/components/ActionPanel/ActionPanel.scss b/src/components/ActionPanel/ActionPanel.scss
index c9848cd..ecfa67f 100644
--- a/src/components/ActionPanel/ActionPanel.scss
+++ b/src/components/ActionPanel/ActionPanel.scss
@@ -1,14 +1,23 @@
 .dashkit-action-panel {
     $show_panel_transform: translateX(-50%) translateY(0);
     $hide_panel_transform: translateX(-50%) translateY(calc(100% + 20px));
-    $selector: #{&};
 
-    background-color: var(--g-color-base-float);
+    --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
+    --_--dashkit-action-panel-border-color: var(
+        --dashkit-action-panel-border-color,
+        var(--g-color-base-brand)
+    );
+    --_--dashkit-action-panel-border-radius: var(
+        --dashkit-action-panel-border-radius,
+        var(--g-border-radius-xl)
+    );
+
+    background-color: var(--_--dashkit-action-panel-color);
     position: fixed;
     bottom: 20px;
     display: flex;
-    border-radius: 10px;
-    border: 2px solid var(--g-color-base-brand);
+    border-radius: var(--_--dashkit-action-panel-border-radius);
+    border: 2px solid var(--_--dashkit-action-panel-border-color);
     padding: 8px;
     gap: 0;
     left: 50%;
@@ -21,7 +30,7 @@
 
         &-active {
             transform: $show_panel_transform;
-            transition: transform 300ms ease-in-out;
+            transition: transform 300ms ease;
         }
     }
 
@@ -31,27 +40,45 @@
 
         &-active {
             transform: $hide_panel_transform;
-            transition: transform 300ms ease-in-out;
+            transition: transform 300ms ease;
         }
     }
 
     &__item {
+        --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
+        --_--dashkit-action-panel-item-text-color: var(
+            --dashkit-action-panel-item-text-color,
+            var(--g-color-text-primary)
+        );
+        --_--dashkit-action-panel-item-color-hover: var(
+            --dashkit-action-panel-item-color-hover,
+            var(--g-color-base-simple-hover)
+        );
+        --_--dashkit-action-panel-item-text-color-hover: var(
+            --dashkit-action-panel-item-text-color-hover,
+            var(--g-color-text-primary)
+        );
+
         height: 68px;
         width: 98px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        transition: 0.3s background-color ease-in-out;
+        transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
         border-radius: 6px;
         padding: 0 12px;
         box-sizing: border-box;
         white-space: nowrap;
         overflow: hidden;
+        background-color: var(--_--dashkit-action-panel-item-color);
+        color: var(--_--dashkit-action-panel-item-text-color);
+        will-change: color, backgroung-color;
 
         &:hover {
             cursor: pointer;
-            background-color: var(--g-color-base-simple-hover);
+            background-color: var(--_--dashkit-action-panel-item-color-hover);
+            color: var(--_--dashkit-action-panel-item-text-color-hover);
         }
     }
 
diff --git a/src/components/ActionPanel/ActionPanel.tsx b/src/components/ActionPanel/ActionPanel.tsx
index a92cd6e..c1dfdcd 100644
--- a/src/components/ActionPanel/ActionPanel.tsx
+++ b/src/components/ActionPanel/ActionPanel.tsx
@@ -23,7 +23,7 @@ export type ActionPanelProps = {
 const b = cn('dashkit-action-panel');
 
 export const ActionPanel = (props: ActionPanelProps) => {
-    const isHidden = props.enable;
+    const isHidden = !props.enable;
     const nodeRef = React.useRef<HTMLDivElement | null>(null);
 
     const content = (
diff --git a/src/components/DashKit/__stories__/CssApiShowcase.tsx b/src/components/DashKit/__stories__/CssApiShowcase.tsx
new file mode 100644
index 0000000..a276fcd
--- /dev/null
+++ b/src/components/DashKit/__stories__/CssApiShowcase.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import {Icon} from '@gravity-ui/uikit';
+import {
+    ChartColumn,
+    Heading,
+    Layers3Diagonal,
+    PlugConnection,
+    Sliders,
+    TextAlignLeft,
+} from '@gravity-ui/icons';
+
+import {Demo, DemoRow} from './Demo';
+import {getConfig} from './utils';
+import {DashKit, ActionPanel, MenuItems} from '../../..';
+import i18n from '../../../i18n';
+import {CogIcon} from '../../../icons/CogIcon';
+import {CopyIcon} from '../../../icons/CopyIcon';
+import {DeleteIcon} from '../../../icons/DeleteIcon';
+
+export const CssApiShowcase: React.FC = () => {
+    React.useEffect(() => {
+        DashKit.setSettings({
+            menu: [
+                {
+                    id: 'settings',
+                    title: 'Menu setting text',
+                    icon: <Icon data={CogIcon} size={16} />,
+                },
+                {
+                    id: MenuItems.Copy,
+                    title: 'Menu setting copy',
+                    icon: <Icon data={CopyIcon} size={16} />,
+                },
+                {
+                    id: MenuItems.Delete,
+                    title: i18n('label_delete'), // for language change check
+                    icon: <Icon data={DeleteIcon} size={16} />,
+                    className: 'dashkit-overlay-controls__item_danger',
+                },
+            ],
+        });
+    }, []);
+
+    const items = React.useMemo(
+        () => [
+            {
+                id: 'chart',
+                icon: <Icon data={ChartColumn} />,
+                title: 'Chart',
+                className: 'test',
+                qa: 'chart',
+            },
+            {
+                id: 'selector',
+                icon: <Icon data={Sliders} />,
+                title: 'Selector',
+                qa: 'selector',
+            },
+            {
+                id: 'text',
+                icon: <Icon data={TextAlignLeft} />,
+                title: 'Text',
+            },
+            {
+                id: 'header',
+                icon: <Icon data={Heading} />,
+                title: 'Header',
+            },
+            {
+                id: 'links',
+                icon: <Icon data={PlugConnection} />,
+                title: 'Links',
+            },
+            {
+                id: 'tabs',
+                icon: <Icon data={Layers3Diagonal} />,
+                title: 'Tabs',
+            },
+        ],
+        [],
+    );
+
+    return (
+        <>
+            <style>
+                {`.g-root {
+                    --dashkit-action-panel-border-color: var(--g-color-line-info);
+                    --dashkit-action-panel-color: var(--g-color-base-float-accent);
+                    --dashkit-action-panel-border-radius: var(--g-border-radius-xxl);
+
+                    --dashkit-action-panel-item-color: transparent;
+                    --dashkit-action-panel-item-text-color: var(--g-color-text-primary);
+                    
+                    --dashkit-action-panel-item-color-hover: var(--g-color-line-info);
+                    --dashkit-action-panel-item-text-color-hover: white;
+
+                    --dashkit-overlay-color: var(--g-color-line-info);
+                    --dashkit-overlay-border-color: var(--g-color-line-info);
+                    --dashkit-overlay-opacity: 0.5;
+
+                    --dashkit-placeholder-color: var(--g-color-line-positive);
+                    --dashkit-placeholder-opacity: 1;
+                }`}
+            </style>
+            <Demo title="CSS API">
+                <DemoRow title="Component view">
+                    <ActionPanel enable={true} items={items} />
+                    <DashKit editMode={true} config={getConfig()} />
+                </DemoRow>
+            </Demo>
+        </>
+    );
+};
diff --git a/src/components/DashKit/__stories__/DashKit.stories.tsx b/src/components/DashKit/__stories__/DashKit.stories.tsx
index abd6197..4d82138 100644
--- a/src/components/DashKit/__stories__/DashKit.stories.tsx
+++ b/src/components/DashKit/__stories__/DashKit.stories.tsx
@@ -5,6 +5,7 @@ import {DashKit, DashKitProps} from '../DashKit';
 import pluginTitle from '../../../plugins/Title/Title';
 import pluginText from '../../../plugins/Text/Text';
 import {DashKitShowcase} from './DashKitShowcase';
+import {CssApiShowcase} from './CssApiShowcase';
 import {getConfig} from './utils';
 import './DashKit.stories.scss';
 
@@ -69,3 +70,6 @@ export const Default = DefaultTemplate.bind({});
 
 const ShowcaseTemplate: Story = () => <DashKitShowcase />;
 export const Showcase = ShowcaseTemplate.bind({});
+
+const CssApiShowcaseTemplate: Story<DashKitProps> = () => <CssApiShowcase />;
+export const CSS_API = CssApiShowcaseTemplate.bind({});
diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx
index e7af8c6..e1ea3dc 100644
--- a/src/components/DashKit/__stories__/DashKitShowcase.tsx
+++ b/src/components/DashKit/__stories__/DashKitShowcase.tsx
@@ -175,7 +175,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                 <DemoRow title="Last action in DashKit">{this.state.lastAction}</DemoRow>
                 <DemoRow title="Component view">
                     <ActionPanel
-                        enable={editMode ? !this.state.enableActionPanel : true}
+                        enable={editMode ? this.state.enableActionPanel : false}
                         items={this.getActionPanelItems()}
                     />
                     <DashKit
diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
index c60e652..1cd2008 100644
--- a/src/components/GridItem/GridItem.js
+++ b/src/components/GridItem/GridItem.js
@@ -55,7 +55,7 @@ class GridItem extends React.PureComponent {
                     in={!isHidden}
                     nodeRef={this.overlayRef}
                     classNames={b('overlay')}
-                    timeout={500}
+                    timeout={300}
                     unmountOnExit
                 >
                     <div ref={this.overlayRef} className={b('overlay')} />
@@ -64,7 +64,7 @@ class GridItem extends React.PureComponent {
                     in={!isHidden}
                     nodeRef={this.controlsRef}
                     classNames={b('controls')}
-                    timeout={500}
+                    timeout={300}
                     unmountOnExit
                 >
                     <OverlayControls
diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss
index 6f79e3c..f164732 100644
--- a/src/components/GridItem/GridItem.scss
+++ b/src/components/GridItem/GridItem.scss
@@ -1,34 +1,43 @@
 .dashkit-grid-item {
     position: relative;
+    $_border-radius: 3px;
 
     &__overlay {
+        --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
+        --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
+        --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
+        --_-dashkit-overlay-border-radius: var(
+            --dashkit-grid-item-border-radius,
+            #{$_border-radius}
+        );
+
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
-        border-radius: 3px;
-        background-color: var(--g-color-base-generic);
-        border: solid 1px rgba(0, 0, 0, 0.1);
-        // opacity: 0.5;
+        border-radius: var(--_-dashkit-overlay-border-radius);
+        background-color: var(--_-dashkit-overlay-color);
+        border: solid 1px var(--_-dashkit-overlay-border-color);
+        opacity: var(--_-dashkit-overlay-opacity);
 
         &-enter {
             opacity: 0;
             will-change: opacity;
 
             &-active {
-                opacity: 1;
-                transition: opacity 300ms ease-in-out;
+                opacity: var(--_-dashkit-overlay-opacity);
+                transition: opacity 300ms ease;
             }
         }
 
         &-exit {
-            opacity: 1;
+            opacity: var(--_-dashkit-overlay-opacity);
             will-change: opacity;
 
             &-active {
                 opacity: 0;
-                transition: opacity 300ms ease-in-out;
+                transition: opacity 300ms ease;
             }
         }
     }
@@ -40,7 +49,7 @@
 
             &-active {
                 opacity: 1;
-                transition: opacity 300ms ease-in-out;
+                transition: opacity 300ms ease;
             }
         }
 
@@ -50,24 +59,35 @@
 
             &-active {
                 opacity: 0;
-                transition: opacity 300ms ease-in-out;
+                transition: opacity 300ms ease;
             }
         }
     }
 
     &__item {
+        --_-dashkit-grid-item-border-radius: var(
+            --dashkit-grid-item-border-radius,
+            #{$_border-radius}
+        );
+        --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
+
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
-        border-radius: 3px;
+        border-radius: var(--_-dashkit-grid-item-border-radius);
 
         &_editMode {
-            opacity: 0.5;
+            opacity: var(--_-dashkit-grid-item-edit-opacity);
             border-color: transparent;
             pointer-events: none;
         }
+
+        &_animate {
+            will-change: opacity;
+            transition: opacity 300ms ease;
+        }
     }
 }
 
@@ -96,8 +116,11 @@
 }
 
 .react-grid-item.react-grid-placeholder {
-    background: #fc0;
-    opacity: 0.2;
+    --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
+    --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
+
+    background: var(--_-dashkit-placeholder-color);
+    opacity: var(--_-dashkit-placeholder-opacity);
     transition-duration: 100ms;
     z-index: 2;
     user-select: none;