diff --git a/dev/storybook/stories/Button.stories.ts b/dev/storybook/stories/Button.stories.ts
index bf97c1bc1c..536b4cd888 100644
--- a/dev/storybook/stories/Button.stories.ts
+++ b/dev/storybook/stories/Button.stories.ts
@@ -17,7 +17,7 @@ const meta = {
     },
     kind: {
       control: 'select',
-      options: ['accented', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
+      options: ['primary', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
       description: 'kind description',
       table: {
         type: { summary: 'ButtonKind' },
@@ -109,7 +109,7 @@ type Story = StoryObj<typeof meta>;
 export const Ok: Story = {
   args: {
     label: uiPlugin.string.Ok,
-    kind: 'accented',
+    kind: 'primary',
     size: 'medium',
     shape: undefined,
     justify: 'left',
@@ -125,7 +125,7 @@ export const Ok: Story = {
 export const Cancel: Story = {
   args: {
     label: uiPlugin.string.Cancel,
-    kind: 'accented',
+    kind: 'primary',
     size: 'medium',
     shape: undefined,
     justify: 'left',
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index b0f8c7c0b9..d72d74b3e7 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -148,7 +148,7 @@
     }
     &.selection,
     &.checked.selection {
-      box-shadow: 0 0 1px 1px var(--accented-button-default);
+      box-shadow: 0 0 1px 1px var(--primary-button-default);
       animation: anim-border 1s ease-in-out;
 
       &:hover {
diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 86d741b9c0..eeae628128 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -149,7 +149,7 @@
           focusIndex={10001}
           disabled={!canSave}
           label={okLabel}
-          kind={'accented'}
+          kind={'primary'}
           size={'large'}
           on:click={() => {
             if (okProcessing) {
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index e1dc05384d..78cc159490 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -43,7 +43,7 @@
       focusIndex={1}
       label={okLabel ?? presentation.string.Ok}
       size={'large'}
-      kind={'accented'}
+      kind={'primary'}
       loading={processing}
       on:click={() => {
         processing = true
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 82daf25a7c..c86aa1653d 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -93,8 +93,8 @@
     height: 2rem;
     font-weight: 500;
     font-size: 0.625rem;
-    color: var(--accented-button-color);
-    background-color: var(--accented-button-default);
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     cursor: pointer;
diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte
index 872f5b2944..a4afe0f3bc 100644
--- a/packages/presentation/src/components/SpaceCreateCard.svelte
+++ b/packages/presentation/src/components/SpaceCreateCard.svelte
@@ -42,7 +42,7 @@
     <Button
       disabled={!canSave}
       label={okLabel ?? presentation.string.Create}
-      kind={'accented'}
+      kind={'primary'}
       on:click={() => {
         okAction()
         dispatch('close')
diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
index e7afcc641b..13b0499ef2 100644
--- a/packages/presentation/src/components/SpacesMultiPopup.svelte
+++ b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -106,17 +106,17 @@
           }}
         >
           <div class="check pointer-events-none">
-            <CheckBox checked={isSelected(space)} kind={'accented'} />
+            <CheckBox checked={isSelected(space)} kind={'primary'} />
           </div>
           <SpaceInfo size={'medium'} value={space} {iconWithEmoji} {defaultIcon} />
           {#if allowDeselect && space._id === selected}
             <div class="check pointer-events-none">
               {#if titleDeselect}
                 <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                  <CheckBox checked circle kind={'accented'} />
+                  <CheckBox checked circle kind={'primary'} />
                 </div>
               {:else}
-                <CheckBox checked circle kind={'accented'} />
+                <CheckBox checked circle kind={'primary'} />
               {/if}
             </div>
           {/if}
diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
index eacad8da48..1549279481 100644
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/packages/text-editor/src/components/StyleButton.svelte
@@ -51,7 +51,7 @@
     }
     &:focus {
       color: var(--theme-caption-color);
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
     }
     &.selected {
       background-color: var(--theme-button-pressed);
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index ff915825ff..fcefac9b8b 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -15,20 +15,20 @@
 
 /* Common Colors */
 * {
-  --accented-button-color: #fff;
-  --accented-button-content-color: rgba(255, 255, 255, .8);
-  --accented-button-border: rgba(255, 255, 255, .09);
-  --accented-button-outline: #5190EC;
-  --accented-button-transparent: rgba(43, 81, 144, 0.2);
+  --primary-button-color: #fff;
+  --primary-button-content-color: rgba(255, 255, 255, .8);
+  --primary-button-border: rgba(255, 255, 255, .09);
+  --primary-button-outline: #5190EC;
+  --primary-button-transparent: rgba(43, 81, 144, 0.2);
 
-  --accented-button-default: #2B5190;
-  --accented-button-hovered: #325FA9;
-  --accented-button-pressed: #284B86;
-  --accented-button-focused: #2B5190;
-  --brand-button-default: #4169E1;
-  --brand-button-hovered: #587BE5;
-  --brand-button-pressed: #2C58DE;
-  --brand-button-focused: #4169E1;
+  --primary-button-default: #205DC2;
+  --primary-button-hovered: #3575DE;
+  --primary-button-pressed: #1C52AB;
+  --primary-button-focused: #205DC2;
+  --secondary-button-default: #D3E1F8;
+  --secondary-button-hovered: #BDD2F5;
+  --secondary-button-pressed: #A7C3F1;
+  --secondary-button-focused: #BDD2F5;
   --positive-button-default: #26A869;
   --positive-button-hovered: #2BBB75;
   --positive-button-pressed: #21915B;
@@ -38,15 +38,6 @@
   --negative-button-pressed: #BF3636;
   --negative-button-focused: #CA4242;
 
-  --theme-primary-default: #205DC2;
-  --theme-primary-hovered: #3575DE;
-  --theme-primary-pressed: #1C52AB;
-  --theme-primary-disabled: #0000001F;
-  --theme-primary-accented-default: #D3E1F8;
-  --theme-primary-accented-hovered: #BDD2F5;
-  --theme-primary-accented-pressed: #A7C3F1;
-  --theme-primary-accented-focused: #BDD2F5;
-
   --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
 
@@ -92,10 +83,10 @@
   --theme-text-primary-color: rgba(255, 255, 255, .8);
   --theme-text-placeholder-color: rgba(255, 255, 255, .4);
 
-  --accented-button-disabled: rgba(255, 255, 255, .12);
-  --accented-button-disabled-color: rgba(255, 255, 255, .4);
-  --brand-button-disabled: rgba(255, 255, 255, .12);
-  --brand-button-disabled-color: rgba(255, 255, 255, .4);
+  --primary-button-disabled: rgba(255, 255, 255, .12);
+  --primary-button-disabled-color: rgba(255, 255, 255, .4);
+  --secondary-button-disabled: rgba(255, 255, 255, .12);
+  --secondary-button-disabled-color: rgba(255, 255, 255, .4);
   --positive-button-disabled: rgba(38, 168, 105, .2);
   --positive-button-disabled-color: rgba(38, 168, 105, .6);
   --negative-button-disabled: rgba(202, 66, 66, .2);
@@ -298,10 +289,10 @@
   --theme-text-primary-color: rgba(0, 0, 0, .8);
   --theme-text-placeholder-color: rgba(0, 0, 0, .4);
 
-  --accented-button-disabled: rgba(0, 0, 0, .12);
-  --accented-button-disabled-color: rgba(0, 0, 0, .4);
-  --brand-button-disabled: rgba(0, 0, 0, .12);
-  --brand-button-disabled-color: rgba(0, 0, 0, .4);
+  --primary-button-disabled: rgba(0, 0, 0, .12);
+  --primary-button-disabled-color: rgba(0, 0, 0, .4);
+  --secondary-button-disabled: rgba(0, 0, 0, .12);
+  --secondary-button-disabled-color: rgba(0, 0, 0, .4);
   --positive-button-disabled: rgba(38, 168, 105, .2);
   --positive-button-disabled-color: rgba(33, 145, 91, .6);
   --negative-button-disabled: rgba(202, 66, 66, .2);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index c9ab19c0bf..5b2ca5bb87 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -897,7 +897,7 @@ a.no-line {
   }
   &:focus {
     border: 1px solid var(--theme-button-border);
-    box-shadow: 0 0 0 2px var(--accented-button-outline);
+    box-shadow: 0 0 0 2px var(--primary-button-outline);
     & > .icon { color: var(--theme-caption-color); }
   }
 
@@ -939,7 +939,7 @@ a.no-line {
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-color { background-color: var(--button-bg-color); }
 .background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
-.background-primary-color { background-color: var(--accented-button-default); }
+.background-primary-color { background-color: var(--primary-button-default); }
 .background-content-accent-color { background-color: var(--accent-color); }
 .background-comp-header-color { background-color: var(--theme-comp-header-color); }
 
@@ -950,7 +950,7 @@ a.no-line {
 .content-color { color: var(--theme-content-color); }
 .caption-color { color: var(--theme-caption-color); }
 
-.content-accented-color { color: var(--accented-button-color); }
+.content-primary-color { color: var(--primary-button-color); }
 .red-color { color: var(--highlight-red); }
 .error-color { color: var(--theme-error-color); }
 
@@ -962,7 +962,7 @@ a.no-line {
 .border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
 .border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
 .border-divider-color {border: 1px solid var(--theme-divider-color);}
-.border-primary-button { border-color: var(--accented-button-border); }
+.border-primary-button { border-color: var(--primary-button-border); }
 
 .border-top-none { border-top: none !important; }
 .border-bottom-popup-divider { border-bottom: 1px solid var(--theme-popup-divider); }
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index 612d68bc6d..ff030ef7d8 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -24,7 +24,6 @@
   }
   &.small {
     height: 1.75rem;
-    font-size: .8125rem;
     &.only-icon { width: 1.75rem; }
   }
   &.medium:not(.stepper) {
@@ -75,14 +74,14 @@
   &.sh-filter { border-radius: 0 0 .5rem .5rem; }
 
   &.highlight {
-    box-shadow: inset 0 0 1px 1px var(--accented-button-outline);
-    &:hover { box-shadow: inset 0 0 1px 2px var(--accented-button-outline); }
+    box-shadow: inset 0 0 1px 1px var(--primary-button-outline);
+    &:hover { box-shadow: inset 0 0 1px 2px var(--primary-button-outline); }
   }
 
   &:hover .btn-icon { color: var(--theme-caption-color); }
   &:not(.no-focus):focus {
-    &:not(.sh-filter) { box-shadow: 0 0 0 2px var(--accented-button-outline); }
-    &.sh-filter { border-color: var(--accented-button-outline); }
+    &:not(.sh-filter) { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    &.sh-filter { border-color: var(--primary-button-outline); }
   }
 
   &.bs-solid { border-style: solid; }
@@ -192,46 +191,48 @@
     }
     &:not(.no-focus):focus { box-shadow: none; }
   }
-  &.accented, &.brand, &.positive, &.negative {
+  &.primary, &.secondary, &.positive, &.negative {
     &:hover, &:active, &:focus {
-      color: var(--accented-button-color);
+      color: var(--primary-button-color);
 
       .btn-icon,
-      .btn-right-icon { color: var(--accented-button-color); }
+      .btn-right-icon { color: var(--primary-button-color); }
     }
   }
   &.regular, &.ghost {
     &:hover, &:active, &:focus { color: var(--theme-caption-color); }
   }
-  &.accented,
-  &.brand,
+  &.primary,
+  &.secondary,
   &.positive,
   &.negative {
     padding: 0 1.5rem;
-    color: var(--accented-button-content-color);
-    border-color: var(--accented-button-border);
+    color: var(--primary-button-content-color);
+    border-color: var(--primary-button-border);
 
     .btn-icon,
-    .btn-right-icon { color: var(--accented-button-content-color); }
+    .btn-right-icon { color: var(--primary-button-content-color); }
   }
-  &.accented {
-    background-color: var(--accented-button-default);
-    &:hover { background-color: var(--accented-button-hovered); }
-    &:active { background-color: var(--accented-button-pressed); }
-    &:focus { background-color: var(--accented-button-focused); }
+  &.primary {
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
+
+    &:hover { background-color: var(--primary-button-hovered); }
+    &:active { background-color: var(--primary-button-pressed); }
+    &:focus { background-color: var(--primary-button-focused); }
     &:disabled {
-      color: var(--accented-button-disabled-color);
-      background-color: var(--accented-button-disabled);
+      color: var(--primary-button-disabled-color);
+      background-color: var(--primary-button-disabled);
     }
   }
-  &.brand {
-    background-color: var(--brand-button-default);
-    &:hover { background-color: var(--brand-button-hovered); }
-    &:active { background-color: var(--brand-button-pressed); }
-    &:focus { background-color: var(--brand-button-focused); }
+  &.secondary {
+    background-color: var(--secondary-button-default);
+    &:hover { background-color: var(--secondary-button-hovered); }
+    &:active { background-color: var(--secondary-button-pressed); }
+    &:focus { background-color: var(--secondary-button-focused); }
     &:disabled {
-      color: var(--brand-button-disabled-color);
-      background-color: var(--brand-button-disabled);
+      color: var(--secondary-button-disabled-color);
+      background-color: var(--secondary-button-disabled);
     }
   }
   &.positive {
@@ -278,7 +279,7 @@
     height: .8125rem;
     min-width: 1rem;
 
-    &:focus { box-shadow: 0 0 0 1px var(--accented-button-outline); }
+    &:focus { box-shadow: 0 0 0 1px var(--primary-button-outline); }
   }
 
   &.notSelected {
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 7fa288ea76..0a10dd5594 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -151,6 +151,7 @@
       letter-spacing: 1px;
       text-transform: uppercase;
     }
+    &:not(.title) { font-size: .8125rem; }
     &.bold {
       font-weight: 600;
       color: var(--theme-caption-color);
@@ -257,7 +258,7 @@
 .antiNav-footer {
   display: flex;
   flex-direction: column;
-  padding: .5rem 0 .75rem;
+  padding: .5rem 0 1.25rem;
 }
 
 /* Basic */
@@ -642,8 +643,8 @@
 
     &:hover,
     &:focus-within { background-color: var(--theme-bg-color); }
-    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--accented-button-outline); }
-    &:focus-within .caption { border-color: var(--accented-button-outline); }
+    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--primary-button-outline); }
+    &:focus-within .caption { border-color: var(--primary-button-outline); }
   }
 }
 
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 0521d96542..e7009e7050 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -335,7 +335,7 @@
       left: .25rem;
       width: .5rem;
       height: .5rem;
-      background-color: var(--accented-button-color);
+      background-color: var(--primary-button-color);
       border-radius: 50%;
       opacity: .8;
       z-index: 1;
@@ -352,7 +352,7 @@
     left: -.1875rem;
     width: 1.375rem;
     height: 1.375rem;
-    border: 1px solid var(--theme-primary-default);
+    border: 1px solid var(--primary-button-default);
   }
   &::after {
     content: '';
@@ -368,7 +368,7 @@
     label { color: var(--theme-caption-color); }
   }
   &.checked:not(.disabled):hover {
-    &::after { background-color: var(--theme-primary-hovered); }
+    &::after { background-color: var(--primary-button-hovered); }
     label {
       color: var(--theme-caption-color);
       &::after { opacity: 1; }
@@ -379,18 +379,18 @@
     label { color: var(--theme-caption-color); }
     &.checked {
       label::after { opacity: 1; }
-      &:active::after { background-color: var(--theme-primary-pressed); }
+      &:active::after { background-color: var(--primary-button-pressed); }
     }
   }
   &.checked:not(.disabled) {
-    &::after { background-color: var(--theme-primary-default); }
+    &::after { background-color: var(--primary-button-default); }
     label::after { content: ''; }
   }
   &.disabled {
     cursor: not-allowed;
 
     &::after {
-      background-color: var(--theme-primary-disabled);
+      background-color: var(--primary-button-disabled);
       border-color: transparent;
     }
     label {
@@ -405,7 +405,7 @@
   &:not(.disabled),
   &:not(.disabled) label { cursor: pointer; }
   &:not(.disabled):active {
-    &::after { background-color: var(--theme-primary-pressed); }
+    &::after { background-color: var(--primary-button-pressed); }
     label::after {
       content: '';
       opacity: 1;
@@ -509,8 +509,8 @@
   .logo {
     width: 4.5rem;
     height: 4.5rem;
-    color: var(--accented-button-color);
-    background-color: var(--accented-button-default);
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
     border-radius: 50%;
   }
   .label {
@@ -801,7 +801,7 @@
       border-color: transparent;
     }
     &:focus {
-      box-shadow: 0 0 0 3px var(--accented-button-outline);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
       & > .icon { color: var(--caption-color); }
     }
   }
@@ -855,7 +855,7 @@
     bottom: -.125rem;
     left: -.125rem;
     right: -.125rem;
-    border: 1px solid var(--theme-primary-default);
+    border: 1px solid var(--primary-button-default);
     border-radius: .5rem;
     z-index: -1;
   }
@@ -880,7 +880,7 @@
       position: absolute;
       width: 6px;
       height: 6px;
-      background-color: var(--accented-button-default);
+      background-color: var(--primary-button-default);
     }
     &::before {
       top: -2px;
diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss
index 520bfaaadc..d8c651f62e 100644
--- a/packages/theme/styles/editors.scss
+++ b/packages/theme/styles/editors.scss
@@ -85,7 +85,7 @@
     &:hover { background-color: var(--theme-button-hovered); }
     &.focusable:focus-within {
       background-color: var(--theme-button-focused);
-      border-color: var(--theme-primary-default);
+      border-color: var(--primary-button-default);
     }
     &.disabled {
       color: var(--theme-dark-color);
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index a5545a9a01..7548dd44af 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -60,7 +60,7 @@
       opacity: 1;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
       .icon {
         color: var(--theme-caption-color);
         opacity: 1;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 431b7c3084..9568cdfbbf 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -72,7 +72,7 @@
     label === undefined &&
     $$slots.content === undefined &&
     (icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
-  $: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
+  $: primary = ['primary', 'secondary', 'positive', 'negative'].some((p) => p === kind)
 
   $: devSize = $deviceInfo.size
   $: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
@@ -132,7 +132,7 @@
   style:flex-shrink={shrink}
   style:padding
   {title}
-  type={kind === 'accented' ? 'submit' : 'button'}
+  type={kind === 'primary' ? 'submit' : 'button'}
   on:click|stopPropagation|preventDefault
   on:focus
   on:blur
@@ -149,7 +149,7 @@
     <div
       class="btn-icon pointer-events-none spinner"
       class:resetIconSize
-      style:color={primary ? 'var(--accented-button-color)' : 'var(--theme-caption-color)'}
+      style:color={primary ? 'var(--primary-button-color)' : 'var(--theme-caption-color)'}
     >
       <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index 179837593c..589b63a0c0 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -19,7 +19,7 @@
   export let symbol: 'check' | 'minus' = 'check'
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let circle: boolean = false
-  export let kind: 'default' | 'accented' | 'positive' = 'default'
+  export let kind: 'default' | 'primary' | 'positive' = 'default'
   export let readonly = false
 
   const dispatch = createEventDispatcher()
@@ -38,7 +38,7 @@
 <label
   class="checkbox {size}"
   class:circle
-  class:accented={kind === 'accented'}
+  class:primary={kind === 'primary'}
   class:positive={kind === 'positive'}
   class:readonly
   class:checked
@@ -50,7 +50,7 @@
       {#if symbol === 'minus'}
         <rect
           class="check"
-          class:accented={kind === 'accented'}
+          class:primary={kind === 'primary'}
           class:positive={kind === 'positive'}
           x="4"
           y="7.4"
@@ -60,7 +60,7 @@
       {:else}
         <polygon
           class="check"
-          class:accented={kind === 'accented'}
+          class:primary={kind === 'primary'}
           class:positive={kind === 'positive'}
           points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 "
         />
@@ -99,8 +99,8 @@
     &.checked {
       background-color: var(--theme-checkbox-bg-color);
     }
-    &.accented.checked {
-      background-color: var(--accented-button-default);
+    &.primary.checked {
+      background-color: var(--primary-button-default);
       border-color: transparent;
     }
     &.positive.checked {
@@ -125,11 +125,11 @@
         & .check {
           visibility: visible;
           fill: var(--theme-checkbox-color);
-          &.accented {
-            fill: var(--accented-button-color);
+          &.primary {
+            fill: var(--primary-button-color);
           }
           &.positive {
-            fill: var(--accented-button-color);
+            fill: var(--primary-button-color);
           }
         }
       }
diff --git a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
index 246099292a..3ed7b373ff 100644
--- a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
+++ b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
@@ -119,7 +119,7 @@
       overflow-wrap: break-word;
 
       &:focus {
-        border-color: var(--accented-button-default);
+        border-color: var(--primary-button-default);
       }
 
       &::-webkit-contacts-auto-fill-button,
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 3be53af988..4e5a0180a4 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -22,7 +22,7 @@
   export let size: ButtonSize = 'large'
   export let ghost: boolean = false
   export let selected: boolean = false
-  export let accented: boolean = false
+  export let primary: boolean = false
   export let disabled: boolean = false
   export let id: string | undefined = undefined
 
@@ -43,7 +43,7 @@
   class="flex-center icon-button icon-{size}"
   class:selected
   class:ghost
-  class:accented
+  class:primary
   class:disabled
   tabindex="0"
   on:keydown={onKeydown}
@@ -76,7 +76,7 @@
       bottom: -0.25rem;
       left: -0.25rem;
       right: -0.25rem;
-      border: 1px solid var(--theme-primary-default);
+      border: 1px solid var(--primary-button-default);
       border-radius: 50%;
     }
     &:hover {
@@ -108,19 +108,19 @@
         background-color: var(--menu-bg-select);
       }
     }
-    &.accented {
-      background-color: var(--theme-primary-accented-default);
+    &.primary {
+      background-color: var(--secondary-button-default);
       &:hover {
-        background-color: var(--theme-primary-accented-hovered);
+        background-color: var(--secondary-button-hovered);
       }
       &:active {
-        background-color: var(--theme-primary-accented-pressed);
+        background-color: var(--secondary-button-pressed);
       }
       &:focus {
-        background-color: var(--theme-primary-accented-focused);
+        background-color: var(--secondary-button-focused);
       }
       &.disabled {
-        background-color: var(--theme-primary-disabled);
+        background-color: var(--primary-button-disabled);
       }
     }
   }
diff --git a/packages/ui/src/components/DropdownLabelsIntl.svelte b/packages/ui/src/components/DropdownLabelsIntl.svelte
index 68d8e4a64f..b9b7909462 100644
--- a/packages/ui/src/components/DropdownLabelsIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsIntl.svelte
@@ -95,7 +95,7 @@
     <svelte:fragment slot="iconRight">
       <DropdownIcon
         size={'small'}
-        fill={kind === 'accented' && !disabled ? 'var(--accented-button-content-color)' : 'var(--theme-dark-color)'}
+        fill={kind === 'primary' && !disabled ? 'var(--primary-button-content-color)' : 'var(--theme-dark-color)'}
       />
     </svelte:fragment>
   </Button>
diff --git a/packages/ui/src/components/DropdownRecordPopup.svelte b/packages/ui/src/components/DropdownRecordPopup.svelte
index 07879936ce..e3ef147610 100644
--- a/packages/ui/src/components/DropdownRecordPopup.svelte
+++ b/packages/ui/src/components/DropdownRecordPopup.svelte
@@ -70,7 +70,7 @@
           >
             <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
             {#if item[0] === selected}
-              <div class="check"><CheckBox checked kind={'accented'} /></div>
+              <div class="check"><CheckBox checked kind={'primary'} /></div>
             {/if}
           </button>
         </svelte:fragment>
diff --git a/packages/ui/src/components/Like.svelte b/packages/ui/src/components/Like.svelte
index 1857b3defe..b7a7490865 100644
--- a/packages/ui/src/components/Like.svelte
+++ b/packages/ui/src/components/Like.svelte
@@ -58,13 +58,13 @@
 
     &.voted {
       .icon {
-        color: var(--accented-button-default);
+        color: var(--primary-button-default);
 
         &:hover {
-          color: var(--accented-button-hovered);
+          color: var(--primary-button-hovered);
         }
         &:active {
-          color: var(--accented-button-pressed);
+          color: var(--primary-button-pressed);
         }
       }
     }
diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte
index b6730c741c..6774d2da21 100644
--- a/packages/ui/src/components/MiniToggle.svelte
+++ b/packages/ui/src/components/MiniToggle.svelte
@@ -79,9 +79,9 @@
           background: #eee;
         }
       }
-      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
     }
-    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
     .toggle-switch {
       position: relative;
       display: inline-block;
diff --git a/packages/ui/src/components/ProgressCircle.svelte b/packages/ui/src/components/ProgressCircle.svelte
index f2e4658098..2af05960ae 100644
--- a/packages/ui/src/components/ProgressCircle.svelte
+++ b/packages/ui/src/components/ProgressCircle.svelte
@@ -22,7 +22,7 @@
   export let max: number = 100
   export let color: number = 5
   export let size: IconSize = 'small'
-  export let accented: boolean = false
+  export let primary: boolean = false
 
   if (value > max) value = max
   if (value < min) value = min
@@ -49,7 +49,7 @@
     cy={8}
     r={7}
     class="progress-circle"
-    style:stroke={accented ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
+    style:stroke={primary ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
     style:opacity={dashOffset === 0 ? 0 : 1}
     style:transform={'rotate(-82deg)'}
     style:stroke-dasharray={lenghtC}
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index d46cd819a7..b33e0aab67 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -684,7 +684,7 @@
       background-color: var(--theme-button-hovered);
     }
     &:focus {
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
     }
     &.vertical {
       width: 2rem;
diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte
index d2135d6f3e..9ccbc75ea8 100644
--- a/packages/ui/src/components/Separator.svelte
+++ b/packages/ui/src/components/Separator.svelte
@@ -424,7 +424,7 @@
       z-index: 402;
     }
     &::after {
-      background-color: var(--theme-primary-default);
+      background-color: var(--primary-button-default);
       transform-origin: center;
       transition-property: transform;
       transition-timing-function: ease-in-out;
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index d3a1eecdb5..eb0906bb4b 100644
--- a/packages/ui/src/components/StepsDialog.svelte
+++ b/packages/ui/src/components/StepsDialog.svelte
@@ -114,7 +114,7 @@
       />
     {/if}
     <Button
-      kind="accented"
+      kind="primary"
       label={isDone ? doneLabel : ui.string.Next}
       disabled={!isStepValid}
       loading={isSaving}
@@ -231,7 +231,7 @@
       background-color: var(--accent-bg-color);
 
       &::before {
-        background-color: var(--accented-button-outline);
+        background-color: var(--primary-button-outline);
       }
     }
 
diff --git a/packages/ui/src/components/TextArea.svelte b/packages/ui/src/components/TextArea.svelte
index 2cbf8a8fca..bcdfa73072 100644
--- a/packages/ui/src/components/TextArea.svelte
+++ b/packages/ui/src/components/TextArea.svelte
@@ -88,7 +88,7 @@
       resize: none;
 
       &:focus {
-        border-color: var(--accented-button-default);
+        border-color: var(--primary-button-default);
       }
       &::placeholder {
         color: var(--dark-color);
diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte
index 78572eaa0e..097b9a7658 100644
--- a/packages/ui/src/components/Toggle.svelte
+++ b/packages/ui/src/components/Toggle.svelte
@@ -73,9 +73,9 @@
           background: #eee;
         }
       }
-      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
     }
-    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
     .toggle-switch {
       position: relative;
       display: inline-block;
diff --git a/packages/ui/src/components/calendar/DateInputBox.svelte b/packages/ui/src/components/calendar/DateInputBox.svelte
index 47a30ae11c..62f195ff41 100644
--- a/packages/ui/src/components/calendar/DateInputBox.svelte
+++ b/packages/ui/src/components/calendar/DateInputBox.svelte
@@ -339,8 +339,8 @@
       border-radius: 0.125rem;
 
       &:focus {
-        color: var(--accented-button-color);
-        background-color: var(--accented-button-default);
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
       }
       &::after {
         position: absolute;
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index 2e080314a8..23d9e9f721 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -169,7 +169,7 @@
     {/if}
   </div>
   <div class="footer">
-    <Button kind={'accented'} label={ui.string.Save} size={'large'} on:click={() => closeDP(withTime)} />
+    <Button kind={'primary'} label={ui.string.Save} size={'large'} on:click={() => closeDP(withTime)} />
   </div>
 </div>
 <Shifts
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index 5b8c68c1fb..a02ed56ac6 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -148,7 +148,7 @@
       height: 2.25rem;
     }
 
-    &.accented {
+    &.primary {
       padding: 0 0.5rem;
       min-width: 1.5rem;
       background-color: var(--noborder-bg-color);
diff --git a/packages/ui/src/components/calendar/Month.svelte b/packages/ui/src/components/calendar/Month.svelte
index d583084976..ca20dc815a 100644
--- a/packages/ui/src/components/calendar/Month.svelte
+++ b/packages/ui/src/components/calendar/Month.svelte
@@ -211,15 +211,15 @@
         border-radius: 50%;
       }
       &.focused {
-        box-shadow: 0 0 0 3px var(--accented-button-outline);
+        box-shadow: 0 0 0 3px var(--primary-button-outline);
       }
       &.selected {
-        color: var(--accented-button-color);
-        background-color: var(--accented-button-default);
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
       }
       &:hover {
         color: var(--caption-color);
-        background-color: var(--accented-button-transparent);
+        background-color: var(--primary-button-transparent);
       }
 
       &:before {
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index ac494af367..27ba193140 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -264,13 +264,13 @@
         border-color: var(--theme-button-border);
       }
       &.selected:not(.wrongMonth) {
-        color: var(--accented-button-color);
-        background-color: var(--accented-button-default);
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
       }
 
       &:not(.wrongMonth):hover {
         color: var(--theme-caption-color);
-        background-color: var(--accented-button-transparent);
+        background-color: var(--primary-button-transparent);
       }
     }
 
diff --git a/packages/ui/src/components/calendar/RangeDatePopup.svelte b/packages/ui/src/components/calendar/RangeDatePopup.svelte
index 09240be6f4..80a7d3e7b3 100644
--- a/packages/ui/src/components/calendar/RangeDatePopup.svelte
+++ b/packages/ui/src/components/calendar/RangeDatePopup.svelte
@@ -163,7 +163,7 @@
     </div>
   </div>
   <div class="footer">
-    <Button kind={'accented'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
+    <Button kind={'primary'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
   </div>
 </div>
 
diff --git a/packages/ui/src/components/calendar/TimeInputBox.svelte b/packages/ui/src/components/calendar/TimeInputBox.svelte
index c8533b37e9..ba76392619 100644
--- a/packages/ui/src/components/calendar/TimeInputBox.svelte
+++ b/packages/ui/src/components/calendar/TimeInputBox.svelte
@@ -274,8 +274,8 @@
       }
     }
     &:not(.disabled) .digit:focus {
-      color: var(--accented-button-color);
-      background-color: var(--accented-button-default);
+      color: var(--primary-button-color);
+      background-color: var(--primary-button-default);
     }
     .time-divider {
       flex-shrink: 0;
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte
index 7a36b8e073..a250f66259 100644
--- a/packages/ui/src/components/calendar/WeekCalendar.svelte
+++ b/packages/ui/src/components/calendar/WeekCalendar.svelte
@@ -105,7 +105,7 @@
     width: calc(calc(100% - 50px) / 7);
   }
   .cell:hover {
-    color: var(--accented-button-color);
+    color: var(--primary-button-color);
     background-color: var(--highlight-hover);
   }
 </style>
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 4e5f8dcaca..591d09054b 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -133,8 +133,8 @@ export interface RadioItem {
 }
 
 export type ButtonKind =
-  | 'accented'
-  | 'brand'
+  | 'primary'
+  | 'secondary'
   | 'positive'
   | 'negative'
   | 'regular'
diff --git a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
index aea6cfe027..ce76363cb6 100644
--- a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
@@ -181,8 +181,8 @@
     height: 2rem;
     font-weight: 500;
     font-size: 0.625rem;
-    color: var(--accented-button-color);
-    background-color: var(--accented-button-default);
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     cursor: pointer;
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 16de02d8c1..b63fd9d12e 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -174,8 +174,8 @@
       cursor: pointer;
 
       &:not(.image) {
-        color: var(--accented-button-color);
-        background-color: var(--accented-button-default);
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
       }
       &.svg {
         background-color: #fff;
diff --git a/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte b/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
index 2205099709..a0477303fe 100644
--- a/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
+++ b/plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
@@ -177,12 +177,12 @@
               width={'10rem'}
               label={getEmbeddedLabel('Source state')}
               items={sourceStates}
-              kind={m.sourceName !== '' ? 'accented' : 'regular'}
+              kind={m.sourceName !== '' ? 'primary' : 'regular'}
               bind:selected={m.sourceName}
             /> =>
             <DropdownLabels
               width={'10rem'}
-              kind={m.targetName !== '' ? 'accented' : 'regular'}
+              kind={m.targetName !== '' ? 'primary' : 'regular'}
               label={getEmbeddedLabel('Final state')}
               items={stateTitles}
               bind:selected={m.targetName}
@@ -190,7 +190,7 @@
             <span class="ml-4"> Done state: </span>
             <DropdownLabels
               width={'10rem'}
-              kind={m.doneState !== '' ? 'accented' : 'regular'}
+              kind={m.doneState !== '' ? 'primary' : 'regular'}
               label={getEmbeddedLabel('Done state')}
               items={doneStateTitles}
               bind:selected={m.doneState}
diff --git a/plugins/board-resources/src/components/popups/DateRangePicker.svelte b/plugins/board-resources/src/components/popups/DateRangePicker.svelte
index 83cd157218..1223581d34 100644
--- a/plugins/board-resources/src/components/popups/DateRangePicker.svelte
+++ b/plugins/board-resources/src/components/popups/DateRangePicker.svelte
@@ -76,7 +76,7 @@
     <Button
       label={board.string.Save}
       size={'small'}
-      kind={'accented'}
+      kind={'primary'}
       on:click={() => {
         update()
         dispatch('close')
diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index 8a59867097..7f990c1f00 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -190,7 +190,7 @@
   </div>
   <div class="flex-between p-5 flex-no-shrink">
     <div />
-    <Button kind="accented" label={presentation.string.Create} on:click={saveEvent} disabled={title === ''} />
+    <Button kind="primary" label={presentation.string.Create} on:click={saveEvent} disabled={title === ''} />
   </div>
 </div>
 
diff --git a/plugins/calendar-resources/src/components/Day.svelte b/plugins/calendar-resources/src/components/Day.svelte
index e419ce8b5b..2fd58ca4be 100644
--- a/plugins/calendar-resources/src/components/Day.svelte
+++ b/plugins/calendar-resources/src/components/Day.svelte
@@ -111,13 +111,13 @@
     border: 1px solid transparent;
   }
   .today {
-    color: var(--accented-button-color);
+    color: var(--primary-button-color);
     background-color: #3871e0;
   }
   .selected:not(.today, .wrongMonth) {
     color: var(--theme-caption-color);
-    background-color: var(--accented-button-disabled);
-    border-color: var(--accented-button-outline);
+    background-color: var(--primary-button-disabled);
+    border-color: var(--primary-button-outline);
   }
   .marker {
     position: absolute;
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index 438c3b0164..c87c7c8b77 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -936,7 +936,7 @@
         left: -1.25rem;
         font-weight: 500;
         font-size: 0.75rem;
-        color: var(--accented-button-color);
+        color: var(--primary-button-color);
         transform: translateX(-50%);
       }
       &.upperLabel::before,
@@ -1065,7 +1065,7 @@
         align-items: center;
         min-width: 2.25rem;
         padding: 0.375rem;
-        color: var(--accented-button-color);
+        color: var(--primary-button-color);
         background-color: #3871e0;
         border-radius: 0.375rem;
       }
diff --git a/plugins/calendar-resources/src/components/EditEvent.svelte b/plugins/calendar-resources/src/components/EditEvent.svelte
index fafb5857f2..89afea1396 100644
--- a/plugins/calendar-resources/src/components/EditEvent.svelte
+++ b/plugins/calendar-resources/src/components/EditEvent.svelte
@@ -191,7 +191,7 @@
   <div class="divider" />
   <div class="flex-between p-5 flex-no-shrink">
     <div />
-    <Button kind="accented" label={presentation.string.Save} disabled={readOnly} on:click={saveEvent} />
+    <Button kind="primary" label={presentation.string.Save} disabled={readOnly} on:click={saveEvent} />
   </div>
 </div>
 
diff --git a/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte b/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
index aa2a26e35d..2673dac628 100644
--- a/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
+++ b/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
@@ -46,7 +46,7 @@
   </div>
 {:else}
   <div class="flex-row-center gap-1-5 mt-1">
-    <CheckBox bind:checked={allDay} kind={'accented'} on:value={() => dispatch('allday')} />
+    <CheckBox bind:checked={allDay} kind={'primary'} on:value={() => dispatch('allday')} />
     <Button
       label={calendar.string.AllDay}
       kind={'ghost'}
diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte
index e5ab5da7ab..55e2118d72 100644
--- a/plugins/calendar-resources/src/components/Events.svelte
+++ b/plugins/calendar-resources/src/components/Events.svelte
@@ -65,7 +65,7 @@
 
   <div class="ac-header-full medium-gap mb-1">
     <ViewletSelector bind:viewlet bind:loading bind:preference bind:viewlets viewletQuery={{ attachTo: _class }} />
-    <Button icon={IconAdd} label={createLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="flex-col w-full h-full background-comp-header-color">
diff --git a/plugins/calendar-resources/src/components/IntegrationConnect.svelte b/plugins/calendar-resources/src/components/IntegrationConnect.svelte
index 0958413797..d2ed15ad73 100644
--- a/plugins/calendar-resources/src/components/IntegrationConnect.svelte
+++ b/plugins/calendar-resources/src/components/IntegrationConnect.svelte
@@ -64,7 +64,7 @@
     <Label label={calendar.string.RedirectGoogle} />
     <img class="image" src={getMetadata(calendar.image.Permissions)} alt="" />
     <div class="footer">
-      <Button label={calendar.string.Connect} kind={'accented'} disabled={connecting} on:click={sendRequest} />
+      <Button label={calendar.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
     </div>
   </div>
 </div>
diff --git a/plugins/calendar-resources/src/components/ReccurancePopup.svelte b/plugins/calendar-resources/src/components/ReccurancePopup.svelte
index abbeefadb8..438b760db3 100644
--- a/plugins/calendar-resources/src/components/ReccurancePopup.svelte
+++ b/plugins/calendar-resources/src/components/ReccurancePopup.svelte
@@ -125,7 +125,7 @@
           {#each weekdays as day}
             <CircleButton
               size={'medium'}
-              accented={isActive(day.id, selectedWeekdays)}
+              primary={isActive(day.id, selectedWeekdays)}
               on:click={() => weekdayClick(day.id)}
               on:selected={() => weekdayClick(day.id)}
             >
@@ -188,7 +188,7 @@
     <Button
       label={ui.string.Save}
       on:click={save}
-      kind="accented"
+      kind="primary"
       disabled={periodType === 'MONTHLY' && selectedWeekdays.length === 0}
     />
     <Button label={ui.string.Cancel} on:click={() => dispatch('close')} />
diff --git a/plugins/calendar-resources/src/components/UpdateRecInstancePopup.svelte b/plugins/calendar-resources/src/components/UpdateRecInstancePopup.svelte
index bad4906cf4..51e3fc3e54 100644
--- a/plugins/calendar-resources/src/components/UpdateRecInstancePopup.svelte
+++ b/plugins/calendar-resources/src/components/UpdateRecInstancePopup.svelte
@@ -68,7 +68,7 @@
       focusIndex={1}
       label={presentation.string.Ok}
       size={'large'}
-      kind={'accented'}
+      kind={'primary'}
       on:click={() => {
         dispatch('close', { mode: selected })
       }}
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index 0af8b7515c..a272200370 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -112,6 +112,6 @@
 
 <style lang="scss">
   .editing {
-    border: 1px solid var(--accented-button-outline);
+    border: 1px solid var(--primary-button-outline);
   }
 </style>
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 2c8b2015c8..1db99c6cb9 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -107,7 +107,7 @@
   {:else if name && displayName && displayName !== ''}
     <div
       class="ava-text"
-      style:color={color ? color.iconText : 'var(--accented-button-color)'}
+      style:color={color ? color.iconText : 'var(--primary-button-color)'}
       data-name={displayName.toLocaleUpperCase()}
     />
   {:else}
@@ -127,7 +127,7 @@
     pointer-events: none;
 
     &.no-img {
-      color: var(--accented-button-color);
+      color: var(--primary-button-color);
       border-color: transparent;
     }
     &.bordered {
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index 3a9b94164b..f35bdad798 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -60,7 +60,7 @@
     <div class="mb-1 clear-mins">
       <Button
         label={contact.string.ContactCreateLabel}
-        kind={'accented'}
+        kind={'primary'}
         size={'medium'}
         on:click={(ev) => showCreateDialog(ev)}
       />
diff --git a/plugins/contact-resources/src/components/EditAvatarPopup.svelte b/plugins/contact-resources/src/components/EditAvatarPopup.svelte
index 038654b87a..390c1c6a8f 100644
--- a/plugins/contact-resources/src/components/EditAvatarPopup.svelte
+++ b/plugins/contact-resources/src/components/EditAvatarPopup.svelte
@@ -66,7 +66,7 @@
       <Cropper bind:this={cropper} image={file} />
     </div>
     <div class="footer">
-      <Button label={presentation.string.Save} kind={'accented'} size={'large'} on:click={onCrop} />
+      <Button label={presentation.string.Save} kind={'primary'} size={'large'} on:click={onCrop} />
       <div class="mx-3 clear-mins">
         <Button label={presentation.string.Change} size={'large'} on:click={selectAnother} />
       </div>
diff --git a/plugins/contact-resources/src/components/EditOrganization.svelte b/plugins/contact-resources/src/components/EditOrganization.svelte
index 077da50c33..8df424fd6d 100644
--- a/plugins/contact-resources/src/components/EditOrganization.svelte
+++ b/plugins/contact-resources/src/components/EditOrganization.svelte
@@ -76,8 +76,8 @@
   .logo {
     width: 5rem;
     height: 5rem;
-    color: var(--accented-button-color);
-    background-color: var(--accented-button-default);
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
     border-radius: 50%;
   }
   .name {
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index 6047f1262c..9180a2a3c2 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -99,13 +99,13 @@
     <span class="pl-2"><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
     <div class="flex-row-center gap-3">
       <Button label={gmail.string.Cancel} on:click={clear} />
-      <Button label={gmail.string.PublishSelected} kind={'accented'} disabled={!selected.size} on:click={share} />
+      <Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
     </div>
   {:else}
     {#if enabled}
       <Button
         label={gmail.string.CreateMessage}
-        kind={'accented'}
+        kind={'primary'}
         on:click={() => {
           newMessage = true
         }}
diff --git a/plugins/gmail-resources/src/components/Connect.svelte b/plugins/gmail-resources/src/components/Connect.svelte
index 9804580ada..32eea50393 100644
--- a/plugins/gmail-resources/src/components/Connect.svelte
+++ b/plugins/gmail-resources/src/components/Connect.svelte
@@ -63,7 +63,7 @@
   <div class="content">
     <Label label={gmail.string.RedirectGoogle} />
     <div class="footer">
-      <Button label={gmail.string.Connect} kind={'accented'} disabled={connecting} on:click={sendRequest} />
+      <Button label={gmail.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
     </div>
   </div>
 </div>
diff --git a/plugins/gmail-resources/src/components/Main.svelte b/plugins/gmail-resources/src/components/Main.svelte
index ee867cc79e..888192924b 100644
--- a/plugins/gmail-resources/src/components/Main.svelte
+++ b/plugins/gmail-resources/src/components/Main.svelte
@@ -118,7 +118,7 @@
       {#if integrations.length === 0}
         <Button
           label={gmail.string.Connect}
-          kind={'accented'}
+          kind={'primary'}
           size={'medium'}
           on:click={(e) => {
             showPopup(Connect, {}, eventToHTMLElement(e))
diff --git a/plugins/gmail-resources/src/components/Message.svelte b/plugins/gmail-resources/src/components/Message.svelte
index 034f588f33..974d756801 100644
--- a/plugins/gmail-resources/src/components/Message.svelte
+++ b/plugins/gmail-resources/src/components/Message.svelte
@@ -69,7 +69,7 @@
     {/if}
   </div>
   {#if selectable}
-    <div class="ml-4"><CheckBox circle kind={'accented'} bind:checked={selected} /></div>
+    <div class="ml-4"><CheckBox circle kind={'primary'} bind:checked={selected} /></div>
   {/if}
 </div>
 
@@ -88,7 +88,7 @@
     flex-grow: 1;
 
     &.selected {
-      background-color: var(--accented-button-default);
+      background-color: var(--primary-button-default);
     }
   }
 </style>
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 88e0d887bb..6429cf3ede 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -198,7 +198,7 @@
         inputFile.click()
       }}
     />
-    <Button label={plugin.string.Send} kind={'accented'} disabled={progress} on:click={sendMsg} />
+    <Button label={plugin.string.Send} kind={'primary'} disabled={progress} on:click={sendMsg} />
   </div>
 </div>
 {#if attachments.length}
diff --git a/plugins/gmail-resources/src/components/NewMessages.svelte b/plugins/gmail-resources/src/components/NewMessages.svelte
index 6f3fee6ec1..81658ae672 100644
--- a/plugins/gmail-resources/src/components/NewMessages.svelte
+++ b/plugins/gmail-resources/src/components/NewMessages.svelte
@@ -248,7 +248,7 @@
     {#if integrations.length === 0}
       <Button
         label={plugin.string.Connect}
-        kind={'accented'}
+        kind={'primary'}
         on:click={(e) => {
           showPopup(Connect, {}, eventToHTMLElement(e))
         }}
@@ -297,7 +297,7 @@
           <Button
             label={plugin.string.Send}
             size={'small'}
-            kind={'accented'}
+            kind={'primary'}
             disabled={channels.length === 0}
             on:click={sendMsg}
           />
diff --git a/plugins/hr-resources/src/components/DepartmentCard.svelte b/plugins/hr-resources/src/components/DepartmentCard.svelte
index 1584c50b63..9bbfb0b0f0 100644
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@@ -169,7 +169,7 @@
       cursor: pointer;
     }
     &.dragging {
-      border-color: var(--accented-button-outline);
+      border-color: var(--primary-button-outline);
     }
   }
 </style>
diff --git a/plugins/hr-resources/src/components/Structure.svelte b/plugins/hr-resources/src/components/Structure.svelte
index b1d6707002..fcd8b5a7ec 100644
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@@ -85,7 +85,7 @@
   </div>
 
   <div class="mb-1 clear-mins">
-    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/hr-resources/src/components/schedule/YearView.svelte b/plugins/hr-resources/src/components/schedule/YearView.svelte
index 1875d2691e..cdd5ef2dd5 100644
--- a/plugins/hr-resources/src/components/schedule/YearView.svelte
+++ b/plugins/hr-resources/src/components/schedule/YearView.svelte
@@ -205,7 +205,7 @@
       border: none;
       color: var(--caption-color);
       &.today {
-        background-color: var(--accented-button-disabled);
+        background-color: var(--primary-button-disabled);
       }
       &.summary {
         font-weight: 600;
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte
index e6c8adb8da..d2179f2a1f 100644
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@@ -42,7 +42,7 @@
   </div>
 
   <div class="mb-1 clear-mins">
-    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/lead-resources/src/components/NewItemsHeader.svelte b/plugins/lead-resources/src/components/NewItemsHeader.svelte
index 3b76a10036..63f653c7dd 100644
--- a/plugins/lead-resources/src/components/NewItemsHeader.svelte
+++ b/plugins/lead-resources/src/components/NewItemsHeader.svelte
@@ -28,7 +28,7 @@
     label={lead.string.CreateCustomerLabel}
     justify={'left'}
     width={'100%'}
-    kind={'accented'}
+    kind={'primary'}
     gap={'large'}
     on:click={newIssue}
   />
diff --git a/plugins/login-resources/src/components/InviteLink.svelte b/plugins/login-resources/src/components/InviteLink.svelte
index 5d62444380..0ae08f8fdb 100644
--- a/plugins/login-resources/src/components/InviteLink.svelte
+++ b/plugins/login-resources/src/components/InviteLink.svelte
@@ -167,7 +167,7 @@
       <Button
         label={login.string.Close}
         size={'medium'}
-        kind={'accented'}
+        kind={'primary'}
         on:click={() => {
           dispatch('close')
         }}
@@ -179,7 +179,7 @@
       <Button
         label={login.string.GetLink}
         size={'medium'}
-        kind={'accented'}
+        kind={'primary'}
         on:click={() => {
           ;((limit !== undefined && limit > 0) || noLimit) && getLink(expHours, emailMask, limit)
         }}
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index b0137f4b0e..39c5f29613 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -131,7 +131,7 @@
         {/each}
         {#if !workspaces.length && account?.confirmed === true}
           <div class="form-row send">
-            <Button label={login.string.CreateWorkspace} kind={'accented'} width="100%" on:click={createWorkspace} />
+            <Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
           </div>
         {/if}
       </div>
diff --git a/plugins/notification-resources/src/components/EmployeeInbox.svelte b/plugins/notification-resources/src/components/EmployeeInbox.svelte
index f7969952d3..4de99f7533 100644
--- a/plugins/notification-resources/src/components/EmployeeInbox.svelte
+++ b/plugins/notification-resources/src/components/EmployeeInbox.svelte
@@ -194,7 +194,7 @@
     {/if}
   </div>
   {#if me !== accountId}
-    <Button label={chunter.string.Message} kind="accented" on:click={openDM} />
+    <Button label={chunter.string.Message} kind="primary" on:click={openDM} />
   {/if}
 </div>
 <div class="inbox-activity">
diff --git a/plugins/notification-resources/src/components/Inbox.svelte b/plugins/notification-resources/src/components/Inbox.svelte
index c9b2d6ad09..c96a8f3a4c 100644
--- a/plugins/notification-resources/src/components/Inbox.svelte
+++ b/plugins/notification-resources/src/components/Inbox.svelte
@@ -154,7 +154,7 @@
         <svelte:fragment slot="rightButtons">
           <div class="flex flex-gap-2">
             {#if selectedTab > 0}
-              <Button label={chunter.string.Message} icon={IconAdd} kind="accented" on:click={openUsersPopup} />
+              <Button label={chunter.string.Message} icon={IconAdd} kind="primary" on:click={openUsersPopup} />
             {/if}
             <Filter bind:filter />
           </div>
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 75bcf08fdf..b0dce3c758 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -722,12 +722,12 @@
 
 <style lang="scss">
   .resume {
-    box-shadow: 0 0 0 0 var(--accented-button-outline);
+    box-shadow: 0 0 0 0 var(--primary-button-outline);
     border-radius: 0.25rem;
     transition: box-shadow 0.15s ease-in-out;
 
     &.solid {
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
     }
   }
   .skills-box {
diff --git a/plugins/recruit-resources/src/components/NewCandidateHeader.svelte b/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
index 37f6a57cdd..f9791d3d85 100644
--- a/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
+++ b/plugins/recruit-resources/src/components/NewCandidateHeader.svelte
@@ -38,7 +38,7 @@
     icon={IconAdd}
     label={draftExists ? recruit.string.ResumeDraft : recruit.string.CreateTalent}
     justify={'left'}
-    kind={'accented'}
+    kind={'primary'}
     width={'100%'}
     gap={'large'}
     on:click={newCandidate}
diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
index 35269f37a3..c33c1b1382 100644
--- a/plugins/recruit-resources/src/components/Organizations.svelte
+++ b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -209,7 +209,7 @@
         descriptor: { $in: [view.viewlet.Table, view.viewlet.List] }
       }}
     />
-    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index d11abb9a00..6deb70f3e7 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -150,7 +150,7 @@
         }}
       />
     {/if}
-    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/request-resources/src/components/RequestLabel.svelte b/plugins/request-resources/src/components/RequestLabel.svelte
index 3b7d2554b1..cc9861d53e 100644
--- a/plugins/request-resources/src/components/RequestLabel.svelte
+++ b/plugins/request-resources/src/components/RequestLabel.svelte
@@ -51,12 +51,7 @@
         {:else}
           <div class="flex-row-center content-color text-sm pointer-events-none">
             <div class="mr-1">
-              <ProgressCircle
-                max={value.requiredApprovesCount}
-                value={value.approved.length}
-                size={'inline'}
-                accented
-              />
+              <ProgressCircle max={value.requiredApprovesCount} value={value.approved.length} size={'inline'} primary />
             </div>
             {value.approved.length}/{value.requiredApprovesCount}
           </div>
diff --git a/plugins/setting-resources/src/components/InviteSetting.svelte b/plugins/setting-resources/src/components/InviteSetting.svelte
index 9ee506e923..aaf945f521 100644
--- a/plugins/setting-resources/src/components/InviteSetting.svelte
+++ b/plugins/setting-resources/src/components/InviteSetting.svelte
@@ -71,7 +71,7 @@
     </div>
   {/if}
   <div class="mt-2">
-    <Button label={presentation.string.Save} size={'medium'} kind={'accented'} on:click={() => setInviteSettings()} />
+    <Button label={presentation.string.Save} size={'medium'} kind={'primary'} on:click={() => setInviteSettings()} />
   </div>
 </div>
 
diff --git a/plugins/setting-resources/src/components/Owners.svelte b/plugins/setting-resources/src/components/Owners.svelte
index 0c877e4450..5da48bda83 100644
--- a/plugins/setting-resources/src/components/Owners.svelte
+++ b/plugins/setting-resources/src/components/Owners.svelte
@@ -76,7 +76,7 @@
             <DropdownLabelsIntl
               label={setting.string.Role}
               disabled={account.role > currentRole || (account.role === AccountRole.Owner && owners.length === 1)}
-              kind={'accented'}
+              kind={'primary'}
               size={'medium'}
               {items}
               selected={account.role.toString()}
diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte
index 89844676b7..6dbfe370d5 100644
--- a/plugins/setting-resources/src/components/Password.svelte
+++ b/plugins/setting-resources/src/components/Password.svelte
@@ -98,7 +98,7 @@
         <Button
           {label}
           {disabled}
-          kind={'accented'}
+          kind={'primary'}
           on:click={() => {
             save()
           }}
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index 65efbc17ff..b27f65d416 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -99,12 +99,12 @@
       {#if integrationType.createComponent}
         <Button
           label={setting.string.Add}
-          kind={'accented'}
+          kind={'primary'}
           on:click={(ev) => handleConfigure(integrationType.createComponent)}
         />
       {/if}
     {:else if (integration?.disabled ?? false) && integrationType.reconnectComponent}
-      <Button label={setting.string.Reconnect} kind={'accented'} on:click={handleReconnect} />
+      <Button label={setting.string.Reconnect} kind={'primary'} on:click={handleReconnect} />
     {:else if integration?.value !== ''}
       {#if integrationType.onDisconnect}
         <Button label={setting.string.Disconnect} on:click={disconnect} />
@@ -112,7 +112,7 @@
       {#if integrationType.configureComponent !== undefined}
         <Button
           label={setting.string.Configure}
-          kind={'accented'}
+          kind={'primary'}
           on:click={(ev) => handleConfigure(integrationType.configureComponent)}
         />
       {/if}
diff --git a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
index 6ed750c529..1e4bd4559c 100644
--- a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
@@ -147,7 +147,7 @@
                 }}
               >
                 <div class="check pointer-events-none">
-                  <CheckBox checked={isSelected(element, selected)} kind={'accented'} />
+                  <CheckBox checked={isSelected(element, selected)} kind={'primary'} />
                 </div>
                 <div class="tag" style="background-color: {color.background};" />
                 <span style:color={color.title}>
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte
index e495bdc189..d5f2ca1942 100644
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/plugins/tags-resources/src/components/TagsView.svelte
@@ -95,7 +95,7 @@
   </div>
 
   <div class="clear-mins mb-1">
-    <Button icon={IconAdd} label={сreateItemLabel} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index cba166b320..a15e5d6adc 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -242,7 +242,7 @@
       {#if integration === undefined}
         <Button
           label={telegram.string.Connect}
-          kind={'accented'}
+          kind={'primary'}
           on:click={(e) => {
             showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
           }}
@@ -250,7 +250,7 @@
       {:else if integration.disabled}
         <Button
           label={setting.string.Reconnect}
-          kind={'accented'}
+          kind={'primary'}
           on:click={(e) => {
             showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
           }}
@@ -285,7 +285,7 @@
               <Button
                 label={telegram.string.PublishSelected}
                 size={'medium'}
-                kind={'accented'}
+                kind={'primary'}
                 disabled={!selected.size}
                 on:click={share}
               />
diff --git a/plugins/telegram-resources/src/components/Connect.svelte b/plugins/telegram-resources/src/components/Connect.svelte
index 8dfd534755..5ee4843392 100644
--- a/plugins/telegram-resources/src/components/Connect.svelte
+++ b/plugins/telegram-resources/src/components/Connect.svelte
@@ -154,7 +154,7 @@
       <EditBox label={telegram.string.Phone} placeholder={telegram.string.PhonePlaceholder} bind:value={phone} />
     {/if}
     <div class="footer">
-      <Button {label} kind={'accented'} {disabled} on:click={click} />
+      <Button {label} kind={'primary'} {disabled} on:click={click} />
       {#if requested || secondFactor}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
diff --git a/plugins/telegram-resources/src/components/Message.svelte b/plugins/telegram-resources/src/components/Message.svelte
index 9250065096..e7200ce634 100644
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@@ -43,7 +43,7 @@
     }}
   >
     <div class="check-box">
-      {#if selectable}<CheckBox circle kind={'accented'} bind:checked={selected} />{/if}
+      {#if selectable}<CheckBox circle kind={'primary'} bind:checked={selected} />{/if}
     </div>
     <div class="message-container" class:out={!message.incoming}>
       <div class="message" class:outcoming={!message.incoming} class:selected>
diff --git a/plugins/telegram-resources/src/components/PinPad.svelte b/plugins/telegram-resources/src/components/PinPad.svelte
index ae0e98110b..1f2ac72b2b 100644
--- a/plugins/telegram-resources/src/components/PinPad.svelte
+++ b/plugins/telegram-resources/src/components/PinPad.svelte
@@ -116,7 +116,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
     }
   }
 
diff --git a/plugins/telegram-resources/src/components/Reconnect.svelte b/plugins/telegram-resources/src/components/Reconnect.svelte
index 27a8401c1f..50f000af9a 100644
--- a/plugins/telegram-resources/src/components/Reconnect.svelte
+++ b/plugins/telegram-resources/src/components/Reconnect.svelte
@@ -169,7 +169,7 @@
       {/await}
     {/if}
     <div class="footer">
-      <Button {label} kind={'accented'} {disabled} on:click={click} />
+      <Button {label} kind={'primary'} {disabled} on:click={click} />
       {#if requested || secondFactor}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 0ee0d6cefd..b6b7cc5e3b 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -220,7 +220,7 @@
               <div class="ml-2">
                 <Button
                   disabled={newTemplate.title.trim().length === 0}
-                  kind={'accented'}
+                  kind={'primary'}
                   label={templatesPlugin.string.SaveTemplate}
                   on:click={saveNewTemplate}
                 />
@@ -245,7 +245,7 @@
           </div>
           <div class="flex flex-reverse">
             <Button
-              kind={'accented'}
+              kind={'primary'}
               label={templatesPlugin.string.EditTemplate}
               on:click={() => {
                 mode = Mode.Edit
diff --git a/plugins/tracker-resources/src/components/FilterMenuSection.svelte b/plugins/tracker-resources/src/components/FilterMenuSection.svelte
index 102cd19036..d9a9c3297d 100644
--- a/plugins/tracker-resources/src/components/FilterMenuSection.svelte
+++ b/plugins/tracker-resources/src/components/FilterMenuSection.svelte
@@ -89,7 +89,7 @@
           <div class="buttonContent">
             {#if i !== 0 || (i === 0 && !onBack)}
               <div class="flex check pointer-events-none">
-                <CheckBox checked={selectedElementsMap[i]} kind={'accented'} />
+                <CheckBox checked={selectedElementsMap[i]} kind={'primary'} />
               </div>
             {/if}
             {#if action.icon}
diff --git a/plugins/tracker-resources/src/components/NewIssueHeader.svelte b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
index 09318bd59a..b1315aaa17 100644
--- a/plugins/tracker-resources/src/components/NewIssueHeader.svelte
+++ b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
@@ -54,7 +54,7 @@
     icon={IconAdd}
     {label}
     justify={'left'}
-    kind={'accented'}
+    kind={'primary'}
     width={'100%'}
     gap={'large'}
     on:click={newIssue}
diff --git a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
index dcb7b839f2..79ef157a53 100644
--- a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
@@ -87,7 +87,7 @@
 
   <div class="ac-header-full medium-gap mb-1">
     <ViewletSelector bind:viewlet bind:viewlets viewletQuery={{ attachTo: tracker.class.Component }} />
-    <Button icon={IconAdd} label={tracker.string.Component} kind="accented" on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.Component} kind="primary" on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
index b65dd39484..3c2b51bd88 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
@@ -156,7 +156,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
               </div>
             {/if}
             {countComplete}/{subIssues.length}
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
index 7dc50b5e76..71f7d897c1 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
@@ -132,7 +132,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
               </div>
             {/if}
             {countComplete}/{subIssues.length}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
index 3f1f6515a0..49ead718ae 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
@@ -19,7 +19,7 @@
   export let min: number = 0
   export let max: number = 100
   export let size: IconSize = 'small'
-  export let accented: boolean = false
+  export let primary: boolean = false
 
   export let color: string = 'var(--theme-progress-color)'
   export let greenColor: string = FernColor
@@ -50,7 +50,7 @@
       cy={8}
       r={7}
       class="progress-circle"
-      style:stroke={accented ? 'var(--primary-bg-color)' : color}
+      style:stroke={primary ? 'var(--primary-bg-color)' : color}
       style:opacity={dashOffset === 0 ? 0 : 1}
       style:transform={'rotate(-82deg)'}
       style:stroke-dasharray={lenghtC}
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
index 61313f390e..5e79a08db1 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
@@ -88,7 +88,7 @@
   </div>
 
   <div class="ac-header-full medium-gap mb-1">
-    <Button icon={IconAdd} label={tracker.string.Milestone} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.Milestone} kind={'primary'} on:click={showCreateDialog} />
   </div>
 </div>
 <div class="ac-header full divide search-start">
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
index 42e4e1605e..2afad444bc 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
@@ -21,7 +21,7 @@
 
   export let value: Milestone
   export let field = 'targetDate'
-  export let kind: 'ghost' | 'accented' | 'link' | 'list' = 'accented'
+  export let kind: 'ghost' | 'primary' | 'link' | 'list' = 'primary'
   export let size: ButtonSize | 'x-small' = 'small'
 
   const client = getClient()
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index 0f43234f6e..6d064423c6 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -65,7 +65,7 @@
     <slot name="label_selector" />
   </svelte:fragment>
   <svelte:fragment slot="header-tools">
-    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'accented'} on:click={showCreateDialog} />
+    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'primary'} on:click={showCreateDialog} />
   </svelte:fragment>
   <svelte:fragment slot="extra">
     {#if asideFloat && $$slots.aside}
diff --git a/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte b/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
index 66786b1fd7..7cf0531135 100644
--- a/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
+++ b/plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
@@ -93,7 +93,7 @@
       focus
       label={presentation.string.Ok}
       size={'small'}
-      kind={'accented'}
+      kind={'primary'}
       loading={processing}
       on:click={remove}
     />
diff --git a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
index cb471053a7..5cbb4012d5 100644
--- a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
@@ -72,7 +72,7 @@
     <Button
       label={presentation.string.Save}
       size={'small'}
-      kind={'accented'}
+      kind={'primary'}
       disabled={!canSave}
       on:click={() => dispatch('save')}
     />
diff --git a/plugins/view-resources/src/components/BooleanEditorPopup.svelte b/plugins/view-resources/src/components/BooleanEditorPopup.svelte
index 0cbedc6bc6..ce0b71badf 100644
--- a/plugins/view-resources/src/components/BooleanEditorPopup.svelte
+++ b/plugins/view-resources/src/components/BooleanEditorPopup.svelte
@@ -29,7 +29,7 @@
     <BooleanPresenter value={true} />
     {#if value === true}
       <div class="check">
-        <CheckBox checked={value === true} kind={'accented'} />
+        <CheckBox checked={value === true} kind={'primary'} />
       </div>
     {/if}
   </div>
@@ -37,7 +37,7 @@
     <BooleanPresenter value={false} />
     {#if value === false}
       <div class="check">
-        <CheckBox checked={value === false} kind={'accented'} />
+        <CheckBox checked={value === false} kind={'primary'} />
       </div>
     {/if}
   </div>
@@ -46,7 +46,7 @@
       <BooleanPresenter value={undefined} />
       {#if value === undefined}
         <div class="check">
-          <CheckBox checked={value === undefined} kind={'accented'} />
+          <CheckBox checked={value === undefined} kind={'primary'} />
         </div>
       {/if}
     </div>
diff --git a/plugins/view-resources/src/components/ColorsPopup.svelte b/plugins/view-resources/src/components/ColorsPopup.svelte
index 961cbc4509..4180285be8 100644
--- a/plugins/view-resources/src/components/ColorsPopup.svelte
+++ b/plugins/view-resources/src/components/ColorsPopup.svelte
@@ -56,7 +56,7 @@
       cursor: pointer;
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--accented-button-outline);
+        box-shadow: 0 0 0 2px var(--primary-button-outline);
       }
       &.selected {
         border-color: var(--caption-color);
diff --git a/plugins/view-resources/src/components/IconPicker.svelte b/plugins/view-resources/src/components/IconPicker.svelte
index d844793d5c..d76087dd82 100644
--- a/plugins/view-resources/src/components/IconPicker.svelte
+++ b/plugins/view-resources/src/components/IconPicker.svelte
@@ -84,7 +84,7 @@
                 icon={obj}
                 iconProps={{ fill: getPlatformColor(_color ?? 0, $themeStore.dark) }}
                 size="medium"
-                kind={obj === _icon ? 'accented' : 'ghost'}
+                kind={obj === _icon ? 'primary' : 'ghost'}
                 on:click={() => {
                   _icon = obj
                 }}
diff --git a/plugins/view-resources/src/components/Move.svelte b/plugins/view-resources/src/components/Move.svelte
index b90c5ab245..7054243047 100644
--- a/plugins/view-resources/src/components/Move.svelte
+++ b/plugins/view-resources/src/components/Move.svelte
@@ -121,7 +121,7 @@
       label={view.string.Move}
       size={'small'}
       disabled={space === currentSpace?._id || status !== OK}
-      kind={'accented'}
+      kind={'primary'}
       on:click={moveAll}
     />
     <Button
diff --git a/plugins/view-resources/src/components/list/SortableListItem.svelte b/plugins/view-resources/src/components/list/SortableListItem.svelte
index 3e35c2c781..5a67724e1c 100644
--- a/plugins/view-resources/src/components/list/SortableListItem.svelte
+++ b/plugins/view-resources/src/components/list/SortableListItem.svelte
@@ -51,7 +51,7 @@
           <Button label={presentation.string.Cancel} kind="regular" on:click={() => dispatch('cancel')} />
           <Button
             label={presentation.string.Save}
-            kind="accented"
+            kind="primary"
             loading={isSaving}
             disabled={!canSave}
             on:click={() => dispatch('save')}
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 4cd17ac286..7330617621 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -87,7 +87,7 @@
       color: var(--theme-caption-color);
     }
     &:focus {
-      box-shadow: 0 0 0 2px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
       .icon-container {
         color: var(--theme-caption-color);
       }
diff --git a/plugins/workbench-resources/src/components/Logo.svelte b/plugins/workbench-resources/src/components/Logo.svelte
index 90bb0fd4fa..2ea93e0cfe 100644
--- a/plugins/workbench-resources/src/components/Logo.svelte
+++ b/plugins/workbench-resources/src/components/Logo.svelte
@@ -26,7 +26,7 @@
     align-items: center;
     flex-shrink: 0;
     font-weight: 500;
-    color: var(--accented-button-color);
+    color: var(--primary-button-color);
     border-radius: 0.25rem;
     outline: none;
     cursor: pointer;
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index 222333095c..2199435226 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -119,7 +119,7 @@
     </div>
     {#if createItemDialog}
       <div class="mb-1 clear-mins">
-        <Button label={createItemLabel} kind={'accented'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
+        <Button label={createItemLabel} kind={'primary'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
       </div>
     {/if}
   </div>
@@ -176,7 +176,7 @@
             <Button size={'x-large'} label={plugin.string.Leave} on:click={() => leave(space)} />
           {:else}
             <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
-            <Button size={'x-large'} kind={'accented'} label={plugin.string.Join} on:click={() => join(space)} />
+            <Button size={'x-large'} kind={'primary'} label={plugin.string.Join} on:click={() => join(space)} />
           {/if}
         </div>
       </div>
@@ -184,7 +184,7 @@
   </div>
   {#if createItemDialog}
     <div class="flex-center mt-10">
-      <Button size={'x-large'} kind={'accented'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
+      <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
     </div>
   {/if}
 </Scroller>
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index 058c283316..5137e24246 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -62,7 +62,7 @@
     <div class="ac-header-full medium-gap mb-1">
       <ViewletSelector {viewletQuery} bind:viewlet bind:viewlets />
       {#if createItemDialog}
-        <Button icon={IconAdd} label={createItemLabel} kind={'accented'} on:click={(ev) => showCreateDialog(ev)} />
+        <Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
       {/if}
     </div>
   </div>
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte
index 8fea7222d6..af0059b8bd 100644
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@@ -68,7 +68,7 @@
       <Button
         icon={IconAdd}
         label={createLabel}
-        kind={'accented'}
+        kind={'primary'}
         disabled={isCreationDisabled}
         on:click={() => showCreateDialog()}
       />
diff --git a/tests/sanity/tests/model/common-page.ts b/tests/sanity/tests/model/common-page.ts
index 2518a7e3a2..cedea42fd6 100644
--- a/tests/sanity/tests/model/common-page.ts
+++ b/tests/sanity/tests/model/common-page.ts
@@ -35,6 +35,6 @@ export class CommonPage {
   }
 
   async pressYesDeletePopup (page: Page): Promise<void> {
-    await page.locator('form[id="view:string:DeleteObject"] button.accented').click()
+    await page.locator('form[id="view:string:DeleteObject"] button.primary').click()
   }
 }