GitHubCLI
Design system
GitHub

Component

Logo

Agentcard wordmark and standalone mark.

npx -y github:anwarlemu/agentcard-brand-cli#release add logo
logo.preview
Preview

Usage

use-it-for.md

Use Lockup in headers and footers, and LogoMark in smaller spaces. Set label={null} when the containing link already has an accessible name.

never.md
  • The logo in a color other than blue
  • ink or white
  • The mark stretched or outlined
  • A drop shadow or glow behind the logo
  • The wordmark retyped in a font

Example

examples/logo.tsx
import { Lockup, LogoMark } from "@/components/ui/logo";
import { Surface } from "@/lib/surface";

export function Site() {
  return (
    <div className="grid gap-6 sm:grid-cols-2">
      <div className="flex min-h-40 flex-col items-start justify-center gap-6 rounded-panel border border-hairline bg-surface p-8">
        <Lockup tone="brand" />
        <Lockup tone="ink" />
      </div>
      <Surface ground="blue" className="flex min-h-40 flex-col items-start justify-center gap-6 rounded-panel p-8">
        <Lockup tone="white" />
        <div className="flex items-center gap-4">
          <LogoMark tone="white" />
          <LogoMark tone="white" className="w-6" />
        </div>
      </Surface>
    </div>
  );
}

Source

components/ui/logo.tsx
import * as React from "react";

import { cn } from "@/lib/utils";

// The brand's logo, inlined from its SVG (brand/logo): the lockup (the agentcard wordmark with the hand reaching to
// pay, drawn in horizontal lines) and the mark (the hand alone). Both draw in currentColor, so they take the text color
// of where they sit: `tone` picks one of the brand's three (blue on white, white on the blue, ink as on the site's
// white header). Size them by width (the header's lockup is 160px, w-40); the height follows.
const TONES = {
  current: "",
  brand: "text-fg-brand",
  white: "text-white",
  ink: "text-fg",
} as const;

type LogoProps = Omit<React.ComponentProps<"svg">, "children" | "d"> & {
  /** The accessible name. Pass null when a link around the logo already names it (then the logo is hidden from readers). */
  label?: string | null;
  tone?: keyof typeof TONES;
};

const LOCKUP_VIEWBOX = "0 0 1010 180";
const LOCKUP_PATHS = [
  "M71.36 64.62C64.91 59.18 55.89 56.46 44.34 56.46C37.03 56.46 30.53 57.58 24.83 59.84C19.13 62.1 13.4 65.84 7.65002 71.07L17.83 82.27C21.25 78.85 24.87 76.23 28.68 74.41C32.49 72.6 36.88 71.69 41.86 71.69C47.51 71.69 52.03 73.13 55.43 76.01C58.82 78.89 60.52 82.86 60.52 87.94V92.3C57.920 91.21 54.71 90.31 50.88 89.62C47.04 88.92 42.93 88.57 38.52 88.57C28.62 88.57 20.56 90.97 14.34 95.77C8.12002 100.56 5.02002 107.24 5.02002 115.79C5.02002 123.46 7.60002 129.62 12.75 134.29C17.91 138.96 24.74 141.29 33.23 141.29C39.51 141.29 45.01 139.91 49.75 137.13C54.49 134.35 57.93 130.98 60.05 126.98H60.52V138.65H81.04V88.12C81.04 77.91 77.81 70.08 71.37 64.64L71.36 64.62ZM54.87 119.78C51.11 123.65 46.25 125.58 40.29 125.58C35.78 125.58 32.13 124.53 29.33 122.43C26.54 120.33 25.13 117.42 25.13 113.68C25.13 109.54 26.81 106.38 30.18 104.2C33.55 102.03 37.9 100.94 43.24 100.94C46.61 100.94 49.83 101.31 52.88 102.03C55.94 102.75 58.48 103.79 60.5 105.13V105.45C60.5 111.15 58.62 115.93 54.86 119.79L54.87 119.78Z",
  "M148.52 68.35H148.05C145.82 64.98 142.57 62.18 138.29 59.95C134.02 57.73 129.03 56.61 123.33 56.61C112.39 56.61 103.37 60.43 96.2701 68.09C89.1701 75.74 85.6201 85.78 85.6201 98.22C85.6201 110.66 89.0801 120.79 96.0001 128.15C102.92 135.51 112.03 139.19 123.33 139.19C128.82 139.19 133.69 138.02 137.94 135.69C142.19 133.36 145.49 130.58 147.82 127.37H148.52V134.13C148.52 141.8 146.57 147.7 142.69 151.82C138.8 155.94 133.37 158 126.37 158C121.44 158 117.35 156.8 114.08 154.38C110.82 151.97 107.99 148.59 105.61 144.24L89.1301 151.79C93.1201 159.56 98.1201 165.35 104.14 169.15C110.15 172.96 117.74 174.870 126.92 174.87C141.07 174.87 151.49 170.94 158.17 163.09C164.85 155.23 168.2 143.79 168.2 128.77V59.1H148.53V68.35H148.52ZM142.45 114.76C138.46 119.12 133.3 121.29 126.98 121.29C120.66 121.29 115.92 119.21 111.86 115.03C107.79 110.86 105.75 105.09 105.75 97.73C105.75 90.37 107.76 84.8 111.77 80.55C115.79 76.31 120.91 74.18 127.13 74.18C133.35 74.18 138.51 76.31 142.48 80.55C146.44 84.8 148.43 90.5 148.43 97.65C148.43 104.8 146.44 110.4 142.44 114.75L142.45 114.76Z",
  "M215.14 56.46C202.91 56.46 192.98 60.46 185.36 68.47C177.75 76.48 173.94 86.63 173.94 98.91C173.94 111.19 177.69 121.53 185.21 129.43C192.72 137.33 202.7 141.28 215.14 141.28C223.8 141.28 231.07 139.74 236.95 136.65C242.83 133.57 247.93 129.02 252.23 123.01L239.94 113.29C236.94 117.44 233.65 120.51 230.07 122.5C226.5 124.49 222.37 125.49 217.71 125.49C210.66 125.49 204.97 123.06 200.64 118.19C197.5 114.66 195.52 110.16 194.66 104.72L253.63 104.66C253.88 103.11 254.05 101.86 254.13 100.92C254.21 99.99 254.25 98.9 254.25 97.66C254.25 85.22 250.56 75.25 243.2 67.73C235.84 60.21 226.49 56.46 215.13 56.46H215.14ZM195.16 89.26C196.1 85.44 197.7 82.19 199.98 79.54C203.87 75.03 208.92 72.78 215.14 72.78C220.63 72.78 225.03 74.33 228.32 77.45C231.61 80.55 233.57 84.5 234.19 89.27H195.16V89.26Z",
  "M305.79 56.29C300.56 56.29 295.52 57.59 290.67 60.18C285.82 62.78 282.16 66.22 279.67 70.52H279.12V58.94H259.45V138.63H280.05V93.77C280.05 88.17 281.75 83.39 285.14 79.42C288.54 75.46 292.78 73.47 297.86 73.47C303.19 73.47 307.24 74.95 309.99 77.9C312.74 80.85 314.11 85.18 314.11 90.88V138.62H334.71V86.45C334.71 77.13 332.15 69.76 327.01 64.37C321.88 58.99 314.81 56.29 305.78 56.29H305.79Z",
  "M380.74 124.4C377.48 124.4 375.01 123.41 373.35 121.45C371.68 119.47 370.86 116.47 370.86 112.43V75.12H390.06V58.95H370.86V36.94H350.34V58.95H337.74V75.12H350.34V115.7C350.34 124.05 352.62 130.4 357.18 134.75C361.74 139.11 367.99 141.28 375.91 141.28C378.35 141.28 380.66 141.1 382.83 140.73C385 140.37 387.47 139.74 390.22 138.87V122.23C388.24 123.01 386.5 123.57 384.97 123.9C383.45 124.24 382.03 124.41 380.74 124.41V124.4Z",
  "M535.26 64.61C528.81 59.17 519.79 56.45 508.24 56.45C500.93 56.45 494.43 57.57 488.73 59.83C483.03 62.09 477.3 65.83 471.55 71.06L481.73 82.26C485.15 78.84 488.77 76.22 492.58 74.4C496.39 72.59 500.78 71.68 505.76 71.68C511.41 71.68 515.93 73.12 519.33 76C522.72 78.88 524.42 82.85 524.42 87.93V92.29C521.82 91.2 518.62 90.3 514.78 89.61C510.94 88.91 506.83 88.56 502.42 88.56C492.52 88.56 484.46 90.96 478.24 95.76C472.02 100.55 468.92 107.23 468.92 115.78C468.92 115.95 468.94 116.11 468.94 116.28L452.91 110.64C450.89 115.04 448.22 118.33 444.9 120.47C441.58 122.62 437.65 123.7 433.08 123.7C426.96 123.7 421.77 121.36 417.49 116.67C413.22 111.98 411.07 105.93 411.07 98.51C411.07 91.09 413.22 85.19 417.49 80.62C421.77 76.07 426.96 73.78 433.08 73.78C437.64 73.78 441.49 74.81 444.62 76.86C447.75 78.9 450.33 82.19 452.35 86.69L469.61 79.93C466.39 72.21 461.68 66.33 455.46 62.32C449.24 58.31 441.7 56.3 432.83 56.3C420.65 56.3 410.64 60.24 402.78 68.12C394.93 76 391 86.18 391 98.68C391 111.18 394.93 121.26 402.78 129.27C410.64 137.28 420.63 141.28 432.76 141.28C441.52 141.28 449.09 139.27 455.5 135.26C461.27 131.64 465.79 126.24 469.1 119.1C469.75 125.24 472.26 130.31 476.64 134.28C481.8 138.95 488.63 141.28 497.12 141.28C503.4 141.28 508.9 139.9 513.64 137.12C518.38 134.34 521.82 130.97 523.94 126.97H524.41V138.64H544.93V88.11C544.93 77.9 541.7 70.07 535.26 64.63V64.61ZM518.78 119.77C515.02 123.64 510.16 125.57 504.2 125.57C499.690 125.57 496.04 124.52 493.24 122.42C490.45 120.32 489.04 117.41 489.04 113.67C489.04 109.53 490.72 106.37 494.09 104.19C497.46 102.02 501.81 100.93 507.15 100.93C510.52 100.93 513.74 101.3 516.79 102.02C519.85 102.74 522.39 103.78 524.41 105.12V105.44C524.41 111.14 522.53 115.92 518.77 119.78L518.78 119.77Z",
  "M664.82 68.81H664.35C662.12 65.13 658.77 62.14 654.28 59.83C649.8 57.52 644.89 56.37 639.55 56.37C628.56 56.37 619.47 60.32 612.27 68.22C610.01 70.7 608.15 73.43 606.6 76.37V58.24C604.22 57.41 602.26 56.88 600.73 56.64C599.21 56.41 597.74 56.29 596.34 56.29C591.63 56.29 587.15 57.7 582.9 60.52C578.65 63.35 575.8 66.94 574.35 71.29H573.8V58.93H554.13V138.62H574.73V96.55C574.73 90.39 576.55 85.27 580.18 81.2C583.8 77.14 588.37 75.1 593.86 75.1C595.41 75.1 597.12 75.28 598.95 75.65C600.66 75.98 603 76.67 605.92 77.67C602.97 83.8 601.47 90.86 601.47 98.89C601.47 111.54 605 121.76 612.05 129.56C619.1 137.36 628.04 141.26 638.87 141.26C644.52 141.26 649.69 140.08 654.38 137.72C659.07 135.36 662.63 132.22 665.07 128.27H665.53V138.61H685.28V27.29H664.84V68.81H664.82ZM659.07 116.78C654.86 121.49 649.66 123.86 643.44 123.86C637.22 123.86 632.01 121.5 627.81 116.78C623.6 112.07 621.51 106.05 621.51 98.74C621.51 91.43 623.64 85.39 627.89 80.78C632.14 76.17 637.35 73.86 643.52 73.86C649.69 73.86 654.8 76.17 659.03 80.78C663.25 85.39 665.37 91.38 665.37 98.74C665.37 106.1 663.27 112.06 659.08 116.78H659.07Z",
  "M953.78 138.64H908.69C905 138.64 902.01 141.63 902.01 145.32C902.01 149.01 905 152 908.69 152H908.71H953.78C957.47 152 960.46 149.01 960.46 145.32C960.46 141.63 957.47 138.64 953.78 138.64Z",
  "M976.08 116.36V116.33H886.43V116.35C884.72 116.35 883.01 117 881.7 118.31C879.09 120.92 879.09 125.15 881.7 127.76C883.15 129.21 885.09 129.85 886.98 129.69H975.51C975.69 129.71 975.88 129.71 976.06 129.71C979.75 129.71 982.74 126.72 982.74 123.03C982.74 119.34 979.75 116.35 976.06 116.35L976.08 116.36Z",
  "M998.32 94.09C998.32 94.09 849.9 94.09 849.87 94.09C847.41 94.09 845.42 92.1 845.42 89.64C845.42 87.18 847.41 85.19 849.87 85.19H975.91C979.6 85.19 982.59 82.2 982.59 78.51C982.59 74.82 979.6 71.83 975.91 71.83H827.59C825.13 71.83 823.14 69.84 823.14 67.38C823.14 64.92 825.13 62.93 827.59 62.93C827.59 62.93 953.49 62.93 953.51 62.93C957.2 62.93 960.19 59.94 960.19 56.25C960.19 52.56 957.2 49.57 953.51 49.57H850.19C847.73 49.57 845.74 47.58 845.74 45.12C845.74 42.66 847.74 40.67 850.19 40.67H931.08C931.08 40.67 931.09 40.67 931.1 40.67C934.79 40.67 937.78 37.68 937.78 33.99C937.78 30.3 934.79 27.31 931.1 27.31H872.47C872.47 27.31 872.47 27.31 872.46 27.31C870 27.31 868.01 25.32 868.02 22.86C868.02 21.63 868.52 20.52 869.32 19.71L869.33 19.7C870.13 18.9 871.24 18.4 872.47 18.4H908.69C908.69 18.4 908.7 18.4 908.71 18.4C912.4 18.4 915.39 15.41 915.39 11.72C915.39 8.03 912.4 5.04 908.71 5.04H837.67C833.79 4.99 829.89 6.45 826.93 9.41L739.72 96.09C737.11 98.7 737.11 102.93 739.72 105.54L783.68 150.08C784.98 151.38 786.69 152.04 788.4 152.04H834.07C835.78 152.04 837.49 151.39 838.9 150.08L876.9 112.08C879.74 109.14 883.72 107.49 887.88 107.49H998.2C1001.95 107.49 1005.1 104.42 1005.03 100.68C1004.96 97.05 1002 94.13 998.35 94.13L998.32 94.09Z",
];

const MARK_VIEWBOX = "736 3.5 270 150";
const MARK_PATHS = [
  "M953.78 138.64H908.69C905 138.64 902.01 141.63 902.01 145.32C902.01 149.01 905 152 908.69 152H908.71H953.78C957.47 152 960.46 149.01 960.46 145.32C960.46 141.63 957.47 138.64 953.78 138.64Z",
  "M976.08 116.36V116.33H886.43V116.35C884.72 116.35 883.01 117 881.7 118.31C879.09 120.92 879.09 125.15 881.7 127.76C883.15 129.21 885.09 129.85 886.98 129.69H975.51C975.69 129.71 975.88 129.71 976.06 129.71C979.75 129.71 982.74 126.72 982.74 123.03C982.74 119.34 979.75 116.35 976.06 116.35L976.08 116.36Z",
  "M998.32 94.09C998.32 94.09 849.9 94.09 849.87 94.09C847.41 94.09 845.42 92.1 845.42 89.64C845.42 87.18 847.41 85.19 849.87 85.19H975.91C979.6 85.19 982.59 82.2 982.59 78.51C982.59 74.82 979.6 71.83 975.91 71.83H827.59C825.13 71.83 823.14 69.84 823.14 67.38C823.14 64.92 825.13 62.93 827.59 62.93C827.59 62.93 953.49 62.93 953.51 62.93C957.2 62.93 960.19 59.94 960.19 56.25C960.19 52.56 957.2 49.57 953.51 49.57H850.19C847.73 49.57 845.74 47.58 845.74 45.12C845.74 42.66 847.74 40.67 850.19 40.67H931.08C931.08 40.67 931.09 40.67 931.1 40.67C934.79 40.67 937.78 37.68 937.78 33.99C937.78 30.3 934.79 27.31 931.1 27.31H872.47C872.47 27.31 872.47 27.31 872.46 27.31C870 27.31 868.01 25.32 868.02 22.86C868.02 21.63 868.52 20.52 869.32 19.71L869.33 19.7C870.13 18.9 871.24 18.4 872.47 18.4H908.69C908.69 18.4 908.7 18.4 908.71 18.4C912.4 18.4 915.39 15.41 915.39 11.72C915.39 8.03 912.4 5.04 908.71 5.04H837.67C833.79 4.99 829.89 6.45 826.93 9.41L739.72 96.09C737.11 98.7 737.11 102.93 739.72 105.54L783.68 150.08C784.98 151.38 786.69 152.04 788.4 152.04H834.07C835.78 152.04 837.49 151.39 838.9 150.08L876.9 112.08C879.74 109.14 883.72 107.49 887.88 107.49H998.2C1001.95 107.49 1005.1 104.42 1005.03 100.68C1004.96 97.05 1002 94.13 998.35 94.13L998.32 94.09Z",
];

function LogoSvg({ viewBox, paths, label, tone = "current", className, ...props }: LogoProps & { viewBox: string; paths: string[] }) {
  return (
    <svg
      viewBox={viewBox}
      role={label ? "img" : undefined}
      aria-label={label ?? undefined}
      aria-hidden={label ? undefined : true}
      focusable="false"
      className={cn("block h-auto shrink-0 fill-current", TONES[tone], className)}
      {...props}
    >
      {paths.map((path, i) => (
        <path key={i} d={path} />
      ))}
    </svg>
  );
}

/** The lockup: wordmark and mark. Default width 160px, as in the site's header and footer. */
function Lockup({ label = "Agentcard", className, ...props }: LogoProps) {
  return <LogoSvg data-slot="lockup" viewBox={LOCKUP_VIEWBOX} paths={LOCKUP_PATHS} label={label} className={cn("w-40", className)} {...props} />;
}

/** The mark alone: the hand drawn in lines. For tight spots (a phone bar, an avatar, a favicon-sized slot). */
function LogoMark({ label = "Agentcard", className, ...props }: LogoProps) {
  return <LogoSvg data-slot="logo-mark" viewBox={MARK_VIEWBOX} paths={MARK_PATHS} label={label} className={cn("w-10", className)} {...props} />;
}

export { Lockup, LogoMark };
export type { LogoProps };

Reference: agentcard-brand-cli brand/logo (lockup.svg, mark.svg); agentcard.sh / (header a, 160x28).