Loomia logo.png
Menu
HomePricingBlogWork
Book a 15-min intro callhello@loomia.com
class MenuToggle {
    constructor(config = {}) {
        this.config = {
            toggleSelector: '[data-menu-toggle]',
            overlaySelector: '[data-menu-overlay]',
            openText: 'Close',
            closedText: 'Menu',
            animationDuration: 100,
            staggerDelay: 80,
            ...config
        };
        
        this.isOpen = false;
        this.initialized = false;
        
        this.init();
    }
    
    init() {
        if (this.initialized) return;
        
        this.elements = this.getElements();
        if (!this.elements.toggle || !this.elements.overlay) {
            return;
        }
        
        this.injectStyles();
        this.forceInitialStateImmediate();
        this.createArrow();
        this.bindEvents();
        this.setAriaAttributes();
        this.setupMenuItems();
        
        this.initialized = true;
    }
    
    forceInitialStateImmediate() {
        this.elements.overlay.style.transform = 'translateY(-100%)';
        this.elements.overlay.style.transition = 'none';
        this.elements.overlay.classList.add('menu-closed');
        this.isOpen = false;
        
        setTimeout(() => {
            this.elements.overlay.style.transition = 'transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)';
        }, 50);
    }
    
    getElements() {
        return {
            toggle: document.querySelector(this.config.toggleSelector),
            overlay: document.querySelector(this.config.overlaySelector)
        };
    }
    
    setupMenuItems() {
        this.menuItems = this.elements.overlay.querySelectorAll('*:not(style):not(script)');
        this.menuItems = Array.from(this.menuItems).filter(item => {
            return item.textContent.trim().length > 0 && 
                   !item.querySelector('*') && 
                   item.offsetParent !== null;
        });
        
        this.menuItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(30px)';
            item.style.transition = `opacity 0.5s ease ${index * this.config.staggerDelay}ms, transform 0.5s ease ${index * this.config.staggerDelay}ms`;
        });
    }
    
    injectStyles() {
        if (document.getElementById('menu-toggle-styles')) return;
        
        const style = document.createElement('style');
        style.id = 'menu-toggle-styles';
        style.textContent = `
            ${this.config.overlaySelector} {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                z-index: 9999 !important;
            }
            
            body.menu-open .brx-header {
                z-index: 1 !important;
            }
            
            .menu-arrow {
                display: inline-block;
                margin-right: 8px;
                transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
                width: 8px;
                height: 8px;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: rotate(45deg);
                transform-origin: center;
                vertical-align: middle;
                position: relative;
                top: -1px;
            }
            
            .menu-arrow.rotated {
                transform: rotate(-135deg);
            }
            
            body.menu-open {
                overflow: hidden !important;
            }
        `;
        document.head.appendChild(style);
    }
    
    createArrow() {
        this.arrow = document.createElement('span');
        this.arrow.className = 'menu-arrow';
        this.arrow.setAttribute('aria-hidden', 'true');
        
        this.textNode = document.createTextNode(this.config.closedText);
        
        this.elements.toggle.innerHTML = '';
        this.elements.toggle.appendChild(this.arrow);
        this.elements.toggle.appendChild(this.textNode);
    }
    
    setAriaAttributes() {
        this.elements.toggle.setAttribute('aria-expanded', 'false');
        this.elements.toggle.setAttribute('aria-controls', this.elements.overlay.id || 'menu-overlay');
        this.elements.overlay.setAttribute('aria-hidden', 'true');
    }
    
    bindEvents() {
        this.boundClickHandler = this.handleClick.bind(this);
        this.boundKeyHandler = this.handleKeydown.bind(this);
        
        this.elements.toggle.addEventListener('click', this.boundClickHandler);
        this.elements.toggle.addEventListener('keydown', this.boundKeyHandler);
    }
    
    handleKeydown(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            this.toggle();
        }
        if (e.key === 'Escape' && this.isOpen) {
            this.close();
        }
    }
    
    handleClick(e) {
        e.preventDefault();
        this.toggle();
    }
    
    toggle() {
        this.isOpen ? this.close() : this.open();
    }
    
    open() {
        if (this.isOpen) return;
        
        document.body.classList.add('menu-open');
        this.elements.overlay.classList.remove('menu-closed');
        this.elements.overlay.style.transform = 'translateY(0)';
        this.textNode.textContent = this.config.openText;
        this.arrow.classList.add('rotated');
        
        setTimeout(() => {
            this.menuItems.forEach((item, index) => {
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = 'translateY(0)';
                }, index * this.config.staggerDelay);
            });
        }, 300);
        
        this.elements.toggle.setAttribute('aria-expanded', 'true');
        this.elements.overlay.setAttribute('aria-hidden', 'false');
        
        this.isOpen = true;
    }
    
    close() {
        if (!this.isOpen) return;
        
        document.body.classList.remove('menu-open');
        
        this.menuItems.forEach((item) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(30px)';
        });
        
        setTimeout(() => {
            this.elements.overlay.style.transform = 'translateY(-100%)';
            this.elements.overlay.classList.add('menu-closed');
        }, 200);
        
        this.textNode.textContent = this.config.closedText;
        this.arrow.classList.remove('rotated');
        
        this.elements.toggle.setAttribute('aria-expanded', 'false');
        this.elements.overlay.setAttribute('aria-hidden', 'true');
        
        this.isOpen = false;
    }
    
    destroy() {
        if (!this.initialized) return;
        
        this.elements.toggle.removeEventListener('click', this.boundClickHandler);
        this.elements.toggle.removeEventListener('keydown', this.boundKeyHandler);
        
        document.body.classList.remove('menu-open');
        
        const style = document.getElementById('menu-toggle-styles');
        if (style) style.remove();
        
        this.initialized = false;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new MenuToggle();
});

Heri Wisnu Design System

Colors

Main Scheme

Accent - Purple Rain --accent
#6C32C3
Accent D 1 --accent-d-1
#512692
Accent D 2 --accent-d-2
#361961
Accent D 3 --accent-d-3
#1b0d31
Accent L 1 --accent-l-1
#9061d6
Accent L 2 --accent-l-2
#b596e4
Accent L 3 --accent-l-3
#dacaf1
Background --background
#FCFCFC
Background D 1 --background-d-1
#dddddd
Background D 2 --background-d-2
#bdbdbd
Background D 3 --background-d-3
#9e9e9e
Background D 4 --background-d-4
#7e7e7e
Background D 5 --background-d-5
#5f5f5f
Background D 6 --background-d-6
#3f3f3f
Background D 7 --background-d-7
#202020
Foreground --foreground
#E7E7E7
Foreground D 1 --foreground-d-1
#cbcbcb
Foreground D 2 --foreground-d-2
#aeaeae
Foreground D 3 --foreground-d-3
#919191
Foreground D 4 --foreground-d-4
#747474
Foreground D 5 --foreground-d-5
#575757
Foreground D 6 --foreground-d-6
#3a3a3a
Foreground D 7 --foreground-d-7
#1d1d1d
Text --text
#39363D
Border --border
#cfcfcf
Input --input
#efefef
Heading --heading
#322F35
Btn Text --btn-text
#FFFFFF

Scheme 2

Accent - Jelly Berry --s2-accent
hsla(329, 84%, 49%, 1)
Accent D 1 --s2-accent-d-1
rgb(173, 15, 96)
Accent D 2 --s2-accent-d-2
rgb(115, 10, 64)
Accent D 3 --s2-accent-d-3
rgb(58, 5, 32)
Accent L 1 --s2-accent-l-1
rgb(236, 79, 160)
Accent L 2 --s2-accent-l-2
rgb(243, 138, 192)
Accent L 3 --s2-accent-l-3
rgb(249, 196, 223)
Background --s2-background
hsla(213, 33%, 18%, 1)
Background D 1 --s2-background-d-1
rgb(27, 39, 53)
Background D 2 --s2-background-d-2
rgb(23, 33, 46)
Background D 3 --s2-background-d-3
rgb(19, 28, 38)
Background D 4 --s2-background-d-4
rgb(16, 22, 31)
Background D 5 --s2-background-d-5
rgb(12, 17, 23)
Background D 6 --s2-background-d-6
rgb(8, 11, 15)
Background D 7 --s2-background-d-7
rgb(4, 6, 8)
Foreground --s2-foreground
hsla(212, 33%, 23%, 1)
Foreground D 1 --s2-foreground-d-1
rgb(34, 50, 68)
Foreground D 2 --s2-foreground-d-2
rgb(29, 43, 59)
Foreground D 3 --s2-foreground-d-3
rgb(24, 36, 49)
Foreground D 4 --s2-foreground-d-4
rgb(20, 29, 39)
Foreground D 5 --s2-foreground-d-5
rgb(15, 21, 29)
Foreground D 6 --s2-foreground-d-6
rgb(10, 14, 20)
Foreground D 7 --s2-foreground-d-7
rgb(5, 7, 10)
Text --s2-text
hsl(0, 0%, 85%)
Border --s2-border
hsla(0, 0%, 100%, 0.25)
Input --s2-input
hsla(0, 0%, 100%, 0.1)
Heading --s2-heading
hsl(0, 0%, 100%)
Btn Text --s2-btn-text
hsl(0, 0%, 100%)

Scheme 3

Accent - White --s3-accent
hsl(0, 0%, 100%)
Accent D 1 --s3-accent-d-1
rgb(191, 191, 191)
Accent D 2 --s3-accent-d-2
rgb(128, 128, 128)
Accent D 3 --s3-accent-d-3
rgb(64, 64, 64)
Accent L 1 --s3-accent-l-1
rgb(255, 255, 255)
Accent L 2 --s3-accent-l-2
rgb(255, 255, 255)
Accent L 3 --s3-accent-l-3
rgb(255, 255, 255)
Background --s3-background
hsl(329 84% 4%)
Background D 1 --s3-background-d-1
rgb(17, 2, 9)
Background D 2 --s3-background-d-2
rgb(14, 2, 8)
Background D 3 --s3-background-d-3
rgb(12, 1, 6)
Background D 4 --s3-background-d-4
rgb(10, 1, 5)
Background D 5 --s3-background-d-5
rgb(7, 1, 4)
Background D 6 --s3-background-d-6
rgb(5, 1, 3)
Background D 7 --s3-background-d-7
rgb(2, 0, 1)
Foreground --s3-foreground
hsl(329 84% 9%)
Foreground D 1 --s3-foreground-d-1
rgb(37, 4, 21)
Foreground D 2 --s3-foreground-d-2
rgb(32, 3, 18)
Foreground D 3 --s3-foreground-d-3
rgb(26, 3, 15)
Foreground D 4 --s3-foreground-d-4
rgb(21, 2, 12)
Foreground D 5 --s3-foreground-d-5
rgb(16, 2, 9)
Foreground D 6 --s3-foreground-d-6
rgb(11, 1, 6)
Foreground D 7 --s3-foreground-d-7
rgb(5, 1, 3)
Text --s3-text
hsl(0 0% 85%)
Border --s3-border
hsla(0, 0%, 100%, 0.25)
Input --s3-input
hsla(0, 0%, 100%, 0.1)
Heading --s3-heading
hsl(0, 0%, 100%)
Btn Text --s3-btn-text
hsl(0, 0%, 0%)

Base/Neutral

Shadow --shadow
hsl(0, 0%, 95%)
Transparent --transparent
hsla(0, 0%, 0%, 0)
Light --light
hsla(0, 0%, 100%, 1)
Dark --dark
hsl(0, 0%, 0%)

AT Framework

At Primary --at-primary
hsla(227, 68%, 49%, 1)
At Primary L 1 --at-primary-l-1
hsla(226.57,65.3%,57.06%,1)
At Primary L 2 --at-primary-l-2
hsla(226.96,64.97%,65.29%,1)
At Primary L 3 --at-primary-l-3
hsla(226.52,65.93%,73.53%,1)
At Primary L 4 --at-primary-l-4
hsla(226.45,65.96%,81.57%,1)
At Primary L 5 --at-primary-l-5
hsla(225.88,65.38%,89.8%,1)
At Primary L 6 --at-primary-l-6
hsla(222.86,63.64%,97.84%,1)
At Primary D 1 --at-primary-d-1
hsla(226.76,68.08%,41.76%,1)
At Primary D 2 --at-primary-d-2
hsla(226.89,68%,34.31%,1)
At Primary D 3 --at-primary-d-3
hsla(226.6,68.12%,27.06%,1)
At Primary D 4 --at-primary-d-4
hsla(226.76,68%,19.61%,1)
At Primary D 5 --at-primary-d-5
hsla(226.05,68.25%,12.35%,1)
At Primary D 6 --at-primary-d-6
hsla(225.88,68%,4.9%,1)
At Primary T 1 --at-primary-t-1
hsla(226.94,68%,49.02%,0.84)
At Primary T 2 --at-primary-t-2
hsla(226.94,68%,49.02%,0.68)
At Primary T 3 --at-primary-t-3
hsla(226.94,68%,49.02%,0.53)
At Primary T 4 --at-primary-t-4
hsla(226.94,68%,49.02%,0.37)
At Primary T 5 --at-primary-t-5
hsla(226.94,68%,49.02%,0.21)
At Primary T 6 --at-primary-t-6
hsla(226.94,68%,49.02%,0.05)
At Secondary --at-secondary
hsla(53, 65%, 55%, 1)
At Secondary L 1 --at-secondary-l-1
hsla(52.8,65.45%,62.55%,1)
At Secondary L 2 --at-secondary-l-2
hsla(52.8,64.94%,69.8%,1)
At Secondary L 3 --at-secondary-l-3
hsla(52.8,64.1%,77.06%,1)
At Secondary L 4 --at-secondary-l-4
hsla(52.08,65.43%,84.12%,1)
At Secondary L 5 --at-secondary-l-5
hsla(51.72,64.44%,91.18%,1)
At Secondary L 6 --at-secondary-l-6
hsla(50,60%,98.04%,1)
At Secondary D 1 --at-secondary-d-1
hsla(52.8,53.65%,45.69%,1)
At Secondary D 2 --at-secondary-d-2
hsla(52.87,54.01%,36.67%,1)
At Secondary D 3 --at-secondary-d-3
hsla(52.99,53.85%,28.04%,1)
At Secondary D 4 --at-secondary-d-4
hsla(53.57,56%,19.61%,1)
At Secondary D 5 --at-secondary-d-5
hsla(51.67,58.06%,12.16%,1)
At Secondary D 6 --at-secondary-d-6
hsla(52.94,68%,4.9%,1)
At Secondary T 1 --at-secondary-t-1
hsla(52.75,65.07%,55.1%,0.84)
At Secondary T 2 --at-secondary-t-2
hsla(52.75,65.07%,55.1%,0.68)
At Secondary T 3 --at-secondary-t-3
hsla(52.75,65.07%,55.1%,0.53)
At Secondary T 4 --at-secondary-t-4
hsla(52.75,65.07%,55.1%,0.37)
At Secondary T 5 --at-secondary-t-5
hsla(52.75,65.07%,55.1%,0.21)
At Secondary T 6 --at-secondary-t-6
hsla(52.75,65.07%,55.1%,0.05)
At Neutral --at-neutral
hsla(182, 8%, 50%, 1)
At Neutral L 1 --at-neutral-l-1
hsla(183.33,8.41%,58.04%,1)
At Neutral L 2 --at-neutral-l-2
hsla(180,8.05%,65.88%,1)
At Neutral L 3 --at-neutral-l-3
hsla(180,8.27%,73.92%,1)
At Neutral L 4 --at-neutral-l-4
hsla(187.5,8.7%,81.96%,1)
At Neutral L 5 --at-neutral-l-5
hsla(180,7.69%,89.8%,1)
At Neutral L 6 --at-neutral-l-6
hsla(180,9.09%,97.84%,1)
At Neutral D 1 --at-neutral-d-1
hsla(180,7.83%,42.55%,1)
At Neutral D 2 --at-neutral-d-2
hsla(184,8.38%,35.1%,1)
At Neutral D 3 --at-neutral-d-3
hsla(180,7.8%,27.65%,1)
At Neutral D 4 --at-neutral-d-4
hsla(180,7.84%,20%,1)
At Neutral D 5 --at-neutral-d-5
hsla(180,7.69%,12.75%,1)
At Neutral D 6 --at-neutral-d-6
hsla(180,7.69%,5.1%,1)
At Neutral T 1 --at-neutral-t-1
hsla(182.86,8.24%,50%,0.84)
At Neutral T 2 --at-neutral-t-2
hsla(182.86,8.24%,50%,0.68)
At Neutral T 3 --at-neutral-t-3
hsla(182.86,8.24%,50%,0.53)
At Neutral T 4 --at-neutral-t-4
hsla(182.86,8.24%,50%,0.37)
At Neutral T 5 --at-neutral-t-5
hsla(182.86,8.24%,50%,0.21)
At Neutral T 6 --at-neutral-t-6
hsla(182.86,8.24%,50%,0.05)
At Black --at-black
hsla(0, 0%, 0%, 1)
At Black T 1 --at-black-t-1
hsla(0,0%,0%,0.84)
At Black T 2 --at-black-t-2
hsla(0,0%,0%,0.68)
At Black T 3 --at-black-t-3
hsla(0,0%,0%,0.53)
At Black T 4 --at-black-t-4
hsla(0,0%,0%,0.37)
At Black T 5 --at-black-t-5
hsla(0,0%,0%,0.21)
At Black T 6 --at-black-t-6
hsla(0,0%,0%,0.05)
At White --at-white
#ffffff
At White T 1 --at-white-t-1
hsla(0,0%,100%,0.84)
At White T 2 --at-white-t-2
hsla(0,0%,100%,0.68)
At White T 3 --at-white-t-3
hsla(0,0%,100%,0.53)
At White T 4 --at-white-t-4
hsla(0,0%,100%,0.37)
At White T 5 --at-white-t-5
hsla(0,0%,100%,0.21)
At White T 6 --at-white-t-6
hsla(0,0%,100%,0.05)

AT Green

At Primary --at-primary
hsla(141, 74.3%, 51.2%, 1)
At Primary L 1 --at-primary-l-1
hsla(140.9,74.16%,59.02%,1)
At Primary L 2 --at-primary-l-2
hsla(141.43,74.12%,66.67%,1)
At Primary L 3 --at-primary-l-3
hsla(141.03,75.19%,74.71%,1)
At Primary L 4 --at-primary-l-4
hsla(140.6,75.28%,82.55%,1)
At Primary L 5 --at-primary-l-5
hsla(142.11,76%,90.2%,1)
At Primary L 6 --at-primary-l-6
hsla(142.5,80%,98.04%,1)
At Primary D 1 --at-primary-d-1
hsla(141.27,71.17%,43.53%,1)
At Primary D 2 --at-primary-d-2
hsla(141.23,71.43%,35.69%,1)
At Primary D 3 --at-primary-d-3
hsla(141.18,70.83%,28.24%,1)
At Primary D 4 --at-primary-d-4
hsla(141.08,71.15%,20.39%,1)
At Primary D 5 --at-primary-d-5
hsla(141.7,72.31%,12.75%,1)
At Primary D 6 --at-primary-d-6
hsla(142.11,76%,4.9%,1)
At Primary T 1 --at-primary-t-1
hsla(141.08,74.3%,51.18%,0.84)
At Primary T 2 --at-primary-t-2
hsla(141.08,74.3%,51.18%,0.68)
At Primary T 3 --at-primary-t-3
hsla(141.08,74.3%,51.18%,0.53)
At Primary T 4 --at-primary-t-4
hsla(141.08,74.3%,51.18%,0.37)
At Primary T 5 --at-primary-t-5
hsla(141.08,74.3%,51.18%,0.21)
At Primary T 6 --at-primary-t-6
hsla(141.08,74.3%,51.18%,0.05)
At Secondary --at-secondary
hsla(186, 65%, 55%, 1)
At Secondary L 1 --at-secondary-l-1
hsla(185.76,64.77%,62.16%,1)
At Secondary L 2 --at-secondary-l-2
hsla(185.88,65.38%,69.41%,1)
At Secondary L 3 --at-secondary-l-3
hsla(185.45,64.71%,76.67%,1)
At Secondary L 4 --at-secondary-l-4
hsla(185.66,63.86%,83.73%,1)
At Secondary L 5 --at-secondary-l-5
hsla(186,65.22%,90.98%,1)
At Secondary L 6 --at-secondary-l-6
hsla(180,60%,98.04%,1)
At Secondary D 1 --at-secondary-d-1
hsla(186.14,53.14%,46.86%,1)
At Secondary D 2 --at-secondary-d-2
hsla(185.71,53.85%,38.24%,1)
At Secondary D 3 --at-secondary-d-3
hsla(185.78,54.25%,30%,1)
At Secondary D 4 --at-secondary-d-4
hsla(186.89,54.95%,21.76%,1)
At Secondary D 5 --at-secondary-d-5
hsla(186.15,58.21%,13.14%,1)
At Secondary D 6 --at-secondary-d-6
hsla(187.06,68%,4.9%,1)
At Secondary T 1 --at-secondary-t-1
hsla(186.04,65.07%,55.1%,0.84)
At Secondary T 2 --at-secondary-t-2
hsla(186.04,65.07%,55.1%,0.68)
At Secondary T 3 --at-secondary-t-3
hsla(186.04,65.07%,55.1%,0.53)
At Secondary T 4 --at-secondary-t-4
hsla(186.04,65.07%,55.1%,0.37)
At Secondary T 5 --at-secondary-t-5
hsla(186.04,65.07%,55.1%,0.21)
At Secondary T 6 --at-secondary-t-6
hsla(186.04,65.07%,55.1%,0.05)
At Neutral --at-neutral
hsla(141, 20%, 50%, 1)
At Neutral L 1 --at-neutral-l-1
hsla(141.43,19.63%,58.04%,1)
At Neutral L 2 --at-neutral-l-2
hsla(140.57,20.23%,66.08%,1)
At Neutral L 3 --at-neutral-l-3
hsla(140.77,19.7%,74.12%,1)
At Neutral L 4 --at-neutral-l-4
hsla(143.33,19.57%,81.96%,1)
At Neutral L 5 --at-neutral-l-5
hsla(138,20%,90.2%,1)
At Neutral L 6 --at-neutral-l-6
hsla(150,20%,98.04%,1)
At Neutral D 1 --at-neutral-d-1
hsla(140.93,19.82%,42.55%,1)
At Neutral D 2 --at-neutral-d-2
hsla(141.67,20.22%,34.9%,1)
At Neutral D 3 --at-neutral-d-3
hsla(141.43,20%,27.45%,1)
At Neutral D 4 --at-neutral-d-4
hsla(141,19.61%,20%,1)
At Neutral D 5 --at-neutral-d-5
hsla(143.08,20.63%,12.35%,1)
At Neutral D 6 --at-neutral-d-6
hsla(144,20%,4.9%,1)
At Neutral T 1 --at-neutral-t-1
hsla(141.18,20%,50%,0.84)
At Neutral T 2 --at-neutral-t-2
hsla(141.18,20%,50%,0.68)
At Neutral T 3 --at-neutral-t-3
hsla(141.18,20%,50%,0.53)
At Neutral T 4 --at-neutral-t-4
hsla(141.18,20%,50%,0.37)
At Neutral T 5 --at-neutral-t-5
hsla(141.18,20%,50%,0.21)
At Neutral T 6 --at-neutral-t-6
hsla(141.18,20%,50%,0.05)
At Black --at-black
hsla(0, 0%, 0%, 1)
At Black T 1 --at-black-t-1
hsla(0,0%,0%,0.84)
At Black T 2 --at-black-t-2
hsla(0,0%,0%,0.68)
At Black T 3 --at-black-t-3
hsla(0,0%,0%,0.53)
At Black T 4 --at-black-t-4
hsla(0,0%,0%,0.37)
At Black T 5 --at-black-t-5
hsla(0,0%,0%,0.21)
At Black T 6 --at-black-t-6
hsla(0,0%,0%,0.05)
At White --at-white
#ffffff
At White T 1 --at-white-t-1
hsla(0,0%,100%,0.84)
At White T 2 --at-white-t-2
hsla(0,0%,100%,0.68)
At White T 3 --at-white-t-3
hsla(0,0%,100%,0.53)
At White T 4 --at-white-t-4
hsla(0,0%,100%,0.37)
At White T 5 --at-white-t-5
hsla(0,0%,100%,0.21)
At White T 6 --at-white-t-6
hsla(0,0%,100%,0.05)

AT Red

At Primary --at-primary
hsla(359, 81.7%, 45.1%, 1)
At Primary L 1 --at-primary-l-1
hsla(359.24,67.52%,54.12%,1)
At Primary L 2 --at-primary-l-2
hsla(359.06,67.37%,62.75%,1)
At Primary L 3 --at-primary-l-3
hsla(359.39,68.06%,71.76%,1)
At Primary L 4 --at-primary-l-4
hsla(359.12,68%,80.39%,1)
At Primary L 5 --at-primary-l-5
hsla(0,70.37%,89.41%,1)
At Primary L 6 --at-primary-l-6
hsla(0,80%,98.04%,1)
At Primary D 1 --at-primary-d-1
hsla(358.88,81.63%,38.43%,1)
At Primary D 2 --at-primary-d-2
hsla(359.09,81.48%,31.76%,1)
At Primary D 3 --at-primary-d-3
hsla(358.85,81.25%,25.1%,1)
At Primary D 4 --at-primary-d-4
hsla(358.44,82.8%,18.24%,1)
At Primary D 5 --at-primary-d-5
hsla(357.55,83.05%,11.57%,1)
At Primary D 6 --at-primary-d-6
hsla(357.14,84%,4.9%,1)
At Primary T 1 --at-primary-t-1
hsla(359.04,81.74%,45.1%,0.84)
At Primary T 2 --at-primary-t-2
hsla(359.04,81.74%,45.1%,0.68)
At Primary T 3 --at-primary-t-3
hsla(359.04,81.74%,45.1%,0.53)
At Primary T 4 --at-primary-t-4
hsla(359.04,81.74%,45.1%,0.37)
At Primary T 5 --at-primary-t-5
hsla(359.04,81.74%,45.1%,0.21)
At Primary T 6 --at-primary-t-6
hsla(359.04,81.74%,45.1%,0.05)
At Secondary --at-secondary
hsla(18, 70%, 59%, 1)
At Secondary L 1 --at-secondary-l-1
hsla(17.9,70.45%,65.49%,1)
At Secondary L 2 --at-secondary-l-2
hsla(17.82,70.63%,71.96%,1)
At Secondary L 3 --at-secondary-l-3
hsla(17.92,70.64%,78.63%,1)
At Secondary L 4 --at-secondary-l-4
hsla(18.11,68.83%,84.9%,1)
At Secondary L 5 --at-secondary-l-5
hsla(18,68.18%,91.37%,1)
At Secondary L 6 --at-secondary-l-6
hsla(17.14,63.64%,97.84%,1)
At Secondary D 1 --at-secondary-d-1
hsla(17.76,49.02%,50%,1)
At Secondary D 2 --at-secondary-d-2
hsla(17.88,49.52%,41.18%,1)
At Secondary D 3 --at-secondary-d-3
hsla(17.56,50%,32.16%,1)
At Secondary D 4 --at-secondary-d-4
hsla(17.7,52.14%,22.94%,1)
At Secondary D 5 --at-secondary-d-5
hsla(18,55.56%,14.12%,1)
At Secondary D 6 --at-secondary-d-6
hsla(16.67,69.23%,5.1%,1)
At Secondary T 1 --at-secondary-t-1
hsla(17.96,70.33%,59.02%,0.84)
At Secondary T 2 --at-secondary-t-2
hsla(17.96,70.33%,59.02%,0.68)
At Secondary T 3 --at-secondary-t-3
hsla(17.96,70.33%,59.02%,0.53)
At Secondary T 4 --at-secondary-t-4
hsla(17.96,70.33%,59.02%,0.37)
At Secondary T 5 --at-secondary-t-5
hsla(17.96,70.33%,59.02%,0.21)
At Secondary T 6 --at-secondary-t-6
hsla(17.96,70.33%,59.02%,0.05)
At Neutral --at-neutral
hsla(359, 7%, 50%, 1)
At Neutral L 1 --at-neutral-l-1
hsla(0,6.54%,58.04%,1)
At Neutral L 2 --at-neutral-l-2
hsla(0,6.36%,66.08%,1)
At Neutral L 3 --at-neutral-l-3
hsla(0,6.06%,74.12%,1)
At Neutral L 4 --at-neutral-l-4
hsla(0,6.52%,81.96%,1)
At Neutral L 5 --at-neutral-l-5
hsla(0,5.88%,90%,1)
At Neutral L 6 --at-neutral-l-6
hsla(0,0%,98.04%,1)
At Neutral D 1 --at-neutral-d-1
hsla(0,6.91%,42.55%,1)
At Neutral D 2 --at-neutral-d-2
hsla(0,6.74%,34.9%,1)
At Neutral D 3 --at-neutral-d-3
hsla(0,6.38%,27.65%,1)
At Neutral D 4 --at-neutral-d-4
hsla(0,6.8%,20.2%,1)
At Neutral D 5 --at-neutral-d-5
hsla(0,6.25%,12.55%,1)
At Neutral D 6 --at-neutral-d-6
hsla(0,7.69%,5.1%,1)
At Neutral T 1 --at-neutral-t-1
hsla(0,6.67%,50%,0.84)
At Neutral T 2 --at-neutral-t-2
hsla(0,6.67%,50%,0.68)
At Neutral T 3 --at-neutral-t-3
hsla(0,6.67%,50%,0.53)
At Neutral T 4 --at-neutral-t-4
hsla(0,6.67%,50%,0.37)
At Neutral T 5 --at-neutral-t-5
hsla(0,6.67%,50%,0.21)
At Neutral T 6 --at-neutral-t-6
hsla(0,6.67%,50%,0.05)
At Black --at-black
hsla(0, 0%, 0%, 1)
At Black T 1 --at-black-t-1
hsla(0,0%,0%,0.84)
At Black T 2 --at-black-t-2
hsla(0,0%,0%,0.68)
At Black T 3 --at-black-t-3
hsla(0,0%,0%,0.53)
At Black T 4 --at-black-t-4
hsla(0,0%,0%,0.37)
At Black T 5 --at-black-t-5
hsla(0,0%,0%,0.21)
At Black T 6 --at-black-t-6
hsla(0,0%,0%,0.05)
At White --at-white
#ffffff
At White T 1 --at-white-t-1
hsla(0,0%,100%,0.84)
At White T 2 --at-white-t-2
hsla(0,0%,100%,0.68)
At White T 3 --at-white-t-3
hsla(0,0%,100%,0.53)
At White T 4 --at-white-t-4
hsla(0,0%,100%,0.37)
At White T 5 --at-white-t-5
hsla(0,0%,100%,0.21)
At White T 6 --at-white-t-6
hsla(0,0%,100%,0.05)

AT Nature

At Primary --at-primary
hsla(29, 79.9%, 37.1%, 1)
At Primary L 1 --at-primary-l-1
hsla(28.82,52.7%,47.25%,1)
At Primary L 2 --at-primary-l-2
hsla(29.13,47.47%,57.45%,1)
At Primary L 3 --at-primary-l-3
hsla(28.86,47.88%,67.65%,1)
At Primary L 4 --at-primary-l-4
hsla(28.93,49.12%,77.65%,1)
At Primary L 5 --at-primary-l-5
hsla(30,51.61%,87.84%,1)
At Primary L 6 --at-primary-l-6
hsla(30,80%,98.04%,1)
At Primary D 1 --at-primary-d-1
hsla(29.08,80.25%,31.76%,1)
At Primary D 2 --at-primary-d-2
hsla(28.6,79.26%,26.47%,1)
At Primary D 3 --at-primary-d-3
hsla(28.6,79.63%,21.18%,1)
At Primary D 4 --at-primary-d-4
hsla(29.06,80%,15.69%,1)
At Primary D 5 --at-primary-d-5
hsla(27.14,77.78%,10.59%,1)
At Primary D 6 --at-primary-d-6
hsla(27,76.92%,5.1%,1)
At Primary T 1 --at-primary-t-1
hsla(29.01,79.89%,37.06%,0.84)
At Primary T 2 --at-primary-t-2
hsla(29.01,79.89%,37.06%,0.68)
At Primary T 3 --at-primary-t-3
hsla(29.01,79.89%,37.06%,0.53)
At Primary T 4 --at-primary-t-4
hsla(29.01,79.89%,37.06%,0.37)
At Primary T 5 --at-primary-t-5
hsla(29.01,79.89%,37.06%,0.21)
At Primary T 6 --at-primary-t-6
hsla(29.01,79.89%,37.06%,0.05)
At Secondary --at-secondary
hsla(86, 68%, 37%, 1)
At Secondary L 1 --at-secondary-l-1
hsla(85.87,45.23%,47.25%,1)
At Secondary L 2 --at-secondary-l-2
hsla(85.91,40.37%,57.25%,1)
At Secondary L 3 --at-secondary-l-3
hsla(85.59,40.96%,67.45%,1)
At Secondary L 4 --at-secondary-l-4
hsla(86.25,42.11%,77.65%,1)
At Secondary L 5 --at-secondary-l-5
hsla(84.44,42.86%,87.65%,1)
At Secondary L 6 --at-secondary-l-6
hsla(85.71,63.64%,97.84%,1)
At Secondary D 1 --at-secondary-d-1
hsla(86.18,67.9%,31.76%,1)
At Secondary D 2 --at-secondary-d-2
hsla(86.09,68.66%,26.27%,1)
At Secondary D 3 --at-secondary-d-3
hsla(85.48,68.22%,20.98%,1)
At Secondary D 4 --at-secondary-d-4
hsla(85.56,67.5%,15.69%,1)
At Secondary D 5 --at-secondary-d-5
hsla(85,69.23%,10.2%,1)
At Secondary D 6 --at-secondary-d-6
hsla(84.71,68%,4.9%,1)
At Secondary T 1 --at-secondary-t-1
hsla(86.05,68.25%,37.06%,0.84)
At Secondary T 2 --at-secondary-t-2
hsla(86.05,68.25%,37.06%,0.68)
At Secondary T 3 --at-secondary-t-3
hsla(86.05,68.25%,37.06%,0.53)
At Secondary T 4 --at-secondary-t-4
hsla(86.05,68.25%,37.06%,0.37)
At Secondary T 5 --at-secondary-t-5
hsla(86.05,68.25%,37.06%,0.21)
At Secondary T 6 --at-secondary-t-6
hsla(86.05,68.25%,37.06%,0.05)
At Neutral --at-neutral
hsla(29, 20%, 50%, 1)
At Neutral L 1 --at-neutral-l-1
hsla(30,19.63%,58.04%,1)
At Neutral L 2 --at-neutral-l-2
hsla(29.14,20.23%,66.08%,1)
At Neutral L 3 --at-neutral-l-3
hsla(30,19.7%,74.12%,1)
At Neutral L 4 --at-neutral-l-4
hsla(30,19.57%,81.96%,1)
At Neutral L 5 --at-neutral-l-5
hsla(30,20%,90.2%,1)
At Neutral L 6 --at-neutral-l-6
hsla(30,20%,98.04%,1)
At Neutral D 1 --at-neutral-d-1
hsla(29.3,19.82%,42.55%,1)
At Neutral D 2 --at-neutral-d-2
hsla(30,20.22%,34.9%,1)
At Neutral D 3 --at-neutral-d-3
hsla(30,20%,27.45%,1)
At Neutral D 4 --at-neutral-d-4
hsla(30,19.61%,20%,1)
At Neutral D 5 --at-neutral-d-5
hsla(32.31,20.63%,12.35%,1)
At Neutral D 6 --at-neutral-d-6
hsla(36,20%,4.9%,1)
At Neutral T 1 --at-neutral-t-1
hsla(29.41,20%,50%,0.84)
At Neutral T 2 --at-neutral-t-2
hsla(29.41,20%,50%,0.68)
At Neutral T 3 --at-neutral-t-3
hsla(29.41,20%,50%,0.53)
At Neutral T 4 --at-neutral-t-4
hsla(29.41,20%,50%,0.37)
At Neutral T 5 --at-neutral-t-5
hsla(29.41,20%,50%,0.21)
At Neutral T 6 --at-neutral-t-6
hsla(29.41,20%,50%,0.05)
At Black --at-black
hsla(0, 0%, 0%, 1)
At Black T 1 --at-black-t-1
hsla(0,0%,0%,0.84)
At Black T 2 --at-black-t-2
hsla(0,0%,0%,0.68)
At Black T 3 --at-black-t-3
hsla(0,0%,0%,0.53)
At Black T 4 --at-black-t-4
hsla(0,0%,0%,0.37)
At Black T 5 --at-black-t-5
hsla(0,0%,0%,0.21)
At Black T 6 --at-black-t-6
hsla(0,0%,0%,0.05)
At White --at-white
#ffffff
At White T 1 --at-white-t-1
hsla(0,0%,100%,0.84)
At White T 2 --at-white-t-2
hsla(0,0%,100%,0.68)
At White T 3 --at-white-t-3
hsla(0,0%,100%,0.53)
At White T 4 --at-white-t-4
hsla(0,0%,100%,0.37)
At White T 5 --at-white-t-5
hsla(0,0%,100%,0.21)
At White T 6 --at-white-t-6
hsla(0,0%,100%,0.05)

AT Purple

At Primary --at-primary
hsla(301, 66.7%, 41.2%, 1)
At Primary L 1 --at-primary-l-1
hsla(301.02,46.83%,50.59%,1)
At Primary L 2 --at-primary-l-2
hsla(300.63,46.8%,60.2%,1)
At Primary L 3 --at-primary-l-3
hsla(300.82,47.1%,69.61%,1)
At Primary L 4 --at-primary-l-4
hsla(301.18,47.66%,79.02%,1)
At Primary L 5 --at-primary-l-5
hsla(300,48.28%,88.63%,1)
At Primary L 6 --at-primary-l-6
hsla(300,60%,98.04%,1)
At Primary D 1 --at-primary-d-1
hsla(300.5,66.48%,35.1%,1)
At Primary D 2 --at-primary-d-2
hsla(301.21,66.44%,29.22%,1)
At Primary D 3 --at-primary-d-3
hsla(300.77,66.1%,23.14%,1)
At Primary D 4 --at-primary-d-4
hsla(300,67.44%,16.86%,1)
At Primary D 5 --at-primary-d-5
hsla(301.58,67.86%,10.98%,1)
At Primary D 6 --at-primary-d-6
hsla(300,68%,4.9%,1)
At Primary T 1 --at-primary-t-1
hsla(300.86,66.67%,41.18%,0.84)
At Primary T 2 --at-primary-t-2
hsla(300.86,66.67%,41.18%,0.68)
At Primary T 3 --at-primary-t-3
hsla(300.86,66.67%,41.18%,0.53)
At Primary T 4 --at-primary-t-4
hsla(300.86,66.67%,41.18%,0.37)
At Primary T 5 --at-primary-t-5
hsla(300.86,66.67%,41.18%,0.21)
At Primary T 6 --at-primary-t-6
hsla(300.86,66.67%,41.18%,0.05)
At Secondary --at-secondary
hsla(17, 68%, 37%, 1)
At Secondary L 1 --at-secondary-l-1
hsla(17.06,45.23%,47.25%,1)
At Secondary L 2 --at-secondary-l-2
hsla(17.05,40.37%,57.25%,1)
At Secondary L 3 --at-secondary-l-3
hsla(17.65,40.96%,67.45%,1)
At Secondary L 4 --at-secondary-l-4
hsla(17.5,42.11%,77.65%,1)
At Secondary L 5 --at-secondary-l-5
hsla(17.78,42.86%,87.65%,1)
At Secondary L 6 --at-secondary-l-6
hsla(17.14,63.64%,97.84%,1)
At Secondary D 1 --at-secondary-d-1
hsla(16.91,67.9%,31.76%,1)
At Secondary D 2 --at-secondary-d-2
hsla(17.61,68.66%,26.27%,1)
At Secondary D 3 --at-secondary-d-3
hsla(17.26,68.22%,20.98%,1)
At Secondary D 4 --at-secondary-d-4
hsla(16.67,67.5%,15.69%,1)
At Secondary D 5 --at-secondary-d-5
hsla(18.33,69.23%,10.2%,1)
At Secondary D 6 --at-secondary-d-6
hsla(17.65,68%,4.9%,1)
At Secondary T 1 --at-secondary-t-1
hsla(17.21,68.25%,37.06%,0.84)
At Secondary T 2 --at-secondary-t-2
hsla(17.21,68.25%,37.06%,0.68)
At Secondary T 3 --at-secondary-t-3
hsla(17.21,68.25%,37.06%,0.53)
At Secondary T 4 --at-secondary-t-4
hsla(17.21,68.25%,37.06%,0.37)
At Secondary T 5 --at-secondary-t-5
hsla(17.21,68.25%,37.06%,0.21)
At Secondary T 6 --at-secondary-t-6
hsla(17.21,68.25%,37.06%,0.05)
At Neutral --at-neutral
hsla(301, 12%, 50%, 1)
At Neutral L 1 --at-neutral-l-1
hsla(302.31,12.15%,58.04%,1)
At Neutral L 2 --at-neutral-l-2
hsla(302.86,12.14%,66.08%,1)
At Neutral L 3 --at-neutral-l-3
hsla(303.75,12.12%,74.12%,1)
At Neutral L 4 --at-neutral-l-4
hsla(305,13.04%,81.96%,1)
At Neutral L 5 --at-neutral-l-5
hsla(308.57,13.73%,90%,1)
At Neutral L 6 --at-neutral-l-6
hsla(330,20%,98.04%,1)
At Neutral D 1 --at-neutral-d-1
hsla(302.22,12.44%,42.55%,1)
At Neutral D 2 --at-neutral-d-2
hsla(302.73,12.36%,34.9%,1)
At Neutral D 3 --at-neutral-d-3
hsla(303.53,12.06%,27.65%,1)
At Neutral D 4 --at-neutral-d-4
hsla(300,11.76%,20%,1)
At Neutral D 5 --at-neutral-d-5
hsla(307.5,12.5%,12.55%,1)
At Neutral D 6 --at-neutral-d-6
hsla(300,12%,4.9%,1)
At Neutral T 1 --at-neutral-t-1
hsla(301.94,12.16%,50%,0.84)
At Neutral T 2 --at-neutral-t-2
hsla(301.94,12.16%,50%,0.68)
At Neutral T 3 --at-neutral-t-3
hsla(301.94,12.16%,50%,0.53)
At Neutral T 4 --at-neutral-t-4
hsla(301.94,12.16%,50%,0.37)
At Neutral T 5 --at-neutral-t-5
hsla(301.94,12.16%,50%,0.21)
At Neutral T 6 --at-neutral-t-6
hsla(301.94,12.16%,50%,0.05)
At Black --at-black
hsla(0, 0%, 0%, 1)
At Black T 1 --at-black-t-1
hsla(0,0%,0%,0.84)
At Black T 2 --at-black-t-2
hsla(0,0%,0%,0.68)
At Black T 3 --at-black-t-3
hsla(0,0%,0%,0.53)
At Black T 4 --at-black-t-4
hsla(0,0%,0%,0.37)
At Black T 5 --at-black-t-5
hsla(0,0%,0%,0.21)
At Black T 6 --at-black-t-6
hsla(0,0%,0%,0.05)
At White --at-white
#ffffff
At White T 1 --at-white-t-1
hsla(0,0%,100%,0.84)
At White T 2 --at-white-t-2
hsla(0,0%,100%,0.68)
At White T 3 --at-white-t-3
hsla(0,0%,100%,0.53)
At White T 4 --at-white-t-4
hsla(0,0%,100%,0.37)
At White T 5 --at-white-t-5
hsla(0,0%,100%,0.21)
At White T 6 --at-white-t-6
hsla(0,0%,100%,0.05)

ACSS Global

Primary --primary
var(--primary)
Base --base
var(--base)
Neutral --neutral
var(--neutral)
Black --black
var(--black)
White --white
var(--white)
Transparent transparent
transparent

ACSS Primary

Primary --primary
var(--primary)
Primary Ultra Dark --primary-ultra-dark
var(--primary-ultra-dark)
Primary Dark --primary-dark
var(--primary-dark)
Primary Semi Dark --primary-semi-dark
var(--primary-semi-dark)
Primary Semi Light --primary-semi-light
var(--primary-semi-light)
Primary Light --primary-light
var(--primary-light)
Primary Ultra Light --primary-ultra-light
var(--primary-ultra-light)
Primary Comp --primary-comp
var(--primary-comp)
Primary Hover --primary-hover
var(--primary-hover)
Primary Trans 90 --primary-trans-90
var(--primary-trans-90)
Primary Trans 80 --primary-trans-80
var(--primary-trans-80)
Primary Trans 70 --primary-trans-70
var(--primary-trans-70)
Primary Trans 60 --primary-trans-60
var(--primary-trans-60)
Primary Trans 40 --primary-trans-40
var(--primary-trans-40)
Primary Trans 50 --primary-trans-50
var(--primary-trans-50)
Primary Trans 30 --primary-trans-30
var(--primary-trans-30)
Primary Trans 20 --primary-trans-20
var(--primary-trans-20)
Primary Trans 10 --primary-trans-10
var(--primary-trans-10)
Primary Ultra Dark Trans 90 --primary-ultra-dark-trans-90
var(--primary-ultra-dark-trans-90)
Primary Ultra Dark Trans 80 --primary-ultra-dark-trans-80
var(--primary-ultra-dark-trans-80)
Primary Ultra Dark Trans 70 --primary-ultra-dark-trans-70
var(--primary-ultra-dark-trans-70)
Primary Ultra Dark Trans 60 --primary-ultra-dark-trans-60
var(--primary-ultra-dark-trans-60)
Primary Ultra Dark Trans 50 --primary-ultra-dark-trans-50
var(--primary-ultra-dark-trans-50)
Primary Ultra Dark Trans 40 --primary-ultra-dark-trans-40
var(--primary-ultra-dark-trans-40)
Primary Ultra Dark Trans 30 --primary-ultra-dark-trans-30
var(--primary-ultra-dark-trans-30)
Primary Ultra Dark Trans 20 --primary-ultra-dark-trans-20
var(--primary-ultra-dark-trans-20)
Primary Ultra Dark Trans 10 --primary-ultra-dark-trans-10
var(--primary-ultra-dark-trans-10)
Primary Dark Trans 90 --primary-dark-trans-90
var(--primary-dark-trans-90)
Primary Dark Trans 80 --primary-dark-trans-80
var(--primary-dark-trans-80)
Primary Dark Trans 70 --primary-dark-trans-70
var(--primary-dark-trans-70)
Primary Dark Trans 60 --primary-dark-trans-60
var(--primary-dark-trans-60)
Primary Dark Trans 50 --primary-dark-trans-50
var(--primary-dark-trans-50)
Primary Dark Trans 40 --primary-dark-trans-40
var(--primary-dark-trans-40)
Primary Dark Trans 30 --primary-dark-trans-30
var(--primary-dark-trans-30)
Primary Dark Trans 20 --primary-dark-trans-20
var(--primary-dark-trans-20)
Primary Dark Trans 10 --primary-dark-trans-10
var(--primary-dark-trans-10)
Primary Light Trans 90 --primary-light-trans-90
var(--primary-light-trans-90)
Primary Light Trans 80 --primary-light-trans-80
var(--primary-light-trans-80)
Primary Light Trans 70 --primary-light-trans-70
var(--primary-light-trans-70)
Primary Light Trans 60 --primary-light-trans-60
var(--primary-light-trans-60)
Primary Light Trans 50 --primary-light-trans-50
var(--primary-light-trans-50)
Primary Light Trans 40 --primary-light-trans-40
var(--primary-light-trans-40)
Primary Light Trans 30 --primary-light-trans-30
var(--primary-light-trans-30)
Primary Light Trans 20 --primary-light-trans-20
var(--primary-light-trans-20)
Primary Light Trans 10 --primary-light-trans-10
var(--primary-light-trans-10)

ACSS Base

Base --base
var(--base)
Base Ultra Dark --base-ultra-dark
var(--base-ultra-dark)
Base Dark --base-dark
var(--base-dark)
Base Semi Dark --base-semi-dark
var(--base-semi-dark)
Base Semi Light --base-semi-light
var(--base-semi-light)
Base Light --base-light
var(--base-light)
Base Ultra Light --base-ultra-light
var(--base-ultra-light)
Base Comp --base-comp
var(--base-comp)
Base Hover --base-hover
var(--base-hover)
Base Trans 90 --base-trans-90
var(--base-trans-90)
Base Trans 80 --base-trans-80
var(--base-trans-80)
Base Trans 70 --base-trans-70
var(--base-trans-70)
Base Trans 60 --base-trans-60
var(--base-trans-60)
Base Trans 40 --base-trans-40
var(--base-trans-40)
Base Trans 50 --base-trans-50
var(--base-trans-50)
Base Trans 30 --base-trans-30
var(--base-trans-30)
Base Trans 20 --base-trans-20
var(--base-trans-20)
Base Trans 10 --base-trans-10
var(--base-trans-10)
Base Ultra Dark Trans 90 --base-ultra-dark-trans-90
var(--base-ultra-dark-trans-90)
Base Ultra Dark Trans 80 --base-ultra-dark-trans-80
var(--base-ultra-dark-trans-80)
Base Ultra Dark Trans 70 --base-ultra-dark-trans-70
var(--base-ultra-dark-trans-70)
Base Ultra Dark Trans 60 --base-ultra-dark-trans-60
var(--base-ultra-dark-trans-60)
Base Ultra Dark Trans 50 --base-ultra-dark-trans-50
var(--base-ultra-dark-trans-50)
Base Ultra Dark Trans 40 --base-ultra-dark-trans-40
var(--base-ultra-dark-trans-40)
Base Ultra Dark Trans 30 --base-ultra-dark-trans-30
var(--base-ultra-dark-trans-30)
Base Ultra Dark Trans 20 --base-ultra-dark-trans-20
var(--base-ultra-dark-trans-20)
Base Ultra Dark Trans 10 --base-ultra-dark-trans-10
var(--base-ultra-dark-trans-10)
Base Dark Trans 90 --base-dark-trans-90
var(--base-dark-trans-90)
Base Dark Trans 80 --base-dark-trans-80
var(--base-dark-trans-80)
Base Dark Trans 70 --base-dark-trans-70
var(--base-dark-trans-70)
Base Dark Trans 60 --base-dark-trans-60
var(--base-dark-trans-60)
Base Dark Trans 50 --base-dark-trans-50
var(--base-dark-trans-50)
Base Dark Trans 40 --base-dark-trans-40
var(--base-dark-trans-40)
Base Dark Trans 30 --base-dark-trans-30
var(--base-dark-trans-30)
Base Dark Trans 20 --base-dark-trans-20
var(--base-dark-trans-20)
Base Dark Trans 10 --base-dark-trans-10
var(--base-dark-trans-10)
Base Light Trans 90 --base-light-trans-90
var(--base-light-trans-90)
Base Light Trans 80 --base-light-trans-80
var(--base-light-trans-80)
Base Light Trans 70 --base-light-trans-70
var(--base-light-trans-70)
Base Light Trans 60 --base-light-trans-60
var(--base-light-trans-60)
Base Light Trans 50 --base-light-trans-50
var(--base-light-trans-50)
Base Light Trans 40 --base-light-trans-40
var(--base-light-trans-40)
Base Light Trans 30 --base-light-trans-30
var(--base-light-trans-30)
Base Light Trans 20 --base-light-trans-20
var(--base-light-trans-20)
Base Light Trans 10 --base-light-trans-10
var(--base-light-trans-10)

ACSS Neutral

Neutral --neutral
var(--neutral)
Neutral Ultra Dark --neutral-ultra-dark
var(--neutral-ultra-dark)
Neutral Dark --neutral-dark
var(--neutral-dark)
Neutral Semi Dark --neutral-semi-dark
var(--neutral-semi-dark)
Neutral Semi Light --neutral-semi-light
var(--neutral-semi-light)
Neutral Light --neutral-light
var(--neutral-light)
Neutral Ultra Light --neutral-ultra-light
var(--neutral-ultra-light)
Neutral Comp --neutral-comp
var(--neutral-comp)
Neutral Hover --neutral-hover
var(--neutral-hover)
Neutral Trans 90 --neutral-trans-90
var(--neutral-trans-90)
Neutral Trans 80 --neutral-trans-80
var(--neutral-trans-80)
Neutral Trans 70 --neutral-trans-70
var(--neutral-trans-70)
Neutral Trans 60 --neutral-trans-60
var(--neutral-trans-60)
Neutral Trans 40 --neutral-trans-40
var(--neutral-trans-40)
Neutral Trans 50 --neutral-trans-50
var(--neutral-trans-50)
Neutral Trans 30 --neutral-trans-30
var(--neutral-trans-30)
Neutral Trans 20 --neutral-trans-20
var(--neutral-trans-20)
Neutral Trans 10 --neutral-trans-10
var(--neutral-trans-10)
Neutral Ultra Dark Trans 90 --neutral-ultra-dark-trans-90
var(--neutral-ultra-dark-trans-90)
Neutral Ultra Dark Trans 80 --neutral-ultra-dark-trans-80
var(--neutral-ultra-dark-trans-80)
Neutral Ultra Dark Trans 70 --neutral-ultra-dark-trans-70
var(--neutral-ultra-dark-trans-70)
Neutral Ultra Dark Trans 60 --neutral-ultra-dark-trans-60
var(--neutral-ultra-dark-trans-60)
Neutral Ultra Dark Trans 50 --neutral-ultra-dark-trans-50
var(--neutral-ultra-dark-trans-50)
Neutral Ultra Dark Trans 40 --neutral-ultra-dark-trans-40
var(--neutral-ultra-dark-trans-40)
Neutral Ultra Dark Trans 30 --neutral-ultra-dark-trans-30
var(--neutral-ultra-dark-trans-30)
Neutral Ultra Dark Trans 20 --neutral-ultra-dark-trans-20
var(--neutral-ultra-dark-trans-20)
Neutral Ultra Dark Trans 10 --neutral-ultra-dark-trans-10
var(--neutral-ultra-dark-trans-10)
Neutral Dark Trans 90 --neutral-dark-trans-90
var(--neutral-dark-trans-90)
Neutral Dark Trans 80 --neutral-dark-trans-80
var(--neutral-dark-trans-80)
Neutral Dark Trans 70 --neutral-dark-trans-70
var(--neutral-dark-trans-70)
Neutral Dark Trans 60 --neutral-dark-trans-60
var(--neutral-dark-trans-60)
Neutral Dark Trans 50 --neutral-dark-trans-50
var(--neutral-dark-trans-50)
Neutral Dark Trans 40 --neutral-dark-trans-40
var(--neutral-dark-trans-40)
Neutral Dark Trans 30 --neutral-dark-trans-30
var(--neutral-dark-trans-30)
Neutral Dark Trans 20 --neutral-dark-trans-20
var(--neutral-dark-trans-20)
Neutral Dark Trans 10 --neutral-dark-trans-10
var(--neutral-dark-trans-10)
Neutral Light Trans 90 --neutral-light-trans-90
var(--neutral-light-trans-90)
Neutral Light Trans 80 --neutral-light-trans-80
var(--neutral-light-trans-80)
Neutral Light Trans 70 --neutral-light-trans-70
var(--neutral-light-trans-70)
Neutral Light Trans 60 --neutral-light-trans-60
var(--neutral-light-trans-60)
Neutral Light Trans 50 --neutral-light-trans-50
var(--neutral-light-trans-50)
Neutral Light Trans 40 --neutral-light-trans-40
var(--neutral-light-trans-40)
Neutral Light Trans 30 --neutral-light-trans-30
var(--neutral-light-trans-30)
Neutral Light Trans 20 --neutral-light-trans-20
var(--neutral-light-trans-20)
Neutral Light Trans 10 --neutral-light-trans-10
var(--neutral-light-trans-10)

ACSS Black & white

Black --black
var(--black)
White --white
var(--white)
Black Trans 90 --black-trans-90
var(--black-trans-90)
Black Trans 80 --black-trans-80
var(--black-trans-80)
Black Trans 70 --black-trans-70
var(--black-trans-70)
Black Trans 60 --black-trans-60
var(--black-trans-60)
Black Trans 50 --black-trans-50
var(--black-trans-50)
Black Trans 40 --black-trans-40
var(--black-trans-40)
Black Trans 30 --black-trans-30
var(--black-trans-30)
Black Trans 20 --black-trans-20
var(--black-trans-20)
Black Trans 10 --black-trans-10
var(--black-trans-10)
White Trans 90 --white-trans-90
var(--white-trans-90)
White Trans 80 --white-trans-80
var(--white-trans-80)
White Trans 70 --white-trans-70
var(--white-trans-70)
White Trans 60 --white-trans-60
var(--white-trans-60)
White Trans 50 --white-trans-50
var(--white-trans-50)
White Trans 40 --white-trans-40
var(--white-trans-40)
White Trans 30 --white-trans-30
var(--white-trans-30)
White Trans 20 --white-trans-20
var(--white-trans-20)
White Trans 10 --white-trans-10
var(--white-trans-10)

Typography

Heading typeface
Aa
ABeeZee Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Body typeface
Aa
Inter Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Heading scale

--heading--xs
MIN 10.24px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 13.51px
The wizard quickly jinxed the gnomes before they vaporized.
--heading--s
MIN 12.8px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 18.01px
The wizard quickly jinxed the gnomes before they vaporized.
--heading--m
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 24.01px
The wizard quickly jinxed the gnomes before they vaporized.
--heading--l
MIN 20px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 32px
The wizard quickly jinxed the gnomes before they vaporized.
--heading--xl
MIN 25px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 42.66px
The wizard quickly jinxed the gnomes before they vaporized.
--heading--2xl
MIN 31.25px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 56.86px
The wizard quickly jinxed the gnomes before they vaporized.

Body scale

--text--xs
MIN 11.11px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 10.24px
The wizard quickly jinxed the gnomes before they vaporized.
--text--s
MIN 13.33px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 12.8px
The wizard quickly jinxed the gnomes before they vaporized.
--text--m
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 16px
The wizard quickly jinxed the gnomes before they vaporized.
--text--l
MIN 19.2px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 20px
The wizard quickly jinxed the gnomes before they vaporized.
--text--xl
MIN 23.04px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 25px
The wizard quickly jinxed the gnomes before they vaporized.
--text--2xl
MIN 27.65px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 31.25px
The wizard quickly jinxed the gnomes before they vaporized.
--text--3xl
MIN 33.18px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 39.06px
The wizard quickly jinxed the gnomes before they vaporized.
--text--4xl
MIN 39.81px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 48.83px
The wizard quickly jinxed the gnomes before they vaporized.

Button - Sizes

--at-btn-large-padding-block
MIN 9.6px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 9.6px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-large-padding-inline
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 16px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-medium-padding-block
MIN 8px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 8px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-medium-padding-inline
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 16px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-small-padding-block
MIN 6.4px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 6.4px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-small-padding-inline
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 16px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-x-large-padding-block
MIN 12.8px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 12.8px
The wizard quickly jinxed the gnomes before they vaporized.
--at-btn-x-large-padding-inline
MIN 16px
The wizard quickly jinxed the gnomes before they vaporized.
MAX 16px
The wizard quickly jinxed the gnomes before they vaporized.

Spacing

Spacing scale

--space--4xs
MIN 6.55px
MAX 4.75px
--space--3xs
MIN 8.19px
MAX 6.33px
--space--2xs
MIN 10.24px
MAX 8.44px
--space--xs
MIN 12.8px
MAX 11.26px
--space--s
MIN 16px
MAX 15px
--space--m
MIN 20px
MAX 20px
--space--l
MIN 25px
MAX 26.66px
--space--xl
MIN 31.25px
MAX 35.54px
--space--2xl
MIN 39.06px
MAX 47.37px
--space--3xl
MIN 48.83px
MAX 63.15px
--space--4xl
MIN 61.04px
MAX 84.17px

Design style

Radii and borders

Design style: Default
Button radius var(--radius--btn) Design style: Medium
Surface radius var(--radius--surface) Design style: Medium
Border width var(--border--surface) Design style: Default
Design style Default

Preview

Component styling

Primary surface

System-driven card styling

Use this canvas to review how your current design tokens read together before changing framework mappings or style settings.

Live preview from the current site setup.
Bricks button styles

Theme Style button variants

These use the default Bricks button style classes, so they reflect the user’s saved Theme Style button presets.