Design tokens
The CSS custom properties (design tokens) your theme uses for color, type, and spacing — and how to override them to make an event page truly yours.
Every Rendezvous theme is built on a small set of CSS custom properties called design tokens. Think of them as the dials behind your event page: one token controls your accent color, another sets your heading font, another the spacing between sections. Your theme fills in sensible defaults for all of them, so your page looks great out of the box.
When you want to go further — your own brand color, a favorite font, a darker palette — you change a token instead of restyling each element by hand. Update one value and it ripples across every component that uses it. This guide lists the tokens you can reach for and shows you how to override them.
Color tokens
These set the palette of your page — text, backgrounds, borders, and the accents that make it feel like your event.
| Token | Default | What it controls |
|---|---|---|
--event-primary | #2E2A8F | Brand color — countdown numbers, poll bars, the post button, and other structural accents |
--event-primary-light | #EEEDF8 | A soft tint of the brand color, used behind the countdown and other highlight panels |
--event-accent | #B8844A | Secondary accent for links, the "Maybe" button, schedule highlights, and decorative touches |
--event-accent-hover | #9B6E3A | The accent color on hover |
--event-bg | #F5ECDC | Page background |
--event-surface | #FFFFFF | Card and panel background (feed posts, schedule cards, weather) |
--event-border |