Thoughtbot

:root {
  --color-dominant: #a333ea;
  --color-surface: #6f341d;
  --color-ink: #f8c48c;
  --color-accent: #50946c;
  --color-detail: #abc5c9;
}

/* CSS variables exposed by source */
:root {
  --color--text-dimmed: #c1bab7;
  --color--gray-300: #c1bab7;
  --color--purple-500: #a434e9;
  --color--gray-400: #928a85;
  --spacing--large: 2rem;
  --border-radius--button: 1.5rem;
  --space--200: 2rem;
  --spacing--xx-small: 0.25rem;
  --font-size--disclaimer: 0.88rem;
  --font-size--body-small: 0.88rem;
  --font-size--fluid-600: 5.4vw;
  --border-radius--circle: 100%;
  --color--button-text: #ffffff;
  --spacing--grid-gap: 2rem;
  --font-size--heading-eyebrow-fluid: clamp(0.88rem, 1.5vw, 1rem);
  --color--tab-focus: color-mix(in srgb, #ffc726, transparent 40%);
  --color--red-700: #5b0909;
  --font-size--heading-2-max: 2rem;
  --border-radius--case-study: 1.5rem;
  --border--dark: 2px solid #2f1c1c;
  --color--red-500: #f74239;
  --border-radius--media-small: 1rem;
  --color--button-background-secondary: transparent;
  --font-size--button: 1rem;
  --color--logo-fill: #ffffff;
  --color--background-image-motif-green: #095c4f;
  --spacing--small: 0.75rem;
  --color--yellow-100: #ffe7a3;
  --font-size--100: 1rem;
  --font-size--heading-2-min: 1.75rem;
  --color--code-error: #f74239;
  --space--100: 1rem;
  --color--text-link: #eae6e4;
  --border--hr: 2px solid #7b6e68;
  --font-size--x-large-min: 1.75rem;
  --font-family--tag: "Jet Brains", "Monaco", "Consolas", "Lucida Console", monospace;
  --font-weight--normal-text: 400;
  --color--teal-600: #29d1b8;
  --font-size--400: 2.25rem;
  --font-size--cta-announce: 0.88rem;
  --border-radius--container: 0.25rem;
  --font-size--cta: 1rem;
  --font-size--display: 1.5rem;
  --font-size--body-preferred: 2.2vw;
  --font-size--caption: 0.88rem;
  --border--input-focus: 2px solid #f74239;
  --font-size--heading-3-preferred: 3.2vw;
  --spacing--x-small: 0.5rem;
  --font-family--sidebar-nav: "Jet Brains", "Monaco", "Consolas", "Lucida Console", monospace;
  --color--icon-fill: #faf9f9;
  --color--blue-100: #e1f4ff;
  --font-size--heading-2-fluid: clamp(1.75rem, 4vw, 2rem);
  --font-family--mori: "PPMori", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --color--blue-600: #29a7d1;
  --font-size--nav-view-all: 1.125rem;
  --color--blue-700: #09475c;
  --font-size--heading-2-preferred: 4vw;
  --border-width--offset: 3px;
  --font-family--heading-6: "Jet Brains", "Monaco", "Consolas", "Lucida Console", monospace;
  --color--text-heading: #faf9f9;
}