Custom CSS reference

Rules

• Your CSS applies to your library, its gallery and request form, your status pages and the embed widget -- never to your own screens, emails, labels or the share card.
• Every selector is placed inside your pages’ box; html, body and :root mean the box itself. The platform’s notices -- the footer, the cookie banner, Report, the request form’s privacy lines, a requester’s own controls, "powered by" -- are outside it.
• Only @media, @supports, @container and @keyframes. Nothing that loads anything: no url(), image(), image-set(), @import or @font-face.
• font-family may name only the hosted fonts below, or a generic family such as sans-serif. A page downloads a font only when your CSS names it.
• At most 20 KB and 1,000 rules. Your rules win over the pages’ own without !important; !important is allowed.
• Under reduced motion, animation and transitions are turned off whatever your CSS says.

Example

:root {
  --brand-canvas: #fbf7f2;
  --brand-surface: #ffffff;
  --brand-border: #e8dccf;
  --brand-text: #2b1a12;
  --brand-text-muted: #6b5a50;
  --brand-accent: #7a3e1d;
  --brand-accent-text: #7a3e1d;
  --brand-radius: 14px;
  --brand-font: Poppins, sans-serif;
  --brand-heading-font: "Playfair Display", serif;
}

[data-part="request-button"] {
  border-radius: 999px;
}