Locomotion

CSS

:root {
  --locomotion: #988171;
  --locomotion-rgb: 152 129 113;
  --locomotion-oklch: oklch(0.62 0.037 56.8);
}

.element {
  color: var(--locomotion);
  background-color: hsl(25 16% 52%);
  border-color: oklch(0.62 0.037 56.8);
}

Tailwind CSS v4

@theme {
  --color-locomotion: #988171;
  --color-locomotion-50: #fef3eb;
  --color-locomotion-100: #f2e5dc;
  --color-locomotion-200: #e1d1c5;
  --color-locomotion-300: #c6b3a5;
  --color-locomotion-400: #b0998a;
  --color-locomotion-500: #9a806f;
  --color-locomotion-600: #826d5e;
  --color-locomotion-700: #68574b;
  --color-locomotion-800: #4d3f36;
  --color-locomotion-900: #352c25;
  --color-locomotion-950: #201914;
}

SCSS

$locomotion: #988171;
$locomotion-rgb: 152, 129, 113;
$locomotion-light: mix(#fff, $locomotion, 20%);
$locomotion-dark: mix(#000, $locomotion, 20%);

.element {
  color: $locomotion;
  box-shadow: 0 0 0 2px rgba($locomotion, 0.35);
}