Primitives

Logo Mark

The squircle app-icon — near-black background, rounded-xl, one of only two elements allowed the emphasized (overshoot) easing on entrance.

Preview

Code

src/components/ui/LogoMark.tsx

/**
 * Logo mark — squircle app-icon token from hyliox-waitlist-card.md's
 * `logo-mark` component (bg #0A0A0B, rounded.xl, headline-display type).
 */
export function LogoMark({ size = 72 }: { size?: number }) {
  return (
    <div
      className="flex shrink-0 items-center justify-center rounded-xl bg-[#0A0A0B] font-display font-bold text-primary-contrast"
      style={{ width: size, height: size, fontSize: size * 0.5 }}
    >
      I
    </div>
  );
}

Installation

Usage

import { LogoMark } from "@/components/ui/LogoMark";

<LogoMark size={64} />

Props

Prop	Type	Default	Description
size	number	72	Width/height in pixels; font size scales with it.

Accessibility

Purely decorative brand mark — no alt text needed since it's not conveying information beyond the wordmark shown alongside it.