---
number: "03"
---

<ChapterHeader number="03" title="Colors" />

<DescriptionSection
  action={<DownloadButton href="/colors.zip">Export colors</DownloadButton>}
>
  The palette is restrained by design. Most of the work is done by black, white,
  and gray — with yellow used where the brand wants to be felt, not just seen.
</DescriptionSection>

<ContentSection>

<SectionTitle
  title="Primary"
  description="The primary palette sets the tone. Black and white create contrast and discipline; yellow breaks the neutrality with energy and intent. It is used sparingly, so it actually means something when it shows up."
/>

<div className="grid-container md:grid-cols-3">
  <ColorCard
    name="Black"
    values={["#121212"]}
    className="bg-brand-black text-brand-white"
    usageDescription="Primary text, backgrounds"
  />
  <ColorCard
    name="White"
    values={["#FFFFFF"]}
    className="border-brand-gray-02 bg-brand-white text-brand-black border"
    usageDescription="Backgrounds, contrast text"
  />
  <ColorCard
    name="Primary Yellow"
    values={["#FFEF85"]}
    className="bg-brand-primary text-brand-black"
    usageDescription="Brand accent, highlights, CTAs"
  />
</div>

</ContentSection>

<ContentSection>

<SectionTitle
  title="Secondary"
  description="The secondary palette supports depth, interface states, and layout rhythm. These tones keep the system flexible without diluting the core look."
/>

<div className="grid-container md:grid-cols-3">
  <ColorCard
    name="Gallery Black"
    values={["#000000"]}
    className="bg-brand-gallery-black text-brand-white"
    usageDescription="Deep black, high contrast"
  />
  <ColorCard
    name="05 Gray"
    values={["#1E1E1E"]}
    className="bg-brand-gray-05 text-brand-white"
    usageDescription="Dark backgrounds, secondary text"
  />
  <ColorCard
    name="04 Gray"
    values={["#2A2A2A"]}
    className="bg-brand-gray-04 text-brand-white"
    usageDescription="Dark UI surfaces"
  />
  <ColorCard
    name="03 Gray"
    values={["#717171"]}
    className="bg-brand-gray-03 text-brand-white"
    usageDescription="Muted text, placeholders"
  />
  <ColorCard
    name="02 Gray"
    values={["#E7E7E7"]}
    className="bg-brand-gray-02 text-brand-black"
    usageDescription="Borders, dividers"
  />
  <ColorCard
    name="01 Gray"
    values={["#F8F8F8"]}
    className="bg-brand-gray-01 text-brand-black"
    usageDescription="Light backgrounds, cards"
  />
</div>

</ContentSection>

---

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