Branding and Colors
What you can change
The donation form uses three brand colors. You can change any or all of them:
Color | What it controls | Default |
Primary | Main text, headings, navigation, secondary buttons, payment summary headers |
|
Accent | "Donate" button, links, selected payment method, focus rings, important highlights |
|
Background | Page background, section panels, soft surfaces (tip section, cover-fee box, etc.) |
|
How to apply your colors
Pick your color hex codes (e.g., from your brand guidelines or a tool like coolors.co)
Copy the template below into your Custom CSS field
Replace the hex codes with your values
Save — the form will use your colors (you may need to clear your page's cache for the change to appear).
Template CSS
:root {
--mahogany: #YOUR_PRIMARY_HEX;
--fiery: #YOUR_ACCENT_HEX;
--seashell: #YOUR_BACKGROUND_HEX;
}
How you'd change all three
:root {
--mahogany: #1a3a8a; /* Navy blue for text */
--fiery: #16a34a; /* Green for buttons */
--seashell: #f0f9ff; /* Pale blue background */
}Example: Override only ONE color
If you only want to change the donate-button color:
:root { --fiery: #16a34a;
}
⚠️ Tips for choosing colors
Contrast matters. Text needs to be readable on its background. The Accent color is used for buttons with white text, so make sure it's dark enough. The Primary color is used for text on white/cream backgrounds, so make sure it's dark enough to read.
Test before publishing. Preview your form in both desktop and mobile views, and check both English and Hebrew (if applicable) before going live.
Don't pick three similar shades. Buttons should stand out from the background. Pick an Accent color that contrasts with both Primary and Background.
Use full 6-digit hex codes with a
#prefix (e.g.,#1a3a8a, not1a3a8aor#1a3).
Replacing Fonts
To override the donation form's font, paste this CSS into the Custom CSS field. Replace the font name with your choice:
:root { --font: 'YOUR_FONT_NAME', sans-serif; }
Then, in the Custom CSS, point us to the Font itself. There are a number of ways to do this:
Option 1: Use a Google Font (easiest)
Visit fonts.google.com and pick a font (e.g., Inter, Roboto, Poppins, Heebo, Rubik)
Click "Get embed code" and copy the
@importlinePaste this into your Custom CSS field:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --font: 'Inter', sans-serif; }Replace Inter with your chosen font name in both the URL and the variable.
Option 2: Use a font that's already on the site
If your charity already loads its brand font on its main website, you may already have access to it. Just reference it by name:
:root { --font: 'Helvetica Neue', Arial, sans-serif; }Always include a fallback (sans-serif or serif) so the form works even if the font fails to load.
Option 3: Use a self-hosted font file
If you have a custom font file (.woff2, .woff, .ttf), upload it to your server and declare it:
@font-face {
font-family: 'MyBrandFont';
src: url('https://your-domain.com/fonts/MyBrandFont.woff2') format('woff2');
font-weight: 400;
font-style: normal; }
@font-face { font-family: 'MyBrandFont';
src: url('https://your-domain.com/fonts/MyBrandFont-Bold.woff2')
format('woff2');
font-weight: 700;
font-style: normal; }
:root { --font: 'MyBrandFont', sans-serif; }The form uses font weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), and 800 (extra bold). Make sure the font you pick supports these weights — or at least 400 and 700 — for everything to render correctly.
Hebrew & Arabic pages
The Hebrew and Arabic versions of the form use a different default font (Rubik) optimized for those scripts. To override the font on Hebrew/Arabic pages specifically, add this rule:
html[dir="rtl"] {
--font: 'YOUR_HEBREW_FONT', 'Rubik', Arial, sans-serif; }