This page lets you see the values of variables in real time. Resize the browser window to see the values change.

Spacings (T-Shirt Sizes)

--space-xs

value

--space-s

value

--space-m

value

--space-l

value

--space-xl

value

--space-xxl

value

// Function to update CSS variable displays
function updateCssVarDisplays() {
  // Find all blocks containing variable information
  const varBlocks = document.querySelectorAll('.variable-block');
  
  varBlocks.forEach(block => {
    // Find the elements within this block
    const nameEl = block.querySelector('.var-name');
    const valueEl = block.querySelector('.var-computed-value');
    const visualEl = block.querySelector('.var-visual-bar');
    
    // Skip if any required element is missing
    if (!nameEl || !visualEl) return;
    
    // Get the variable name from the text content
    const varName = nameEl.textContent.trim();
    
    // Clean up the variable name - extract just the CSS variable part
    let cleanVarName = varName;
    if (varName.includes('--')) {
      // Extract everything starting with '--'
      cleanVarName = varName.substring(varName.indexOf('--')).trim();
    }
    
    try {
      // Calculate the computed value
      const tempEl = document.createElement('div');
      tempEl.style.height = `var(${cleanVarName})`;
      document.body.appendChild(tempEl);
      const computedValue = window.getComputedStyle(tempEl).height;
      document.body.removeChild(tempEl);
      
      // Update the computed value element if it exists
      if (valueEl) {
        valueEl.textContent = computedValue;
      }
      
      // Set a CSS custom property on the visual element
      visualEl.style.setProperty('--spacing-height', `var(${cleanVarName})`);
      
      console.log(`Updated ${cleanVarName} to ${computedValue}`);
    } catch (error) {
      console.error(`Error processing ${cleanVarName}:`, error);
    }
  });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  // Initial update
  setTimeout(updateCssVarDisplays, 300);
  
  // Set up resize handler
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateCssVarDisplays, 100);
  });
  
  // Additional update after a longer delay
  setTimeout(updateCssVarDisplays, 1000);
});

Contextual Spacing

--container-gap

value

--content-gap

value

--grid-gap

value

--card-gap

value

// Function to update CSS variable displays
function updateCssVarDisplays() {
  // Find all blocks containing variable information
  const varBlocks = document.querySelectorAll('.variable-block');
  
  varBlocks.forEach(block => {
    // Find the elements within this block
    const nameEl = block.querySelector('.var-name');
    const valueEl = block.querySelector('.var-computed-value');
    const visualEl = block.querySelector('.var-visual-bar');
    
    // Skip if any required element is missing
    if (!nameEl || !visualEl) return;
    
    // Get the variable name from the text content
    const varName = nameEl.textContent.trim();
    
    // Clean up the variable name - extract just the CSS variable part
    let cleanVarName = varName;
    if (varName.includes('--')) {
      // Extract everything starting with '--'
      cleanVarName = varName.substring(varName.indexOf('--')).trim();
    }
    
    try {
      // Calculate the computed value
      const tempEl = document.createElement('div');
      tempEl.style.height = `var(${cleanVarName})`;
      document.body.appendChild(tempEl);
      const computedValue = window.getComputedStyle(tempEl).height;
      document.body.removeChild(tempEl);
      
      // Update the computed value element if it exists
      if (valueEl) {
        valueEl.textContent = computedValue;
      }
      
      // Set a CSS custom property on the visual element
      visualEl.style.setProperty('--spacing-height', `var(${cleanVarName})`);
      
      console.log(`Updated ${cleanVarName} to ${computedValue}`);
    } catch (error) {
      console.error(`Error processing ${cleanVarName}:`, error);
    }
  });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  // Initial update
  setTimeout(updateCssVarDisplays, 300);
  
  // Set up resize handler
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateCssVarDisplays, 100);
  });
  
  // Additional update after a longer delay
  setTimeout(updateCssVarDisplays, 1000);
});

Section Spacing

--section-space-xs

value

--section-space-s

value

--section-space-m

value

--section-space-l

value

--section-space-xl

value

--section-space-xxl

value

--gutter

value

GT America

Display 1

Display Headline 1 Light L 104/100%

Display 1

Display Headline 1 Bold L 104/100%

Display 2

Display  Headline 2 Light L 80/100%

Display 2

Display  Headline 2 Bold L 80/100%

Display 3

Display  Headline 3 Light L 64/100%

Display 3

Display  Headline 3 Bold L 64/100%

Heading 1 Light L 48/100%

Heading 1 Bold L 48/100%

Heading 2 Light L 32/100%

Heading 2 Bold L 32/100%

Heading 3 Light L 24/100%

Heading 3 Bold L 24/100%

Heading 4 Light L 18/100%

Heading 4 Bold L 18/100%

Heading 5 Light L 13.5/100%

Heading 5 Bold L 13.5/100%

Paragraph 1 Regular L 36/160%

.text--3xl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph 1 Bold L 36/160%

Paragraph 2 Regular L 28/140%

Paragraph 2 Bold L 28/140%

Paragraph 3 Regular L 24/130%

Paragraph 3 Bold L 24/130%

Paragraph 4 Regular L 20/160%

Paragraph 4 Bold L 20/160%

Paragraph 5 Regular L 16/140%

Paragraph 5 Bold L 16/140%

Paragraph 6 Regular L 14/130%

Paragraph 6 Bold L 14/130%

Tag Regular L 14/130%

.text--tag

Tag Bold L 14/130%

Edit Code in this section.

// Function to update CSS variable displays
function updateCssVarDisplays() {
  // Find all blocks containing variable information
  const varBlocks = document.querySelectorAll('.variable-block');
  
  varBlocks.forEach(block => {
    // Find the elements within this block
    const nameEl = block.querySelector('.var-name');
    const valueEl = block.querySelector('.var-computed-value');
    const visualEl = block.querySelector('.var-visual-bar');
    
    // Skip if any required element is missing
    if (!nameEl || !visualEl) return;
    
    // Get the variable name from the text content
    const varName = nameEl.textContent.trim();
    
    // Clean up the variable name - extract just the CSS variable part
    let cleanVarName = varName;
    if (varName.includes('--')) {
      // Extract everything starting with '--'
      cleanVarName = varName.substring(varName.indexOf('--')).trim();
    }
    
    try {
      // Calculate the computed value
      const tempEl = document.createElement('div');
      tempEl.style.height = `var(${cleanVarName})`;
      document.body.appendChild(tempEl);
      const computedValue = window.getComputedStyle(tempEl).height;
      document.body.removeChild(tempEl);
      
      // Update the computed value element if it exists
      if (valueEl) {
        valueEl.textContent = computedValue;
      }
      
      // Set a CSS custom property on the visual element
      visualEl.style.setProperty('--spacing-height', `var(${cleanVarName})`);
      
      console.log(`Updated ${cleanVarName} to ${computedValue}`);
    } catch (error) {
      console.error(`Error processing ${cleanVarName}:`, error);
    }
  });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  // Initial update
  setTimeout(updateCssVarDisplays, 300);
  
  // Set up resize handler
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateCssVarDisplays, 100);
  });
  
  // Additional update after a longer delay
  setTimeout(updateCssVarDisplays, 1000);
});