Brand Logo

LOGO

The standard for brand logo is SVG with color(s) set via ACSS. Minimum standard is WEBP.

Primary

Brand Palette

Colors

The following colors and shades are available for this project.

Primary

Secondary

Tertiary

Accent

Base

Neutral

<!-- Activate me and sign me -->
document.addEventListener('DOMContentLoaded', function() {
  const colorElements = document.querySelectorAll('[data-color]');

  colorElements.forEach(element => {
    const bgValue = getComputedStyle(element).getPropertyValue('--bg').trim();
    const contentWrapper = element.querySelector('[class*="__content-wrapper"]');

    if (!bgValue || bgValue === 'undefined') {
      element.style.display = 'none';
      return;
    }

    if (contentWrapper) {
      const color = new Color(bgValue);
      const hexValue = color.hex();
      const rgbValue = color.rgb().string();
      const hslValue = color.hsl().string();

      const colorInfo = document.createElement('div');
      colorInfo.innerHTML = `
        <p>Hex: ${hexValue}</p>
        <p>RGB: ${rgbValue}</p>
        <p>HSL: ${hslValue}</p>
      `;
      contentWrapper.appendChild(colorInfo);
    }
  });
});

// Simple Color conversion class
class Color {
  constructor(color) {
    this.color = color;
  }

  hex() {
    const rgb = this.rgb().array();
    return '#' + rgb.map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    }).join('');
  }

  rgb() {
    const div = document.createElement('div');
    div.style.color = this.color;
    document.body.appendChild(div);
    const rgb = window.getComputedStyle(div).color.match(/\d+/g).map(Number);
    document.body.removeChild(div);
    return {
      array: () => rgb,
      string: () => `rgb(${rgb.join(', ')})`
    };
  }

  hsl() {
    const rgb = this.rgb().array();
    const r = rgb[0] / 255;
    const g = rgb[1] / 255;
    const b = rgb[2] / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }

    return {
      array: () => [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)],
      string: () => `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
    };
  }
}

Headings & Text

Typography

Lorem Ipsum is simply dummy text

h1

Lorem Ipsum is simply dummy text

h2

Lorem Ipsum is simply dummy text

h3

Lorem Ipsum is simply dummy text

h4

Lorem Ipsum is simply dummy text

h5

Lorem Ipsum is simply dummy text

h6

Lorem Ipsum is simply dummy text

h1 & L

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Lorem Ipsum is simply dummy text

h2 & m

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Lorem Ipsum is simply dummy text

h3 & s

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

<!-- Get Typography Values -->
document.addEventListener('DOMContentLoaded', function() {
  const rows = document.querySelectorAll('.ui-typography-section-alpha__row:not([data-typography-sample])');
  
  rows.forEach(row => {
    const heading = row.querySelector('h1, h2, h3, h4, h5, h6');
    if (heading) {
      const styles = window.getComputedStyle(heading);
      
      const fontFamily = styles.getPropertyValue('font-family');
      const fontSize = styles.getPropertyValue('font-size');
      const fontWeight = styles.getPropertyValue('font-weight');
      const letterSpacing = styles.getPropertyValue('letter-spacing');
      
      const infoDiv = document.createElement('div');
      infoDiv.innerHTML = `
        <p>${fontFamily} / ${fontSize} / ${fontWeight} Weight / ${letterSpacing} Letter Spacing</p>
      `;
      
      row.appendChild(infoDiv);
    }
  });
});

Color Relationships

Text

Aa
Dark
Aa
Dark Muted
Aa
Light
Aa
Light Muted

Auto Color Relationships

Sample heading

This is what text will look like on ultra light background areas. You can also control link color relationships and there's an example button below.

Button

Sample heading

This is what text will look like on light background areas. You can also control link color relationships and there's an example button below.

Button

Content Width & Spacing

General Spacing

Content Width

Grid Gap

Card Gap

Content Gap

Default Section Padding

Container Gap

<!-- Activate & Sign -->
function observeElementProperty(elementSelector, labelSelector, propertyName) {
    const element = document.querySelector(elementSelector);
    const label = document.querySelector(labelSelector);

    if (!element || !label) return;

    const updateLabel = () => {
        const computedStyle = window.getComputedStyle(element);
        const value = computedStyle[propertyName];
        const numericValue = parseFloat(value);
        if (!isNaN(numericValue)) {
            const roundedValue = numericValue.toFixed(2);
            const displayValue = roundedValue.endsWith('.00') ? Math.floor(numericValue) : roundedValue;
            const existingText = label.textContent.split('-')[0].trim();
            label.textContent = `${existingText} - ${displayValue}px`;
        }
    };

    const resizeObserver = new ResizeObserver(updateLabel);
    resizeObserver.observe(element);

    updateLabel(); // Initial measurement
}

document.addEventListener('DOMContentLoaded', function() {
    observeElementProperty('[data-ui-content-width]', '[data-ui-content-width-label]', 'width');
    observeElementProperty('[data-ui-grid-gap]', '[data-ui-grid-gap-label]', 'gap');
    observeElementProperty('[data-ui-card-gap]', '[data-ui-card-gap-label]', 'gap');
    observeElementProperty('[data-ui-content-gap]', '[data-ui-content-gap-label]', 'gap');
    observeElementProperty('[data-ui-section-padding]', '[data-ui-section-padding-label]', 'paddingTop');
  observeElementProperty('[data-ui-container-gap]', '[data-ui-container-gap-label]', 'gap');
});

Cards & Icons

Light Cards

Icon Card

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Text link

Media Card

Here goes your text ... Select any part of your text to access the formatting toolbar.

Call to action

Avatar Card

Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

dark cards

Icon Card

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Text link

Media Card

Here goes your text ... Select any part of your text to access the formatting toolbar.

Call to action

Avatar Card

Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

Large Icons

Medium Icons

small Icons

Icon List

  • This is a list item.
  • This is a list item.
  • This is a list item.
  • This is a list item.
  • This is a list item.
<!-- Activate & Sign -->
console.log('Script is starting');

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is fully loaded');

  const iconGroups = document.querySelectorAll('[data-ui-icon-group]');
  console.log(`Found ${iconGroups.length} icon groups`);

  iconGroups.forEach((group, index) => {
    console.log(`Processing group ${index + 1}`);

    const label = group.querySelector('[data-ui-icon-row-label]');
    const row = group.querySelector('[data-ui-icon-row]');
    const icon = row?.querySelector('[data-icon]');

    console.log(`Group ${index + 1}: Label found: ${!!label}, Row found: ${!!row}, Icon found: ${!!icon}`);

    if (icon && label) {
      const computedStyle = window.getComputedStyle(icon);
      const iconSize = computedStyle.getPropertyValue('--icon-size');

      console.log(`Group ${index + 1}: Icon size from CSS: ${iconSize || 'not found'}`);

      if (iconSize) {
        console.log(`Group ${index + 1}: Appending size to label`);
        label.textContent += ` (${iconSize})`;
      } else {
        console.log(`Group ${index + 1}: Icon size not found, skipping label update`);
      }
    } else {
      console.log(`Group ${index + 1}: Missing icon or label, skipping`);
    }
  });

  console.log('Script execution completed');
});