Start

Learn how to create exciting on-brand visual assets for Scandlearn courses and more.

Scandlearn-design-system-get-started-cockpit-1
Basics

What is the Scandlearn Design System?

We make a lot of courses. Like, a lot. If we all just did our own thing, the platform would look like five different companies fighting for screen space. The Scandlearn Design System exists to stop that happening. It is our shared playbook for how everything should look and feel, across every course, every asset, every time.

Team resource

This portal is mainly built for the Design Team, because we are the ones who break things if we wing it. Anyone involved in courseware, branding or marketing can use it too. If you touch visuals, this is where you find out what "Scandlearn quality" actually means and how to hit it without guesswork.

Essential guidelines

Everything in here has been written and approved by senior team members who have already made most of the mistakes for you.
Treat it as the source of truth. If it is written here, that is the way we do it. If it is not here, ask before inventing a sixth unofficial style.


Scandlearn-design-system-get-started-cabin-crew-1

Keep it secret. Keep it safe.

This portal is for Scandlearn eyes only. Please do not share pages or content outside internal channels like Slack or ClickUp. No screenshots on social media, no copy pasting into random chats. If someone needs access, ask the Project Manger.

Scandlearn-design-system-home-warehouse
Basics

What the Design System provides

Article tutorials

Whether you are roughing out a storyboard or designing a finished page, this is your reference point. Content is organised by department, so you can browse like a normal human or use search when you are in a hurry and pretending you are not.

Dynamic images

Each article sticks to one clear topic and uses visuals to make the rules obvious. You will see layouts, good and bad examples, and breakdowns that turn vague instructions into something you can actually copy and adapt.

Scandlearn-design-system-get-started-colours

Video examples

Some articles include short videos from the senior team. These are there to show you the process in action, so you do not have to decode it from three bullet points and a shrug.

Temp-placement-video-80

Caption text for video.

Basics

Our workflow

The process we follow so projects finish on time and nobody has to enter the Panic Olympics.
  • Scandlearn-design-system-get-started-timeline-1

    1. Script

    Every course starts with the Training Team. They outline, argue with themselves a bit, then hand us a finished script when they are happy enough to let us near it.

  • Scandlearn-design-system-get-started-timeline-2

    2. Design preparation

    The Design Team reads the script, slices it into sections and sets internal milestones. From that we build a timeline so everyone knows what they are doing and when panic should officially begin.

  • Scandlearn-design-system-get-started-timeline-3

    3. Pre-production

    We storyboard the pages and talk through ideas. This is where we catch oddities, ask "what does this actually mean" and stop problems before they turn into full rebuilds.

  • Scandlearn-design-system-get-started-timeline-4

    4. Artwork production

    Once the storyboard is approved, we create final illustrations, 3D models and scenes. Regular check ins make sure the style does not drift into "personal experiment" territory.

  • Scandlearn-design-system-get-started-timeline-5

    5. Animation

    Approved artwork and voice overs go to the Animation Team, who turn all the ingredients into actual course pages.

  • Scandlearn-design-system-get-started-timeline-6

    6. Revisions and publishing

    Finished pages are reviewed, tweaked and checked again. Once everyone is satisfied, the course goes live on the platform and our customers assume it all happened effortlessly.

Basics

How to use the Design System

Read it, use it, and save yourself from asking “What’s the style again?” for the fiftieth time.

If you are experienced and already know your way around Scandlearn, feel free to roam. Use the portal as a toolbox and a sanity check.

If you are new, start with Core Elements under Basics, then move into the sections for your discipline, like illustration or animation. Even once you have read everything, keep coming back. Nobody remembers every rule perfectly, and this is much faster than hunting through old Slack threads.

Scandlearn-design-system-get-started-julia-kitchen

Updates and additions

The senior designers will keep adding and refining articles as our tools and workflows evolve.

Watch Slack for update announcements so you do not miss new guides that could save you time, stress or fifty back and forth comments on a Krock link.

Scandlearn-design-system-get-started-hangar

Your feedback

If something is unclear, out of date or just confusing, contact the author listed on the article.

Questions and feedback help us fix blind spots and keep this system useful, instead of letting it turn into a dusty archive that everyone ignores.

Scandlearn-design-system-get-started-cabin-fire