/* =================================================================== Zite brand v2 — developer docs =================================================================== The palette, type and geometry here are lifted from the "Bring your favorite agent" section of the Website-v2 Figma file, which is the surface the brand uses for developer- and agent-facing product. Every value below was sampled from that node rather than guessed: ground #252522 raised panel #2d2d2a panel top #31312e sunken/inset #242421 hairline #353531 border #3d3d38 lit edge #4b4b48 muted text #989893 accent #ffd202 The two structural signatures of the brand are (a) a pair of vertical hairlines pinned to the 1240px container, running the full height of every section, and (b) a full-bleed horizontal hairline between a section's header and its content, with the content sitting in a 16px rounded panel inset 12px from the rails. The landing page (.zx) is always dark, whatever the site theme — it is a brand surface, and the Figma has no light counterpart for it. The docs themselves keep both themes and default to dark, so anything outside .zx that names a color has to work in light mode too. =================================================================== */ /* ---------- Brand faces ---------- Also declared by docs.json `fonts`, which is what applies them to Mintlify's own chrome. Repeated here so this file stands alone and so the fallback stacks and font-display are ours. One cut of each is licensed and committed: Bureau Sans Regular (400) and Bureau Serif Medium (500). There is no bold or medium sans, so nothing in this file asks for one — hierarchy comes from size, color and the serif/sans contrast, exactly as the Figma does it. */ @font-face { font-family: "STK Bureau Sans"; src: url("/fonts/STKBureauSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "STK Bureau Serif"; src: url("/fonts/STKBureauSerif-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { --zb-bg: #252522; --zb-surface: #2d2d2a; --zb-surface-hi: #31312e; --zb-sunken: #242421; /* Light-mode code surface. The brand's neutrals are warm (blue channel ~3 below red and green) and the light ground is #FBFBFB, so a code panel wants to sit just under it on the same tilt rather than go pure white. */ --zb-sunken-light: #f3f3f0; --zb-rule: #353531; --zb-border: #3d3d38; --zb-edge: #4b4b48; --zb-fg: #ffffff; --zb-fg-2: #c9c9c4; --zb-muted: #989893; /* #6f6f6a measured 3.04:1 on the #252522 ground — under AA for the real text this tier carries (the beta note, footer headings, legal line). #8c8c86 is 4.55:1 and still a visible step below --zb-muted at 5.30. The transcript steps keep their own deliberately faded values below; those are a picture of an interface, not page copy. */ --zb-dim: #8c8c86; --zb-accent: #ffd202; --zb-serif: "STK Bureau Serif", "Iowan Old Style", Charter, Palatino, "Palatino Linotype", Georgia, serif; --zb-sans: "STK Bureau Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --zb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; /* Prose emphasis, flipped by theme. Everything else in this block is a landing-page constant; these two are the exception because the docs keep both themes. */ --zb-ink: #252522; --zb-ink-2: #3d3d38; --zb-container: 1240px; --zb-gutter: 40px; --zb-inset: 12px; } /* =================================================================== Sitewide chrome =================================================================== Mintlify builds its navbar, sidebar, footer and cards out of `rgb(var(--gray-N))`. The stock ramp is neutral; the brand's darks are very slightly warm (blue channel sits ~3 below red and green). Rather than chase individual components, remap the ramp onto the brand's own measured values — everything downstream then lands on-brand for free. Mintlify prints its ramp in an inline