Logo

🧭 When to Use a Logo

Use the Logo in:

• Navigation bars (top, side, or mobile)

• Authentication screens

• Empty states or onboarding views

• Branded footers

• Loading screens and splash views

Avoid using the Logo decoratively in content-heavy UI areas. It should always serve a clear branding or navigational purpose.

🎨 Logo Variants

Icon Variant
A simplified, square or circular version of the logo. Best used in compact spaces such as:

• Mobile nav bars

• Favicons

• App launchers

• Buttons or compact overlays

Full Logo Variant
A horizontal lockup that includes both the icon and the brand name. Use this in:

• Full headers

• Auth screens

• Marketing and landing pages

• Branded footers or splash views

Both variants are scalable vector components and can be swapped easily via instance overrides in Figma. You can also set up a smart layer property to switch between them.

🎯 Responsive Behavior

In responsive layouts:

• Use the Icon variant for mobile breakpoints or constrained navs

• Use the Full variant for desktop and tablet views where branding has more room to breathe

Spacing and alignment are token-driven to ensure harmony in any layout.

♿ Accessibility Considerations

If implemented in code:

• Always include alt text (e.g., alt="Company Logo")

• If the logo links to the homepage, ensure it's keyboard-focusable and has a clear aria-label

• Don’t rely on the logo as the only way to identify the product—use text in critical flows

✅ Best Practices

• Don’t distort the logo—maintain aspect ratio and padding

• Always use the provided versions for color modes (e.g. dark logo on light backgrounds, and vice versa)

• Avoid adding shadows, filters, or decorations unless part of a branded variant

• Use spacing tokens to maintain consistency when placing the logo near nav links or buttons