Use consistent woodpecker color scheme (#2003)

Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2024-12-22 08:27:06 +00:00 · 2023-08-02 09:09:12 +02:00 · 2023-08-02 09:09:12 +02:00 · dca01e6817
commit dca01e6817
parent a8b8c9a588
57 changed files with 561 additions and 249 deletions
--- a/.gitignore
+++ b/.gitignore
@ -27,6 +27,7 @@ web/dist/**
 web/node_modules/
 web/*.log
 web/.env
+.pnpm-store

 ### Docker ###
 docker-compose.yml
@ -36,7 +37,6 @@ docker-compose.yml
 *.sqlite
 *.out
 /.env
-/.pnpm-store
 extras/
 /build/
 /dist/
--- a/web/package.json
+++ b/web/package.json
@ -57,6 +57,7 @@
    "eslint-plugin-vue": "^9.15.1",
    "eslint-plugin-vue-scoped-css": "^2.5.0",
    "prettier": "^2.8.8",
+    "tinycolor2": "^1.6.0",
    "typescript": "5.0.3",
    "unplugin-icons": "^0.16.3",
    "unplugin-vue-components": "^0.24.1",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@ -124,6 +124,9 @@ devDependencies:
  prettier:
    specifier: ^2.8.8
    version: 2.8.8
+  tinycolor2:
+    specifier: ^1.6.0
+    version: 1.6.0
  typescript:
    specifier: 5.0.3
    version: 5.0.3
@ -3191,6 +3194,10 @@ packages:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
    dev: true

+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: true
+
  /to-fast-properties@2.0.0:
    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
    engines: {node: '>=4'}
--- a/web/src/App.vue
+++ b/web/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="app flex flex-col m-auto w-full h-full bg-gray-100 dark:bg-dark-gray-600">
+  <div class="app flex flex-col m-auto w-full h-full bg-wp-background-200 dark:bg-wp-background-100">
    <router-view v-if="blank" />
    <template v-else>
      <Navbar />
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@ -238,7 +238,7 @@
            "step_not_started": "This step hasn't started yet.",
            "pipelines_for": "Pipelines for branch \"{branch}\"",
            "pipelines_for_pr": "Pipelines for pull request #{index}",
-            "exit_code": "exit code {exitCode}",
+            "exit_code": "Exit Code {exitCode}",
            "loading": "Loading…",
            "pipeline": "Pipeline #{pipelineId}",
            "log_download_error": "There was an error while downloading the log file",
--- a/web/src/components/admin/settings/AdminAgentsTab.vue
+++ b/web/src/components/admin/settings/AdminAgentsTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.agents.agents') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.agents.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
      </div>
      <Button
        v-if="selectedAgent"
@ -15,8 +15,12 @@
      <Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
    </div>

-    <div v-if="!selectedAgent" class="space-y-4 text-color">
-      <ListItem v-for="agent in agents" :key="agent.id" class="items-center">
+    <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="agent in agents"
+        :key="agent.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
        <span>{{ agent.name || `Agent ${agent.id}` }}</span>
        <span class="ml-auto">
          <span class="hidden md:inline-block space-x-2">
@ -35,7 +39,7 @@
        <IconButton
          icon="trash"
          :title="$t('admin.settings.agents.delete_agent')"
-          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
          :is-loading="isDeleting"
          @click="deleteAgent(agent)"
        />
@ -85,7 +89,7 @@
            :label="$t('admin.settings.agents.capacity.capacity')"
            docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
          >
-            <span class="text-color-alt">{{ $t('admin.settings.agents.capacity.desc') }}</span>
+            <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
            <TextField :model-value="selectedAgent.capacity?.toString()" disabled />
          </InputField>

--- a/web/src/components/admin/settings/AdminQueueTab.vue
+++ b/web/src/components/admin/settings/AdminQueueTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.queue.queue') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.queue.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p>
      </div>

      <div class="ml-auto flex items-center gap-2">
@ -24,8 +24,8 @@
        <Icon
          :name="queueInfo.paused ? 'pause' : 'play'"
          :class="{
-            'text-red-400': queueInfo.paused,
-            'text-lime-400': !queueInfo.paused,
+            'text-wp-state-error-100': queueInfo.paused,
+            'text-wp-state-ok-100': !queueInfo.paused,
          }"
        />
      </div>
@ -36,7 +36,11 @@

      <div v-if="tasks.length > 0" class="flex flex-col">
        <p class="mt-6 mb-2 text-xl">{{ $t('admin.settings.queue.tasks') }}</p>
-        <ListItem v-for="task in tasks" :key="task.id" class="items-center mb-2">
+        <ListItem
+          v-for="task in tasks"
+          :key="task.id"
+          class="items-center mb-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+        >
          <div
            class="flex items-center"
            :title="
@ -56,9 +60,9 @@
                  : 'status-declined'
              "
              :class="{
-                'text-red-400': task.status === 'waiting_on_deps',
-                'text-blue-400': task.status === 'running',
-                'text-gray-400': task.status === 'pending',
+                'text-wp-state-error-100': task.status === 'waiting_on_deps',
+                'text-wp-state-info-100': task.status === 'running',
+                'text-wp-state-neutral-100': task.status === 'pending',
              }"
            />
          </div>
--- a/web/src/components/admin/settings/AdminSecretsTab.vue
+++ b/web/src/components/admin/settings/AdminSecretsTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
          {{ $t('admin.settings.secrets.desc') }}
          <DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
        </p>
--- a/web/src/components/admin/settings/AdminUsersTab.vue
+++ b/web/src/components/admin/settings/AdminUsersTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.users.users') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.users.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.users.users') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.users.desc') }}</p>
      </div>
      <Button
        v-if="selectedUser"
@ -15,8 +15,12 @@
      <Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
    </div>

-    <div v-if="!selectedUser" class="space-y-4 text-color">
-      <ListItem v-for="user in users" :key="user.id" class="items-center gap-2">
+    <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="user in users"
+        :key="user.id"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
        <img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
        <span>{{ user.login }}</span>
        <Badge
@ -34,7 +38,7 @@
        <IconButton
          icon="trash"
          :title="$t('admin.settings.users.delete_user')"
-          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
          :is-loading="isDeleting"
          @click="deleteUser(user)"
        />
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@ -1,6 +1,8 @@
 <template>
  <div v-if="stats" class="flex justify-center">
-    <div class="bg-gray-100 dark:bg-dark-gray-600 text-color dark:text-gray-400 rounded-md py-5 px-5 w-full">
+    <div
+      class="bg-wp-background-200 border border-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 rounded-md py-5 px-5 w-full"
+    >
      <div class="flex w-full">
        <h3 class="text-lg font-semibold leading-tight uppercase flex-1">
          {{ $t('admin.settings.queue.stats.completed_count') }}
@ -81,28 +83,28 @@ const data = computed(() => {
      label: t('admin.settings.queue.stats.worker_count'),
      value: props.stats.worker_count,
      perc: total.value > 0 ? (props.stats.worker_count / total.value) * 100 : 0,
-      color: 'bg-lime-400',
+      color: 'bg-wp-state-ok-100',
    },
    {
      key: 'running_count',
      label: t('admin.settings.queue.stats.running_count'),
      value: props.stats.running_count,
      perc: total.value > 0 ? (props.stats.running_count / total.value) * 100 : 100,
-      color: 'bg-blue-400',
+      color: 'bg-wp-state-info-100',
    },
    {
      key: 'pending_count',
      label: t('admin.settings.queue.stats.pending_count'),
      value: props.stats.pending_count,
      perc: total.value > 0 ? (props.stats.pending_count / total.value) * 100 : 0,
-      color: 'bg-gray-400',
+      color: 'bg-wp-state-neutral-100',
    },
    {
      key: 'waiting_on_deps_count',
      label: t('admin.settings.queue.stats.waiting_on_deps_count'),
      value: props.stats.waiting_on_deps_count,
      perc: total.value > 0 ? (props.stats.waiting_on_deps_count / total.value) * 100 : 0,
-      color: 'bg-red-400',
+      color: 'bg-wp-state-error-100',
    },
  ];
 });
--- a/web/src/components/atomic/Badge.vue
+++ b/web/src/components/atomic/Badge.vue
@ -1,17 +1,14 @@
 <template>
  <span class="text-xs font-medium inline-flex">
    <span
-      class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 dark:bg-gray-600 border-2 border-gray-800 dark:border-gray-600 rounded-l-full"
+      class="pl-2 pr-1 py-0.5 bg-wp-state-neutral-100 text-gray-300 border-2 border-wp-state-neutral-100 rounded-l-full"
      :class="{
        'rounded-r-full pr-2': value === undefined,
      }"
    >
      {{ label }}
    </span>
-    <span
-      v-if="value !== undefined"
-      class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full"
-    >
+    <span v-if="value !== undefined" class="pl-1 pr-2 py-0.5 border-2 border-wp-state-neutral-100 rounded-r-full">
      {{ value }}
    </span>
  </span>
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@ -3,14 +3,11 @@
    type="button"
    class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
    :class="{
-      'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
+      'bg-wp-control-neutral-100 hover:bg-wp-control-neutral-200 border-wp-control-neutral-300 text-wp-text-100':
        color === 'gray',
-      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-300 dark:bg-lime-900 dark:hover:bg-lime-800':
-        color === 'green',
-      'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-300 dark:bg-cyan-900 dark:hover:bg-cyan-800':
-        color === 'blue',
-      'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-300 dark:bg-red-900 dark:hover:bg-red-800':
-        color === 'red',
+      'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
+      'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
+      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
      ...passedClasses,
    }"
    :title="title"
@ -26,10 +23,10 @@
        :class="{
          'opacity-100': isLoading,
          'opacity-0': !isLoading,
-          'bg-white dark:bg-dark-gray-700': color === 'gray',
-          'bg-lime-700': color === 'green',
-          'bg-cyan-700': color === 'blue',
-          'bg-red-600': color === 'red',
+          'bg-wp-control-neutral-200': color === 'gray',
+          'bg-wp-control-ok-200': color === 'green',
+          'bg-wp-control-info-200': color === 'blue',
+          'bg-wp-control-error-200': color === 'red',
        }"
      >
        <Icon name="loading" class="animate-spin" />
--- a/web/src/components/atomic/DocsLink.vue
+++ b/web/src/components/atomic/DocsLink.vue
@ -3,7 +3,7 @@
    :href="`${docsUrl}`"
    :title="$t('documentation_for', { topic: topic })"
    target="_blank"
-    class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
+    class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer mt-1"
    ><Icon name="question" class="!w-4 !h-4"
  /></a>
 </template>
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@ -2,8 +2,10 @@
  <component
    :is="to ? 'router-link' : clickable ? 'button' : 'div'"
    :to="to"
-    class="w-full flex border rounded-md bg-white overflow-hidden p-4 border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400"
-    :class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable || to }"
+    class="w-full flex border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200"
+    :class="{
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+    }"
  >
    <slot />
  </component>
--- a/web/src/components/atomic/Warning.vue
+++ b/web/src/components/atomic/Warning.vue
@ -1,6 +1,6 @@
 <template>
  <div
-    class="text-sm text-gray-600 font-bold rounded-md border border-solid p-2 border-yellow-500 bg-yellow-200 dark:bg-yellow-600 dark:border-yellow-800 dark:text-light-100"
+    class="text-sm text-gray-700 font-bold rounded-md border border-solid p-2 border-wp-hint-warn-200 bg-wp-hint-warn-100"
  >
    ⚠ {{ text }}
  </div>
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@ -3,13 +3,13 @@
    <input
      :id="`checkbox-${id}`"
      type="checkbox"
-      class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
+      class="checkbox flex-shrink-0 relative border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-wp-control-ok-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
      :checked="innerValue"
      @click="innerValue = !innerValue"
    />
    <div class="flex flex-col ml-4">
-      <label v-if="label" class="cursor-pointer text-color" :for="`checkbox-${id}`">{{ label }}</label>
-      <span v-if="description" class="text-sm text-color-alt">{{ description }}</span>
+      <label v-if="label" class="cursor-pointer text-wp-text-100" :for="`checkbox-${id}`">{{ label }}</label>
+      <span v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</span>
    </div>
  </div>
 </template>
@ -82,7 +82,7 @@ export default defineComponent({
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
-  @apply dark:border-gray-300;
+  @apply dark:border-white;
 }

 .checkbox:checked::before {
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-color font-bold mb-2">
+    <div class="flex items-center text-wp-text-100 font-bold mb-2">
      <label v-bind="$attrs">{{ label }}</label>
      <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
    </div>
    <slot />
-    <div v-if="$slots['description']" class="ml-1 text-color-alt">
+    <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
      <slot name="description" />
    </div>
  </div>
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@ -3,14 +3,14 @@
    <input
      :id="`radio-${id}-${option.value}`"
      type="radio"
-      class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
+      class="radio relative flex-shrink-0 border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-full w-5 h-5 checked:bg-wp-control-ok-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
      :value="option.value"
      :checked="innerValue.includes(option.value)"
      @click="innerValue = option.value"
    />
    <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-color" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
-      <span v-if="option.description" class="text-sm text-color-alt">{{ option.description }}</span>
+      <label class="cursor-pointer text-wp-text-100" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <span v-if="option.description" class="text-sm text-wp-text-alt-100">{{ option.description }}</span>
    </div>
  </div>
 </template>
@ -81,7 +81,7 @@ export default defineComponent({
  background: white;
  transform: translate(-50%, -50%);
  opacity: 0;
-  @apply dark:bg-gray-300;
+  @apply dark:bg-white;
 }

 .radio:checked::before {
--- a/web/src/components/form/SelectField.vue
+++ b/web/src/components/form/SelectField.vue
@ -1,14 +1,10 @@
 <template>
  <select
    v-model="innerValue"
-    class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400 w-full border py-1 px-2 rounded-md"
-    :class="{
-      'text-color': innerValue === '',
-      'text-gray-900': innerValue !== '',
-    }"
+    class="bg-wp-control-neutral-100 text-wp-text-100 border-wp-control-neutral-200 w-full border py-1 px-2 rounded-md"
  >
    <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
-    <option v-for="option in options" :key="option.value" :value="option.value" class="text-color">
+    <option v-for="option in options" :key="option.value" :value="option.value" class="text-wp-text-100">
      {{ option.text }}
    </option>
  </select>
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@ -2,8 +2,8 @@
  <input
    v-if="lines === 1"
    v-model="innerValue"
-    class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
-    :class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
+    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    :class="{ 'opacity-50': disabled }"
    :disabled="disabled"
    :type="type"
    :placeholder="placeholder"
@ -11,8 +11,8 @@
  <textarea
    v-else
    v-model="innerValue"
-    class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
-    :class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
+    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    :class="{ 'opacity-50': disabled }"
    :disabled="disabled"
    :placeholder="placeholder"
    :rows="lines"
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@ -1,10 +1,12 @@
 <template>
-  <div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
+  <div
+    class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
+  >
    <component
      :is="collapsable ? 'button' : 'div'"
      v-if="title"
      type="button"
-      class="flex w-full font-bold gap-2 text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2"
+      class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
      @click="collapsed && (_collapsed = !_collapsed)"
    >
      <Icon
@ -22,7 +24,7 @@
      }"
      class="transition-height duration-150 overflow-hidden"
    >
-      <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
+      <div class="w-full p-4 text-wp-text-100">
        <slot />
      </div>
    </div>
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@ -1,8 +1,10 @@
 <template>
  <!-- Navbar -->
-  <nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
+  <nav
+    class="flex bg-wp-primary-200 dark:bg-wp-primary-300 text-neutral-content p-4 border-b border-wp-background-100 font-bold text-wp-primary-text-100"
+  >
    <!-- Left Links Box -->
-    <div class="flex text-white dark:text-gray-400 items-center space-x-2">
+    <div class="flex items-center space-x-2">
      <!-- Logo -->
      <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
        <img class="w-8 h-8" src="../../../assets/logo.svg?url" />
@ -19,7 +21,7 @@
      <a :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('api') }}</a>
    </div>
    <!-- Right Icons Box -->
-    <div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
+    <div class="flex ml-auto -m-1.5 items-center space-x-2">
      <!-- Dark Mode Toggle -->
      <IconButton
        :icon="darkMode ? 'dark' : 'light'"
--- a/web/src/components/layout/popups/DeployPipelinePopup.vue
+++ b/web/src/components/layout/popups/DeployPipelinePopup.vue
@ -2,12 +2,14 @@
  <Popup :open="open" @close="$emit('close')">
    <Panel v-if="!loading">
      <form @submit.prevent="triggerDeployPipeline">
-        <span class="text-xl text-color">{{ $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber }) }}</span>
+        <span class="text-xl text-wp-text-100">{{
+          $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
+        }}</span>
        <InputField :label="$t('repo.deploy_pipeline.enter_target')">
          <TextField v-model="payload.environment" required />
        </InputField>
        <InputField :label="$t('repo.deploy_pipeline.variables.title')">
-          <span class="text-sm text-color-alt mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
+          <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
          <div class="flex flex-col gap-2">
            <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
              <TextField :model-value="name" disabled />
--- a/web/src/components/layout/popups/ManualPipelinePopup.vue
+++ b/web/src/components/layout/popups/ManualPipelinePopup.vue
@ -2,12 +2,12 @@
  <Popup :open="open" @close="$emit('close')">
    <Panel v-if="!loading">
      <form @submit.prevent="triggerManualPipeline">
-        <span class="text-xl text-color">{{ $t('repo.manual_pipeline.title') }}</span>
+        <span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
        <InputField :label="$t('repo.manual_pipeline.select_branch')">
          <SelectField v-model="payload.branch" :options="branches" required />
        </InputField>
        <InputField :label="$t('repo.manual_pipeline.variables.title')">
-          <span class="text-sm text-color-alt mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
+          <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
          <div class="flex flex-col gap-2">
            <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
              <TextField :model-value="name" disabled />
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@ -1,5 +1,7 @@
 <template>
-  <header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700 text-color">
+  <header
+    class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
+  >
    <FluidContainer class="!py-0">
      <div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
        <div
@ -15,13 +17,13 @@
            class="flex-shrink-0 mr-2 <md:hidden"
            @click="goBack"
          />
-          <h1 class="flex text-xl min-w-0 text-color items-center gap-x-2">
+          <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
            <slot name="title" />
          </h1>
        </div>
        <TextField
          v-if="searchBoxPresent"
-          class="w-auto !bg-gray-100 !dark:bg-dark-gray-600 placeholder-gray-500 <md:w-full <md:order-3"
+          class="w-auto <md:w-full <md:order-3"
          :placeholder="$t('search')"
          :model-value="search"
          @update:model-value="(value: string) => $emit('update:search', value)"
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@ -3,9 +3,9 @@
    <button
      v-for="tab in tabs"
      :key="tab.id"
-      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
+      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
      :class="{
-        'border-gray-400 dark:border-gray-600': activeTab === tab.id,
+        'border-wp-text-100': activeTab === tab.id,
        'border-transparent': activeTab !== tab.id,
      }"
      type="button"
--- a/web/src/components/org/settings/OrgSecretsTab.vue
+++ b/web/src/components/org/settings/OrgSecretsTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('org.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
          {{ $t('org.settings.secrets.desc') }}
          <DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
        </p>
--- a/web/src/components/pipeline-feed/PipelineFeedItem.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedItem.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-if="pipeline" class="flex text-color w-full">
+  <div v-if="pipeline" class="flex text-wp-text-100 w-full">
    <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
    <div class="flex flex-col ml-4 min-w-0">
      <span class="underline">{{ repo?.owner }} / {{ repo?.name }}</span>
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@ -1,7 +1,7 @@
 <template>
  <aside
    v-if="isOpen"
-    class="flex flex-col z-50 overflow-y-auto items-center bg-white dark:bg-dark-gray-800 dark:border-dark-500"
+    class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
    :aria-label="$t('pipeline_feed')"
  >
    <router-link
@ -11,12 +11,12 @@
        name: 'repo-pipeline',
        params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
      }"
-      class="flex border-b py-4 px-2 w-full hover:bg-light-300 dark:hover:bg-dark-gray-900 dark:border-dark-gray-600 hover:shadow-sm"
+      class="flex border-b border-wp-background-400 py-4 px-2 w-full hover:bg-wp-background-300 dark:hover:bg-wp-background-400 hover:shadow-sm"
    >
      <PipelineFeedItem :pipeline="pipeline" />
    </router-link>

-    <span v-if="sortedPipelines.length === 0" class="text-color m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
+    <span v-if="sortedPipelines.length === 0" class="text-wp-text-100 m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
  </aside>
 </template>

--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@ -4,11 +4,11 @@
      <div
        class="h-full w-3"
        :class="{
-          'bg-yellow-400 dark:bg-dark-200': pipeline.status === 'pending',
-          'bg-red-400 dark:bg-red-800': pipelineStatusColors[pipeline.status] === 'red',
-          'bg-gray-600 dark:bg-gray-500': pipelineStatusColors[pipeline.status] === 'gray',
-          'bg-lime-400 dark:bg-lime-900': pipelineStatusColors[pipeline.status] === 'green',
-          'bg-blue-400 dark:bg-blue-900': pipelineStatusColors[pipeline.status] === 'blue',
+          'bg-wp-state-warn-100': pipeline.status === 'pending',
+          'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
+          'bg-wp-state-neutral-100': pipelineStatusColors[pipeline.status] === 'gray',
+          'bg-wp-state-ok-100': pipelineStatusColors[pipeline.status] === 'green',
+          'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
        }"
      />
      <div class="w-8 flex flex-wrap justify-between items-center h-full">
@ -19,18 +19,20 @@

    <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
      <div class="<md:hidden flex items-center flex-shrink-0">
-        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-color" />
+        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
        <img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
      </div>

      <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
-        <span class="text-color-alt <md:hidden">#{{ pipeline.number }}</span>
-        <span class="text-color-alt <md:hidden mx-2">-</span>
-        <span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
+        <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
+        <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+        <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+          message
+        }}</span>
      </div>

      <div
-        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-color"
+        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
      >
        <div class="flex space-x-2 items-center min-w-0">
          <Icon v-if="pipeline.event === 'pull_request'" name="pull_request" />
--- a/web/src/components/repo/pipeline/PipelineList.vue
+++ b/web/src/components/repo/pipeline/PipelineList.vue
@ -10,7 +10,7 @@
      :pipeline="pipeline"
    />
    <Panel v-if="pipelines.length === 0">
-      <span class="text-color">{{ $t('repo.pipeline.no_pipelines') }}</span>
+      <span class="text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
    </Panel>
  </div>
 </template>
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@ -1,7 +1,7 @@
 <template>
  <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
    <div
-      class="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-gray-600 dark:bg-dark-gray-800 text-gray-50"
+      class="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-wp-background-100 dark:bg-wp-background-200 text-wp-text-100"
      @click="$emit('update:step-id', null)"
    >
      <span>{{ step?.name }}</span>
@ -9,11 +9,11 @@
    </div>

    <div
-      class="flex flex-grow flex-col bg-white shadow dark:bg-dark-gray-700 md:m-2 md:mt-0 md:rounded-md overflow-hidden"
+      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-2 md:mt-0 !md:rounded-md overflow-hidden"
      @mouseover="showActions = true"
      @mouseleave="showActions = false"
    >
-      <div v-show="showActions" class="absolute top-0 right-0 z-40 mt-2 mr-4 hidden md:flex">
+      <div v-show="showActions" class="absolute top-0 right-0 z-40 mt-4 mr-6 hidden md:flex">
        <Button
          v-if="step?.end_time !== undefined"
          :is-loading="downloadInProgress"
@ -34,59 +34,57 @@
      <div
        v-show="hasLogs && loadedLogs"
        ref="consoleElement"
-        class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] auto-rows-min flex-grow p-2 overflow-x-hidden overflow-y-auto"
+        class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto"
      >
        <div v-for="line in log" :key="line.index" class="contents font-mono">
          <a
            :id="`L${line.number}`"
            :href="`#L${line.number}`"
-            class="text-gray-500 whitespace-nowrap select-none text-right pl-1 pr-2"
+            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
            :class="{
              'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
              'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
              underline: isSelected(line),
            }"
            >{{ line.number }}</a
          >
          <!-- eslint-disable vue/no-v-html -->
          <span
-            class="align-top text-color whitespace-pre-wrap break-words"
+            class="align-top whitespace-pre-wrap break-words text-sm"
            :class="{
-              'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
+              'bg-opacity-40 dark:bg-opacity-50 bg-10.168.64.121-600 dark:bg-red-800': line.type === 'error',
              'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
            }"
            v-html="line.text"
          />
          <!-- eslint-enable vue/no-v-html -->
          <span
-            class="text-gray-500 whitespace-nowrap select-none text-right pr-1"
+            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pr-1"
            :class="{
              'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
              'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
            }"
            >{{ formatTime(line.time) }}</span
          >
        </div>
      </div>

-      <div class="m-auto text-xl text-color">
-        <span v-if="step?.error" class="text-red-400">{{ step.error }}</span>
-        <span v-else-if="step?.state === 'skipped'" class="text-red-400">{{
-          $t('repo.pipeline.actions.canceled')
-        }}</span>
+      <div class="m-auto text-xl text-wp-text-alt-100">
+        <span v-if="step?.error">{{ step.error }}</span>
+        <span v-else-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
        <span v-else-if="!step?.start_time">{{ $t('repo.pipeline.step_not_started') }}</span>
        <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
      </div>

      <div
        v-if="step?.end_time !== undefined"
-        :class="step.exit_code == 0 ? 'dark:text-lime-400 text-lime-700' : 'dark:text-red-400 text-red-600'"
-        class="w-full bg-gray-200 dark:bg-dark-gray-800 text-md p-4"
+        class="flex items-center w-full bg-wp-code-100 text-md text-wp-text-alt-100 p-4 font-bold"
      >
-        {{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}
+        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
+        <span class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
      </div>
    </div>
  </div>
@ -104,6 +102,7 @@ import { useRoute } from 'vue-router';

 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import { Pipeline, Repo } from '~/lib/api/types';
--- a/web/src/components/repo/pipeline/PipelineRunningIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineRunningIcon.vue
@ -1,5 +1,5 @@
 <template>
-  <WoodpeckerIcon class="woodpecker h-20" />
+  <WoodpeckerIcon class="woodpecker h-15" />
 </template>

 <script lang="ts" setup>
@ -27,6 +27,6 @@ import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';

 .woodpecker ::v-deep(path) {
  animation: peck 1s ease infinite;
-  @apply fill-gray-600 dark:fill-gray-500;
+  @apply fill-wp-text-100;
 }
 </style>
--- a/web/src/components/repo/pipeline/PipelineStatusIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@ -6,10 +6,10 @@
    <Icon
      :name="`status-${status}`"
      :class="{
-        'text-red-400': pipelineStatusColors[status] === 'red',
-        'text-gray-400': pipelineStatusColors[status] === 'gray',
-        'text-lime-400': pipelineStatusColors[status] === 'green',
-        'text-blue-400': pipelineStatusColors[status] === 'blue',
+        'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
+        'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
+        'text-wp-state-ok-100': pipelineStatusColors[status] === 'green',
+        'text-wp-state-info-100': pipelineStatusColors[status] === 'blue',
      }"
    />
  </div>
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col w-full md:w-3/12 md:ml-2 text-gray-600 dark:text-gray-400 gap-2 pb-2">
+  <div class="flex flex-col w-full md:w-3/12 md:ml-2 text-wp-text-100 gap-2 pb-2">
    <div
-      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md bg-white shadow dark:bg-dark-gray-700"
+      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
    >
      <div class="flex space-x-1 items-center flex-shrink-0">
        <div class="flex items-center">
@ -17,7 +17,7 @@
        <Icon v-else-if="pipeline.event === 'tag'" name="tag" />
        <a
          v-else-if="pipeline.event === 'pull_request'"
-          class="flex items-center space-x-1 text-link min-w-0"
+          class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
          :href="pipeline.link_url"
          target="_blank"
        >
@ -31,7 +31,12 @@
          <Icon name="commit" />
          <span>{{ pipeline.commit.slice(0, 10) }}</span>
        </template>
-        <a v-else class="text-blue-700 dark:text-link flex items-center" :href="pipeline.link_url" target="_blank">
+        <a
+          v-else
+          class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
+          :href="pipeline.link_url"
+          target="_blank"
+        >
          <Icon name="commit" />
          <span>{{ pipeline.commit.slice(0, 10) }}</span>
        </a>
@ -47,7 +52,7 @@
        <div
          v-for="workflow in pipeline.workflows"
          :key="workflow.id"
-          class="p-2 md:rounded-md bg-white shadow dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
+          class="p-2 md:rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
        >
          <div class="flex flex-col gap-2">
            <div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">
@ -59,7 +64,7 @@
              v-if="pipeline.workflows && pipeline.workflows.length > 1"
              type="button"
              :title="workflow.name"
-              class="flex items-center gap-2 py-2 px-1 hover-effect rounded-md"
+              class="flex items-center gap-2 py-2 px-1 hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 rounded-md"
              @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
            >
              <Icon
@ -89,9 +94,9 @@
              :key="step.pid"
              type="button"
              :title="step.name"
-              class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect w-full"
+              class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 w-full"
              :class="{
-                'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': selectedStepId && selectedStepId === step.pid,
+                'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
                'mt-1':
                  (pipeline.workflows && pipeline.workflows.length > 1) ||
                  (workflow.children && step.pid !== workflow.children[0].pid),
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@ -1,12 +1,12 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.actions.actions') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.actions.actions') }}</h1>
    </div>

-    <div class="flex flex-col">
+    <div class="flex flex-wrap items-center">
      <Button
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
        color="blue"
        start-icon="heal"
        :is-loading="isRepairingRepo"
@ -16,7 +16,7 @@

      <Button
        v-if="isActive"
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
        color="blue"
        start-icon="turn-off"
        :is-loading="isDeactivatingRepo"
@ -25,7 +25,7 @@
      />
      <Button
        v-else
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
        color="blue"
        start-icon="turn-off"
        :is-loading="isActivatingRepo"
@ -34,7 +34,7 @@
      />

      <Button
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
        color="red"
        start-icon="trash"
        :is-loading="isDeletingRepo"
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@ -1,7 +1,7 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.badge.badge') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1>
      <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
        <img :src="badgeUrl" />
      </a>
@ -33,7 +33,7 @@

    <div v-if="badgeContent" class="flex flex-col space-y-4">
      <div>
-        <pre class="box">{{ badgeContent }}</pre>
+        <pre class="code-box">{{ badgeContent }}</pre>
      </div>
    </div>
  </Panel>
@ -129,10 +129,3 @@ export default defineComponent({
  },
 });
 </script>
-
-<style scoped>
-.box {
-  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
-  white-space: pre-wrap;
-}
-</style>
--- a/web/src/components/repo/settings/CronTab.vue
+++ b/web/src/components/repo/settings/CronTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('repo.settings.crons.crons') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.crons.crons') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
          {{ $t('repo.settings.crons.desc') }}
          <DocsLink :topic="$t('repo.settings.crons.crons')" url="docs/usage/crons" />
        </p>
@ -24,8 +24,12 @@
      />
    </div>

-    <div v-if="!selectedCron" class="space-y-4 text-color">
-      <ListItem v-for="cron in crons" :key="cron.id" class="items-center">
+    <div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="cron in crons"
+        :key="cron.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
        <span>{{ cron.name }}</span>
        <span v-if="cron.next_exec && cron.next_exec > 0" class="ml-auto">
          {{ $t('repo.settings.crons.next_exec') }}: {{ date.toLocaleString(new Date(cron.next_exec * 1000)) }}</span
@ -35,7 +39,7 @@
        <IconButton icon="edit" class="w-8 h-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
        <IconButton
          icon="trash"
-          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="w-8 h-8 hover:text-wp-control-error-100"
          :is-loading="isDeleting"
          :title="$t('repo.settings.crons.delete')"
          @click="deleteCron(cron)"
@ -67,11 +71,11 @@
        </InputField>

        <div v-if="isEditingCron" class="ml-auto mb-4">
-          <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-color">
+          <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-wp-text-100">
            {{ $t('repo.settings.crons.next_exec') }}:
            {{ date.toLocaleString(new Date(selectedCron.next_exec * 1000)) }}
          </span>
-          <span v-else class="text-color">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
+          <span v-else class="text-wp-text-100">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
        </div>

        <div class="flex gap-2">
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@ -1,7 +1,7 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.general.general') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.general.general') }}</h1>
    </div>

    <form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings">
@ -11,15 +11,12 @@
      >
        <TextField
          v-model="repoSettings.config_file"
-          class="max-w-124"
          :placeholder="$t('repo.settings.general.pipeline_path.default')"
        />
        <template #description>
-          <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-color-alt">
-            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">{{
-              $t('repo.settings.general.pipeline_path.desc_path_example')
-            }}</span>
-            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">/</span>
+          <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-wp-text-alt-100">
+            <span class="code-box-inline px-1">{{ $t('repo.settings.general.pipeline_path.desc_path_example') }}</span>
+            <span class="code-box-inline px-1">/</span>
          </i18n-t>
        </template>
      </InputField>
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('repo.settings.registries.creds') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.registries.creds') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
          {{ $t('repo.settings.registries.desc') }}
          <DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
        </p>
@ -24,8 +24,12 @@
      />
    </div>

-    <div v-if="!selectedRegistry" class="space-y-4 text-color">
-      <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
+    <div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="registry in registries"
+        :key="registry.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
        <span>{{ registry.address }}</span>
        <IconButton
          icon="edit"
@ -35,7 +39,7 @@
        />
        <IconButton
          icon="trash"
-          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="w-8 h-8 hover:text-wp-control-error-100"
          :is-loading="isDeleting"
          :title="$t('repo.settings.registries.delete')"
          @click="deleteRegistry(registry)"
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@ -1,9 +1,9 @@
 <template>
  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
      <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('repo.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
          {{ $t('repo.settings.secrets.desc') }}
          <DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
        </p>
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@ -1,15 +1,13 @@
 <template>
-  <div class="space-y-4 text-color">
-    <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
+  <div class="space-y-4 text-wp-text-100">
+    <ListItem
+      v-for="secret in secrets"
+      :key="secret.id"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+    >
      <span>{{ secret.name }}</span>
-      <div class="ml-auto">
-        <span
-          v-for="event in secret.event"
-          :key="event"
-          class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
-        >
-          {{ event }}
-        </span>
+      <div class="ml-auto space-x-2">
+        <Badge v-for="event in secret.event" :key="event" :label="event" />
      </div>
      <IconButton
        icon="edit"
@ -19,7 +17,7 @@
      />
      <IconButton
        icon="trash"
-        class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+        class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
        :is-loading="isDeleting"
        :title="$t('repo.settings.secrets.delete')"
        @click="deleteSecret(secret)"
--- a/web/src/compositions/useDarkMode.ts
+++ b/web/src/compositions/useDarkMode.ts
@ -7,11 +7,13 @@ watch(isDarkModeActive, (isActive) => {
  if (isActive) {
    document.documentElement.classList.remove('light');
    document.documentElement.classList.add('dark');
-    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2e323e'); // dark-gray-900 (see windi.config.ts)
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2A2E3A'); // internal-wp-secondary-600 (see windi.config.ts)
  } else {
    document.documentElement.classList.remove('dark');
    document.documentElement.classList.add('light');
-    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#65a30d'); // lime-600
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#369943'); // internal-wp-primary-400
  }
 });

--- a/web/src/style.css
+++ b/web/src/style.css
@ -1,3 +1,100 @@
+:root,
+:root[data-theme='light'] {
+  --wp-background-100: theme('colors.white');
+  --wp-background-200: theme('colors.gray.100');
+  --wp-background-300: theme('colors.gray.200');
+  --wp-background-400: theme('colors.gray.300');
+
+  --wp-text-100: theme('colors.gray.600');
+  --wp-text-200: theme('colors.gray.700');
+  --wp-text-alt-100: theme('colors.gray.500');
+
+  --wp-primary-100: theme('colors.int-wp-primary.300');
+  --wp-primary-200: theme('colors.int-wp-primary.400');
+  --wp-primary-300: theme('colors.int-wp-primary.500');
+  --wp-primary-text-100: theme('colors.white');
+
+  --wp-control-neutral-100: theme('colors.white');
+  --wp-control-neutral-200: theme('colors.gray.300');
+  --wp-control-neutral-300: theme('colors.gray.400');
+
+  --wp-control-info-100: theme('colors.int-wp-control-info.100');
+  --wp-control-info-200: theme('colors.int-wp-control-info.200');
+  --wp-control-info-300: theme('colors.int-wp-control-info.300');
+
+  --wp-control-ok-100: theme('colors.int-wp-control-ok.100');
+  --wp-control-ok-200: theme('colors.int-wp-control-ok.200');
+  --wp-control-ok-300: theme('colors.int-wp-control-ok.300');
+
+  --wp-control-error-100: theme('colors.int-wp-control-error.100');
+  --wp-control-error-200: theme('colors.int-wp-control-error.200');
+  --wp-control-error-300: theme('colors.int-wp-control-error.300');
+
+  --wp-state-error-100: theme('colors.int-wp-state-error.100');
+  --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
+  --wp-state-ok-100: theme('colors.int-wp-state-ok.100');
+  --wp-state-info-100: theme('colors.int-wp-state-info.100');
+  --wp-state-warn-100: theme('colors.int-wp-state-warn.100');
+
+  --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
+  --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
+
+  --wp-code-100: theme('colors.int-wp-secondary.300');
+  --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-text-100: theme('colors.gray.200');
+
+  --wp-link-100: theme('colors.blue.600');
+  --wp-link-200: theme('colors.blue.700');
+}
+
+:root[data-theme='dark'] {
+  --wp-background-100: theme('colors.int-wp-secondary.300');
+  --wp-background-200: theme('colors.int-wp-secondary.400');
+  --wp-background-300: theme('colors.int-wp-secondary.500');
+  --wp-background-400: theme('colors.int-wp-secondary.600');
+
+  --wp-text-100: theme('colors.gray.300');
+  --wp-text-200: theme('colors.gray.200');
+  --wp-text-alt-100: theme('colors.gray.400');
+
+  --wp-primary-100: theme('colors.int-wp-secondary.300');
+  --wp-primary-200: theme('colors.int-wp-secondary.400');
+  --wp-primary-300: theme('colors.int-wp-secondary.600');
+  --wp-primary-text-100: theme('colors.gray.300');
+
+  --wp-control-neutral-100: theme('colors.int-wp-secondary.300');
+  --wp-control-neutral-200: theme('colors.int-wp-secondary.600');
+  --wp-control-neutral-300: theme('colors.int-wp-secondary.700');
+
+  --wp-control-info-100: theme('colors.int-wp-control-info-dark.100');
+  --wp-control-info-200: theme('colors.int-wp-control-info-dark.200');
+  --wp-control-info-300: theme('colors.int-wp-control-info-dark.300');
+
+  --wp-control-ok-100: theme('colors.int-wp-control-ok-dark.100');
+  --wp-control-ok-200: theme('colors.int-wp-control-ok-dark.200');
+  --wp-control-ok-300: theme('colors.int-wp-control-ok-dark.300');
+
+  --wp-control-error-100: theme('colors.int-wp-control-error-dark.100');
+  --wp-control-error-200: theme('colors.int-wp-control-error-dark.200');
+  --wp-control-error-300: theme('colors.int-wp-control-error-dark.300');
+
+  --wp-state-error-100: theme('colors.int-wp-state-error-dark.100');
+  --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
+  --wp-state-ok-100: theme('colors.int-wp-state-ok-dark.100');
+  --wp-state-info-100: theme('colors.int-wp-state-info-dark.100');
+  --wp-state-warn-100: theme('colors.int-wp-state-warn-dark.100');
+
+  --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
+  --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
+
+  --wp-code-100: theme('colors.int-wp-secondary.700');
+  --wp-code-200: theme('colors.int-wp-secondary.800');
+  --wp-code-text-100: theme('colors.gray.300');
+
+  --wp-link-100: theme('colors.blue.400');
+  --wp-link-200: theme('colors.blue.500');
+}
+
 html,
 body,
 #app {
@ -14,11 +111,11 @@ body,
 }

 .vue-notification.success {
-  @apply bg-lime-600 border-l-lime-700;
+  @apply !bg-wp-control-ok-100 !border-l-wp-control-ok-300;
 }

 .vue-notification.error {
-  @apply bg-red-600 border-l-red-700;
+  @apply !bg-wp-control-error-100 !border-l-wp-control-error-300;
 }

 *::-webkit-scrollbar {
@ -43,10 +140,11 @@ body,
  @apply bg-transparent;
 }

-.text-color {
-  @apply text-gray-600 dark:text-gray-400 placeholder-gray-400 dark:placeholder-gray-500;
+.code-box {
+  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  white-space: pre-wrap;
 }

-.text-color-alt {
-  @apply text-gray-500 dark:text-gray-500;
+.code-box-inline {
+  @apply bg-wp-code-200 rounded-md text-wp-code-text-100;
 }
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@ -1,17 +1,21 @@
 <template>
  <main class="flex flex-col w-full h-full justify-center items-center">
-    <div v-if="errorMessage" class="bg-red-400 text-white dark:text-gray-500 p-4 rounded-md text-lg">
+    <!-- TODO: Should use vue notifications. -->
+    <div
+      v-if="errorMessage"
+      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
+    >
      {{ errorMessage }}
    </div>

    <div
-      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700 dark:border-dark-200 md:flex-row md:w-3xl md:h-sm justify-center"
+      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:border-wp-background-400 md:bg-wp-background-100 md:dark:bg-wp-background-200 md:flex-row md:w-3xl md:h-sm justify-center"
    >
-      <div class="flex md:bg-lime-500 md:dark:bg-lime-900 md:w-3/5 justify-center items-center">
+      <div class="flex md:bg-wp-primary-200 md:dark:bg-wp-primary-300 md:w-3/5 justify-center items-center">
        <img class="w-48 h-48" src="../assets/logo.svg?url" />
      </div>
      <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
-        <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
+        <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
        <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
      </div>
    </div>
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@ -11,8 +11,8 @@
        class="items-center"
        :to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
      >
-        <span class="text-color">{{ repo.full_name }}</span>
-        <span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>
+        <span class="text-wp-text-100">{{ repo.full_name }}</span>
+        <span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
        <Button
          v-if="!repo.active"
          class="ml-auto"
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@ -10,7 +10,7 @@

    <div class="space-y-4">
      <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
-        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
      </ListItem>
    </div>
  </Scaffold>
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@ -7,31 +7,38 @@

      <div>
        <div class="flex items-center mb-2">
-          <h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.token') }}</h2>
          <Button class="ml-4" :text="$t('user.reset_token')" @click="resetToken" />
        </div>
-        <pre class="cli-box">{{ token }}</pre>
+        <pre class="code-box">{{ token }}</pre>
      </div>

      <div>
-        <h2 class="text-lg text-color">{{ $t('user.shell_setup') }}</h2>
-        <pre class="cli-box">{{ usageWithShell }}</pre>
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.shell_setup') }}</h2>
+        <pre class="code-box">{{ usageWithShell }}</pre>
      </div>

      <div>
        <div class="flex items-center">
-          <h2 class="text-lg text-color">{{ $t('user.api_usage') }}</h2>
-          <a :href="`${address}/swagger/index.html`" target="_blank" class="ml-4 text-link">Swagger UI</a>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.api_usage') }}</h2>
+          <a
+            :href="`${address}/swagger/index.html`"
+            target="_blank"
+            class="ml-4 text-wp-link-100 hover:text-wp-link-200"
+            >Swagger UI</a
+          >
        </div>
-        <pre class="cli-box">{{ usageWithCurl }}</pre>
+        <pre class="code-box">{{ usageWithCurl }}</pre>
      </div>

      <div>
        <div class="flex items-center">
-          <h2 class="text-lg text-color">{{ $t('user.cli_usage') }}</h2>
-          <a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.cli_usage') }}</h2>
+          <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
+            $t('user.dl_cli')
+          }}</a>
        </div>
-        <pre class="cli-box">{{ usageWithCli }}</pre>
+        <pre class="code-box">{{ usageWithCli }}</pre>
      </div>
    </div>
  </Scaffold>
@ -102,10 +109,3 @@ const resetToken = async () => {
  window.location.href = `${address}/logout`;
 };
 </script>
-
-<style scoped>
-.cli-box {
-  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
-  white-space: pre-wrap;
-}
-</style>
--- a/web/src/views/org/OrgRepos.vue
+++ b/web/src/views/org/OrgRepos.vue
@ -15,11 +15,11 @@

    <div class="space-y-4">
      <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
-        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
      </ListItem>
    </div>
    <div v-if="(searchedRepos || []).length <= 0" class="text-center">
-      <span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
+      <span class="text-wp-text-100 m-auto">{{ $t('repo.user_none') }}</span>
    </div>
  </Scaffold>
 </template>
--- a/web/src/views/repo/RepoBranch.vue
+++ b/web/src/views/repo/RepoBranch.vue
@ -1,6 +1,6 @@
 <template>
  <div class="flex w-full mb-4 justify-center">
-    <span class="text-color text-xl">{{ $t('repo.pipeline.pipelines_for', { branch }) }}</span>
+    <span class="text-wp-text-100 text-xl">{{ $t('repo.pipeline.pipelines_for', { branch }) }}</span>
  </div>
  <PipelineList :pipelines="pipelines" :repo="repo" />
 </template>
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@ -3,7 +3,7 @@
    <ListItem
      v-for="branch in branches"
      :key="branch"
-      class="text-color"
+      class="text-wp-text-100"
      :to="{ name: 'repo-branch', params: { branch } }"
    >
      {{ branch }}
--- a/web/src/views/repo/RepoPullRequest.vue
+++ b/web/src/views/repo/RepoPullRequest.vue
@ -1,6 +1,6 @@
 <template>
  <div class="flex w-full mb-4 justify-center">
-    <span class="text-color text-xl">{{ $t('repo.pipeline.pipelines_for_pr', { index: pullRequest }) }}</span>
+    <span class="text-wp-text-100 text-xl">{{ $t('repo.pipeline.pipelines_for_pr', { index: pullRequest }) }}</span>
  </div>
  <PipelineList :pipelines="pipelines" :repo="repo" />
 </template>
--- a/web/src/views/repo/RepoPullRequests.vue
+++ b/web/src/views/repo/RepoPullRequests.vue
@ -3,12 +3,12 @@
    <ListItem
      v-for="pullRequest in pullRequests"
      :key="pullRequest.index"
-      class="text-color"
+      class="text-wp-text-100"
      :to="{ name: 'repo-pull-request', params: { pullRequest: pullRequest.index } }"
    >
-      <span class="text-color-alt <md:hidden">#{{ pullRequest.index }}</span>
-      <span class="text-color-alt <md:hidden mx-2">-</span>
-      <span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+      <span class="text-wp-text-alt-100 <md:hidden">#{{ pullRequest.index }}</span>
+      <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+      <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
        pullRequest.title
      }}</span>
    </ListItem>
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@ -10,13 +10,13 @@

      <div class="flex flex-grow relative">
        <div v-if="error" class="flex flex-col p-4">
-          <span class="text-red-400 font-bold text-xl mb-2">{{ $t('repo.pipeline.execution_error') }}</span>
-          <span class="text-red-400">{{ error }}</span>
+          <span class="text-wp-state-error-100 font-bold text-xl mb-2">{{ $t('repo.pipeline.execution_error') }}</span>
+          <span class="text-wp-state-error-100">{{ error }}</span>
        </div>

        <div v-else-if="pipeline.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center p-2">
-          <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
-          <p class="text-xl text-color mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
+          <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
+          <p class="text-xl text-wp-text-100 mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
          <div v-if="repoPermissions.push" class="flex space-x-4">
            <Button
              color="green"
@ -34,8 +34,8 @@
        </div>

        <div v-else-if="pipeline.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
-          <p class="text-xl text-color">{{ $t('repo.pipeline.protected.declined') }}</p>
+          <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
+          <p class="text-xl text-wp-text-100">{{ $t('repo.pipeline.protected.declined') }}</p>
        </div>

        <PipelineLog
--- a/web/src/views/repo/pipeline/PipelineChangedFiles.vue
+++ b/web/src/views/repo/pipeline/PipelineChangedFiles.vue
@ -1,7 +1,7 @@
 <template>
  <Panel v-if="pipeline">
    <div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
-      <span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
+      <span class="text-wp-text-100">{{ $t('repo.pipeline.no_files') }}</span>
    </div>
    <div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
      <div>- {{ file }}</div>
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@ -46,7 +46,7 @@
      </template>

      <template #tabActions>
-        <div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
+        <div class="flex justify-between gap-x-4 text-wp-text-100 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
          <div class="flex space-x-1 items-center flex-shrink-0">
            <Icon name="since" />
            <Tooltip>
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@ -1,20 +1,204 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import tinycolor from 'tinycolor2';
 import colors from 'windicss/colors';
 import { defineConfig } from 'windicss/helpers';
 import typography from 'windicss/plugin/typography';

+const customColors = {
+  'wp-primary': {
+    100: '#8AD97F',
+    200: '#68C464',
+    300: '#4CAF50',
+    400: '#369943',
+    500: '#248438',
+    600: '#166E30',
+  },
+  'wp-secondary': {
+    200: '#434858',
+    300: '#383C4A',
+    400: '#303440',
+    500: '#2D313D',
+    600: '#2A2E3A',
+    700: '#222631',
+    800: '#1B1F28',
+  },
+};
+
 export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
-        greenish: '#4caf50',
-        link: colors.blue[400],
-        'dark-gray': {
-          600: '#383c4a',
-          700: '#303440',
-          800: '#2a2e3a',
-          900: '#2e323e',
+        // Internals to keep a single source for color definitions
+        'int-wp-primary': {
+          100: customColors['wp-primary'][100],
+          200: customColors['wp-primary'][200],
+          300: customColors['wp-primary'][300],
+          400: customColors['wp-primary'][400],
+          500: customColors['wp-primary'][500],
+          600: customColors['wp-primary'][600],
+        },
+        'int-wp-secondary': {
+          200: customColors['wp-secondary'][200],
+          300: customColors['wp-secondary'][300],
+          400: customColors['wp-secondary'][400],
+          500: customColors['wp-secondary'][500],
+          600: customColors['wp-secondary'][600],
+          700: customColors['wp-secondary'][700],
+          800: customColors['wp-secondary'][800],
+        },
+
+        'int-wp-control-neutral': {
+          100: colors.white,
+          200: colors.gray[300],
+          300: colors.gray[400],
+        },
+        'int-wp-control-info': {
+          100: colors.cyan[700],
+          200: colors.cyan[800],
+          300: colors.cyan[900],
+        },
+        'int-wp-control-info-dark': {
+          100: tinycolor(colors.cyan[700]).desaturate(30).toString(),
+          200: tinycolor(colors.cyan[800]).desaturate(30).toString(),
+          300: tinycolor(colors.cyan[900]).desaturate(30).toString(),
+        },
+        'int-wp-control-ok': {
+          100: customColors['wp-primary'][400],
+          200: customColors['wp-primary'][500],
+          300: customColors['wp-primary'][600],
+        },
+        'int-wp-control-ok-dark': {
+          100: tinycolor(customColors['wp-primary'][400]).desaturate(10).toString(),
+          200: tinycolor(customColors['wp-primary'][500]).desaturate(10).toString(),
+          300: tinycolor(customColors['wp-primary'][600]).desaturate(10).toString(),
+        },
+        'int-wp-control-error': {
+          100: colors.red[700],
+          200: colors.red[800],
+          300: colors.red[900],
+        },
+        'int-wp-control-error-dark': {
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+          200: tinycolor(colors.red[800]).desaturate(25).toString(),
+          300: tinycolor(colors.red[900]).desaturate(25).toString(),
+        },
+
+        'int-wp-state-error': {
+          100: colors.red[700],
+        },
+        'int-wp-state-error-dark': {
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+        },
+        'int-wp-state-neutral': {
+          100: colors.gray[600],
+        },
+        'int-wp-state-ok': {
+          100: colors.green[600],
+        },
+        'int-wp-state-ok-dark': {
+          100: tinycolor(colors.green[600]).desaturate(20).toString(),
+        },
+        'int-wp-state-info': {
+          100: colors.cyan[600],
+        },
+        'int-wp-state-info-dark': {
+          100: tinycolor(colors.cyan[600]).desaturate(20).toString(),
+        },
+        'int-wp-state-warn': {
+          100: colors.yellow[400],
+        },
+        'int-wp-state-warn-dark': {
+          100: tinycolor(colors.yellow[400]).desaturate(20).toString(),
+        },
+
+        'int-wp-hint-warn': {
+          100: colors.yellow[100],
+          200: colors.yellow[300],
+        },
+        'int-wp-hint-warn-dark': {
+          100: tinycolor(colors.yellow[300]).desaturate(60).toString(),
+          200: tinycolor(colors.yellow[500]).desaturate(60).toString(),
+        },
+
+        // Theme colors
+        'wp-background': {
+          100: 'var(--wp-background-100)',
+          200: 'var(--wp-background-200)',
+          300: 'var(--wp-background-300)',
+          400: 'var(--wp-background-400)',
+        },
+
+        'wp-text': {
+          100: 'var(--wp-text-100)',
+          200: 'var(--wp-text-200)',
+        },
+        'wp-text-alt': {
+          100: 'var(--wp-text-alt-100)',
+        },
+
+        'wp-primary': {
+          100: 'var(--wp-primary-100)',
+          200: 'var(--wp-primary-200)',
+          300: 'var(--wp-primary-300)',
+        },
+        'wp-primary-text': {
+          100: 'var(--wp-primary-text-100)',
+        },
+
+        'wp-control-neutral': {
+          100: 'var(--wp-control-neutral-100)',
+          200: 'var(--wp-control-neutral-200)',
+          300: 'var(--wp-control-neutral-300)',
+        },
+        'wp-control-info': {
+          100: 'var(--wp-control-info-100)',
+          200: 'var(--wp-control-info-200)',
+          300: 'var(--wp-control-info-300)',
+        },
+        'wp-control-ok': {
+          100: 'var(--wp-control-ok-100)',
+          200: 'var(--wp-control-ok-200)',
+          300: 'var(--wp-control-ok-300)',
+        },
+        'wp-control-error': {
+          100: 'var(--wp-control-error-100)',
+          200: 'var(--wp-control-error-200)',
+          300: 'var(--wp-control-error-300)',
+        },
+
+        'wp-state-error': {
+          100: 'var(--wp-state-error-100)',
+        },
+        'wp-state-neutral': {
+          100: 'var(--wp-state-neutral-100)',
+        },
+        'wp-state-ok': {
+          100: 'var(--wp-state-ok-100)',
+        },
+        'wp-state-info': {
+          100: 'var(--wp-state-info-100)',
+        },
+        'wp-state-warn': {
+          100: 'var(--wp-state-warn-100)',
+        },
+
+        'wp-hint-warn': {
+          100: 'var(--wp-hint-warn-100)',
+          200: 'var(--wp-hint-warn-200)',
+        },
+
+        'wp-code': {
+          100: 'var(--wp-code-100)',
+          200: 'var(--wp-code-200)',
+        },
+        'wp-code-text': {
+          100: 'var(--wp-code-text-100)',
+        },
+
+        'wp-link': {
+          100: 'var(--wp-link-100)',
+          200: 'var(--wp-link-200)',
        },
      },
      transitionProperty: {
@ -39,5 +223,5 @@ export default defineConfig({
    'hover-effect':
      'hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100',
  },
-  plugins: [typography],
+  plugins: [typography()],
 });