---
number: "01"
---

<ChapterHeader number="01" title="Logo & Mark" />

<DescriptionSection
  action={<DownloadButton href="/logos.zip">Download logos</DownloadButton>}
>
  The Zypsy logo is simple, sharp, and built to hold weight. The wordmark leads
  with confidence, while the mark adds memorability — giving the brand something
  ownable at every size.
</DescriptionSection>

<ContentSection>
  <SectionTitle
    title="Logo"
    description="The Zypsy wordmark. The cross mark represents the intersection of design and capital — a symbol of compounded ownership. Aspekta is our primary typeface, paired with the mark to form the complete identity system."
  />
  <ShowcaseContainer className="aspect-280/150">
    <FullLogoIcon className="h-[min(15vw,140px)] w-auto" />
  </ShowcaseContainer>
</ContentSection>

<ContentSection>
  <SectionTitle title="Mark" />
  <ShowcaseContainer className="aspect-280/150">
    <LogoIcon className="size-[min(30vw,240px)]" />
  </ShowcaseContainer>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Safe Space"
    description="When using the logotype, please follow these placement guidelines. Below is the primary layout. The clear space boundary around the wordmark should be respected — it is proportional to the mark width."
  />
  <div className="grid-container xl:grid-cols-2">
    <ShowcaseContainer className="aspect-138/100">
      <SafeSpaceDiagram variant="logo" />
    </ShowcaseContainer>
    <ShowcaseContainer className="aspect-138/100">
      <SafeSpaceDiagram variant="mark" />
    </ShowcaseContainer>
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Color Usage"
    description="The Zypsy logo appears in white on dark backgrounds or black on light backgrounds. Yellow is our brand accent. The mark may appear on yellow in contexts where the full logotype has already been established."
  />
  <div className="grid-container xl:grid-cols-2">
    <ShowcaseContainer className="aspect-138/100">
      <FullLogoIcon className="h-14.5 w-auto" />
    </ShowcaseContainer>
    <ShowcaseContainer className="bg-brand-black! text-brand-white! aspect-138/100">
      <FullLogoIcon className="h-14.5 w-auto" />
    </ShowcaseContainer>
    <ShowcaseContainer className="bg-brand-primary! aspect-138/100">
      <FullLogoIcon className="h-14.5 w-auto" />
    </ShowcaseContainer>
    <ShowcaseContainer className="border-brand-gray-02 bg-brand-white! aspect-138/100 border">
      <FullLogoIcon className="h-14.5 w-auto" />
    </ShowcaseContainer>
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Misuse"
    description="To maintain the integrity of the brand, always display the wordmark with optimal contrast and legibility. The examples below demonstrate unsuitable usage."
  />
  <div className="components-container xl:grid-cols-2">
    <MisuseExample description="Only use the official primary colour scheme.">
      <ShowcaseContainer className="aspect-138/100">
        <FullLogoIcon className="h-14.5 w-auto text-[#D550E9]" />
      </ShowcaseContainer>
    </MisuseExample>
    <MisuseExample description="The logo must never be rotated or skewed.">
      <ShowcaseContainer className="aspect-138/100">
        <FullLogoIcon className="-skew-14 h-14.5 w-auto" />
      </ShowcaseContainer>
    </MisuseExample>
    <MisuseExample description="Don't alter the dimensions of the logo.">
      <ShowcaseContainer className="aspect-138/100">
        <FullLogoIcon className="scale-y-60 h-14.5 w-auto" />
      </ShowcaseContainer>
    </MisuseExample>
    <MisuseExample description="Never use any effect that alters legibility.">
      <ShowcaseContainer className="aspect-138/100">
        <FullLogoIcon className="h-14.5 w-auto drop-shadow-[0_12px_8px_rgba(0,0,0,0.75)]" />
      </ShowcaseContainer>
    </MisuseExample>
  </div>
</ContentSection>

---

Next: [Typography](https://brand.zypsy.com/docs/typography)