Symmetry

CSS

:root {
  --symmetry: #8fa0a7;
  --symmetry-rgb: 143 160 167;
  --symmetry-oklch: oklch(0.695 0.022 224.4);
}

.element {
  color: var(--symmetry);
  background-color: hsl(198 12% 61%);
  border-color: oklch(0.695 0.022 224.4);
}

Tailwind CSS v4

@theme {
  --color-symmetry: #8fa0a7;
  --color-symmetry-50: #eff7fa;
  --color-symmetry-100: #e1e9ed;
  --color-symmetry-200: #cbd6db;
  --color-symmetry-300: #acbac0;
  --color-symmetry-400: #91a1a8;
  --color-symmetry-500: #778a91;
  --color-symmetry-600: #65747b;
  --color-symmetry-700: #515d62;
  --color-symmetry-800: #3a4448;
  --color-symmetry-900: #282f32;
  --color-symmetry-950: #161c1e;
}

SCSS

$symmetry: #8fa0a7;
$symmetry-rgb: 143, 160, 167;
$symmetry-light: mix(#fff, $symmetry, 20%);
$symmetry-dark: mix(#000, $symmetry, 20%);

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