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

# Colors

> Set publication background and accent colors and understand automatic text contrast.

Use `design` in `settings.json` to set colors across your
Lettercamp publication. The default background is white.

```json theme={null}
{
  "design": {
    "backgroundColor": "#ffffff"
  }
}
```

Set **Background color** under **Home → Site** or **Post → Layout** in the design
editor. It applies to every page, including the header and footer. Lettercamp
automatically chooses black or white primary text and adjusts secondary text,
chips, block backgrounds, image borders, tables, and menus to match. Dark
backgrounds work without a separate theme. To override primary text colors, use
[heading and body colors](https://www.lettercamp.com/docs/design/typography.md).

In a color picker, enter a six-digit hex color or choose one visually. Valid
colors update your draft and preview immediately. Click **Set** to close the
picker. Use undo in the design modal to revert an adjustment.

In `settings.json`, use `design.backgroundColor` with a six-digit hex color.
The default is `"#ffffff"`. Related shades keep their relative positions between
the background and primary text color, so subtle surfaces remain subtle. For
example, category chips use `#fafafa` on white and `#050505` on black: slightly
darker on light backgrounds and slightly lighter on dark backgrounds.

**Accent color** is optional and unset by default. When set, it colors link text
on hover and keyboard focus throughout your site, including navigation, post
titles, category links, article links, and footer links. It also colors the
background of selected text throughout your site, including the homepage grid,
and the header's primary button when
that button has no explicit color.
Selected text automatically uses black or white for contrast against the accent.
For example:

```json theme={null}
{
  "design": {
    "backgroundColor": "#141820",
    "accentColor": "#a5b4fc"
  }
}
```

Use a six-digit hex color for `design.accentColor`. Click **Remove accent** in its
picker, omit the field, or set it to `""` to restore normal link hovers and the
browser's default text selection. A header button that inherits the accent returns
to `#111111` when you remove the accent.
Choose an accent that stands out against your background for link hovers.

Changes appear in the design preview; click **Publish** to apply them to your site.
The background setting preserves explicit colors in your content, custom
components, and header button.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.