Trainyard Design System

Brand

Playful but never silly: a yellow brand, flat line-art spot illustrations on bright fields, and a warm first-person voice. Inside the app the brand shows up in small doses (the yellow action, card caps, empty-state art, celebration moments) so lessons stay the star.

Illustration Style

Spot illustrations are the brand's loudest element: one friendly object in flat line-art on a solid yellow, light-blue, teal or red-orange field. They head learning cards, fill empty states and anchor celebration moments.

Recreations built from the tokens: one object, 2px ink line, halftone on one surface, an offset white fill, sparkles and open circles.

Rules

From the product

Voice & Tone

Friendly, plain and a little goofy in the right places. The product explains itself like a coworker would; release notes lean on puns and emoji bullets; the UI keeps jokes out of buttons and saves exclamation points for real wins.

Microcopy

Do / Don't

Celebration ladder

At a Glance

What makes the product feel like itself, in six rules.

Colors

Named constants from the product's compiled bundle, ranked by how often they appear in the stylesheet, plus values sampled from product screenshots. The palette barely moved across the product's life; the midnight neutral scale was added later for type.

Customer theming

Accounts can set a Branding Color and a Custom Link Color. The branding color replaces yellow on the Assign button, card caps, the lesson progress rule and Next Section; the link color replaces link blue. Demo tenants showed teal #45A09F and red #EF5A4A. Build every yellow surface against a --brand variable so this works.

Typography

One humanist sans for the whole interface, a warm slab-ish serif reserved for reading, and a compact type scale defined as utility classes.

Scale

Lesson font modes (per account)

Base is Bootstrap-era: body{font-size:14px;line-height:1.428571429;color:#4A4A4A}, headings weight 400 at line-height 1.1. Weight bold is the most common declaration, then 600. Page titles are big and light (36px/400); emphasis inside components is bold, not bigger.

Spacing & Layout

An 8px grid (8/16/24/32) sitting on Bootstrap 3 leftovers (10/15/20/30). Card padding modifiers are 16, 24 and 32px.

Radius & Shadows

Small radii everywhere: 3px is the default, 4px for inputs and modals, 2px for the newer flat buttons. Shadows are the signature: a hairline ring plus a soft drop, layered, never heavy.

Radius

Shadows

Motion & Focus

Quick and functional: 200ms ease is the house transition. Modals pop from 80% scale, progress bars grow from the left on a springy curve, and builder controls slide in on hover after a 100ms delay.

Focus

Inputs take a yellow border plus 0 0 8px rgba(249,207,54,.6) glow. Buttons show a 2px yellow outline on keyboard focus. Rail section titles drop the outline; their active state carries focus.

Live

Icons

An inline SVG icon component with named glyphs, joined later by Feather-style line icons. 2px strokes with round caps; gray #A3A2A1 by default, #292933 when strong. Sizes: 14px inline, 20px nav, 21px builder controls.

Buttons

Two families shipped side by side: Button (white, 3px radius, 16px text) and the flatter NewButton (2px radius, 36px line-height) that carries the yellow brand variant. Yellow is the one primary action per screen; blue is the secondary-primary inside admin flows.

Variants

Inputs & Selects

Form controls are Bootstrap-derived: a cool gray fill #EFF1F2, 1px #CCC border, 4px radius and a faint inset. Focus turns the border yellow with a soft yellow glow. Choice rows highlight #F2F4F7 on hover.

Pills, Badges & Chips

Pills are fully round and outlined in blue until selected. Badges are tiny uppercase slabs with 1px tracking. Counters are 18px circles: yellow in the nav, dark for selected counts, gray for totals. Feedback chips are square-cornered and fill yellow when chosen.

Pills

Badges, labels, counters

Assignment tags

Status dots and rule variables

Feedback chips (toggle)

Cards

White, 3px, hairline shadow. The signature is the top cap: an 8px brand-color strip across assignment and library cards (4px #F4CB49 on older library topics). Paths use a stacked shadow that reads as a pile of lessons. Learner cards are 332px tall with an illustration header.

Tables

Index tables have a dark header band (#464656 with a #292933 border and #EBEAEA text) that also hosts white filter pills and a white search field. Rows are white with dotted #EBEAEA separators; a selected row turns yellow tint #FEF5D4. Reports use a lighter DataTable.

Tabs, Pagination, Menus

Tabs are 16px gray with a bold dark label and 2px #292933 underline when selected, on a 1px #DEDDDD inset rule. Menus come light (white, 2px items that darken on hover) or dark (#393938) and slide in over 200ms. Tooltips are near-black at 90% with a 3px radius.

Notifications

Full-width banners under the nav: 60px min-height, white text on flat status fills, an icon, the message and a translucent dismiss button. Saving shows a short dark toast.

Modals

Modals pop in from 80% scale over 200ms on a rgba(67,67,67,.5) backdrop. Standard modals are 480px (590px wide variant) with 4px radius and a three-layer shadow. Full-screen flows use a 5px radius, a gray header band and a 32px title.

Standard + confirm

Full-screen (takeover)

High-five celebration

Shown after submitting an assessment, a coaching plan or a practice attempt. Line-art hands with yellow sparkles, a bold exclamation title, one status line, a question and two stacked full-width actions. Replay the pop.

Assign modal

Two panes on #F7F7F7: pick people or groups on the left; the right rail tracks the steps. The active step has a 6px yellow strip; selections become blue chips.

Empty States

Centered blank slates up to 540px wide, optionally inside a 4px dashed #DEDDDD frame, with a spot illustration, a friendly one-liner in gray and a single yellow action. Simple variants are one gray 18px line with an icon.

App Shell & Navigation

A white 54px bar with a soft shadow: customer logo, gray text links (the active one dark and semibold), then a yellow count bubble for grading, a gear menu and the solid yellow Assign button. Pages open with a large light title on #F7F7F7.

Nav history: early builds had Home / Browse / Create a Lesson; mid-life Lessons · People · Gradebook · Learning Library; the mature product settled on Content · Events · People · Gradebook · Insights · Learn. Learners see a pared-down bar with only Learn and a gear.

Lesson Builder

The authoring surface: a charcoal section rail on the left, a paper-white canvas on the right. Hover between elements to reveal a blue insertion line with an Add Element tab; it opens a dark menu of content types (Text, Flipcard, Reveal, Image, Embed, Video, Document, Question, Practice).

Lesson Viewer

Reading is the product. A white header shows the lesson name, the section title and a Section 1 / 11 table-of-contents dropdown; a 3px brand-color rule fills as you advance. Content sits in a ~680px column at 18/32, and a sticky footer holds Next Section (Finish on the last page).

Left: Sans mode. Right header in Serif mode. The progress rule and Next Section take the account branding color when set (a pale teal in one demo tenant).

Practice Recorder

Rehearsal made safe. A prompt card with numbered yellow criteria sits above a 16:9 capture frame. While capturing, a white RECORDING label with a red dot pins top-left and a red STOP button sits bottom-center. A 3-2-1 countdown in a black ring precedes every take.

Response types: webcam video, screen recording (with a picker for what to share), audio with waveform playback, a simulated email reply, and a chat conversation with a scripted customer. Ungraded attempts are labelled Let's Practice! and can be repeated; graded ones are Evaluation.

Grading Station & Feedback

Graders work down a queue. A charcoal filter band sits over a yellow-tint table of question, answer, correct/incorrect and per-criterion 5-star ratings. Coaching feedback swaps rubrics for friendly chip pickers: What went really well? and What could be improved?

Gradebook

A status grid: learners down a sticky 200px bold column, lessons across with two-line clamped bold headers, and pastel status fills in every cell. A charcoal #72736E filter rail on the left picks groups and courses with white checkboxes.

Insights

Reports are calm and sparse: filter selects, a tab strip, a stat tile with an icon and a big bold number, and a single #5C62A4 line over a lavender fill. Status bars reuse the semantic trio: red overdue, gray incomplete, green completed.

Certifications, Badges & Reactions

The only place the product hands out badges. Shield shapes with a thick ink outline and one line icon, filled from the illustration palette. Everyday appreciation is an emoji reaction.

Smart Groups & Automation

Rule builders are plain: gray rule panels with field / operator / value, OR links inside a panel, AND separators between panels, and a blue Create action. Automations read as sentences with blue variable chips and a status dot.

Events

Live training sits next to lessons. Event cards are compact white cards: a bold date line, a small timezone, key/value rows, a green attending pill with an underlined RSVP link, and a default Add To Calendar button.

Settings & Customization

Settings use a dark left block of uppercase tabs (active item darker with a white notch) beside a white form column. Customization lets each account set its branding color, link color, lesson font mode and logo.

Tailwind Mapping

The paired JSON export includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating Trainyard.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.app.theme.extend,
  },
};

// Also reuse designSystem.tailwind.app.componentRecipes for common surfaces, e.g.
// <button className={recipes.buttonPrimary.className}>Assign</button>

CSS custom properties

:root {
  --ty-brand-yellow: #F9CF36;
  --ty-brand-yellow-hover: #F5C207;
  --ty-brand-yellow-pressed: #F6BF35;
  --ty-brand-yellow-border: #F8C91D;
  --ty-brand-yellow-light: #F9E2A7;
  --ty-brand-yellow-tint: #FEF5D4;
  --ty-brand-yellow-cap: #F4CB49;
  --ty-brand-yellow-wordmark: #FBCF02;
  --ty-action-blue: #4A90E2;
  --ty-action-blue-hover: #609DE6;
  --ty-action-blue-border: #2887E5;
  --ty-action-blue-tint: rgba(40,135,229,0.10);
  --ty-action-link: #3E719B;
  --ty-action-link-legacy: #4277A4;
  --ty-action-link-hover: #33638C;
  --ty-action-indigo: #5C62A4;
  --ty-action-indigo-fill: #EFEFF7;
  --ty-text-heading: #292933;
  --ty-text-strong: #2D2D2D;
  --ty-text-body: #4A4A4A;
  --ty-text-secondary: #696970;
  --ty-text-secondary-warm: #70706D;
  --ty-text-nav: #949499;
  --ty-text-muted: #A3A2A1;
  --ty-text-disabled: #BEBEC1;
  --ty-text-inverse: #FFFFFF;
  --ty-text-on-rail: #ACACAC;
  --ty-surface-page: #F7F7F7;
  --ty-surface-card: #FFFFFF;
  --ty-surface-input: #EFF1F2;
  --ty-surface-hover: #F2F4F7;
  --ty-surface-subtle: #F8F9FA;
  --ty-surface-gray: #EBEAEA;
  --ty-surface-button-default: #F9F9F9;
  --ty-surface-overlay: rgba(67,67,67,0.5);
  --ty-surface-tooltip: rgba(35,35,35,0.9);
  --ty-border-default: #DEDDDD;
  --ty-border-divider: #D9DCDE;
  --ty-border-light: #EBEAEA;
  --ty-border-hairline: #E9E9EA;
  --ty-border-input: #CCCCCC;
  --ty-border-table: #DDDDDD;
  --ty-border-grid: #C4C6C8;
  --ty-chrome-rail: #535450;
  --ty-chrome-rail-header: #737470;
  --ty-chrome-rail-button: #868684;
  --ty-chrome-rail-active: #393938;
  --ty-chrome-rail-hover: #5F605C;
  --ty-chrome-rail-divider: #4F504C;
  --ty-chrome-menu-dark: #3A3A3A;
  --ty-chrome-band: #72736E;
  --ty-chrome-table-header: #464656;
  --ty-chrome-table-header-border: #292933;
  --ty-chrome-table-header-text: #EBEAEA;
  --ty-chrome-settings-nav: #5E5F5B;
  --ty-status-complete: #8AD476;
  --ty-status-success: #4AA81F;
  --ty-status-success-dark: #3D6D27;
  --ty-status-success-light: #EEF5EB;
  --ty-status-success-banner: #72BC51;
  --ty-status-error: #DA3418;
  --ty-status-error-dark: #863C32;
  --ty-status-danger: #E36659;
  --ty-status-danger-dark: #CE463C;
  --ty-status-caution: #E2A73D;
  --ty-status-warning-banner: #F9D778;
  --ty-status-notice-banner: #88BFE5;
  --ty-status-recording: #F04E36;
}

Screenshot Reference

Product screenshots collected for this extraction, grouped by area. The full set lives in ./screenshots/ by category (builder, learner, practice, coaching, celebration, analytics, paths, admin, integrations, illustration, knowledge, mobile).