Design system

Occasion themes

Caro dresses up for 31 occasions. An occasion changes four things: the CTA fill, a 4px ribbon above the page, the hero art and the event banner. Links, copy and the brand mark stay Caro. Every fill must give white text at least 4.5:1; the build fails if one does not.

Preview any page by adding ?occasion=<id> (and optionally &theme=dark) to its URL. Nothing is saved.

Holidays

Opt-in. Visitors choose them from the navigation while the holiday is in season.

National days

Opt-in, and only offered to visitors in that country.

Humanity events

Automatic banner on the day or month. Six monthly events also theme the site.