Primary
Indigo
Launch Learning is the educational arm of Launch Industries. Every course, workbook, lesson, and certificate ships under this banner — modern textbook energy, made for adult business owners. This is the design system that makes it all sound and look like one thing.
Each color has a structural job, not a mood. Indigo carries the book, yellow is the highlighter, teal is the wave, pink is the punctuation. Don't shuffle them.
WCAG AA requires 4.5:1 contrast for body text and 3:1 for large text (>18px bold). The most common violation is muted text on a dark background — gray-on-gray or low-opacity text on black/indigo — which looks subtle in design tools but fails at real screen brightness.
#E5E7EB / Tailwind gray-200 or lighter) for readable body text on dark backgrounds (black, indigo, gray-900).bg-white/5, bg-white/10), treat the card as dark — use white or gray-200 for text, not gray-500.text-gray-500 for timing labels, eyebrow text, or secondary info on dark cards — they disappear.bg-white/5 or bg-white/8 to lighten a dark card enough to support gray text. It doesn't.text-gray-300 minimum on dark backgrounds.FAIL — gray-500 on gray-900
Agency Label · WA Secretary of State
Certificate of Formation
⏱ 5–7 business days
PASS — gray-300 on gray-900
Agency Label · WA Secretary of State
Certificate of Formation
⏱ 5–7 business days
PP Formula carries the whole brand — eight cuts of one family. Where Launch Industries (LIDS) reaches for brush script and LMC reaches for marker, Launch Learning stays inside PP Formula and earns variety through weight and width, not new fonts.
PP Formula · 900
Teach the next
generation.
PP Formula · 800
PP Formula · 700
PP Formula · 700
PP Formula · 500
A lede is the second voice in the room. It sets the tone for the body that follows — confident, plain-spoken, generous with the reader's time.
PP Formula · 300
A handbook is the company's user manual. It tells people how things work here: what's expected, what's optional, who decides what. Good ones are short, written in plain English, and answer the questions employees actually have on day one.
PP Formula Narrow · 600
Chapter 04 · Onboarding
System monospace
CHAPTER 04 / 08 · PAGE 47 · 18 MIN
The smallest reusable units. Buttons, badges, inputs, progress, lesson rows, course cards. Composed the same way every time so a learner moving between two courses doesn't have to re-learn the interface.
Indigo is the default primary. Use paper-on-paper for secondary surfaces and pink only on urgent or attention-pulling moments. Ghost in long forms where chrome would compete with content.
Quiet by default. Indigo means brand context, yellow means highlight, teal means info, pink means alert. Always set in Narrow Semibold, uppercase, tracked wide.
Soft borders, generous padding, indigo focus halo. Labels are eyebrows above the field — uppercase, tracked.
Pill-rounded segmented control for view switches. Progress is two-stop indigo gradient — the simplest possible "going further into the book" cue.
A vertical color tab on the left edge — pink for new, indigo for brand-context, yellow for highlight, teal for info. The tab extends 12px past the bottom edge for a "sticking out" feel.
Build a handbook, job descriptions, and onboarding plan that actually get read. For owners hiring their first five people.
The repeatable systems that keep a small business moving: weekly cadence, monthly reviews, quarterly planning.
What every new hire's first three months should look like — and what to do when they don't go as planned.
The boring stuff that protects you when something goes wrong. Insurance, contracts, the conversations people avoid.
Numbered, finished lessons fill their dots with indigo. Duration sits in mono on the right — folio energy.
Horizontal numbered nodes for in-lesson progress. Completed steps fill with indigo and check; current step gets the indigo halo; upcoming steps stay outlined. The connector line between nodes fills to indigo as the learner advances.
The single most-needed module on the course dashboard. Indigo bookmark stripe on the left, lesson thumbnail, lesson title, and a primary CTA. The first thing a returning learner sees.
Onboarding day one: agenda, paperwork, who shows up
Bottom-of-lesson footer with previous and next lesson titles. Lets learners move through the course one step at a time without going back to the chapter outline. Disabled state for the first/last lesson.
Circular completion meters for chapter cards and course list rows. Same indigo language as the linear progress bar, but compact enough to sit beside a title. Pairs nicely with the lesson-count folio.
A two-page surface where indigo carries the chapter intro on the left and paper carries the content on the right. This is the most "Launch Learning" thing you can compose — use it for hero sections, course landings, lesson intros.
By the end of this chapter, you'll have a draft handbook that covers the things people actually ask in week one. We'll work from a template, but you'll fill it with your business's real answers — nothing generic.
These are the brand's load-bearing decorative elements. Use them everywhere, but use them on purpose — never as decoration for its own sake.
A vertical color stripe pinned to the left edge of cards and indigo blocks. 4–8px wide, extends 8–12px past the bottom edge. Default indigo; pink for urgent; yellow for highlight.
Sampled from the wordmark — the dot on the "i" of Learning. Use as the lead-in mark on every eyebrow, as a separator between metadata, and as inline punctuation in display copy.
A yellow band drawn through the middle 35% of a text run — like a marker pulled across the words. Wrap one to three words per surface, never a whole sentence.
A 56px-by-3px indigo bar that lives directly under eyebrows and at the top of chapter cards. The brand's quietest motif.
Page-number and chapter-progress chrome, always set in mono caps with wide letter-spacing. Sits in corners — bottom-right of spreads, top-left of cards.
The LL mark itself, used at small sizes (16–32px) wherever a single-character brand glyph is needed — favicons, OG image corners, signing chips on certificates. The color icon reads on both light and dark surfaces without modification.
A book with two interlocking L's inside — for Launch and Learning — and a pink dot on the wordmark's "i". The icon reads as a course you can open. The wordmark sits in PP Formula, the typeface shared across the whole Launch family.
On paper · primary
On black · text white
On yellow · sparingly
Icon only · tight spaces
logo-light.png on black — the icon stays color, the wordmark knocks to white.icon-color.png when there's no room for the wordmark.Launch Learning imagery is either an editorial portrait or a two-color spot illustration — never both at once, never neither. We don't use stock textbook clipart or graduation-cap iconography.
Plain-spoken, pedagogical, action-oriented. We teach business owners, not students — they came here to do something, not to learn for its own sake. Every sentence respects that.
"Most handbooks die in the new-hire packet. This one's going to be read on day three, used on day thirty, and still make sense on day three hundred."
— The Hiring Handbook · course landing"You'll learn how to write a job description in plain English. By the end of the lesson, you'll have one drafted for the role you're hiring next."
— Lesson 02 · Writing job descriptions"List the five questions your team has asked you in the last month. Three of them belong in the handbook. One is a process problem. One is a culture conversation."
— Workbook · Chapter 02 exercise"Recap of Chapter 03: handbooks live and die on the first ten pages. Write the answers your team actually asks. Test on one new hire. Rewrite where they slow down."
— Chapter 03 · Recap| We say | We don't say |
|---|---|
| Course, chapter, lesson, module | Content, drip, masterclass |
| Workbook, exercise, takeaway | Resource pack, handout, downloadable |
| By the end of this chapter… | In this video we'll learn… |
| Owner, operator, learner | Student, user, customer |
| Step 1 · Step 2 · Step 3 (with middle-dots) | Step 1: / Step 2: / Step 3: |
| Try this. Do this. Read this. | Pro tip: / Heads up: / Quick tip: |
The numbers behind the layouts. A 4pt grid, rounded radii (more bookish than poster-y), and two shadow modes — soft + the page-stack.
--space-14 px--space-28 px--space-312 px--space-416 px--space-524 px--space-632 px--space-748 px--space-864 px--space-996 pxLL leans rounded — like a perfect-bound paperback. We don't use hard squared corners (those belong to LMC's poster aesthetic).
6pxXS
10pxSM
14pxMD
20pxLG
28pxXL
999pxPILL
Three soft modern shadows for product surfaces, one indigo-tinted halo for primary CTAs, and the page-stack — the brand's only hard-edge shadow, used to fake a stack of pages behind the hero card.
--shadow-1Hairline--shadow-2Card--shadow-3Lifted--shadow-indigoCTA halo--shadow-pagesPage stack