Customize the design

Every Riddle uses a palette that controls colors, fonts, and visual styles. Start with one of the 9 built-in palettes or create your own to match your brand. Custom palettes let you adjust 25+ color tokens — from answer backgrounds to right/wrong overlays.

Apply a default Riddle palette

There are 9 ready-to-use Riddle palettes that you can apply as they are or customize further. Timeless is the default palette for any new Riddle.

1. Go to the Design section.
2. Select one of the 9 palettes:
   • Dark mode
   • Cool
   • Forest
   • Rocketship
   • Peachy
   • Stagecoach
   • Accent
   • Minigame
   • Timeless
3. You will see the palette applied directly to your Riddle on the screen.

Customize a default Riddle palette

1. Go to the Design section.
2. Click on the three dots on the right of any palette.
3. Click on COPY AND EDIT PALETTE.
4. Enter a name in the Type your preset name here field and click on SAVE.
5. Change as many things as you like with the font and colors.
6. Click on APPLY every time you change a color.
7. Click on SAVE PALETTE.
8. In the pop-up window that appears, click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
9. You will see the palette applied directly to your Riddle on the screen.

Create your own palette

1. Go to the Design section.
2. Scroll down and click on CREATE A PALETTE.
3. Change as many things as you like with the font and colors.
4. Click on SAVE PALETTE.
5. You will see the palette applied directly to your Riddle on the screen.

Edit one of your palettes

1. Go to the Design section.
2. Click on the three dots on the right of the palette you want to change and click on CUSTOMIZE.
3. Change as many things as you like with the font and colors.
4. Click on SAVE PALETTE.
5. In the pop-up window that appears, click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
6. You will see the palette applied directly to your Riddle on the screen.

Change palettes

1. Go to the Design section.
2. Select the palette you want to use for the Riddle you're creating.
3. You will see the palette applied directly to your Riddle on the screen.

Change colors

1. Go to the Design section.
2. Click on the three dots next to the palette you want to change.
3. Click on CUSTOMIZE or COPY AND EDIT PALETTE.
4. Click on the color / arrow next to each element. The color options are split into five sections:
   • Global — text color, link color, Riddle background
   • Answers — background, hover, focus, selected states, border, right/wrong answer colors and overlays
   • Buttons — button background, inactive state, button text
   • Pagination — background and highlight colors, with separate values for blocks with media
   • Footer — footer background and text colors
5. To choose a specific color, use the color selector sliders, the color squares on the right, or by typing the color code in the HEX field.
6. To choose a basic color, click on the icon and select one of the 20 colors.
7. Click on APPLY.
8. Click on SAVE PALETTE.
9. In the pop-up window that appears, click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
10. You will see the palette applied directly to your Riddle on the screen.

Block instructions

Every block has an instructions label that tells your audience what they have to do in this block. Block instructions are enabled by default.

1. Go to the Design section.
2. Enable/disable Show block instructions.

Block image as blurred background

Use a blurred version of the block image as background behind your content area. This creates visual continuity between the image and the question below it. Enabled by default.

1. Go to the Design section.
2. Enable/disable Block image as blurred background. You can only enable this if Block media as Riddle background is disabled.

Block media as Riddle background

Use the block media as a full-bleed Riddle background with a color overlay. This creates an immersive, full-screen look — good for visual storytelling or image-heavy quizzes. The overlay color is determined by the Riddle background palette value.

1. Go to the Design section.
2. Enable/disable Block media as Riddle background. You can only enable this if Block image as blurred background is disabled.

Riddle border radius

Control the corner rounding of your Riddle container. The default is 24px. Set to 0 for sharp corners (fits well inside rectangular page layouts) or increase for a softer, more rounded look.

1. Go to the Design section.
2. Enter a number or use the up and down arrows to set a radius in px. The maximum is 50px.