Avatar

Tailwind CSS and Alpine JS Avatar

Avatars are a great way to personalize your website and make it more engaging. They can be used to represent a person, a group of people, or even a brand.

Default Avatar

A circle avatar in various sizes.

Rounded avatar
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Square Avatar

A square avatar in various sizes with an adjustable border radius.

Rounded avatar
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Avatar with Icon Placeholder

An avatar in various colors with an icon placeholder.

<!-- default Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- inverse Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- primary Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- secondary Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- info Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- success Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- warning Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- danger Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- default Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- inverse Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- primary Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- secondary Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- info Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- success Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- warning Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

<!-- danger Avatar -->
<span class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-full h-full mt-3">
        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
    </svg>
</span>

@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Avatar with Initials Placeholder

An avatar in various colors with an initials placeholder.

JS JS JS JS JS JS JS JS
<!-- default Avatar -->
<span class="">JS</span>

<!-- inverse Avatar -->
<span class="">JS</span>

<!-- primary Avatar -->
<span class="">JS</span>

<!-- secondary Avatar -->
<span class="">JS</span>

<!-- info Avatar -->
<span class="">JS</span>

<!-- success Avatar -->
<span class="">JS</span>

<!-- warning Avatar -->
<span class="">JS</span>

<!-- danger Avatar -->
<span class="">JS</span>

<!-- default Avatar -->
<span class="">JS</span>

<!-- inverse Avatar -->
<span class="">JS</span>

<!-- primary Avatar -->
<span class="">JS</span>

<!-- secondary Avatar -->
<span class="">JS</span>

<!-- info Avatar -->
<span class="">JS</span>

<!-- success Avatar -->
<span class="">JS</span>

<!-- warning Avatar -->
<span class="">JS</span>

<!-- danger Avatar -->
<span class="">JS</span>

@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Avatar with Border

An avatar with a border in various colors.

Rounded avatar Rounded avatar Rounded avatar Rounded avatar
<!-- info Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- success Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- warning Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- danger Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- info Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- success Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- warning Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

<!-- danger Border Avatar -->
<img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Avatar with Status Indicator

An avatar with a status indicator in various colors.

Rounded avatar
Rounded avatar
Rounded avatar
Rounded avatar
Rounded avatar
<!-- Avatar - offline Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - info Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - success Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - warning Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - danger Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - offline Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - info Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - success Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - warning Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

<!-- Avatar - danger Status  -->
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <span class="">
    </span>
</div>

@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Stacked Avatars

A stacked avatar group in various sizes.

Rounded avatar Rounded avatar Rounded avatar Rounded avatar
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-3.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-5.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="Rounded avatar">
</div>
<div class="">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-3.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-5.webp" alt="Rounded avatar">
    <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="Rounded avatar">
</div>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}