11 Design
In this lesson, we focus on customizing the design of your Riddle to align with your brand or campaign. We will:
- explore how to apply and customize default palettes
- adjust text and button colors
- choose and modify fonts
- refine background styles using images or color
- enable or disable block instructions
- set border radius to control the roundness of Riddle edges
- use custom CSS for advanced styling
Transcript:
Hi there, welcome back.
Let’s look at a couple of design aspects now. You can leave your Riddle as it is—it’s ready to publish and embed. By default, the palette that is used in a new Riddle is “Timeless”. You can use one of our other default palettes, your own existing palette, or create a new one.
To give you an example, let’s copy and edit this palette and call it “Cars”. You can change all the colours here for different elements within the Riddle. For example, we could change the text colour to blue and the button text colour to match. Click apply and those changes will take effect.
You can use RGBA or hex codes for precise brand colours. Up here, you’ve also got font controls. You can change the default “Inter” to a Google or Adobe font, or one you’ve added.
By default, the block image colours are extracted to create a blurred background. You can disable this to use a solid colour instead. For example, changing the text and button colours to suit your chosen background.
Another option is to use the image as the full background for a block. This ties elements together without visually separating the question from the image. Make sure there’s enough contrast between your image and the text.
You can enable or disable block instructions. These appear above questions by default. If your question is clear—like “What are your top three considerations?”—you might choose to disable instructions for a cleaner look.
You can also adjust the border radius to change how rounded your Riddle appears. A value of 0 means right angles; the maximum is 50. The default is 24.
Finally, in the palette settings, you can add custom CSS. Scroll down, click “Edit” under Custom CSS, and insert your code to target specific elements like spacing, colours, or visibility. Use our help guide and code snippets to find class names and examples.
Okay, so that’s design. In the next step, we’ll publish and look at how to embed your Riddle so you’re ready to share your personality quiz.
Thank you very much and see you in the next clip.