Logo
Brand mark for identity and recognition.
<div class="flex flex-col gap-20px items-center items-start">
<!-- S -->
<a
class="flex font-bold gap-8px items-center no-underline text-foreground! logo text-h8 [&_svg]:w-[28px] [&_svg]:h-[28px]"
href="/">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
width="24"
height="24"
rx="2"
fill="black">
</rect>
<path
d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
stroke="white"
stroke-width="4">
</path>
<path
d="M12.5 14.5L18.9952 18.25"
stroke="white"
stroke-width="4.5">
</path>
<circle
cx="15.25"
cy="8.25"
r="3.25"
fill="white">
</circle>
</svg>
Kaida
</a>
<!-- M -->
<a
class="flex font-bold gap-8px items-center no-underline text-foreground! logo text-h7 [&_svg]:w-32px [&_svg]:h-32px"
href="/">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
width="24"
height="24"
rx="2"
fill="black">
</rect>
<path
d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
stroke="white"
stroke-width="4">
</path>
<path
d="M12.5 14.5L18.9952 18.25"
stroke="white"
stroke-width="4.5">
</path>
<circle
cx="15.25"
cy="8.25"
r="3.25"
fill="white">
</circle>
</svg>
Kaida
</a>
<!-- L -->
<a
class="flex font-bold gap-8px items-center no-underline text-foreground! logo text-h5 [&_svg]:w-48px [&_svg]:h-48px"
href="/">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
width="24"
height="24"
rx="2"
fill="black">
</rect>
<path
d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
stroke="white"
stroke-width="4">
</path>
<path
d="M12.5 14.5L18.9952 18.25"
stroke="white"
stroke-width="4.5">
</path>
<circle
cx="15.25"
cy="8.25"
r="3.25"
fill="white">
</circle>
</svg>
Kaida
</a>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.