Logo & Brand Marks

Aggarly Platform brand marks are designed for enterprise-grade UI placement: navbars, sidebars, authentication screens, exported reports, and in-product badge/lockup usage. The design system supports both full-color images and monochrome/tinted rendering without hardcoding any asset paths in SCSS.

Primary Logo (Image)

Use the colored logo for standard light surfaces (navbar, login, marketing surfaces).

Show code

import { BrandMark } from "@/design-system/components/BrandMark";

export function Example() {
  return (
    <BrandMark
      src="/assets/logos/logo-colored.svg"
      alt="Aggarly"
      size="lg"
    />
  );
}

Icon Mark (Framed)

Use a framed icon for compact navigation, app switchers, and premium identity chips.

Show code

import { BrandMark } from "@/design-system/components/BrandMark";

export function Example() {
  return (
    <BrandMark
      src="/assets/logos/thera-icon.svg"
      alt="Aggarly icon"
      size="md"
      framed
      variant="card"
      shape="rounded"
    />
  );
}

Lockups (Icon + Text)

Recommended for navbars and sidebars: icon + product name, optionally with a short descriptor.

Aggarly PlatformClinical operationsAggarlyAdmin console

Show code

import { BrandMark } from "@/design-system/components/BrandMark";

export function Example() {
  return (
    <div className="brandmarks-row">
      <BrandMark
        src="/assets/logos/thera-icon.svg"
        alt="Aggarly"
        render="mask"
        tone="primary"
        framed
        variant="badge"
        label="Aggarly Platform"
        description="Clinical operations system"
      />

      <BrandMark
        src="/assets/logos/thera-icon.svg"
        alt="Aggarly"
        render="mask"
        tone="neutral"
        framed
        variant="plain"
        label="Aggarly"
      />
    </div>
  );
}

Monochrome / Tinted Mark (Theme-safe)

Use render='mask' when you need the mark to adapt to theme/background. This is ideal for dark navbars and compact UI.

AggarlyTint follows currentColor

Show code

import { BrandMark } from "@/design-system/components/BrandMark";

export function Example() {
  return (
    <BrandMark
      src="/assets/logos/thera-icon.svg"
      alt="Aggarly"
      render="mask"
      tone="primary"
      size="xl"
      framed
      variant="glass"
      shape="circle"
      label="Aggarly"
      description="Monochrome brand mark (theme-safe)"
    />
  );
}

Using the Brand Icon in Nav Config

If your nav items expect an icon component (like lucide icons), use BrandGlyph to create a brand icon component.

Show code

import { BrandGlyph } from "@/design-system/components/BrandMark";

export function TheraNavIcon({ className }: { className?: string }) {
  return (
    <BrandGlyph
      className={className}
      src="/assets/icons/thera-icon.svg"
      size="sm"
      tone="primary"
      decorative
    />
  );
}

// Usage:
const NAV = [
  { href: "/docs/brand/logo", label: "Logo", icon: TheraNavIcon }
];

import { BrandMark } from "@/design-system/components/BrandMark"; export function Example() { return ( <BrandMark src="/assets/logos/logo-colored.svg" alt="Aggarly" size="lg" /> ); }

import { BrandMark } from "@/design-system/components/BrandMark"; export function Example() { return ( <BrandMark src="/assets/logos/thera-icon.svg" alt="Aggarly icon" size="md" framed variant="card" shape="rounded" /> ); }

import { BrandMark } from "@/design-system/components/BrandMark"; export function Example() { return ( <div className="brandmarks-row"> <BrandMark src="/assets/logos/thera-icon.svg" alt="Aggarly" render="mask" tone="primary" framed variant="badge" label="Aggarly Platform" description="Clinical operations system" /> <BrandMark src="/assets/logos/thera-icon.svg" alt="Aggarly" render="mask" tone="neutral" framed variant="plain" label="Aggarly" /> </div> ); }

import { BrandMark } from "@/design-system/components/BrandMark"; export function Example() { return ( <BrandMark src="/assets/logos/thera-icon.svg" alt="Aggarly" render="mask" tone="primary" size="xl" framed variant="glass" shape="circle" label="Aggarly" description="Monochrome brand mark (theme-safe)" /> ); }

import { BrandGlyph } from "@/design-system/components/BrandMark"; export function TheraNavIcon({ className }: { className?: string }) { return ( <BrandGlyph className={className} src="/assets/icons/thera-icon.svg" size="sm" tone="primary" decorative /> ); } // Usage: const NAV = [ { href: "/docs/brand/logo", label: "Logo", icon: TheraNavIcon } ];