diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index 8fd87ce2..64f0c675 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -4,9 +4,15 @@ import styled from 'styled-components';
 export const Global = styled.div`
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
+  --palette-snow-300: #e5e5e5;
   --palette-snow-100: #f5f5f5;
   --palette-snow-0: #ffffff;
+
   --palette-lavender-500: #9381f1;
+  --palette-lavender-300: #b0a3f4;
+  --palette-lavender-100: #c9c0f8;
+
+  --palette-dawn-300: #ff9097;
 
   /* should be rewritten to formulas */
   --woly-line-height: 24px;
@@ -18,14 +24,14 @@ export const Global = styled.div`
   --woly-main-level: 3;
 
   --woly-neutral: var(--palette-snow-500);
-  --woly-focus: #9381f1;
-  --woly-background: #ffffff;
-
+  --woly-focus: var(--palette-lavender-500);
+  --woly-background: var(--palette-snow-0);
+  
   [data-variant='primary'] {
-    --woly-shape-default: #b0a3f4;
-    --woly-shape-disabled: #e5e5e5;
-    --woly-shape-hover: #c9c0f8;
-    --woly-shape-active: #b0a3f4;
+    --woly-shape-default: var(--palette-lavender-300);
+    --woly-shape-disabled: var(--palette-snow-300);
+    --woly-shape-hover: var(--palette-lavender-100);
+    --woly-shape-active: var(--palette-lavender-300);
 
     --woly-shape-text-default: var(--palette-snow-0);
     --woly-shape-text-disabled: var(--palette-snow-0);
@@ -59,8 +65,8 @@ export const Global = styled.div`
     --woly-background-disabled: #c0c0c0;
     --woly-border-disabled: #c0c0c0;
     --woly-color-disabled: #a39bb2;
-
-    --woly-label-color: #ffffff;
+    --woly-text-disabled: #e4e4e4;
+    --woly-fill-disabled: #e4e4e4;
   }
   [data-variant='error'] {
     --woly-border-width: 1.5px;
@@ -74,9 +80,6 @@ export const Global = styled.div`
     --woly-border-focus: #eb5656;
     --woly-error-text: #eb5656;
     --woly-hint-color: #ff9097;
-    --woly-background-disabled: #c0c0c0;
-    --woly-border-disabled: #c0c0c0;
-    --woly-color-disabled: #a39bb2;
   }
 `;
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5497a978..cdce13af 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,4 @@
 export { positionRelativeGet } from './position-relative';
 export { keyboardEventHandle } from './keyboard-event';
 export { keyHandlerGet } from './select-handlers';
+export { Variant } from './types';
diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx
index b0919b05..cd0dea34 100644
--- a/src/ui/atoms/header-panel/index.tsx
+++ b/src/ui/atoms/header-panel/index.tsx
@@ -12,12 +12,17 @@ export const HeaderPanel = styled.div.attrs(map)`
   height: 100%;
   width: 100%;
 
-  padding: var(--woly-padding, 12px);
+  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
+  );
 
-  background-color: var(--woly-canvas, #ffffff);
-  border-color: var(--woly-border, #000000);
-  border-style: solid;
-  border-width: var(--woly-border-width, 0);
-  border-radius: var(--woly-rounding, 3px);
-  box-shadow: var(--woly-box-shadow, 3px 3px 9px rgba(57, 57, 57, 0.12));
+  --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+  
+  padding: var(--local-vertical) var(--local-horizontal);
+
+  background-color: var(--woly-background);
+  border: var(--woly-border-width) solid var(--woly-background);
+  border-radius: var(--woly-rounding);
+  box-shadow: var(--local-box-shadow);
 `;
diff --git a/src/ui/atoms/label/usage.mdx b/src/ui/atoms/label/usage.mdx
index 84eaf0ca..8c8be97a 100644
--- a/src/ui/atoms/label/usage.mdx
+++ b/src/ui/atoms/label/usage.mdx
@@ -29,7 +29,7 @@ This increased hit area provides an advantage to anyone trying to activate the i
 Error variant can be used to focus user attention on error.
 
 <Playground>
-  <Label variant="error">Error label</Label>
+  <Label variant="danger">Error label</Label>
 </Playground>
 
 ### Kinds
diff --git a/src/ui/atoms/text/usage.mdx b/src/ui/atoms/text/usage.mdx
index 5590ee6c..04261cfa 100644
--- a/src/ui/atoms/text/usage.mdx
+++ b/src/ui/atoms/text/usage.mdx
@@ -37,7 +37,7 @@ Text component is used as a simple text or a hint/error message for Input or Tex
 ### Example
 
 <Playground direction="vertical">
-  <Text variant="error" type="hint">
+  <Text variant="danger" type="hint">
     ! Fix examples below after inserting text inside Input or TextArea
   </Text>
 </Playground>
@@ -68,9 +68,9 @@ Error variant can be used to focus user attention on error.
     placeholder="Enter your name here"
     type="text"
     value="Hi"
-    variant="error"
+    variant="danger"
   />
-  <Text variant="error" type="hint">
+  <Text variant="danger" type="hint">
     Error text
   </Text>
 </Playground>
diff --git a/src/ui/molecules/checkbox/index.tsx b/src/ui/molecules/checkbox/index.tsx
index b7750327..d67a499f 100644
--- a/src/ui/molecules/checkbox/index.tsx
+++ b/src/ui/molecules/checkbox/index.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { CheckIcon, UnCheckIcon } from 'icons';
-import { Variant } from 'lib/types';
+import { Variant, keyboardEventHandle } from 'lib';
 
 interface CheckboxProps {
   className?: string;
   disabled?: boolean;
   id: string;
-  isChecked: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  checked: boolean;
+  onChange: React.EventHandler<React.SyntheticEvent>;
   text?: string;
 }
 
@@ -16,76 +16,142 @@ const CheckboxBase: React.FC<CheckboxProps & Variant> = ({
   className,
   disabled,
   id,
-  isChecked,
+  checked,
   onChange,
   text,
   variant = 'default',
-}) => (
-  <label htmlFor={id} className={className} data-variant={variant}>
-    <span data-block="container" data-disabled={disabled}>
-      <input type="checkbox" id={id} checked={isChecked} onChange={onChange} />
-      <span data-checkmark="unchecked">
-        <UnCheckIcon />
-      </span>
-      <span data-checkmark="checked">
-        <CheckIcon />
+}) => {
+  const tabIndex = disabled ? -1 : 0;
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+      }
+      const keyHandler = {
+        enter: (event: React.SyntheticEvent<Element, Event>) => {
+          onChange(event);
+        },
+      };
+
+      keyboardEventHandle({
+        event,
+        keyHandler,
+      });
+    },
+    [onChange],
+  );
+
+  return (
+    <label
+      htmlFor={id}
+      className={className}
+      data-variant={variant}
+      onKeyDown={onKeyDown}
+      tabIndex={tabIndex}
+    >
+      <span data-block="container" data-disabled={disabled} tabIndex={-1}>
+        <input type="checkbox" id={id} checked={checked} onChange={onChange} />
+        <span data-checkmark="unchecked">
+          <UnCheckIcon />
+        </span>
+        <span data-checkmark="checked">
+          <CheckIcon />
+        </span>
+        {text && <span data-block="text">{text}</span>}
       </span>
-      {text && <span data-block="text">{text}</span>}
-    </span>
-  </label>
-);
+    </label>
+  );
+};
 
 export const Checkbox = styled(CheckboxBase)`
-  --woly-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --woly-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
+  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
-  --woly-gap: calc(
+  --local-gap: calc(
     (1px * var(--woly-main-level)) + (1px * var(--woly-main-level) * var(--woly-component-level))
   );
 
-  --woly-checkbox-width: 24px;
-  --woly-checkbox-height: 24px;
+  --local-icon-size: 24px;
+  --local-icon-fill: var(--local-background-color);
+  --local-icon-stroke: var(--woly-shape-default);
+  --local-text-color: var(--woly-canvas-text-default);
+  --local-background-color: var(--woly-shape-default);
 
-  padding: var(--woly-vertical, 6.4px) var(--woly-horizontal, 6.4px);
+  padding: var(--local-vertical) var(--local-horizontal);
 
   user-select: none;
+  outline: none;
+
+  &:focus [data-checkmark] > svg,
+  &:active [data-checkmark] > svg {
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+    border-radius: var(--woly-rounding);
+  }
 
   [data-block='container'] {
     display: flex;
     align-items: center;
 
-    [data-checkmark] {
-      width: var(--woly-checkbox-width);
-      height: var(--woly-checkbox-height);
+    outline: none;
 
-      align-items: center;
-      justify-content: center;
+    [data-block='text'] {
+      color: var(--local-text-color);
+      font-size: var(--woly-font-size, 12px);
+      line-height: var(--woly-line-height, 24px);
+    }
 
-      margin-right: var(--woly---woly-gap, 15px);
+    input {
+      position: absolute;
+      opacity: 0;
+      height: 0;
+      width: 0;
     }
 
-    [data-checkmark='unchecked'] {
-      display: block;
+    [data-checkmark] {
+      width: var(--local-icon-size);
+      height: var(--local-icon-size);
+
+      margin-right: var(--local-gap);
     }
 
-    [data-checkmark='checked'] {
-      display: none;
+    [data-checkmark='unchecked'],
+    input:checked ~ [data-checkmark='checked'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     input:checked ~ [data-checkmark='checked'] {
-      display: block;
+      svg > rect {
+        fill: var(--local-icon-fill);
+      }
+      &:hover {
+        --local-icon-fill: var(--woly-shape-hover);
+      }
+      &:focus,
+      &:active {
+        --local-icon-fill: var(--woly-focus);
+      }
     }
 
+    [data-checkmark='checked'],
     input:checked ~ [data-checkmark='unchecked'] {
       display: none;
     }
 
     [data-checkmark='unchecked'] {
-      &:hover,
-      &:focus {
+      &:hover {
+        svg > rect {
+          stroke: var(--local-icon-stroke);
+        }
+      }
+
+      &:focus,
+      &:active {
         svg > rect {
-          stroke: var(--woly-color, #b0a3f4);
+          --local-icon-stroke: var(--woly-focus);
         }
       }
     }
@@ -95,44 +161,23 @@ export const Checkbox = styled(CheckboxBase)`
     pointer-events: none;
 
     [data-block='text'] {
-      color: var(--woly-color, #e4e4e4);
-    }
-
-    [data-checkmark='unchecked'] {
-      display: block;
-
-      svg > rect {
-        stroke: var(--woly-canvas, #e4e4e4);
-      }
-    }
-
-    [data-checkmark='checked'] {
-      display: none;
+      --local-text-color: var(--woly-shape-disabled);
     }
 
+    [data-checkmark='unchecked'],
     input:checked ~ [data-checkmark='checked'] {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       svg > rect {
-        fill: var(--woly-canvas-color, #e4e4e4);
+       fill: var(--woly-shape-disabled);
       }
     }
 
+    [data-checkmark='checked'],
     input:checked ~ [data-checkmark='unchecked'] {
       display: none;
     }
   }
-
-  [data-block='text'] {
-    font-size: var(--woly-font-size, 12px);
-    line-height: var(--woly-line-height, 24px);
-    color: var(--woly-color, #000000);
-  }
-
-  input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-  }
 ` as StyledComponent<'div', Record<string, unknown>, CheckboxProps & Variant>;
diff --git a/src/ui/molecules/checkbox/usage.mdx b/src/ui/molecules/checkbox/usage.mdx
index f927eb8c..fd2afe61 100644
--- a/src/ui/molecules/checkbox/usage.mdx
+++ b/src/ui/molecules/checkbox/usage.mdx
@@ -5,7 +5,7 @@ package: 'woly'
 ---
 
 import { Checkbox } from './index';
-import { Playground } from 'box-styles'
+import { Playground, State } from 'box-styles'
 
 Checkboxes allow you to setup selectable options for your users - either to toggle a single setting on or off, or to allow for multiple choices.
 
@@ -22,18 +22,60 @@ Use a checkbox when the user has to stop before performing an action. Checkbox w
 ### Example
 
 <Playground>
-  <Checkbox isChecked variant="default" />
-  <Checkbox isChecked={false} variant="default" />
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <Checkbox checked={value} id="simple" onChange={change} text="Simple" variant="primary" />
+    )}
+  </State>
 </Playground>
 
-### Variants
+### Size
 
-Error and primary/secondary variants are should be used to focus user attention.
+Size controlled by the `component-level` block property not from the props.
 
 <Playground>
-  <Checkbox text="Attention" variant="error" isChecked/>
-  <Checkbox text="Alternative action" variant="secondary" />
-  <Checkbox text="Disabled" variant="default" disabled isChecked/>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <block.S>
+          <Checkbox checked={value} id="small" onChange={change} text="Small" variant="primary" />
+        </block.S>
+        <block.M>
+          <Checkbox checked={value} id="medium" onChange={change} text="Medium" variant="primary" />
+        </block.M>
+        <block.L>
+          <Checkbox checked={value} id="large" onChange={change} text="Large" variant="primary" />
+        </block.L>
+        <block.XL>
+          <Checkbox
+            checked={value}
+            id="extra"
+            onChange={change}
+            text="Extra large"
+            variant="primary"
+          />
+        </block.XL>
+        <block.H>
+          <Checkbox checked={value} id="huge" onChange={change} text="Huge" variant="primary" />
+        </block.H>
+      </>
+    )}
+  </State>
+</Playground>
+
+### Variants
+
+Primary variant should be used to focus user attention. The disabled checkbox is unusable and un-clickable.
+
+<Playground size="S">
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <Checkbox checked id="primary" text="Primary" variant="primary" />
+        <Checkbox checked disabled id="disabled" text="Disabled" variant="primary" />
+      </>
+    )}
+  </State>
 </Playground>
 
 ### Kinds
@@ -44,10 +86,12 @@ Error and primary/secondary variants are should be used to focus user attention.
 
 ### Props
 
-| Name        | Type                                         | Default     | Description                              |
-| ----------- | -------------------------------------------- | ----------- | ---------------------------------------- |
-| `id`        | `string`                                     |             | HTML id attribute                        |
-| `isChecked` | `boolean`                                    |             | Whether checkbox is checked or not       |
-| `text`      | `string`                                     |             | Text component                           |
-| `onChange`  | `React.ChangeEventHandler<HTMLInputElement>` |             | Callback when checkbox is clicked        |
-| `variant`   | `string`                                     | `'default'` | Variant prop to style Checkbox component |
+| Name        | Type                                         | Default     | Description                                                                  |
+| ----------- | -------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
+| `id`        | `string`                                     |             | HTML id attribute                                                            |
+| `disabled`  | `boolean`                                    |             | HTML disabled attribute                                                      |
+| `checked`   | `boolean`                                    |             | Whether checkbox is checked or not                                           |
+| `text`      | `string`                                     |             | Text component                                                               |
+| `onKeyDown` |                                              |             | The onKeydown event occurs when the user is pressing a key (on the keyboard) |
+| `onChange`  | `React.ChangeEventHandler<HTMLInputElement>` |             | Callback when checkbox is clicked                                            |
+| `variant`   | `string`                                     | `'default'` | Variant prop to style Checkbox component                                     |
diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx
index bd8e970c..a51ab618 100644
--- a/src/ui/molecules/select/index.tsx
+++ b/src/ui/molecules/select/index.tsx
@@ -120,12 +120,10 @@ export const Select = styled(SelectBase)`
   --woly-horizontal: calc(
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
   );
-
   position: relative;
   align-items: center;
   outline: none;
   cursor: pointer;
-
   &:focus > div[data-selected],
   &:active > div[data-selected] {
     border-color: var(--woly-background-focus, #1f68f5);
@@ -134,59 +132,47 @@ export const Select = styled(SelectBase)`
       fill: var(--woly-color-focus, #c4c4c4);
     }
   }
-
   &[data-open='true'] > div[data-selected] {
     border-color: var(--woly-border-focus, #b0a3f4);
   }
-
   svg > path {
     fill: var(--woly-color, #000000);
   }
-
   &[data-disabled='true'] {
     pointer-events: none;
-
     svg > path {
       fill: var(--woly-color-disabled, #c4c4c4);
     }
-
     div[data-selected] {
       background: var(--woly-background-disabled, #ffffff);
       border-color: var(--woly-border-disabled, var(--woly-background-disabled, #c4c4c4));
       color: var(--woly-color-disabled, #c4c4c4);
     }
   }
-
   div[data-selected] {
     display: flex;
     align-items: center;
     padding: var(--woly-vertical, 16px) var(--woly-horizontal, 6.4px);
     background: var(--woly-canvas, #ffffff);
-
     border-color: var(--woly-border, var(--woly-background, #f8f7f7));
     border-style: solid;
     border-width: var(--woly-border-width, 1.5px);
     border-radius: var(--woly-rounding, 3px);
     box-sizing: border-box;
-
     color: var(--woly-color, #000000);
-
     div {
       width: 225px;
     }
   }
-
   span[data-icon='true'] {
     transform: rotate(180deg);
   }
-
   span[data-icon='false'] {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
   }
-
   ul {
     display: none;
     position: absolute;
@@ -202,19 +188,16 @@ export const Select = styled(SelectBase)`
     margin-top: 6px;
     box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
   }
-
   ul[data-visible='true'] {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
   }
-
   li {
     padding: var(--woly-vertical, 16px) var(--woly-horizontal, 6.4px);
     line-height: var(--woly-line-height, 24px);
     color: var(--woly-color, #000000);
     cursor: pointer;
-
     &:hover,
     &:focus,
     &:active {
@@ -223,7 +206,6 @@ export const Select = styled(SelectBase)`
       background-color: var(--woly-background-hover, #f8f8fa);
     }
   }
-
   div:not(:first-child) {
     margin-top: var(--woly-gap);
   }