We’ve implemented full brands for our upcoming courses

It’s been a very busy couple of months here at Piccalilli with two major updates being worked on.

We’ve finally launched the first of those updates today: fully branded marketing pages for our upcoming courses — Mindful Design and JavaScript for Everyone. We’ve also refreshed of our existing course, Complete CSS in the process.

Landing page for the Mindful Design course with a headline reading ‘Learn to design for real humans.’ Subheading outlines a focus on empathy, psychology, and accountability in design. The page features inclusive black-and-white cartoon illustrations of diverse people and uses a soft pink accent background

Mindful Design has a bright, friendly look and feel, featuring corner radii and block shadows.

Hero section of the JavaScript for Everyone course landing page featuring the headline ‘Take your skillset way beyond syntax expertise’ in a bold display font. Below it is a subheading describing the importance of overall developer skillset. The page has a red and cream retro-styled visual background resembling circuit lines, with dark mode UI elements

JavaScript for Everyone features a retro-futuristic look and feel with seamless textures. It also features a “dim” mode, rather than a fully dark mode.

Hero section of the Complete CSS course landing page with the headline ‘Take your CSS skills beyond the next level’ in large bold type, followed by a subheading about achieving new levels of development with Andy Bell’s course. The design uses a high-contrast black, white, and yellow theme with thick horizontal lines for visual emphasis.

Complete CSS has had a nice refresh to align with our new branded marketing pages for the upcoming courses.

As you can see, Mindful Design and JavaScript for Everyone are wildly different to the general look and feel of our site, but because we built the entire thing with a theme system, implementing a brand like this is a case of defining some custom properties.

Code languagecss

:root {
  /* === Colour === */
  --color-dark: #000000;
  --color-dark-glare: #333333;
  --color-light: #fff;
  --color-primary: #fbeaf3;
  --color-primary-bright: #ee65ae;
  --color-primary-glare: #f7f2f5;
  --color-primary-shade: #f4cae1;

  /* === Defaults === */
  --code-color: currentColor;
  --color-selection-text: var(--color-dark);
  --color-selection-bg: var(--color-primary-bright);

  --font-accent: revert-layer;
  --font-base: 'Satoshi', system-ui, sans-serif;
  --font-display: 'ABC Gravity', system-ui, sans-serif;

  --heading-font-weight: var(--font-normal);
  --heading-font-family: var(--font-display);
}

Nearly all of our CSS looks for defined custom properties and falls back to sensible defaults like this:

Code languagecss

.bookend {
  --calculated-booked-flow-space: var(--booked-flow-space, var(--space-l));
  --calculated-bookend-space: var(--bookend-space, var(--space-3xl));
  --calculated-bookend-bg: var(--bookend-bg, var(--color-light-glare));
  --calculated-bookend-color: var(--bookend-color, var(--color-dark));

  /* Heading */
  --calculated-bookend-heading-font-size: var(--bookend-heading-font-size, var(--size-step-6));
  --calculated-bookend-heading-leading: var(--bookend-heading-leading, var(--leading-flat));
  --calculated-bookend-heading-measure: var(--bookend-heading-measure, var(--measure-s));

  /* Flow CTA */
  --calculated-bookend-flow-cta-bg: var(--bookend-flow-cta-bg, var(--color-primary));
  --calculated-bookend-flow-cta-color: var(--bookend-flow-cta-color, var(--color-dark));
  --calculated-bookend-flow-cta-hover-bg: var(--bookend-flow-cta-hover-bg, var(--color-dark));
  --calculated-bookend-flow-cta-hover-color: var(--bookend-flow-cta-hover-color, var(--color-light));

  /* Roundel */
  --calculated-roundel-text-fill: var(--roundel-text-fill, var(--color-dark));
  --calculated-roundel-bg-fill: var(--roundel-bg-fill, var(--color-primary));
  --calculated-roundel-inner-text-fill: var(--roundel-inner-text-fill, var(--color-dark));

  --flow-space: var(--calculated-booked-flow-space);
}

What this all means is that every author who publishes a course gets a completely bespoke brand from us and to apply that, we set some custom properties, add some assets and job done.

A theme system really pays off when you want to give authors everything to make their course their own, rather than a generic system-based design. That aligns much better with the fact that course authors get full flexibility with how their content is delivered to you, too.

Check out all of our courses

Wrappingpermalink

Mindful Design and JavaScript for Everyone launch this year, so make sure you sign up for updates. Complete CSS is available now!

If you’re thinking about producing a course, why not get in touch? We provide really good infrastructure, editorial support and that all-important marketing strategy. Our royalty rates are extremely generous, compared to the rest of the market too because it’s all about fairness, rather than squeezing as much profit as possible here.

Enjoyed this article? You can support us by leaving a tip via Open Collective?

Wrappingpermalink

Newsletter