Studio Design

Themes and Palettes

5 min readUpdated

Start every lesson with a coordinated look. Pick a template or a color palette, let new widgets and scenes style themselves, and switch themes later without losing your own edits.

A theme gives a lesson a coordinated visual identity — background colors, widget colors, fonts, and corner rounding that all work together. Instead of styling every widget by hand, you pick a look once and the studio applies it as you build.

Themes come in two forms:

  • Palettes — a pure visual style: a scene background color, a set of role colors (surfaces, text, buttons, accents), a font pairing, a corner radius, and a strip of recommended picker swatches. Pick a palette when you want to start from an empty canvas.
  • Templates — a complete starter lesson plus a matching palette. Pick a template when you want ready-made content to edit, like a multiple-choice quiz, vocabulary flashcards, or a sorting activity, already styled to match. Every template opens on a title card, grades its questions, and ends on a Closing Scene, so it is ready to assign before you change a word. Templates with pictures and sounds, like Articulation /r/, copy them into your media library when you pick them.

Every palette ships with text and background pairings that pass accessibility contrast checks, so a themed lesson stays readable for learners out of the box.

Pick a look when you create a lesson

You do not have to. The New lesson dialog starts every blank lesson on Classic, the standard Berdee look, so Start from scratch takes you straight to a canvas with a coordinated palette already on it.

If you do want to choose, both options are right there:

  • Start from a template — cards showing a real miniature of each template's opening scene. Click one and your lesson is created with its starter scenes and its matching theme.
  • {Palette name} palette — change — the quiet link under the blank card. It opens the grid of palettes; pick one and click Use this palette to come back with it applied.

Full walkthrough: Creating a Lesson.

Whatever you end up with is remembered with the lesson. Close the tab, come back next week, open the lesson on another device — you will not be asked again, and your palette is still in effect. Changed your mind? Switch palettes any time from ⋯ → Settings; see Switching themes later below.

Lessons that arrive without a look

Not every lesson comes from that dialog. A lesson imported from a share code, or an empty draft you started before this step existed, has never been asked the question. The first time you open one of those in the studio, the same chooser appears full-screen so you can answer it then. Lessons that already have content never see it — including a lesson the Assistant built for you, which arrives already styled in one of these palettes for its grade band; switch it later as described below.

The palettes

  • Classic — the standard Berdee look: white scenes, Manrope and Fraunces type, the familiar widget colors.
  • Ocean, Meadow, Sunshine, Berry — friendly color families for themed units; pick the one that matches the mood of your lesson.
  • Slate — a high-contrast look with stronger borders, good for projection or low-vision learners.
  • Midnight — dark scenes with light text, useful for space units, calm-down activities, or reducing glare.
  • Lexend Clear — a dyslexia-friendly palette: the Lexend typeface in both font slots, a cream background, and generous corner rounding.
  • Lilac — Berdee's own colors: a soft lavender background, white cards, lilac buttons with white labels, and Fraunces headings. Every template uses it.

How a palette guides your build

A palette is not a one-time paint job — it keeps helping as the lesson grows:

  • Scene backgrounds. Your opening scene gets the palette's background color, and every new scene you add starts with it too, so the lesson stays consistent without copying colors around.
  • New widgets. When you drop a widget onto a scene that has nothing to copy styling from, the palette fills in the colors, font, and corner radius. Drop a button onto a fresh Ocean scene and it lands in Ocean's button color with readable label text — no restyling needed. Widgets already on the scene still win; see Smart styling when you drop a widget.
  • Recommended swatches. Color pickers in the properties panel surface the palette's swatch strip first, so when you do choose colors by hand, the ones that match your theme are one click away.
  • Fonts. The palette sets the lesson's sans-serif and serif defaults — the same theme fonts described in Typography and Fonts. Change them any time in the lesson settings.

The palette is always a starting point, never a cage. Any value you set yourself — a widget color, a scene background, a font — stays exactly as you set it.

Switching themes later

You can change your mind after building. Open the ⋯ menu in the top bar (or click the lesson's name), choose Settings, and find the Theme section to pick a different palette. The switch happens the moment you click a palette, so Cancel closes the window without undoing it; use Undo to go back.

When you switch:

  • Widgets and scenes still wearing the old theme's values (or factory defaults) restyle to the new theme.
  • Anything you explicitly styled yourself is preserved untouched. If you hand-picked a specific green for one button, that button keeps its green after the switch.
  • Text and buttons that size themselves refit to the new fonts. A palette with a wider font would otherwise leave a label like "Let's dive in" running past the edge of its button. Boxes set to Auto width grow or shrink to fit the new font, so what you see in the studio matches what students see. Boxes with a fixed width keep their width and adjust their height instead. The same happens when you change the lesson's fonts in Settings → Typography.
  • The switch is a normal edit. One undo brings the previous look back, colors, fonts, and box sizes together, even if you clicked Save changes after switching. Moving to another scene is a step of its own in the undo list, so if you've opened other scenes since switching, press Undo once for each before the palette changes back.

_Step by step: Give a finished lesson a new look with a theme._

Improvements we make to a palette never reach into your existing lessons: the look you picked is copied into the lesson at selection time, so a published lesson renders the same forever unless you change it.

Learn by doing

Was this article helpful?