> ## Documentation Index
> Fetch the complete documentation index at: https://docs.percify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Percify brand colors and hex codes

> The Percify color palette with hex codes: Percify yellow, gold and amber on black and white, plus the gold gradient and the typefaces used on percify.io.

Percify is yellow on black. The yellow comes from the logo; black is the background almost everything sits on. Click a swatch to copy its hex code.

<Frame caption="Percify yellow on black">
  <div className="bg-black rounded-xl p-12 flex items-center justify-center not-prose">
    <img src="https://mintcdn.com/percify-e94d5fec/Mxy6ejDHFMl1RmdW/assets/logo/percify-app-icon.svg?fit=max&auto=format&n=Mxy6ejDHFMl1RmdW&q=85&s=880865786fb6de007693bfc19847c94f" alt="Percify app icon in Percify yellow on black" width="1024" height="1024" className="w-32 h-auto" data-path="assets/logo/percify-app-icon.svg" />
  </div>
</Frame>

## Palette

<Color variant="table">
  <Color.Row title="Yellow">
    <Color.Item name="Percify yellow (logo)" value="#FFD200" />

    <Color.Item name="Logo highlight" value="#FFD40A" />

    <Color.Item name="Gold (buttons and highlights)" value="#FFD700" />

    <Color.Item name="Amber (gradient end)" value="#FFA500" />
  </Color.Row>

  <Color.Row title="Neutrals">
    <Color.Item name="Black" value="#000000" />

    <Color.Item name="Ink" value="#1A1A1A" />

    <Color.Item name="White" value="#FFFFFF" />
  </Color.Row>
</Color>

* **Percify yellow, `#FFD200`**, is the color of the icon. Use it for the logo and nothing else.
* **Gold, `#FFD700`**, is the interface color: buttons, links and highlights on percify.io and in the app.
* **Amber, `#FFA500`**, only appears as the end of the gold gradient.

## Gold gradient

<div className="h-24 rounded-xl not-prose" style={{ background: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)' }} />

```css theme={"system"}
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
```

## Typefaces

* **Host Grotesk** for headings on percify.io.
* **Inter** for body text.

The wordmark is drawn artwork, not typed text. Use the [logo files](/brand/logo) rather than setting the name in a font.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="What is Percify's brand color?">
    Percify yellow, `#FFD200`, the color of the logo, used on black. The interface uses gold, `#FFD700`, for buttons and highlights.
  </Accordion>

  <Accordion title="What font does Percify use?">
    Host Grotesk for headings and Inter for body text on percify.io. The wordmark is drawn artwork rather than a font, so use the [logo files](/brand/logo).
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Percify logo" href="/brand/logo">
    Download the icon and wordmark in SVG and PNG
  </Card>

  <Card title="Banners and social images" href="/brand/banners">
    Ready-made images in the Percify colors
  </Card>
</CardGroup>