---
number: "05"
---

<ChapterHeader number="05" title="Website" />

<DescriptionSection>
  The website is where the brand goes to work. It combines message, motion,
  layout, and interaction into something that feels clear, fast, and
  convincingly built.
</DescriptionSection>

<ContentSection>
  <SectionTitle
    title="Buttons"
    description="Buttons are designed to move people forward without adding friction. From directional CTAs to form controls, each component is straightforward, recognizable, and tuned for action."
  />
  <div className="components-container lg:grid-cols-3">
    <ComponentTile
      label="Arrow CTA — Regular"
      meta={[
        "20px · Aspekta 400 ·",
        "-0.2px tracking · gap 8px · padding-bottom 8px",
      ]}
    >
      <CTAButton asChild>
        <button type="button">Button</button>
      </CTAButton>
    </ComponentTile>
    <ComponentTile
      label="Arrow CTA — Large"
      meta={["40px · Aspekta 400 · -0.4px tracking · height 48px"]}
    >
      <CTAButton size="large" asChild>
        <button type="button">Say hello</button>
      </CTAButton>
    </ComponentTile>
    <ComponentTile
      label="Large Form Pill"
      meta={[
        "Contact form · category select · 64px · border-radius 80px · hover fills white",
      ]}
    >
      <button
        type="button"
        className="text-btn border-brand-black hover:bg-brand-black hover:text-brand-white h-16 cursor-pointer rounded-[80px] border px-6 transition"
      >
        Partnership Referral
      </button>
    </ComponentTile>
    <ComponentTile
      label="Form Pill"
      meta={[
        "Contact form · budget select · 48px · border-radius 56px · click to select",
      ]}
    >
      <button
        type="button"
        className="text-btn-sm border-brand-black hover:bg-brand-black hover:text-brand-white h-12 cursor-pointer rounded-[56px] border px-6 transition"
      >
        Under 10K
      </button>
    </ComponentTile>
    <ComponentTile
      label="Filter Pill"
      meta={[
        "Work / Insights pages · content filter with count · 40px · click to select",
      ]}
    >
      <button
        type="button"
        className="bg-brand-gray-05 text-brand-white flex h-10 cursor-pointer items-center gap-[3px] rounded-lg px-4 transition hover:opacity-80"
      >
        <span className="text-[14px] leading-[1.6] font-[350]">All</span>
        <span className="text-label5-upper self-start pt-1">(02)</span>
      </button>
    </ComponentTile>
    <ComponentTile
      label="Radio Button"
      meta={[
        "Contact form · square toggle · 24×24px · white border · white fill on select",
      ]}
    >
      <RadioButtonDemo />
    </ComponentTile>
    <ComponentTile
      label="Play Button"
      meta={["Video player · 56×56px · white bg · black icon"]}
    >
      <button
        type="button"
        aria-label="Play"
        className="flex-center bg-brand-black text-brand-white size-14 cursor-pointer rounded-lg transition hover:opacity-80"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          className="size-8"
        >
          <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
        </svg>
      </button>
    </ComponentTile>
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Inputs"
    description="All inputs: #121212 bg · transparent fill · bottom border only · Aspekta 400 · no outline on focus"
  />
  <div className="components-container">
    <ComponentTile
      label="Email Input"
      meta={[
        "Footer newsletter · 20px · border-bottom 1px solid rgba(255,255,255,0.1) · padding-bottom 16px",
      ]}
    >
      <EmailInput />
    </ComponentTile>
    <ComponentTile
      label="Dropdown (Form Field)"
      meta={["Contact form · Default → Expanded → Filled · click to interact"]}
    >
      <DropdownField />
    </ComponentTile>
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Navigation"
    description="All inputs: #121212 bg · transparent fill · bottom border only · Aspekta 400 · no outline on focus"
  />
  <div className="components-container grid-cols-1">
    <ComponentTile
      containerClassName="md:h-95! h-65! overflow-x-auto justify-start! lg:justify-center!"
      label="Desktop — Default (transparent, on light hero)"
      meta={[
        "Links vertical right column · 16px · color #121212 · normal tracking · padding-bottom 3.2px",
      ]}
    >
      <img
        src="/docs/website/nav-desktop-default.svg"
        alt="Desktop navigation with logo and vertical right-aligned links"
        className="h-auto w-232 max-w-none"
      />
    </ComponentTile>
    <ComponentTile
      containerClassName="md:h-95!"
      label="Mobile — Default"
      meta={["Logo + 'Menu' text · 18px"]}
    >
      <img
        src="/docs/website/nav-mobile-default.svg"
        alt="Mobile navigation header with logo and Menu button"
      />
    </ComponentTile>
    <ComponentTile
      containerClassName="h-auto! md:py-20"
      label="Mobile — Menu Open"
      meta={["Full-screen · 40px links · weight 350"]}
    >
      <img
        src="/docs/website/nav-mobile-menu-open.svg"
        alt="Mobile menu open with full-screen dark overlay, navigation links, and social links"
      />
    </ComponentTile>
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Footer"
    description="#121212 background · padding 0 32px · full-width"
  />
  <ComponentTile containerClassName="h-215! overflow-x-auto justify-start! p-0!">
    <img
      src="/docs/website/footer.svg"
      alt="Website footer with newsletter signup, navigation links, social links, and legal information"
      className="h-215! w-auto max-w-none"
    />
  </ComponentTile>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Visual Brand Assets"
    description="3D renders of the Zypsy logo with various materials. Available in JPG and PNG. Files live at zypsy/brand/imagery/Zypsy Logo Renders/"
  />
  <div className="grid-container md:grid-cols-2">
    <img
      src="/docs/website/brand-assets/brand-asset-1.webp"
      alt="3D render of Zypsy logo — textured yellow surfaces with sharp triangle shadow"
      className="aspect-552/322 w-full object-cover"
    />
    <img
      src="/docs/website/brand-assets/brand-asset-2.webp"
      alt="3D render of Zypsy logo — curved yellow bands with crosshatch accent"
      className="aspect-552/322 w-full object-cover"
    />
    <img
      src="/docs/website/brand-assets/brand-asset-3.webp"
      alt="3D render of Zypsy logo — textured yellow pillars and star form"
      className="aspect-552/322 w-full object-cover"
    />
    <img
      src="/docs/website/brand-assets/brand-asset-4.webp"
      alt="3D render of Zypsy logo — glass rings and translucent shapes"
      className="aspect-552/322 w-full object-cover"
    />
    <img
      src="/docs/website/brand-assets/brand-asset-5.webp"
      alt="3D render of Zypsy logo — textured diamond with crosshatch pattern"
      className="aspect-552/322 w-full object-cover"
    />
    <img
      src="/docs/website/brand-assets/brand-asset-6.webp"
      alt="3D render of Zypsy logo — asterisk form with mixed material arms"
      className="aspect-552/322 w-full object-cover"
    />
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Video"
    description="Animated logo render for intros, transitions, and motion contexts. Files live at zypsy/brand/video/"
  />
  <div className="bg-brand-black aspect-video w-full overflow-hidden">
    <video
      className="size-full object-cover"
      muted
      playsInline
      loop
      controls
      src="https://cdn.zypsy.com/Zypsy%205.0/Zypsyreel%202025.mp4"
    />
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Team Photos"
    description="Portrait photos for all team members. Used on the About/Team page and in media kits. Files live at zypsy/brand/team-photos/ · PNG format."
  />
  <div className="grid-container grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <TeamMember
      name="Arek"
      position="Engineering Lead"
      photo="/docs/website/team/arek.webp"
    />
    <TeamMember
      name="Evin"
      position="Co-founder & CCO"
      photo="/docs/website/team/evin.webp"
    />
    <TeamMember
      name="Hubert"
      position="Senior Frontend Engineer"
      photo="/docs/website/team/hubert.webp"
    />
    <TeamMember
      name="Shoko"
      position="Senior Project Manager"
      photo="/docs/website/team/shoko.webp"
    />
    <TeamMember
      name="Kaz"
      position="Founder"
      photo="/docs/website/team/kaz.webp"
    />
    <TeamMember
      name="Matt Kim"
      position="CEO"
      photo="/docs/website/team/matt-kim.webp"
    />
    <TeamMember
      name="Olivier"
      position="Design Director"
      photo="/docs/website/team/olivier.webp"
    />
    <TeamMember
      name="Matt Crisp"
      position="Senior Visual Designer"
      photo="/docs/website/team/matt-crisp.webp"
    />
    <TeamMember
      name="Pietro"
      position="Visual Designer"
      photo="/docs/website/team/pietro.webp"
    />
    <TeamMember
      name="Marcin"
      position="Senior Product Designer"
      photo="/docs/website/team/marcin.webp"
    />
    <TeamMember
      name="Rafal"
      position="Product Design Lead"
      photo="/docs/website/team/rafal.webp"
    />
    <TeamMember
      name="Darek"
      position="Product Design Director"
      photo="/docs/website/team/darek.webp"
    />
    <TeamMember
      name="Vivian"
      position="COO"
      photo="/docs/website/team/vivian.webp"
    />
    <TeamMember
      name="Trisha"
      position="Brand & New Business Director"
      photo="/docs/website/team/trisha.webp"
    />
    <TeamMember
      name="Augusto"
      position="Lead Webflow Developer"
      photo="/docs/website/team/augusto.webp"
    />
  </div>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Grid"
    description="We use a 12-column grid at 1440px with 32px margins and 16px gutters to maintain consistent alignment and clear visual structure across all layouts."
  />
  <img
    src="/docs/website/grid.svg"
    alt="12-column grid system diagram showing 1440px width, 32px margins, and 16px gutters"
    className="hidden w-full md:block"
  />
</ContentSection>

---

Previous: [Iconography](https://brand.zypsy.com/docs/iconography)