# Customize your docs

> Brand your documentation with colors, logos, and layouts

The `docs.yml` file controls the visual appearance of your documentation site. Explore the customization options below and click through to the Fern documentation for detailed configuration guides.

<CardGroup cols={2}>
  <Card title="Colors" icon="duotone palette" href="https://buildwithfern.com/learn/docs/configuration/site-level-settings#colors-configuration">
    Set brand colors for light and dark modes
  </Card>

  <Card title="Logo and favicon" icon="duotone image" href="https://buildwithfern.com/learn/docs/configuration/site-level-settings#logo-configuration">
    Add your logo and favicon
  </Card>

  <Card title="Typography" icon="duotone font" href="https://buildwithfern.com/learn/docs/configuration/site-level-settings#typography-configuration">
    Customize fonts for headings and body text
  </Card>

  <Card title="Layout" icon="duotone table-layout" href="https://buildwithfern.com/learn/docs/configuration/site-level-settings#layout-configuration">
    Configure page width, tabs placement, and more
  </Card>

  <Card title="Navbar links" icon="duotone link" href="https://buildwithfern.com/learn/docs/configuration/site-level-settings#navbar-links-configuration">
    Add links and buttons to your navigation bar
  </Card>

  <Card title="Custom CSS" icon="duotone code" href="https://buildwithfern.com/learn/docs/customization/custom-css-js">
    Advanced styling with custom CSS and JavaScript
  </Card>
</CardGroup>

## Quick example

Here's a minimal example showing common customization options in `docs.yml`:

```yaml title="docs.yml"
title: Your Documentation

colors:
  accentPrimary:
    dark: "#81C784"
    light: "#1B5E20"

logo:
  dark: docs/assets/logo-dark.svg
  light: docs/assets/logo-light.svg

favicon: docs/assets/favicon.svg
```

For complete configuration options, see the [site-level settings documentation](https://buildwithfern.com/learn/docs/configuration/site-level-settings).