CSS Variables as Design Tokens: CSS variables centralize core design values such as colors, spacing, typography, and radii, allowing consistent reuse across the UI. They act as a single source of truth for the design system.

marcopontili.com_design-tokens.scss

:root {
  // ///////////////////////////////////////////////////////
  // Color Palettes
  // ///////////////////////////////////////////////////////
  //
  // OKLCH color converter: https://oklch.com
  //
  // Lighten a color using OKLCH color-mix
  // Example: Mix 95% --orange-600 with 5% white
  // p { color: color-mix(in oklch, var(--orange-600) 95%, white 5%); }

  // Darken a color using OKLCH color-mix
  // Example: Mix 95% --orange-600 with 5% black
  // p { color: color-mix(in oklch, var(--orange-600) 95%, black 5%); }
  //
  // Grayscale
  --white: oklch(1 0 0); // #ffffff
  --gray-50: oklch(0.96 0.002 260); // #f0f0f0
  --gray-100: oklch(0.98 0.001 260); // #fbfbfb
  --gray-200: oklch(0.93 0.003 260); // #e9e9e9
  --gray-300: oklch(0.79 0.003 260); // #bebebe
  --gray-400: oklch(0.69 0.003 260); // #999999
  --gray-500: oklch(0.53 0.003 260); // #666666
  --gray-600: oklch(0.47 0.004 260); // #555353
  --gray-700: oklch(0.4 0.004 260); // #444444
  --gray-800: oklch(0.35 0.003 260); // #333333
  --gray-900: oklch(0.28 0.003 260); // #222222
  --gray-950: oklch(0.19 0.002 260); // #111111
  --black: oklch(0 0 0); // #000000

  // Yellow Scale
  --yellow-100: oklch(0.93 0.07 93); // #faebb4
  --yellow-200: oklch(0.9 0.08 92); // #f8df96
  --yellow-300: oklch(0.88 0.1 90); // #f9db82
  --yellow-400: oklch(0.87 0.1 88); // #fad66d
  --yellow-500: oklch(0.85 0.12 85); // #fbd259
  --yellow-600: oklch(0.84 0.14 86); // #fcce44
  --yellow-700: oklch(0.83 0.15 85); // #fdc930
  --yellow-800: oklch(0.82 0.16 83); // #fec51b
  --yellow-900: oklch(0.8 0.13 82); // #ffc107
  --yellow-950: oklch(0.79 0.15 70); // #ffa500

  // Orange scale
  --orange-100: oklch(0.89 0.06 40); // #ffcebd
  --orange-200: oklch(0.83 0.08 40); // #f5b6a0
  --orange-300: oklch(0.77 0.1 40); // #eb9e84
  --orange-400: oklch(0.71 0.12 40); // #e18667
  --orange-500: oklch(0.65 0.15 40); // #d96a42
  --orange-600: oklch(0.64 0.19 40); // #e65719
  --orange-650: oklch(0.54 0.15 40); // #b4481e
  --orange-700: oklch(0.48 0.15 40); // #9f3501
  --orange-800: oklch(0.45 0.15 40); // #952c00
  --orange-900: oklch(0.43 0.15 40); // #8f2500

  // CLRS Palette
  // A nicer color palette for the web.
  // https://clrs.cc
  --cl-white: oklch(1 0 0); // #ffffff
  --cl-yellow: oklch(0.9 0.14 95); // #ffdc00
  --cl-lime: oklch(0.87 0.15 140); // #01ff70
  --cl-silver: oklch(0.86 0.01 260); // #dddddd
  --cl-aqua: oklch(0.81 0.12 230); // #7fdbff
  --cl-orange: oklch(0.75 0.14 55); // #ff851b
  --cl-fuchsia: oklch(0.72 0.27 330); // #f012be
  --cl-green: oklch(0.7 0.13 145); // #2ecc40
  --cl-gray: oklch(0.7 0.01 260); // #aaaaaa
  --cl-teal: oklch(0.65 0.12 200); // #39cccc
  --cl-red: oklch(0.64 0.23 28); // #ff4136
  --cl-purple: oklch(0.53 0.25 315); // #b10dc9
  --cl-blue: oklch(0.52 0.17 255); // #0074d9
  --cl-olive: oklch(0.52 0.1 150); // #3d9970
  --cl-maroon: oklch(0.34 0.12 10); // #85144b
  --cl-navy: oklch(0.22 0.04 255); // #001f3f
  --cl-black: oklch(0.19 0.002 260); // #111111
}

// Design tokens resources:
// - https://designtokens.fyi/
// - https://m3.material.io/foundations/design-tokens/overview
// - https://thedesignsystem.guide/knowledge-base
:root,
[data-theme='light'] {
  // ///////////////////////////////////////////////////////
  // Color Tokens
  // ///////////////////////////////////////////////////////
  --c-brand-base: var(--orange-650);
  --c-brand-light: var(--orange-600);
  --c-body-text: var(--gray-800);
  --c-body-bg: var(--gray-100);
  --c-text-link: var(--orange-700);
  --c-warning: var(--yellow-500);
  --c-alert: var(--cl-red);
  --c-focus-visible: var(--yellow-950);
  --c-skip-link-text: var(--white);
  --c-skip-link-bg: var(--cl-blue);

  // ///////////////////////////////////////////////////////
  // Texts Tokens
  // ///////////////////////////////////////////////////////
  //
  // Font Families
  --font-sans-serif:
    Cabin, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-monospace:
    'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif:
    Georgia, Times, 'Times New Roman', serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-h1:
    Catamaran, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  // Fluid Typography
  --body-font-size-flex: calc(1.7rem + 3 * ((100vw - 320px) / 680));
  --body-font-size-flex-max: 2rem;
  // Font Weight
  --font-weight-h1: 800;
  // Font Size in %
  --fs-root-rem: 62.5%;
  --fs-xxs: 80%;
  --fs-xs: 85%;
  --fs-s: 90%;
  --fs-base: 100%;
  --fs-l: 110%;
  --fs-xl: 120%;
  --fs-xxl: 125%;
  --fs-xxxl: 130%;
  --fs-xxxxl: 135%;
  // Custom Font Sizes
  --fs-monospace: 1.5rem;
  // General Headings
  --fs-h1: 3.75rem;
  --fs-h1-l: 4.25rem;
  --fs-h2: 3rem;
  --fs-h2-l: 3.5rem;
  --fs-h3: 2.6rem;
  --fs-h3-l: 3rem;
  --fs-h4-h5-h6: 2rem;
  // Custom Headings
  --fs-title-second: 3rem;
  --fs-title-second-l: 3.5rem;
  --fs-title-third: 2.6rem;
  // Responsive Headlines
  --fs-headline-s: clamp(3.5rem, 6vw, 5rem);
  --fs-headline: clamp(3.5rem, 6vw, 6rem);
  --fs-headline-home: clamp(3.75rem, 6.5vw, 7rem);
  --fs-display: clamp(3rem, 6vw, 3.5rem);
  // Line Height
  --line-height-base: 1.5;
  // Characters lenght control
  --t-max-lenght-xxs: 40ch;
  --t-max-lenght-xs: 50ch;
  --t-max-lenght-s: 53ch;
  --t-max-lenght-base: 55ch;
  --t-max-lenght-l: 60ch;

  // ///////////////////////////////////////////////////////
  // Text Decoration Tokens
  // ///////////////////////////////////////////////////////
  --text-deco-offset-base: 0.4rem;
  --text-deco-offset-l: 0.6rem;
  --text-deco-thickness-s: 0.05rem;
  --text-deco-thickness-base: 0.15rem;

  // ///////////////////////////////////////////////////////
  // Border Radius Tokens
  // ///////////////////////////////////////////////////////
  --b-rad-s: 0.3rem;
  --b-rad-base: 0.6rem;
  --b-rad-search: 3rem;
  --b-rad-rounded: 50%;
  --b-rad-max: 9999px;

  // ///////////////////////////////////////////////////////
  // Forms Tokens
  // ///////////////////////////////////////////////////////
  --out-offset: 0.3rem;
  --out-offset-search: -0.25rem;
  --fo-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");

  // ///////////////////////////////////////////////////////
  // Spacing Tokens
  // ///////////////////////////////////////////////////////
  // Grid System
  --grid-gap-s: 2.1rem;
  --grid-gap: 4.2rem;
  --grid-max-width: 129.5rem;
  // Foundation Elements
  --wrapper-max-width: 138rem;
  --width-tiny-max-width: 60rem;
  --width-mid-max-width: 100rem;
  --width-narrow-max-width: 85rem;
  // Carousel
  --carousel-max-width-base: 90rem;
  --carousel-max-width-l: 110rem;
  // Margins and Paddings
  --space-10: 0.1rem;
  --space-15: 0.15rem;
  --space-20: 0.2rem;
  --space-25: 0.25rem;
  --space-30: 0.3rem;
  --space-35: 0.35rem;
  --space-40: 0.4rem;
  --space-45: 0.45rem;
  --space-50: 0.5rem;
  --space-75: 0.75rem;
  --space-100: 1rem;
  --space-125: 1.25rem;
  --space-150: 1.5rem;
  --space-175: 1.75rem;
  --space-200: 2rem;
  --space-250: 2.5rem;
  --space-300: 3rem;
  --space-350: 3.5rem;
  --space-400: 4rem;
  --space-450: 4.5rem;
  --space-500: 5rem;
  --space-550: 5.5rem;
  --space-600: 6rem;
  --space-650: 6.5rem;
  --space-700: 7rem;
  --space-750: 7.5rem;
  --space-800: 8rem;
  --space-850: 8.5rem;
  --space-900: 9rem;
  --space-950: 9.5rem;
  --space-1000: 10rem;
  --space-1050: 10.5rem;
  --space-1100: 11rem;
  --space-1150: 11.5rem;
  --space-1200: 12rem;

  // ///////////////////////////////////////////////////////
  // Transitions & Animations Tokens
  // ///////////////////////////////////////////////////////
  --trans-duration-slow: 0.25s;
  --trans-duration-base: 0.2s;
  --trans-style: ease-out;

  // ///////////////////////////////////////////////////////
  // Project Pages Tokens
  // ///////////////////////////////////////////////////////
  --header-bg: var(--gray-200);
  --header-bg-lancs: oklch(0.4927 0.1918 26.44);
  --header-bg-nestle: oklch(0.4054 0.0416 60.53);
  --header-bg-spotzer: oklch(0.6269 0.102 171.09);
  --header-bg-ubiter: oklch(0.461 0.0914 229.54);
  --header-bg-tim: oklch(0.4043 0.1382 256.2);
  --header-bg-html: oklch(0.5529 0.0888 239.82);
  --header-bg-bullframe: oklch(0.5281 0.1735 33.86);

  // ///////////////////////////////////////////////////////
  // Debugging Tokens
  // ///////////////////////////////////////////////////////
  --debug-out-pink: oklch(0.7283 0.1971 351.99); // hotpink
  --debug-out-yellow: oklch(0.8868 0.182 95.3305); // intense yellow
}

:root[data-theme='dark'] {
  --c-body-text: var(--gray-300);
  --c-body-bg: var(--gray-950);
  --c-text-link: var(--orange-600);
  --fo-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
  --header-bg: black;
  --header-bg-lancs: oklch(0.1971 0.051 26.44);
  --header-bg-nestle: oklch(0.245 0.037 60.53);
  --header-bg-spotzer: oklch(0.2479 0.0444 171.09);
  --header-bg-ubiter: oklch(0.2421 0.0444 229.54);
  --header-bg-tim: oklch(0.2597 0.0765 256.2);
  --header-bg-html: oklch(0.2362 0.0518 239.82);
  --header-bg-bullframe: oklch(0.1971 0.046 33.86);
}