Logo
<ahi-logo> | AhiLogo
Logos draw the Azalea Health and product marks in full color, and follow the light and dark themes on their own.
<ahi-logo> draws the Azalea Health logo and product marks. The marks ship with AKU, so
apps no longer need to copy logo files, and they follow the theme on their own: full color on light
surfaces, all white on dark ones.
<ahi-logo name="azalea"></ahi-logo>
Examples
Marks
name |
Mark | Default label |
|---|---|---|
azalea |
The Azalea Health logo: flower and words | “Azalea Health” |
azalea-mark |
The flower alone | “Azalea Health” |
ai-sparkle |
The AI sparkle | “AI” |
myhealthspot |
The myHealthspot product logo | “myHealthspot” |
<div class="ahi-row" style="gap: var(--ahi-space-8); align-items: center; flex-wrap: wrap;">
<ahi-logo name="azalea"></ahi-logo>
<ahi-logo name="azalea-mark" size="large"></ahi-logo>
<ahi-logo name="ai-sparkle" size="large"></ahi-logo>
<ahi-logo name="myhealthspot"></ahi-logo>
</div>
Sizes
size sets the height, and the width follows the mark’s shape. The full logos step through 24,
32 and 48 pixels. The marks without words, azalea-mark and ai-sparkle, use the
icon sizes instead (16, 20 and 60 pixels), so they line up with an <ahi-icon> beside
them.
<div class="ahi-column" style="gap: var(--ahi-space-4);">
<div class="ahi-row" style="gap: var(--ahi-space-6); align-items: center;">
<ahi-logo name="azalea" size="small"></ahi-logo>
<ahi-logo name="azalea" size="medium"></ahi-logo>
<ahi-logo name="azalea" size="large"></ahi-logo>
</div>
<div class="ahi-row" style="gap: var(--ahi-space-6); align-items: center;">
<ahi-logo name="ai-sparkle" size="small"></ahi-logo>
<ahi-logo name="ai-sparkle" size="medium"></ahi-logo>
<ahi-logo name="ai-sparkle" size="large"></ahi-logo>
</div>
</div>
Custom sizes
For any other height, set the --size custom property. It takes precedence over
size, and the width still follows the mark’s shape. The full Azalea Health logo is about 3.39
times as wide as it is tall, so to fill a given width, divide by 3.39: 71px tall is 240px wide, the size of
a sign-in page’s logo.
Setting height or width on <ahi-logo> itself doesn’t resize the
mark. Use --size.
<a href="https://www.azaleahealth.com">
<ahi-logo name="azalea" label="Azalea Health website" style="--size: 71px"></ahi-logo>
</a>
Dark surfaces
On a dark surface the logo goes all white with no extra code. It reads its colors from the theme, so
anything inside .ahi-theme-dark gets the all-white version. .ahi-invert flips a
section to the opposite theme, so its logo is all white on a light page and full color on a dark one. The
brand guidelines
allow only two versions of the logo, full color and all white, so the logo never mixes brand-colored parts
with white ones.
This example is a .ahi-theme-dark section, so it stays dark whichever theme these docs are in.
<div
class="ahi-theme-dark ahi-row"
style="gap: var(--ahi-space-8); align-items: center; flex-wrap: wrap; padding: var(--ahi-space-6); background: var(--ahi-color-gray-50); border-radius: var(--ahi-border-radius-medium);"
>
<ahi-logo name="azalea"></ahi-logo>
<ahi-logo name="azalea-mark" size="large"></ahi-logo>
<ahi-logo name="ai-sparkle" size="large"></ahi-logo>
<ahi-logo name="myhealthspot"></ahi-logo>
</div>
Inverse
appearance="inverse" draws the mark all white on either theme, for a brand-colored background
such as a blue banner.
<div
class="ahi-row"
style="gap: var(--ahi-space-8); align-items: center; padding: var(--ahi-space-6); background: var(--ahi-brand-blue); border-radius: var(--ahi-border-radius-medium);"
>
<ahi-logo name="azalea" appearance="inverse"></ahi-logo>
<ahi-logo name="myhealthspot" appearance="inverse"></ahi-logo>
</div>
Neutral
appearance="neutral" draws every part in the current text color. Use it where a mark stands in
for a one-color icon, for example in a row of icon buttons. The brand guidelines ask for icons used together
to share one color.
<div class="ahi-row" style="gap: var(--ahi-space-4);">
<ahi-button>
<ahi-logo slot="prefix" name="ai-sparkle" appearance="neutral" size="small" label=""></ahi-logo>
Summarize with AI
</ahi-button>
<ahi-button>
<ahi-icon slot="prefix" name="file-text" size="minor"></ahi-icon>
Export
</ahi-button>
</div>
In a button
For a full-color mark in a button, such as the AI sparkle, put it in the prefix slot at
size="small", which matches the icon size buttons use. Set label="", since the
button’s text names it. ahi-button keeps the brand colors where it sits on the page surface.
When it is disabled, or filled with variant="primary" or "destructive", it draws
the mark in its own text color instead. Full color would look enabled on a disabled button, and its blue
disappears into the primary fill. So the same markup works in every case.
<div class="ahi-row" style="gap: var(--ahi-space-4); flex-wrap: wrap;">
<ahi-button>
<ahi-logo slot="prefix" name="ai-sparkle" size="small" label=""></ahi-logo>
AI Assistant
</ahi-button>
<ahi-button disabled>
<ahi-logo slot="prefix" name="ai-sparkle" size="small" label=""></ahi-logo>
AI Assistant
</ahi-button>
<ahi-button variant="primary">
<ahi-logo slot="prefix" name="ai-sparkle" size="small" label=""></ahi-logo>
AI Assistant
</ahi-button>
<ahi-button variant="primary" outline>
<ahi-logo slot="prefix" name="ai-sparkle" size="small" label=""></ahi-logo>
AI Assistant
</ahi-button>
</div>
To draw a mark in one particular color elsewhere, set the --logo-color custom property on it.
Animation
The AI sparkle can twinkle: each of its three stars shrinks and turns a quarter-turn about its own center,
one after another. Only the sparkle animates. The brand guidelines rule out altering the Azalea Health logo,
so twinkle and working do nothing on the other marks.
-
twinkleplays one twinkle each time the pointer enters, or focus reaches, the button or link the sparkle sits in. -
workingloops while it is set, for example while an AI request runs. When cleared, each star finishes the twinkle it is in. The loop stops on its own after five seconds, because motion that starts by itself and runs beside other content must stop or be pausable within five seconds (WCAG 2.2.2). Set it again for the next request.
Neither plays when the reader has asked for reduced motion, and assistive technology never perceives them. So always say that work is in progress in text as well, as this example’s status line does. Hover the button, then select it.
<div class="ahi-row logo-working-demo" style="gap: var(--ahi-space-4); align-items: center;">
<ahi-button>
<ahi-logo slot="prefix" name="ai-sparkle" size="small" label="" twinkle></ahi-logo>
Summarize with AI
</ahi-button>
<span role="status"></span>
</div>
<script>
const demo = document.querySelector('.logo-working-demo');
const button = demo.querySelector('ahi-button');
const sparkle = button.querySelector('ahi-logo');
const status = demo.querySelector('[role="status"]');
button.addEventListener('click', () => {
sparkle.working = true;
status.textContent = 'Summarizing…';
// Stands in for the AI request.
setTimeout(() => {
sparkle.working = false;
status.textContent = 'Summary ready.';
}, 3000);
});
</script>
Accessible names
Each mark has a default name, such as “Azalea Health”. When the logo is a link, name the destination
(“Azalea Health home”), not the picture (“Azalea Health logo”). Set label="" when the mark is
decorative, for example next to text that already says the same thing. It is then hidden from assistive
technology.
<div class="ahi-row" style="gap: var(--ahi-space-6); align-items: center;">
<a href="#"><ahi-logo name="azalea" label="Azalea Health home"></ahi-logo></a>
<span class="ahi-row" style="gap: var(--ahi-space-2); align-items: center;">
<ahi-logo name="ai-sparkle" label=""></ahi-logo>
AI summary
</span>
</div>
Image files
Where CSS can’t reach, such as favicons and the iOS and Android asset catalogs, use the fixed-color files
the package ships. There is one file per mark and appearance, in dist/brand/:
@azaleahealth/azalea-kit-ui/brand/azalea-brand.svg
@azaleahealth/azalea-kit-ui/brand/azalea-inverse.svg
@azaleahealth/azalea-kit-ui/brand/azalea-neutral.svg
The -brand and -inverse files have fixed colors, because an SVG loaded through
<img> can’t see the page’s CSS variables. The -neutral files use
currentColor: inlined, they take the text color, and through <img> they draw
black.
For email, export a PNG from the -brand file: most email clients, Gmail and Outlook among them,
don’t display SVG images.
Usage
-
Logo or icon? Use
<ahi-icon>for one-color interface icons. Use<ahi-logo>for the Azalea Health and product marks. -
Use the full logo where it fits. The guidelines prefer the flower and words together. Use
azalea-markonly where the full logo can’t fit, such as an app icon or a compact header, and never show the words without the flower. -
Give it room. Keep clear space around the logo at least the size of one of its leaves.
<ahi-logo>adds no padding of its own. -
Don’t recolor it. Let the theme pick full color or all white, or choose
inversefor brand-colored backgrounds. Don’t override the part colors, and don’t add shadows, outlines, gradients or distortion.
These rules come from the Azalea Health Brand Guidelines (2025), pages 10 to 15. The link opens the PDF in Google Drive, which needs an Azalea Health account.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/logo/logo.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/logo/logo.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
name
|
The mark to draw. |
LogoName | ''
|
''
|
|
appearance
|
brand draws the mark in full color on light surfaces and all white on dark ones,
following the theme. neutral draws every part in the current text color, so a mark can
stand in for an icon, for example inside a button. inverse is all white, for
brand-colored backgrounds.
|
'brand' | 'neutral' | 'inverse'
|
'brand'
|
|
size
|
The mark’s height; its width follows its shape. A mark without a wordmark (azalea-mark,
ai-sparkle) uses the icon sizes, so it lines up with nearby icons. For any other
height, set the --size custom property instead.
|
'small' | 'medium' | 'large'
|
'medium'
|
|
label
|
The accessible name. Each mark has a default, such as “Azalea Health”. Describe the purpose where the mark is a link (“Azalea Health home”), not its appearance (“logo”). Set to an empty string when the mark is decorative, for example next to text that already names it. |
string | undefined
|
- | |
twinkle
|
ai-sparkle only. Twinkles once each time the pointer enters, or focus reaches, the
button or link the mark sits in (or the mark itself, outside one). Never with reduced motion.
|
boolean
|
false
|
|
working
|
ai-sparkle only. Twinkles in a loop while set, for example while an AI request runs,
and finishes the twinkle in progress when cleared. The loop stops on its own after five seconds
(WCAG 2.2.2); set it again to restart it. Never with reduced motion, so say that work is in progress
in text too.
|
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Custom Properties
| Name | Description | Default |
|---|---|---|
--size |
The mark’s height, for a size between or beyond the size steps. The width follows the
mark’s shape. Takes precedence over size.
|
|
--logo-color |
Draws every part in this one color instead of the theme’s, for example currentColor.
ahi-button sets it to its text color when it is disabled or filled
(primary, destructive), where full color would look enabled or vanish into
the fill. appearance="inverse" still draws white.
|
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
logo |
The component’s outer wrapper. |
Learn more about customizing CSS parts.