Site themes

Style your public site with CSS variables and stable part names.

Custom CSS loads after the theme, so your rules win without !important. Write it in Site → Appearance → Custom CSS, or push a file from the CLI.

:root {
  --site-accent: #0f766e;
  --site-radius-lg: 6px;
  --site-control-radius: 6px;
}

[data-part="hero-title"] {
  font-family: "Fraunces", serif;
  letter-spacing: -0.02em;
}

median site css pull theme.css
median site css push theme.css

Cascade

@layer reset, base, theme, brand;

Layer	Holds
`reset`	Browser defaults cleared
`base`	Layout and default tokens
`theme`	The theme you picked
`brand`	The brand color from Appearance
Your CSS	Unlayered, so it beats every layer

Light and dark

<html data-theme="paper" data-scheme="dark">

Put dark values under [data-scheme="dark"]:

:root[data-scheme="dark"] {
  --site-bg: #05070a;
}

data-navigation on <html> is top or sidebar, from Site → Appearance. Sidebar lists each topic’s articles under it and is what a site gets until it picks. Sidebar, topics only (topics in the API and CLI) is also sidebar.

:root[data-navigation="sidebar"] {
  --site-sidebar-width: 240px;
}

Tokens

Token	Use
`--site-bg`	Page background
`--site-surface`, `--site-surface-2`, `--site-surface-3`	Cards, fills, raised fills
`--site-border`, `--site-border-strong`	Lines
`--site-text`, `--site-text-muted`, `--site-text-faint`	Text
`--site-accent`, `--site-accent-text`	Brand color and text on it
`--site-accent-soft`, `--site-accent-strong`	Derived from the accent
`--site-link`, `--site-focus`, `--site-selection`	Links, focus rings, selection
`--site-tone-gray`, `-red`, `-orange`, `-yellow`, `-green`, `-teal`, `-blue`, `-purple`, `-pink`	Colors for feedback statuses, boards and tags
`--site-danger`	Errors
`--site-font-body`, `--site-font-heading`, `--site-font-mono`	Font families
`--site-text-size`	Base font size
`--site-heading-weight`, `--site-heading-tracking`	Headings
`--site-radius-sm`, `--site-radius`, `--site-radius-lg`	Corners
`--site-control-radius`	Buttons, tabs and nav links
`--site-shadow-sm`, `--site-shadow`, `--site-shadow-lg`	Shadows
`--site-width`, `--site-reading-width`	Page and article widths
`--site-gutter`, `--site-header-height`	Spacing
`--site-ease`, `--site-ease-in-out`	Easing
`--site-duration-fast`, `--site-duration`, `--site-duration-slow`	Timing

Parts

Target elements with [data-part="<name>"]. States use data-state, data-active, aria-current and aria-pressed. Parts a team colors carry data-tone, which sets --tone.

Area	Parts
Frame	`site`, `header`, `brand`, `brand-logo`, `brand-name`, `nav`, `nav-indicator`, `nav-link`, `scheme-toggle`, `main`, `footer`, `powered-by`
Sidebar	`sidebar`, `sidebar-bar`, `sidebar-nav`, `sidebar-group`, `sidebar-heading`, `sidebar-item`, `sidebar-menu`, `drawer`, `drawer-panel`
Sidebar with articles	`sidebar-branch`, `sidebar-row`, `sidebar-toggle`, `sidebar-leaves`, `sidebar-leaf`, `sidebar-section`, `collapse`, `caret`
Pages	`page`, `page-header`, `page-title`, `page-description`, `breadcrumbs`, `breadcrumb-current`, `section`, `section-title`, `empty`
Controls	`button` (`data-variant`: `primary`, `secondary`, `ghost`), `input`, `textarea`, `status` (`data-tone`)
Composer	`composer` (`data-surface`, `data-mode`, `data-results`), `composer-frame`, `composer-chip`, `composer-row`, `composer-lead`, `composer-attach`, `composer-input`, `composer-modes`, `composer-mode`, `composer-send`, `composer-results`
Help center home	`hero`, `hero-title`, `search` (`data-mode`), `search-result`, `search-ask`, `popular-list`, `popular-link`, `article-icon`, `collection-grid`, `collection-card`, `collection-icon`, `collection-name`, `collection-description`, `collection-preview`, `collection-count`, `contact`
Articles	`article-layout`, `article-sidebar`, `article`, `article-head`, `article-title`, `article-lead`, `article-meta`, `prose`, `table`, `code-block`, `code-title`, `code-copy`, `toc`, `toc-marker`, `toc-link`, `toc-fold`, `toc-fold-toggle`, `article-pager`, `pager-link`
Lists	`article-list`, `article-row`, `article-row-title`, `article-row-excerpt`
Support	`support`, `support-thread`, `support-greeting`, `support-avatar` (`data-size`), `support-starter`, `support-divider`, `support-message` (`data-sender`), `support-byline`, `support-bubble` (`data-sender`), `support-markdown`, `support-typing`, `support-source`, `support-copy`, `support-attachment`, `support-foot`, `support-waiting`, `support-notice`, `support-composer`, `support-tab`
Feedback	`feedback`, `notice`, `feedback-tabs`, `feedback-tab`, `board-list`, `board-link`, `list-toolbar`, `segmented`, `list-search`, `filter-button`, `post-list`, `post-card`, `post-card-title`, `post-card-excerpt`, `chip` (`data-kind`), `vote` (`data-voted`, `data-layout`), `avatar`, `team-badge`
Posts	`post-view`, `post-title`, `post-body`, `post-aside`, `follow`, `timeline`, `comment` (`data-team`), `status-line`, `comment-form`, `post-composer`, `similar`
Roadmap	`roadmap`, `roadmap-column`, `roadmap-header`, `roadmap-card`, `roadmap-card-title`
Dialogs	`dialog`, `dialog-panel`, `dialog-title`, `form`
Sign-in	`account`, `account-trigger`, `account-avatar`, `account-menu` (`data-state`), `account-name`, `account-email`, `account-item`, `auth-status` (`data-state`)

article-sidebar is hidden. Show it with custom CSS for a list of the collection’s articles beside each article.

Themes

Theme	Look	Fonts
Paper	Light and roomy, a glow behind the search	Geist, Geist Mono

The Console theme is retired. Sites that used it show Paper, and the API refuses "theme": "console".

Limits

Limit	Value
Custom CSS	60,000 characters
`@import` and `@font-face`	Allowed
Scripts	Not supported