@font-face { font-family: "NotionInter"; font-weight: 400; font-style: normal; font-display: optional; src: url("/fonts/NotionInter-Regular.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 500; font-style: normal; font-display: optional; src: url("/fonts/NotionInter-Medium.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 600; font-style: normal; font-display: optional; src: url("/fonts/NotionInter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 700; font-style: normal; font-display: optional; src: url("/fonts/NotionInter-Bold.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 400; font-style: italic; font-display: optional; src: url("/fonts/NotionInter-Italic.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 500; font-style: italic; font-display: optional; src: url("/fonts/NotionInter-MediumItalic.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 600; font-style: italic; font-display: optional; src: url("/fonts/NotionInter-SemiBoldItalic.woff2") format("woff2"); } @font-face { font-family: "NotionInter"; font-weight: 700; font-style: italic; font-display: optional; src: url("/fonts/NotionInter-BoldItalic.woff2") format("woff2"); } :root { --font-notion-stack: "NotionInter", "Inter", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } html, body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-family: var(--font-notion-stack); } /* Announcement banner: align with NDS blue scale (matches blue callouts). Surface uses blue-20, body uses blue-100, link uses blue-80. */ #banner { background: #e5f2fc; } #banner, #banner * { color: #355f8b !important; } #banner a, #banner a * { color: #2783de !important; } html.dark #banner { background: rgba(39, 131, 222, 0.12); } html.dark #banner, html.dark #banner * { color: #9dc0ea !important; } html.dark #banner a, html.dark #banner a * { color: #2783de !important; } /* Top-align Card icons with the title row instead of centering them between the title and the description. */ .card > .flex.items-center:has([data-component-part="card-icon"]) { align-items: flex-start; } /* Make the Card description a step smaller than the title. */ [data-component-part="card-content"] { font-size: 0.875rem; line-height: 1.45; } /* Match the marketing site nav buttons: "Log in" ghost (no background, subtle hover only) and the topbar CTA pill with tighter corners. Hover uses NDS state.hover tokens (#37352f0a light / rgba(255,255,255,0.055) dark) so the warm-brown tint matches the rest of the docs and app.notion.com. */ .navbar-link > a { background-color: transparent !important; } .navbar-link > a:hover { background-color: #37352f0a !important; } html.dark .navbar-link > a:hover { background-color: rgba(255, 255, 255, 0.055) !important; } .bg-primary-dark.rounded-xl { border-radius: 8px !important; } /* Top search trigger: Mintlify defaults to Tailwind cool gray (bg-gray-950/[0.03], hover:bg-gray-950/10) which reads blue-tinted next to the rest of the Notion UI. Swap to NDS state tokens so the surface picks up the warm-brown tint, and recolor the placeholder text + magnifying-glass icon to match the gray scale used elsewhere in the docs. */ #search-bar-entry { background-color: #37352f0a !important; color: #7d7a75 !important; } #search-bar-entry:hover { background-color: #37352f1a !important; } #search-bar-entry svg { color: #7d7a75 !important; } #search-bar-entry:hover svg { color: #37352f !important; } html.dark #search-bar-entry { background-color: rgba(255, 255, 255, 0.055) !important; color: rgba(255, 255, 255, 0.5) !important; } html.dark #search-bar-entry:hover { background-color: rgba(255, 255, 255, 0.129) !important; } html.dark #search-bar-entry svg { color: rgba(255, 255, 255, 0.5) !important; } html.dark #search-bar-entry:hover svg { color: #ffffff !important; } /* Mobile-only search trigger (icon-only button shown below the lg breakpoint). The icon is rendered as a CSS mask whose color comes from the element's background, so we set both color and background-color to the same value. */ #search-bar-entry-mobile, #search-bar-entry-mobile svg { color: #7d7a75 !important; background-color: #7d7a75 !important; } #search-bar-entry-mobile:hover, #search-bar-entry-mobile:hover svg { color: #37352f !important; background-color: #37352f !important; } html.dark #search-bar-entry-mobile, html.dark #search-bar-entry-mobile svg { color: rgba(255, 255, 255, 0.5) !important; background-color: rgba(255, 255, 255, 0.5) !important; } html.dark #search-bar-entry-mobile:hover, html.dark #search-bar-entry-mobile:hover svg { color: #ffffff !important; background-color: #ffffff !important; } /* Theme toggle (sun/moon button next to the topbar CTA): Mintlify defaults to bg-gray-800/[0.04] which is cool gray. Add a hover state and warm both resting + hover to NDS state tokens for parity with the rest of the chrome. */ button[data-component-name="theme-toggle"] { background-color: #37352f0a !important; } button[data-component-name="theme-toggle"]:hover { background-color: #37352f1a !important; } html.dark button[data-component-name="theme-toggle"] { background-color: rgba(255, 255, 255, 0.055) !important; } html.dark button[data-component-name="theme-toggle"]:hover { background-color: rgba(255, 255, 255, 0.129) !important; } button[data-component-name="theme-toggle"] svg { color: #7d7a75 !important; } button[data-component-name="theme-toggle"]:hover svg { color: #37352f !important; } html.dark button[data-component-name="theme-toggle"] svg { color: rgba(255, 255, 255, 0.5) !important; } html.dark button[data-component-name="theme-toggle"]:hover svg { color: #ffffff !important; } /* Navbar bottom border: Mintlify uses border-gray-100 (cool) / border-gray-800 in dark. Swap to NDS gray border tokens (warm-brown) for parity with the sidebar border and content dividers. */ #navbar [class*="border-gray-100"] { border-color: #e6e5e3 !important; } html.dark #navbar [class*="border-gray-800"] { border-color: rgba(255, 255, 255, 0.094) !important; } /* Top tab hover underline (API Reference / Changelog / Examples). Mintlify uses bg-gray-200 / bg-gray-700 — cool grays. Match the NDS border token in light mode and the same translucent-white the sidebar uses in dark. */ .nav-tabs-item div[class*="bg-gray-200"] { background-color: #e6e5e3 !important; } html.dark .nav-tabs-item div[class*="bg-gray-700"] { background-color: rgba(255, 255, 255, 0.18) !important; } /* Sidebar right edge + within-sidebar group dividers. Same swap from cool border-gray-100 to NDS warm border-primary. In dark mode the sidebar uses border-white/10, so target that as well. */ #sidebar-content[class*="border-gray-100"] { border-color: #e6e5e3 !important; } html.dark #sidebar-content[class*="border-white"] { border-color: rgba(255, 255, 255, 0.094) !important; } .sidebar-nav-group-divider { background-color: #e6e5e3 !important; } html.dark .sidebar-nav-group-divider { background-color: rgba(255, 255, 255, 0.094) !important; } /* Sidebar leaf text colors. Mintlify defaults to text-gray-700 (cool) with a text-gray-900 hover. Snap both to NDS text tokens (warm). The dark-mode side is already handled further down via the prose-invert + sidebar-group overrides; this block targets light mode. */ :is(a, button)[class*="outline-offset"][class*="text-gray-700"] { color: #37352f !important; } :is(a, button)[class*="outline-offset"][class*="hover:text-gray-900"]:hover { color: #37352f !important; } /* Sidebar collapse chevron next to expandable groups. Defaults to text-gray-400 with a hover bump to text-gray-600 — both cool. Use NDS text tertiary / secondary so the chevron matches the surrounding row. */ :is(a, button)[class*="outline-offset"] svg[class*="text-gray-400"][class*="group-hover:text-gray-600"] { color: #ada9a3 !important; } :is(a, button)[class*="outline-offset"]:hover svg[class*="text-gray-400"][class*="group-hover:text-gray-600"] { color: #7d7a75 !important; } /* Card chrome (used on the home page grid of API areas): - border-gray-950/10 → NDS border primary (warm) - title text-gray-800 → NDS text primary - content text-gray-600 → NDS text secondary - arrow text-gray-400/500 → NDS text tertiary */ .card[class*="border-gray-950"] { border-color: #e6e5e3 !important; } html.dark .card[class*="border-white"] { border-color: rgba(255, 255, 255, 0.094) !important; } [data-component-part="card-title"] { color: #37352f !important; } html.dark [data-component-part="card-title"] { color: #ffffff !important; } [data-component-part="card-content"] { color: #7d7a75 !important; } html.dark [data-component-part="card-content"] { color: #ada9a3 !important; } #card-link-arrow-icon { color: #ada9a3 !important; } html.dark #card-link-arrow-icon { color: #7d7a75 !important; } /* Tighten sidebar nav item corners — Mintlify defaults to rounded-xl (12px), which reads too soft at this size. Covers both leaf links () and collapsible group rows (

Get started

Guides

Reference

Documentation Index

​Overview

Overview