[{"data":1,"prerenderedAt":35},["ShallowReactive",2],{"doc-style":3},{"html":4,"headings":5},"\u003Cp>One style for the whole project, shared by the features that have a style\npanel: its logo and app icon, \u003Cstrong>light and dark\u003C\u002Fstrong> colours, corner radius, shadow\nand font. Set it once and every public page wears all of it, in light and dark:\nthe changelog, feedback board, chat widget, hub, blog, brand page, legal pages,\nforms, onboarding and pricing tables (see \u003Ca href=\"#limits\">Limits\u003C\u002Fa>).\u003C\u002Fp>\n\u003Ch2 id=\"where-it-is-set\">Where it is set\u003Ca class=\"heading-anchor\" href=\"#where-it-is-set\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Project → Changelog → Style\u003C\u002Fstrong> and \u003Cstrong>Project → Feedback → Style\u003C\u002Fstrong> (and the same two buttons on the Brand page,\nForms, Onboarding, Pricing, Blog design and Legal's look panels):\n\u003Cstrong>Edit project style\u003C\u002Fstrong> opens the editor, \u003Cstrong>Save as project style\u003C\u002Fstrong> takes what\nthat panel has chosen (its accent, background, text, corner radius, font) and\nopens the same editor with it filled in, so you see exactly what will be saved.\u003C\u002Fli>\n\u003Cli>Over the API: the \u003Ccode>style\u003C\u002Fcode> object on \u003Ccode>PATCH \u002Fv1\u002Fadmin\u002Fprojects\u002F{id}\u003C\u002Fcode>, read back\nas \u003Ccode>style\u003C\u002Fcode> (as saved) on the admin project and as \u003Ccode>look.style\u003C\u002Fcode> (every gap\nfilled) on the public one.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The native app edits the project style too: \u003Cstrong>Brand → Style\u003C\u002Fstrong>, \u003Cstrong>Settings →\nBranding\u003C\u002Fstrong> and \u003Cstrong>Changelog → More → Style\u003C\u002Fstrong> open the same editor (with a light and\ndark preview), and the changelog's Style screen has \u003Cstrong>Save as project style\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ch2 id=\"the-layers\">The layers\u003Ca class=\"heading-anchor\" href=\"#the-layers\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Every value is optional. A value you leave empty comes from the layer below:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>A feature's own style\u003C\u002Fstrong> (\u003Ccode>changelog.style.custom\u003C\u002Fcode>, \u003Ccode>feedback.style.custom\u003C\u002Fcode>), only when its \u003Ccode>source\u003C\u002Fcode>\nis \u003Ccode>custom\u003C\u002Fcode>. Whatever it leaves empty still comes from the project style.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The project style\u003C\u002Fstrong> (\u003Ccode>style\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The Brand kit\u003C\u002Fstrong> (\u003Ccode>Project.brand\u003C\u002Fcode>): its accent (the page accent, else the\nfirst colour), corner radius, body font, logo and icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Our defaults\u003C\u002Fstrong>: stone neutrals in light and dark, a soft shadow.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>So changing the project style changes every feature that does not override it,\nand a feature that overrides only the shadow keeps following the project's\ncolours.\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Field\u003C\u002Fth>\n\u003Cth>Values\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>scheme\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>auto\u003C\u002Fcode> (follow the visitor), \u003Ccode>light\u003C\u002Fcode> or \u003Ccode>dark\u003C\u002Fcode>; empty is \u003Ccode>auto\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>light\u003C\u002Fcode>, \u003Ccode>dark\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>accent\u003C\u002Fcode>, \u003Ccode>background\u003C\u002Fcode>, \u003Ccode>surface\u003C\u002Fcode> (cards), \u003Ccode>text\u003C\u002Fcode>, \u003Ccode>muted\u003C\u002Fcode> (secondary text), \u003Ccode>border\u003C\u002Fcode>: each \u003Ccode>#rrggbb\u003C\u002Fcode> or empty. An empty dark accent follows the light one.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>radius\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0 to 32 CSS pixels, or \u003Ccode>null\u003C\u002Fcode> for the Brand kit's.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>shadow\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>none\u003C\u002Fcode>, \u003Ccode>soft\u003C\u002Fcode>, \u003Ccode>medium\u003C\u002Fcode>, \u003Ccode>strong\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>font\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>system\u003C\u002Fcode>, \u003Ccode>serif\u003C\u002Fcode> or \u003Ccode>mono\u003C\u002Fcode>; empty uses the Brand kit's body font.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>logoUrl\u003C\u002Fcode>, \u003Ccode>logoDarkUrl\u003C\u002Fcode>, \u003Ccode>iconUrl\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>http(s) URLs; empty uses the Brand kit's. The dark logo falls back to the logo.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>\u003Ccode>PATCH\u003C\u002Fcode> is partial: only the keys you send change, \u003Ccode>light\u003C\u002Fcode> and \u003Ccode>dark\u003C\u002Fcode> merge\ncolour by colour, and an empty string (\u003Ccode>null\u003C\u002Fcode> for \u003Ccode>radius\u003C\u002Fcode>) clears a value.\nAnything invalid is a \u003Ccode>400\u003C\u002Fcode> naming the field.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-bash\">\u003Ccode>\u003Cspan class=\"shj-syn-func\">curl\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -X\u003C\u002Fspan> PATCH \u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fv1\u002Fadmin\u002Fprojects\u002FPROJECT_ID\"\u003C\u002Fspan> \\\n \u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"Authorization: Bearer ak_…\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"Content-Type: application\u002Fjson\"\u003C\u002Fspan> \\\n \u003Cspan class=\"shj-syn-kwd\"> -d\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'{ \"style\": { \"light\": { \"accent\": \"#e11d48\" }, \"dark\": { \"background\": \"#1e1b4b\" }, \"shadow\": \"medium\", \"radius\": 14 } }'\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Ch2 id=\"the-feedback-board\">The feedback board\u003Ca class=\"heading-anchor\" href=\"#the-feedback-board\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Project → Feedback → \u003Cstrong>Style\u003C\u002Fstrong> works exactly like the changelog's: use the\nproject style, or \u003Ccode>feedback.style\u003C\u002Fcode> (\u003Ccode>{ "source": "custom", "custom": { … } }\u003C\u002Fcode>,\nsame fields) over it. The board, its roadmap and its changelog views wear it in\nlight or dark, following the visitor unless the style fixes a \u003Ccode>scheme\u003C\u002Fcode>. The\nfinished style is \u003Ccode>feedbackStyle\u003C\u002Fcode> on \u003Ccode>GET \u002Fv1\u002Fprojects\u002F{pk}\u002Fpublic\u003C\u002Fcode> (and on\n\u003Ccode>GET \u002Fv1\u002Ffeedback\u002Fconfig\u003C\u002Fcode>'s \u003Ccode>project\u003C\u002Fcode>). The \u003Ccode>feedback.js\u003C\u002Fcode> script tag takes\n\u003Ccode>data-theme\u003C\u002Fcode>, \u003Ccode>data-accent\u003C\u002Fcode>, \u003Ccode>data-radius\u003C\u002Fcode> and \u003Ccode>data-shadow\u003C\u002Fcode> as the changelog's\ndoes, and the hosted board takes them as URL parameters. \u003Ccode>data-header="false"\u003C\u002Fcode> leaves out the logo, title and description (the view tabs and \u003Cem>New post\u003C\u002Fem> stay); \u003Ccode>?header=0\u003C\u002Fcode> does the same on the hosted board.\u003C\u002Fp>\n\u003Ch2 id=\"the-changelog\">The changelog\u003Ca class=\"heading-anchor\" href=\"#the-changelog\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The public changelog page (\u003Ccode>\u002Fchangelog\u002Fpk_…\u003C\u002Fcode>) and its embed wear its style in\nlight or dark, following the visitor unless the style fixes a \u003Ccode>scheme\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Use the project style\u003C\u002Fstrong> (\u003Ccode>changelog.style.source: "project"\u003C\u002Fcode>, the default).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Customise for the changelog\u003C\u002Fstrong> (\u003Ccode>"custom"\u003C\u002Fcode>): \u003Ccode>changelog.style.custom\u003C\u002Fcode> has the\nsame fields as above. It is a partial \u003Ccode>PATCH\u003C\u002Fcode> like the rest of the changelog\nsettings:\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-bash\">\u003Ccode>\u003Cspan class=\"shj-syn-func\">curl\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -X\u003C\u002Fspan> PATCH \u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fv1\u002Fadmin\u002Fprojects\u002FPROJECT_ID\"\u003C\u002Fspan> \\\n \u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"Authorization: Bearer ak_…\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"Content-Type: application\u002Fjson\"\u003C\u002Fspan> \\\n \u003Cspan class=\"shj-syn-kwd\"> -d\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'{ \"changelog\": { \"style\": { \"source\": \"custom\", \"custom\": { \"shadow\": \"none\" } } } }'\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>\u003Ccode>GET \u002Fv1\u002Fchangelog?pk=pk_…\u003C\u002Fcode> returns the finished style as \u003Ccode>style\u003C\u002Fcode>, so your own UI\ncan wear it too: the \u003Ccode>light\u003C\u002Fcode> and \u003Ccode>dark\u003C\u002Fcode> palettes are complete colours, \u003Ccode>radius\u003C\u002Fcode>\nis pixels and \u003Ccode>shadowCss\u003C\u002Fcode> is a ready \u003Ccode>box-shadow\u003C\u002Fcode> value.\u003C\u002Fp>\n\u003Ch3 id=\"on-your-site\">On your site\u003Ca class=\"heading-anchor\" href=\"#on-your-site\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-html\">\u003Ccode>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">div\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">id\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"changelog\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">div\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">src\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fchangelog.js\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-project\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"pk_…\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-target\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"#changelog\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">defer\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>The embed is a frame, so your page's CSS does not reach it; the options are the\nscript tag's attributes, each overriding the style for this one embed:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Attribute\u003C\u002Fth>\n\u003Cth>Meaning\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>data-theme\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>light\u003C\u002Fcode>, \u003Ccode>dark\u003C\u002Fcode> or \u003Ccode>system\u003C\u002Fcode>. Without it: a \u003Ccode>light\u003C\u002Fcode> or \u003Ccode>dark\u003C\u002Fcode> class on your \u003Ccode><html>\u003C\u002Fcode>, else the style's scheme, else the visitor's.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>data-accent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#rrggbb\u003C\u002Fcode>, in light and dark.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>data-radius\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0 to 32.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>data-shadow\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>none\u003C\u002Fcode>, \u003Ccode>soft\u003C\u002Fcode>, \u003Ccode>medium\u003C\u002Fcode> or \u003Ccode>strong\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>data-header\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>false\u003C\u002Fcode> leaves out the logo, title and description at the top, for a page that already shows them. The hosted page takes \u003Ccode>?header=0\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>The hosted page takes the same as URL parameters (\u003Ccode>?theme=dark&accent=%23e11d48\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Ch2 id=\"in-a-swift-app\">In a Swift app\u003Ca class=\"heading-anchor\" href=\"#in-a-swift-app\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The public project config carries the finished style, so a native screen can\nwear the project in light and dark with \u003Ccode>URLSession\u003C\u002Fcode> and no package:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-plain\">\u003Ccode>\u002F\u002F ProjectStyle.swift. MIT. The project's palette, for the current light or dark appearance.\nimport SwiftUI\n\nstruct ProjectStyle: Decodable {\n  struct Palette: Decodable { let accent, background, surface, text, muted, border: String }\n  let radius: Int\n  let light, dark: Palette\n}\n\nstruct StyledCard<Content: View>: View {\n  let style: ProjectStyle\n  var cornerRadius: CGFloat? = nil   \u002F\u002F override the project's\n  @ViewBuilder var content: Content\n  @Environment(\\.colorScheme) private var scheme\n\n  var body: some View {\n    let palette = scheme == .dark ? style.dark : style.light\n    content\n      .foregroundStyle(Color(styleHex: palette.text))\n      .padding()\n      .background(Color(styleHex: palette.surface), in: .rect(cornerRadius: cornerRadius ?? CGFloat(style.radius)))\n      .overlay(RoundedRectangle(cornerRadius: cornerRadius ?? CGFloat(style.radius)).stroke(Color(styleHex: palette.border)))\n      .tint(Color(styleHex: palette.accent))\n  }\n}\n\nextension Color {\n  init(styleHex hex: String) {\n    let v = Int(hex.dropFirst(), radix: 16) ?? 0\n    self.init(red: Double(v >> 16 & 255) \u002F 255, green: Double(v >> 8 & 255) \u002F 255, blue: Double(v & 255) \u002F 255)\n  }\n}\n\n\u002F\u002F let url = host.appending(path: \u003Cspan class=\"shj-syn-str\">\"v1\u002Fprojects\u002F\\(projectKey)\u002Fpublic\"\u003C\u002Fspan>)\n\u002F\u002F struct Answer: Decodable { struct Look: Decodable { let style: ProjectStyle }; let look: Look }\n\u002F\u002F let style = try JSONDecoder().decode(Answer.self, from: try await URLSession.shared.data(from: url).0).look.style\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Ch2 id=\"build-your-own\">Build your own\u003Ca class=\"heading-anchor\" href=\"#build-your-own\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>look.style\u003C\u002Fcode> and \u003Ccode>GET \u002Fv1\u002Fchangelog\u003C\u002Fcode>'s \u003Ccode>style\u003C\u002Fcode> are everything a page needs: set\nthe colours of the current scheme as CSS variables, use \u003Ccode>radius\u003C\u002Fcode>, \u003Ccode>shadowCss\u003C\u002Fcode>\nand \u003Ccode>fontFamily\u003C\u002Fcode> as they are, and pick \u003Ccode>logoDarkUrl\u003C\u002Fcode> on a dark background.\u003C\u002Fp>\n\u003Ch2 id=\"the-other-public-pages\">The other public pages\u003Ca class=\"heading-anchor\" href=\"#the-other-public-pages\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Hub, chat widget, blog, legal pages and brand page\u003C\u002Fstrong> each have a \u003Ccode>style\u003C\u002Fcode>\nchoice like the changelog's (\u003Ccode>hub.style\u003C\u002Fcode>, \u003Ccode>widget.style\u003C\u002Fcode>, \u003Ccode>blog.style\u003C\u002Fcode>,\n\u003Ccode>legal.style\u003C\u002Fcode>, \u003Ccode>brand.page.style\u003C\u002Fcode>: \u003Ccode>{ "source": "project" | "custom", "custom": { … } }\u003C\u002Fcode>),\nedited from a \u003Cstrong>Style\u003C\u002Fstrong> button in their panel and sent in a partial \u003Ccode>PATCH\u003C\u002Fcode> of\nthe project. The blog's design (accent, font, colour scheme), the legal look and\nthe brand page's theme, radius and accent stay as that feature's own layer on\ntop. The finished style is \u003Ccode>style\u003C\u002Fcode> on \u003Ccode>GET \u002Fv1\u002Fhub\u002F{pk}\u003C\u002Fcode>, \u003Ccode>GET \u002Fv1\u002Fblog\u003C\u002Fcode> and\n\u003Ccode>GET \u002Fv1\u002Fbrand\u002F{pk}\u003C\u002Fcode>, and \u003Ccode>widgetStyle\u003C\u002Fcode> on the public project.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Forms, onboarding flows and pricing tables\u003C\u002Fstrong> keep the \u003Ccode>style\u003C\u002Fcode> each one has\n(accent, background, text, radius, font…) as their own layer over the project\nstyle: what a form, flow or table sets wins, in light and dark; what it leaves\nempty comes from the project (dark palette, card colours, shadow, and the\nproject's radius and font where the form's are still at their default). The\nfinished style is \u003Ccode>look\u003C\u002Fcode> in their public payload.\u003C\u002Fp>\n\u003Cp>Every script takes \u003Ccode>data-accent\u003C\u002Fcode>, \u003Ccode>data-radius\u003C\u002Fcode>, \u003Ccode>data-shadow\u003C\u002Fcode> and \u003Ccode>data-theme\u003C\u002Fcode>\n(\u003Ccode>widget.js\u003C\u002Fcode> \u002F \u003Ccode>helpbites.js\u003C\u002Fcode>, \u003Ccode>blog.js\u003C\u002Fcode>, \u003Ccode>brand.js\u003C\u002Fcode>, \u003Ccode>forms.js\u003C\u002Fcode>,\n\u003Ccode>onboarding.js\u003C\u002Fcode>, \u003Ccode>pricing.js\u003C\u002Fcode>), each overriding the style for that embed;\nthe hosted pages take the same as URL parameters where they have them.\u003C\u002Fp>\n\u003Ch2 id=\"limits\">Limits\u003Ca class=\"heading-anchor\" href=\"#limits\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>The Brand kit's typefaces are not loaded on the blog, legal, form, onboarding\nand pricing pages: they use the style's \u003Ccode>system\u003C\u002Fcode>, \u003Ccode>serif\u003C\u002Fcode> or \u003Ccode>mono\u003C\u002Fcode> family.\nThe brand page and hub still load the kit's fonts.\u003C\u002Fli>\n\u003Cli>Forms, onboarding and pricing have no separate project-or-custom choice: their\nown style fields are that choice. Their panels can save their choices as the\nproject style, and the project style shows through where they leave a field empty.\u003C\u002Fli>\n\u003Cli>The CMS pages (\u003Ccode>pages.js\u003C\u002Fcode>) do not wear the style yet.\u003C\u002Fli>\n\u003Cli>The native app edits the project style and the changelog's style, but not any\nother feature's, and its Swift snippets do not read the finished \u003Ccode>look\u003C\u002Fcode> \u002F \u003Ccode>style\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13,16,19,23,26,29,32],{"id":7,"text":8,"level":9},"where-it-is-set","Where it is set",2,{"id":11,"text":12,"level":9},"the-layers","The layers",{"id":14,"text":15,"level":9},"the-feedback-board","The feedback board",{"id":17,"text":18,"level":9},"the-changelog","The changelog",{"id":20,"text":21,"level":22},"on-your-site","On your site",3,{"id":24,"text":25,"level":9},"in-a-swift-app","In a Swift app",{"id":27,"text":28,"level":9},"build-your-own","Build your own",{"id":30,"text":31,"level":9},"the-other-public-pages","The other public pages",{"id":33,"text":34,"level":9},"limits","Limits",1792766843062]