---
title: Appearance
description: typography, layout, logo, favicon and customCss.
---

Optional fields that change how the site looks. Colors and template are required and
documented in [Required fields](/docs/reference/docs-json/required).

## `typography`

<ParamField name="typography.headings" type="string">
  Font family for headings, 1–200 characters.
</ParamField>

<ParamField name="typography.body" type="string">
  Font family for body text.
</ParamField>

<ParamField name="typography.code" type="string">
  Font family for code.
</ParamField>

## `layout`

<ParamField name="layout.header-height" type="integer" default="64">
  32–160.
</ParamField>

<ParamField name="layout.page-width" type="integer" default="1280">
  640–1920.
</ParamField>

<ParamField name="layout.content-width" type="integer" default="800">
  480–1600.
</ParamField>

<ParamField name="layout.sidebar-width" type="integer" default="280">
  160–480.
</ParamField>

Out-of-range values are a schema error, not silently clamped.

**Omitting a `layout` field is not the same as setting it to the default.** A value is
emitted as CSS only when you set it explicitly; leave it out and the active template's own
baseline stays in control of that dimension. This matters on `rapide` (260px sidebar) and
`black` (300px sidebar), which render at their own widths when `sidebar-width` is omitted.
Set it explicitly to override. `mint`'s baseline already matches every default, so nothing
changes there.

## `logo`

<ParamField name="logo.light" type="path">
  Logo for light mode.
</ParamField>

<ParamField name="logo.dark" type="path">
  Logo for dark mode.
</ParamField>

<ParamField name="logo.text" type="string">
  A text-only brand mark, 1–100 characters.
</ParamField>

`text` is **mutually exclusive** with `light`/`dark`; setting both is a schema error.

Logos are rendered as images. An SVG using `currentColor` will not inherit a text colour
through that path — supply two files with baked colours, or use `logo.text`.

## `favicon`

<ParamField name="favicon" type="path">
  Local file path.
</ParamField>

## `customCss`

<ParamField name="customCss" type="path[]" default="[]">
  Local CSS files, appended after the template's own styles.
</ParamField>

## How local paths resolve

`logo`, `favicon`, `customCss` and `seo.ogImage` are resolved **relative to the directory
`docs.json` lives in**. There is no asset root convention to satisfy — a project can keep
assets anywhere as long as the paths match. Existence is checked at `reed check` time, so
a missing file fails before a build.

Values that are absolute URLs are left alone rather than resolved as paths.