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).