The Design tab
Set the look of your published course: theme presets, colours, logo, background, typefaces, corner rounding and content width.
The Design tab (Ctrl 3) controls how your course looks to learners. It has nothing to
do with how the Compose editor looks — that lives in Settings ▸ Appearance.
Every change applies live to the canvas and the preview. Click Pop out to open the panel in a larger window while you work.
Theme presets
Six built-in presets, each a complete look:
| Preset | Character |
|---|---|
| Daybreak | The Mauvely default — violet on a light ground |
| Nocturne | The same identity, dark |
| Slate | Indigo, cool, light |
| Forest | Teal with a serif for headings |
| Ember | Warm amber on a dark plum ground |
| Paper | Muted plum, serif throughout, barely-rounded corners |
Applying a preset sets colours, typefaces, corner rounding and light/dark together. Change anything afterwards and the preset marks itself custom — nothing is locked.
Your presets
Below the built-in row, Save current… writes your design to a .cetheme file in your Themes
folder, where it shows up as a preset you can apply to any course.
Right-click one of your presets for Export / share… (a portable file to send a colleague) or Delete preset. Import… brings someone else’s in. A background image travels inside the file, so a shared preset is genuinely self-contained.
Colours
Four swatches, each opening a colour picker:
| Colour | What it paints |
|---|---|
| Accent | Buttons, links, progress fills, selected states |
| Background | The page behind the content |
| Surface | Cards and blocks sitting on that background |
| Text | Body copy |
Logo
Choose an image (PNG, JPEG, WebP or SVG) and it replaces the course title in the learner’s top bar. The sidebar keeps the title as text, because that is the navigation’s identity.
Clear removes it and the title comes back.
Background image
An image shown behind the course pages, dimmed. PNG, JPEG or WebP.
Like the logo, it is embedded in the course rather than referenced, so it exports and shares with everything else.
Typography
Three pickers — Headings, Body and Code — each choosing from a curated library of eight open-licensed typefaces:
| Category | Faces |
|---|---|
| Display | Baloo 2, Fraunces |
| Sans | Inter, Work Sans |
| Serif | Source Serif 4, Lora |
| Mono | JetBrains Mono, IBM Plex Mono |
Every chosen typeface is embedded into the exported course, so a published course never depends on the learner having a font installed. That is why the library is curated: each face is licensed for redistribution, which a font picked from your own system would not necessarily be.
Shape
Corner rounding — 0 to 16 px, applied to cards and blocks in the published course. 0 is squared-off and severe; 12 is the default.
Content width — the measure lessons are laid out at:
| Setting | Width |
|---|---|
| Narrow | 620 px |
| Normal | 760 px |
| Wide | 900 px |
Individual blocks can override this with their own Block width setting — useful for a wide diagram in an otherwise narrow course. See Blocks.
Block groups — whether grouped blocks get a visible border drawn around them, or merge seamlessly.
Mode
Light or Dark, for the published course and its preview. Independent of the editor’s own theme.
Reusing a design across courses
Two routes, and the difference matters: