diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.config.ts
deleted file mode 100644
index 1ae8641f1f..0000000000
--- a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.config.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
-import { css } from '@linaria/core';
-
-export const config = {
-    defaults: {
-        focused: 'true',
-        size: 'm',
-        view: 'secondary',
-    },
-    variations: {
-        view: {
-            primary: css`
-                --plasma-button-color: var(--plasma-colors-white);
-                --plasma-button-bg-color: var(--plasma-colors-button-accent);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-primary-hover);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-primary-active);
-            `,
-            secondary: css`
-                --plasma-button-color: var(--plasma-colors-text);
-                --plasma-button-bg-color: var(--plasma-colors-button-secondary);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-secondary-hover);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-secondary-active);
-            `,
-            clear: css`
-                --plasma-button-color: var(--plasma-colors-text);
-                --plasma-button-bg-color: var(--plasma-colors-transparent);
-            `,
-            success: css`
-                --plasma-button-color: var(--plasma-colors-white);
-                --plasma-button-bg-color: var(--plasma-colors-button-success);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-success-hover);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-success-active);
-            `,
-            warning: css`
-                --plasma-button-color: var(--plasma-colors-white);
-                --plasma-button-bg-color: var(--plasma-colors-button-warning);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-warning-hover);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-warning-active);
-            `,
-            critical: css`
-                --plasma-button-color: var(--plasma-colors-white);
-                --plasma-button-bg-color: var(--plasma-colors-button-critical);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-critical-hover);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-critical-active);
-            `,
-            checked: css`
-                --plasma-button-color: var(--plasma-colors-background);
-                --plasma-button-bg-color: var(--plasma-colors-button-checked);
-                --plasma-button-color-hover: var(--plasma-colors-button-checked-hover-color);
-                --plasma-button-bg-color-hover: var(--plasma-colors-button-checked-hover);
-                --plasma-button-color-active: var(--plasma-colors-button-checked-active-color);
-                --plasma-button-bg-color-active: var(--plasma-colors-button-checked-active);
-            `,
-            overlay: css`
-                --plasma-button-color: var(--plasma-colors-white);
-                --plasma-button-bg-color: var(--plasma-colors-black-secondary);
-            `,
-        },
-        size: {
-            l: css`
-                --plasma-button-height: 3.5rem;
-                --plasma-button-padding: 1.625rem;
-                --plasma-button-radius: 1rem;
-                --plasma-button-font-family: var(--plasma-typo-body-l-font-family);
-                --plasma-button-font-size: var(--plasma-typo-body-l-font-size);
-                --plasma-button-font-style: var(--plasma-typo-body-l-font-style);
-                --plasma-button-font-weight: var(--plasma-typo-body-l-bold-font-weight);
-                --plasma-button-letter-spacing: var(--plasma-typo-body-l-letter-spacing);
-                --plasma-button-line-height: var(--plasma-typo-body-l-line-height);
-            `,
-            m: css`
-                --plasma-button-height: 3rem;
-                --plasma-button-padding: 1.375rem;
-                --plasma-button-radius: 0.75rem;
-                --plasma-button-font-family: var(--plasma-typo-body-m-font-family);
-                --plasma-button-font-size: var(--plasma-typo-body-m-font-size);
-                --plasma-button-font-style: var(--plasma-typo-body-m-font-style);
-                --plasma-button-font-weight: var(--plasma-typo-body-m-bold-font-weight);
-                --plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
-                --plasma-button-line-height: var(--plasma-typo-body-m-line-height);
-            `,
-            s: css`
-                --plasma-button-height: 2.5rem;
-                --plasma-button-padding: 1.125rem;
-                --plasma-button-radius: 0.75rem;
-                --plasma-button-font-family: var(--plasma-typo-body-s-font-family);
-                --plasma-button-font-size: var(--plasma-typo-body-s-font-size);
-                --plasma-button-font-style: var(--plasma-typo-body-s-font-style);
-                --plasma-button-font-weight: var(--plasma-typo-body-s-bold-font-weight);
-                --plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
-                --plasma-button-line-height: var(--plasma-typo-body-s-line-height);
-            `,
-        },
-        disabled: {
-            true: css`
-                --plasma-button-disabled-opacity: 0.4;
-            `,
-        },
-        focused: {
-            true: css`
-                --plasma-button-focus-color: var(--plasma-colors-button-focused);
-            `,
-        },
-    },
-};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.config.ts
new file mode 100644
index 0000000000..8c30e96773
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.config.ts
@@ -0,0 +1,95 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        size: 'm',
+        focused: 'true',
+        view: 'secondary',
+    },
+    variations: {
+        view: {
+            primary: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-accent);
+                --plasma-button-bg-color-hover: #18a2ff;
+                --plasma-button-bg-color-active: #045891;
+            `,
+            secondary: css`
+                --plasma-button-color: var(--text-primary);
+                --plasma-button-bg-color: var(--surface-transparent-secondary);
+                --plasma-button-bg-color-hover: rgba(11, 126, 203, 0.12);
+                --plasma-button-bg-color-active: rgba(11, 126, 203, 0.19);
+            `,
+            clear: css`
+                --plasma-button-color: var(--text-accent);
+                --plasma-button-bg-color: var(--surface-clear);
+                --plasma-button-bg-color-hover: rgb(11, 126, 203, 0.12);
+                --plasma-button-bg-color-active: rgb(11, 126, 203, 0.19);
+            `,
+            negative: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-negative);
+                --plasma-button-bg-color-hover: #e65260;
+                --plasma-button-bg-color-active: #c60014;
+            `,
+            white: css`
+                --plasma-button-color: var(--text-primary);
+                --plasma-button-bg-color: var(--background-primary);
+                --plasma-button-bg-color-hover: #ffffff;
+                --plasma-button-bg-color-active: #ebeaea;
+            `,
+        },
+        size: {
+            m: css`
+                --plasma-button-height: 40px;
+                --plasma-button-padding: 20px;
+                --plasma-button-radius: 4px;
+                --plasma-button-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-m-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-m-line-height);
+            `,
+            s: css`
+                --plasma-button-height: 28px;
+                --plasma-button-padding: 12px;
+                --plasma-button-radius: 4px;
+                --plasma-button-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-m-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-m-line-height);
+            `,
+            xs: css`
+                --plasma-button-height: 20px;
+                --plasma-button-padding: 12px;
+                --plasma-button-radius: 4px;
+                --plasma-button-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-s-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-s-line-height);
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-button-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-button-focus-color: var(--surface-accent);
+            `,
+        },
+        square: {},
+        pin: {
+            square: css``,
+            circle: css`
+                border-radius: calc(var(--plasma-button-height) / 2);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.stories.tsx
similarity index 63%
rename from packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.stories.tsx
rename to packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.stories.tsx
index b240d9e0bf..b166c2ce68 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.stories.tsx
@@ -1,25 +1,20 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { buttonConfig } from '../../../../components/Button';
 import { mergeConfig } from '../../../../engines';
-import { argTypesFromConfig } from '../../../_helpers';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Button.config';
 import { Button } from './Button';
 
 export default {
-    title: 'plasma_b2c-old/Button',
+    title: 'sds_engineer/Button',
+    decorators: [WithTheme],
     component: Button,
     argTypes: argTypesFromConfig(mergeConfig(buttonConfig, config)),
 } as ComponentMeta<typeof Button>;
 
 export const Default: ComponentStory<typeof Button> = (props) => {
-    return (
-        <div style={{ padding: '1rem' }}>
-            <Button {...props}>Hello</Button>
-        </div>
-    );
+    return <Button {...props}>Hello</Button>;
 };
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.ts
similarity index 79%
rename from packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.ts
rename to packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.ts
index 4830a33a13..3b3aa31340 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c-old/components/Button/Button.ts
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Button/Button.ts
@@ -1,5 +1,3 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
 import { buttonConfig } from '../../../../components/Button';
 import { component, mergeConfig } from '../../../../engines';
 
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.config.ts
new file mode 100644
index 0000000000..b356da6124
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.config.ts
@@ -0,0 +1,114 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        view: 'accent',
+        focused: 'true',
+    },
+    variations: {
+        /**
+         * Размер контрола.
+         */
+        size: {
+            s: css`
+                --plasma-checkbox-trigger-size: 0.875rem;
+                --plasma-checkbox-trigger-border-radius: 0.25rem;
+                --plasma-checkbox-content-top-offset: 0.0625rem;
+                --plasma-checkbox-content-left-offset: 0.5625rem;
+                --plasma-checkbox-label-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-checkbox-label-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-checkbox-label-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-checkbox-label-font-weight: var(--plasma-typo-body-s-font-weight);
+                --plasma-checkbox-label-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-checkbox-label-line-height: var(--plasma-typo-body-s-line-height);
+                --plasma-checkbox-description-font-family: var(--plasma-typo-body-xs-font-family);
+                --plasma-checkbox-description-font-size: var(--plasma-typo-body-xs-font-size);
+                --plasma-checkbox-description-font-style: var(--plasma-typo-body-xs-font-style);
+                --plasma-checkbox-description-font-weight: var(--plasma-typo-body-xs-font-weight);
+                --plasma-checkbox-description-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
+                --plasma-checkbox-description-line-height: var(--plasma-typo-body-xs-line-height);
+            `,
+            m: css`
+                --plasma-checkbox-trigger-size: 1.25rem;
+                --plasma-checkbox-trigger-border-radius: 0.375rem;
+                --plasma-checkbox-content-top-offset: 0.1875rem;
+                --plasma-checkbox-content-left-offset: 0.75rem;
+                --plasma-checkbox-label-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-checkbox-label-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-checkbox-label-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-checkbox-label-font-weight: var(--plasma-typo-body-m-font-weight);
+                --plasma-checkbox-label-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-checkbox-label-line-height: var(--plasma-typo-body-m-line-height);
+                --plasma-checkbox-description-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-checkbox-description-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-checkbox-description-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-checkbox-description-font-weight: var(--plasma-typo-body-s-font-weight);
+                --plasma-checkbox-description-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-checkbox-description-line-height: var(--plasma-typo-body-s-line-height);
+            `,
+        },
+        /**
+         * Вид контрола.
+         */
+        view: {
+            primary: css`
+                --plasma-checkbox-fill-color: var(--text-primary);
+                --plasma-checkbox-icon-color: var(--inverse-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            secondary: css`
+                --plasma-checkbox-fill-color: var(--text-secondary);
+                --plasma-checkbox-icon-color: var(--inverse-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            tertiary: css`
+                --plasma-checkbox-fill-color: var(--text-tertiary);
+                --plasma-checkbox-icon-color: var(--inverse-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            paragraph: css`
+                --plasma-checkbox-fill-color: var(--text-paragraph);
+                --plasma-checkbox-icon-color: var(--inverse-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            accent: css`
+                --plasma-checkbox-fill-color: var(--text-accent);
+                --plasma-checkbox-icon-color: var(--on-dark-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            positive: css`
+                --plasma-checkbox-fill-color: var(--text-positive);
+                --plasma-checkbox-icon-color: var(--on-dark-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            warning: css`
+                --plasma-checkbox-fill-color: var(--text-warning);
+                --plasma-checkbox-icon-color: var(--on-dark-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+            negative: css`
+                --plasma-checkbox-fill-color: var(--text-negative);
+                --plasma-checkbox-icon-color: var(--on-dark-text-primary);
+                --plasma-checkbox-description-color: var(--text-secondary);
+                --plasma-checkbox-trigger-border-color: var(--text-secondary);
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-checkbox-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-checkbox-focus-color: var(--text-accent);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 0000000000..3f2b0de3f2
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { checkboxConfig } from '../../../../components/Checkbox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Link } from '../Link/Link';
+
+import { config } from './Checkbox.config';
+import { Checkbox } from './Checkbox';
+
+export default {
+    title: 'sds_engineer/Checkbox',
+    decorators: [WithTheme],
+    component: Checkbox,
+    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+} as ComponentMeta<typeof Checkbox>;
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const name = 'languages';
+const items = [
+    {
+        name,
+        value: 'natural',
+        label: 'Natural languages',
+        disabled: false,
+        description: 'Languages that people speak. They were not designed by people and they evolved naturally.',
+    },
+    { name, value: 'russian', label: 'Russian', disabled: false, parent: 'natural' },
+    {
+        name,
+        value: 'english',
+        label: 'English',
+        disabled: false,
+        parent: 'natural',
+        description: (
+            <div>
+                The most spoken language in the <Link href="/#">world</Link>
+            </div>
+        ),
+    },
+    { name, value: 'french', label: 'French', disabled: false, parent: 'natural' },
+    { name, value: 'klingon', label: 'Klingon', disabled: false, parent: 'natural' },
+    { name, value: 'elvish', label: 'Elvish', disabled: true, parent: 'natural' },
+    { name, value: 'dothraki', label: 'Dothraki', disabled: true, parent: 'natural' },
+    {
+        name,
+        value: 'chinese',
+        label: (
+            <div>
+                Chinese is the hardest <Link href="/#">language</Link>
+            </div>
+        ),
+        parent: 'natural',
+    },
+];
+
+const getChildren = (value: string) => items.filter((item) => item.parent === value);
+const getState = (values: Record<string, boolean | undefined>, value: string) => {
+    const allChildren = getChildren(value);
+
+    if (!allChildren.length) {
+        return { checked: values[value], indeterminate: false };
+    }
+
+    const checkedChildren = allChildren.filter((child) => values[child.value]);
+
+    if (checkedChildren.length === 0) {
+        return { checked: false, indeterminate: false };
+    }
+
+    if (allChildren.length !== checkedChildren.length) {
+        return { checked: false, indeterminate: true };
+    }
+
+    return { checked: true, indeterminate: false };
+};
+
+export const Default: ComponentStory<typeof Checkbox> = (props) => {
+    return (
+        <>
+            <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
+            <Checkbox
+                name="item.name"
+                value="item.value"
+                singleLine
+                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                {...props}
+            />
+        </>
+    );
+};
+
+export const Complex: ComponentStory<typeof Checkbox> = (props) => {
+    const [values, setValues] = React.useState({
+        russian: true,
+        english: true,
+        french: true,
+        klingon: false,
+        elvish: true,
+        dothraki: false,
+        chinese: true,
+    });
+
+    return (
+        <>
+            {items.map((item) => (
+                <Checkbox
+                    {...getState(values, item.value)}
+                    style={{ marginLeft: item.parent ? 36 : 0 }}
+                    key={item.value}
+                    name={item.name}
+                    value={item.value}
+                    label={item.label}
+                    disabled={item.disabled}
+                    description={item.description}
+                    onChange={(event) => {
+                        const { checked } = event.target;
+
+                        if (item.parent) {
+                            setValues({ ...values, [item.value]: checked });
+                        } else {
+                            setValues({
+                                ...values,
+                                ...getChildren(item.value).reduce(
+                                    (acc, child) => ({ ...acc, [child.value]: checked }),
+                                    {},
+                                ),
+                            });
+                        }
+
+                        onChange(event);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    {...props}
+                />
+            ))}
+        </>
+    );
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.ts
new file mode 100644
index 0000000000..db48036ae2
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Checkbox/Checkbox.ts
@@ -0,0 +1,8 @@
+import { checkboxConfig } from '../../../../components/Checkbox';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Checkbox.config';
+
+const mergedConfig = mergeConfig(checkboxConfig, config);
+
+export const Checkbox = component(mergedConfig);
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.config.ts
new file mode 100644
index 0000000000..53a350661c
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.config.ts
@@ -0,0 +1,103 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        view: 'accent',
+        focused: 'true',
+    },
+    variations: {
+        view: {
+            primary: css`
+                --plasma-link-color: var(--text-primary);
+                --plasma-link-color-hover: var(--text-primary-hover);
+                --plasma-link-color-active: var(--text-primary-active);
+                --plasma-link-color-visited: var(--text-primary);
+                --plasma-link-color-visited-hover: var(--text-primary-hover);
+                --plasma-link-color-visited-active: var(--text-primary-active);
+                --plasma-link-underline-border: 0;
+            `,
+            secondary: css`
+                --plasma-link-color: var(--text-secondary);
+                --plasma-link-color-hover: var(--text-secondary-hover);
+                --plasma-link-color-active: var(--text-secondary-active);
+                --plasma-link-color-visited: var(--text-secondary);
+                --plasma-link-color-visited-hover: var(--text-secondary-hover);
+                --plasma-link-color-visited-active: var(--text-secondary-active);
+                --plasma-link-underline-border: 0;
+            `,
+            tertiary: css`
+                --plasma-link-color: var(--text-tertiary);
+                --plasma-link-color-hover: var(--text-tertiary-hover);
+                --plasma-link-color-active: var(--text-tertiary-active);
+                --plasma-link-color-visited: var(--text-tertiary);
+                --plasma-link-color-visited-hover: var(--text-tertiary-hover);
+                --plasma-link-color-visited-active: var(--text-tertiary-active);
+                --plasma-link-underline-border: 0;
+            `,
+            paragraph: css`
+                --plasma-link-color: var(--text-paragraph);
+                --plasma-link-color-hover: var(--text-paragraph-hover);
+                --plasma-link-color-active: var(--text-paragraph-active);
+                --plasma-link-color-visited: var(--text-paragraph);
+                --plasma-link-color-visited-hover: var(--text-paragraph-hover);
+                --plasma-link-color-visited-active: var(--text-paragraph-active);
+                --plasma-link-underline-border: 0;
+            `,
+            accent: css`
+                --plasma-link-color: var(--text-accent);
+                --plasma-link-color-hover: var(--text-accent-hover);
+                --plasma-link-color-active: var(--text-accent-active);
+                --plasma-link-color-visited: var(--text-accent);
+                --plasma-link-color-visited-hover: var(--text-accent-hover);
+                --plasma-link-color-visited-active: var(--text-accent-active);
+                --plasma-link-underline-border: 0;
+            `,
+            positive: css`
+                --plasma-link-color: var(--text-positive);
+                --plasma-link-color-hover: var(--text-positive-hover);
+                --plasma-link-color-active: var(--text-positive-active);
+                --plasma-link-color-visited: var(--text-positive);
+                --plasma-link-color-visited-hover: var(--text-positive-hover);
+                --plasma-link-color-visited-active: var(--text-positive-active);
+                --plasma-link-underline-border: 0;
+            `,
+            warning: css`
+                --plasma-link-color: var(--text-warning);
+                --plasma-link-color-hover: var(--text-warning-hover);
+                --plasma-link-color-active: var(--text-warning-active);
+                --plasma-link-color-visited: var(--text-warning);
+                --plasma-link-color-visited-hover: var(--text-warning-hover);
+                --plasma-link-color-visited-active: var(--text-warning-active);
+                --plasma-link-underline-border: 0;
+            `,
+            negative: css`
+                --plasma-link-color: var(--text-negative);
+                --plasma-link-color-hover: var(--text-negative-hover);
+                --plasma-link-color-active: var(--text-negative-active);
+                --plasma-link-color-visited: var(--text-negative);
+                --plasma-link-color-visited-hover: var(--text-negative-hover);
+                --plasma-link-color-visited-active: var(--text-negative-active);
+                --plasma-link-underline-border: 0;
+            `,
+            clear: css`
+                --plasma-link-color: inherit;
+                --plasma-link-color-hover: inherit;
+                --plasma-link-color-active: inherit;
+                --plasma-link-color-visited: inherit;
+                --plasma-link-color-visited-hover: inherit;
+                --plasma-link-color-visited-active: inherit;
+                --plasma-link-underline-border: 0.0625rem;
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-link-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-link-focus-color: var(--text-accent);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.stories.tsx
new file mode 100644
index 0000000000..8b7ddf19e3
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { linkConfig } from '../../../../components/Link';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+
+import { config } from './Link.config';
+import { Link } from './Link';
+
+export default {
+    title: 'sds_engineer/Link',
+    decorators: [WithTheme],
+    component: Link,
+    argTypes: argTypesFromConfig(mergeConfig(linkConfig, config)),
+} as ComponentMeta<typeof Link>;
+
+export const Default: ComponentStory<typeof Link> = (props) => {
+    return (
+        <Link target="_blank" href="https://google.com" {...props}>
+            Hello
+        </Link>
+    );
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.ts
new file mode 100644
index 0000000000..9a2e646a44
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Link/Link.ts
@@ -0,0 +1,8 @@
+import { linkConfig } from '../../../../components/Link';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Link.config';
+
+const mergedConfig = mergeConfig(linkConfig, config);
+
+export const Link = component(mergedConfig);
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.config.ts
new file mode 100644
index 0000000000..f24ab00643
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.config.ts
@@ -0,0 +1,116 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        view: 'accent',
+        focused: 'true',
+    },
+    variations: {
+        /**
+         * Размер контрола.
+         */
+        size: {
+            s: css`
+                --plasma-radiobox-trigger-size: 1rem;
+                --plasma-radiobox-trigger-border-radius 1.125rem;
+                --plasma-radiobox-ellipse-size 0.5rem;
+                --plasma-radiobox-content-top-offset: 0.1rem;
+                --plasma-radiobox-content-left-offset 0.5rem;
+                --plasma-radiobox-label-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-radiobox-label-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-radiobox-label-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-radiobox-label-font-weight: var(--plasma-typo-body-s-font-weight);
+                --plasma-radiobox-label-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-radiobox-label-line-height: var(--plasma-typo-body-s-line-height);
+                --plasma-radiobox-description-font-family: var(--plasma-typo-body-xs-font-family);
+                --plasma-radiobox-description-font-size: var(--plasma-typo-body-xs-font-size);
+                --plasma-radiobox-description-font-style: var(--plasma-typo-body-xs-font-style);
+                --plasma-radiobox-description-font-weight: var(--plasma-typo-body-xs-font-weight);
+                --plasma-radiobox-description-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
+                --plasma-radiobox-description-line-height: var(--plasma-typo-body-xs-line-height);
+            `,
+            m: css`
+                --plasma-radiobox-trigger-size: 1.375rem;
+                --plasma-radiobox-trigger-border-radius 1.125rem;
+                --plasma-radiobox-ellipse-size 0.625rem;
+                --plasma-radiobox-content-top-offset: 0.25rem;
+                --plasma-radiobox-content-left-offset 0.6875rem;
+                --plasma-radiobox-label-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-radiobox-label-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-radiobox-label-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-radiobox-label-font-weight: var(--plasma-typo-body-m-font-weight);
+                --plasma-radiobox-label-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-radiobox-label-line-height: var(--plasma-typo-body-m-line-height);
+                --plasma-radiobox-description-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-radiobox-description-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-radiobox-description-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-radiobox-description-font-weight: var(--plasma-typo-body-s-font-weight);
+                --plasma-radiobox-description-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-radiobox-description-line-height: var(--plasma-typo-body-s-line-height);
+            `,
+        },
+        /**
+         * Вид контрола.
+         */
+        view: {
+            primary: css`
+                --plasma-radiobox-fill-color: var(--text-primary);
+                --plasma-radiobox-ellipse-color: var(--inverse-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            secondary: css`
+                --plasma-radiobox-fill-color: var(--text-secondary);
+                --plasma-radiobox-ellipse-color: var(--inverse-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            tertiary: css`
+                --plasma-radiobox-fill-color: var(--text-tertiary);
+                --plasma-radiobox-ellipse-color: var(--inverse-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            paragraph: css`
+                --plasma-radiobox-fill-color: var(--text-paragraph);
+                --plasma-radiobox-ellipse-color: var(--inverse-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            accent: css`
+                --plasma-radiobox-fill-color: var(--text-accent);
+                --plasma-radiobox-ellipse-color: var(--on-dark-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            positive: css`
+                --plasma-radiobox-fill-color: var(--text-positive);
+                --plasma-radiobox-ellipse-color: var(--on-dark-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            warning: css`
+                --plasma-radiobox-fill-color: var(--text-warning);
+                --plasma-radiobox-ellipse-color: var(--on-dark-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+            negative: css`
+                --plasma-radiobox-fill-color: var(--text-negative);
+                --plasma-radiobox-ellipse-color: var(--on-dark-text-primary);
+                --plasma-radiobox-description-color: var(--text-secondary);
+                --plasma-radiobox-trigger-border-color: var(--text-secondary);
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-radiobox-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-radiobox-focus-color: var(--text-accent);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.stories.tsx
new file mode 100644
index 0000000000..8f9685c74b
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.stories.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Link } from '../Link/Link';
+
+import { config } from './Radiobox.config';
+import { Radiobox } from './Radiobox';
+
+export default {
+    title: 'sds_engineer/Radiobox',
+    decorators: [WithTheme],
+    component: Radiobox,
+    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
+} as ComponentMeta<typeof Radiobox>;
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const langName = 'language';
+const items = [
+    {
+        langName,
+        value: 'c',
+        label: 'C',
+        disabled: false,
+        description: (
+            <div>
+                A general-purpose, procedural computer programming <Link href="/#">language</Link>{' '}
+            </div>
+        ),
+    },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+    { langName, value: 'elixir', label: 'Elixir', disabled: true },
+];
+
+export const Default: ComponentStory<typeof Radiobox> = (props) => {
+    const value = 0;
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+        <>
+            <Radiobox
+                name="item.name"
+                value={value}
+                singleLine
+                label="Label"
+                description="Description"
+                checked={checked}
+                onChange={(event) => {
+                    event.persist();
+
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+            <Radiobox
+                name="item.name"
+                value={value}
+                singleLine
+                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                checked={checked}
+                onChange={(event) => {
+                    event.persist();
+
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+        </>
+    );
+};
+
+export const Complex = (props) => {
+    const [value, setValue] = React.useState('c');
+
+    return (
+        <RadioGroup>
+            <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                Radiogroup Title
+            </div>
+            {items.map((item) => (
+                <Radiobox
+                    key={item.value}
+                    name={item.langName}
+                    value={item.value}
+                    label={item.label}
+                    disabled={item.disabled}
+                    checked={value[item.value]}
+                    description={item.description}
+                    onChange={(event) => {
+                        setValue(item.value);
+                        onChange(event);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    {...props}
+                />
+            ))}
+        </RadioGroup>
+    );
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.ts
new file mode 100644
index 0000000000..8808a89c6d
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Radiobox/Radiobox.ts
@@ -0,0 +1,8 @@
+import { radioboxConfig } from '../../../../components/Radiobox';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Radiobox.config';
+
+const mergedConfig = mergeConfig(radioboxConfig, config);
+
+export const Radiobox = component(mergedConfig);
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.config.ts
new file mode 100644
index 0000000000..e7702c155e
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.config.ts
@@ -0,0 +1,47 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        view: 'accent',
+        size: 'm',
+    },
+    variations: {
+        size: {
+            s: css`
+                --plasma-spinner-size: 16px;
+            `,
+            m: css`
+                --plasma-spinner-size: 24px;
+            `,
+            l: css`
+                --plasma-spinner-size: 36px;
+            `,
+        },
+        view: {
+            primary: css`
+                --plasma-spinner-color: var(--text-primary);
+            `,
+            secondary: css`
+                --plasma-spinner-color: var(--text-secondary);
+            `,
+            tertiary: css`
+                --plasma-spinner-color: var(--text-tertiary);
+            `,
+            paragraph: css`
+                --plasma-spinner-color: var(--text-paragraph);
+            `,
+            accent: css`
+                --plasma-spinner-color: var(--text-accent);
+            `,
+            positive: css`
+                --plasma-spinner-color: var(--text-positive);
+            `,
+            warning: css`
+                --plasma-spinner-color: var(--text-warning);
+            `,
+            negative: css`
+                --plasma-spinner-color: var(--text-negative);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000000..5fd8af8e5c
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { spinnerConfig } from '../../../../components/Spinner';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+
+import { config } from './Spinner.config';
+import { Spinner } from './Spinner';
+
+export default {
+    title: 'sds_engineer/Spinner',
+    decorators: [WithTheme],
+    component: Spinner,
+} as ComponentMeta<typeof Spinner>;
+
+const mergedConfig = mergeConfig(spinnerConfig, config);
+
+export const Default: ComponentStory<typeof Spinner> = ({ ...rest }) => {
+    return <Spinner {...rest} />;
+};
+
+Default.argTypes = argTypesFromConfig(mergedConfig);
+
+export const CustomSize: ComponentStory<typeof Spinner> = ({ ...rest }) => {
+    return <Spinner {...rest} />;
+};
+
+CustomSize.argTypes = {
+    ...argTypesFromConfig(mergedConfig, ['size']),
+    width: {
+        defaultValue: '100px',
+        control: {
+            type: 'text',
+        },
+    },
+    height: {
+        defaultValue: '100px',
+        control: {
+            type: 'text',
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.ts
new file mode 100644
index 0000000000..8d1296d5c3
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Spinner/Spinner.ts
@@ -0,0 +1,8 @@
+import { spinnerConfig } from '../../../../components/Spinner';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Spinner.config';
+
+const mergedConfig = mergeConfig(spinnerConfig, config);
+
+export const Spinner = component(mergedConfig);
diff --git a/packages/plasma-new-hope/src/examples/themes/index.ts b/packages/plasma-new-hope/src/examples/themes/index.ts
index 4ee94c7d6a..2238bb5a52 100644
--- a/packages/plasma-new-hope/src/examples/themes/index.ts
+++ b/packages/plasma-new-hope/src/examples/themes/index.ts
@@ -1,10 +1,12 @@
 /* eslint-disable camelcase */
 import plasma_b2c from './plasma_b2c.module.css';
 import plasma_web from './plasma_web.module.css';
+import sds_engineer from './sds_engineer.module.css';
 
 export type ThemeType = { light: string; dark: string };
 
 export const themes: Record<string, ThemeType> = {
     plasma_b2c,
     plasma_web,
+    sds_engineer,
 };
diff --git a/packages/plasma-new-hope/src/examples/themes/sds_engineer.module.css b/packages/plasma-new-hope/src/examples/themes/sds_engineer.module.css
new file mode 100644
index 0000000000..ec04031c30
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/themes/sds_engineer.module.css
@@ -0,0 +1,322 @@
+/* Generated by robots, do not change this manually! */
+
+.dark {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(245, 245, 245, 0.96);
+  --text-secondary: rgba(245, 245, 245, 0.56);
+  --text-tertiary: rgba(245, 245, 245, 0.4);
+  --text-paragraph: rgba(245, 245, 245, 0.8);
+  --text-accent: #FFFFFF;
+  --text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --text-positive: #1A9E32;
+  --text-warning: #FA5F05;
+  --text-negative: #FF293E;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(8, 8, 8, 0.96);
+  --inverse-text-secondary: rgba(8, 8, 8, 0.56);
+  --inverse-text-tertiary: rgba(8, 8, 8, 0.4);
+  --inverse-text-paragraph: rgba(8, 8, 8, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-text-positive: #108E25;
+  --inverse-text-warning: #E85702;
+  --inverse-text-negative: #F31B30;
+  --surface-solid-default: #FFFFFF;
+  --surface-solid-primary: #171717;
+  --surface-solid-secondary: #262626;
+  --surface-solid-tertiary: #363636;
+  --surface-solid-card: #171717;
+  --surface-transparent-default: #FFFFFF;
+  --surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --surface-accent: #FFFFFF;
+  --surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #FF293E;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #080808;
+  --inverse-surface-solid-primary: #F5F5F5;
+  --inverse-surface-solid-secondary: #ECECEC;
+  --inverse-surface-solid-tertiary: #DDDDDD;
+  --inverse-surface-solid-card: #F7F7F7;
+  --inverse-surface-transparent-default: #080808;
+  --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --inverse-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #108E25;
+  --inverse-surface-warning: #E85702;
+  --inverse-surface-negative: #F31B30;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #000000;
+  --background-secondary: #080808;
+  --background-tertiary: #171717;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #FFFFFF;
+  --inverse-background-secondary: #FFFFFF;
+  --inverse-background-tertiary: #FFFFFF;
+  --skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+.light {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(23, 23, 23, 0.96);
+  --text-secondary: rgba(23, 23, 23, 0.56);
+  --text-tertiary: rgba(23, 23, 23, 0.4);
+  --text-paragraph: rgba(23, 23, 23, 0.8);
+  --text-accent: #0C72B6;
+  --text-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --text-positive: #108E25;
+  --text-warning: #E85702;
+  --text-negative: #F31B31;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(245, 245, 245, 0.96);
+  --inverse-text-secondary: rgba(245, 245, 245, 0.56);
+  --inverse-text-tertiary: rgba(245, 245, 245, 0.4);
+  --inverse-text-paragraph: rgba(245, 245, 245, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-text-positive: #1A9E32;
+  --inverse-text-warning: #FA5F05;
+  --inverse-text-negative: #FF293E;
+  --surface-solid-default: #080808;
+  --surface-solid-primary: #F5F5F5;
+  --surface-solid-secondary: #ECECEC;
+  --surface-solid-tertiary: #DDDDDD;
+  --surface-solid-card: #FFFFFF;
+  --surface-transparent-default: #080808;
+  --surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --surface-transparent-card: #FFFFFF;
+  --surface-accent: #0B7ECB;
+  --surface-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #DD1428;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #FFFFFF;
+  --inverse-surface-solid-primary: #171717;
+  --inverse-surface-solid-secondary: #262626;
+  --inverse-surface-solid-tertiary: #363636;
+  --inverse-surface-solid-card: #171717;
+  --inverse-surface-transparent-default: #FFFFFF;
+  --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --inverse-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #1A9E32;
+  --inverse-surface-warning: #FA5F05;
+  --inverse-surface-negative: #FF293E;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #F9F9F9;
+  --background-secondary: #FFFFFF;
+  --background-tertiary: #FFFFFF;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #000000;
+  --inverse-background-secondary: #080808;
+  --inverse-background-tertiary: #171717;
+  --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+