Overview/Design system
Back

Design system

The Resource Hub brand carried into the product and themeable per tenant. Every screen in this site uses these tokens from assets/lms.css. The same guide is published as the Claude Design system artifact Resource Hub LMS UI Guide.

Less, with more air

Information overload is the first thing to design out.

  1. Show the summary before the detail, and put anything not needed right now behind a drawer, a tab or a link.
  2. Cap a list at what fits without scrolling: three to five items, then a link to the rest.
  3. Give each card one purpose and at most three facts on its meta line.
  4. Prefer a sentence of plain words to a row of small labels.
  5. Use 24px between things and 32px between sections; when a screen feels busy, add space before adding borders.
  6. Every AI action states its token cost once before it runs, returns a diff to accept or reject, and never publishes.

Colour

Navy is ink chrome only. Blue is the one accent, on text and borders and never as a wash. Semantic colours always come with a word or an icon. The brand gradient appears once per screen at most.

navy#0b1640Sidebar, builder bar, player bar

blue#1560f5Primary buttons, active item, links

blue-soft#e8efffSelected row, current step

on-blue#ffffffText and icons on blue

canvas#f5f7faPage background

surface#ffffffCards, panels, tables

surface-2#f8fafcTable headers, hovered rows

line#e3e8efBorders and dividers

line-strong#c9d2deInput and secondary button edges

ink#16202cHeadings and figures

body#2b3645Running text

muted#5c6b7dHelp text and meta

green#178a55Approved, passed, published

amber#b25d09Needs review, expiring

red#d33b35Failed, blocked, lapsed

purple#6a4ee0AI drafted, token costs

teal#0f8f9aSlide sessions and imports

brand gradientblue to #12c3f0Tenant mark or progress bar only

Type

Outfit for headings and figures, Geist for everything else, Geist Mono for language squares, token figures, timers and diffs. One display per screen, running text under 70 characters a line, figures in tabular numerals.

display, Outfit 600, 32/38Dangerous Goods: Segregation
h1, Outfit 600, 26/32Course health
h2, Outfit 600, 20/26Needs a person
h3, Outfit 600, 16/22What segregation means
figure, Outfit 600, 30/344,870
body, Geist 400, 15/24Keep at least three metres of clear deck between incompatible classes.
ui, Geist 400, 14/22Score 80% or more to continue
small, Geist 400, 13/20Updated 12 seconds ago
label, Geist 500, 13/18Pass mark
mono, Geist Mono 400, 12.5/18EN HI PA TA TL 120 tk 17:42

Spacing

Seven steps. Use gap on flex and grid, not margins.

space-14px, icon to word
space-28px, between buttons
space-312px, inside inputs
space-416px, between rows in a list
space-524px, card padding and the default gap
space-632px, between sections
space-748px, page gutters on wide screens

Radius

Controls are square. Borders separate things; the only shadows are on board cards and open drawers.

0
radius-0: buttons, segmented controls, the studio path, tags
4
radius-1: inputs and selects
10
radius-2: cards and panels, 14 on board cards
16
radius-3: the video stage, the certificate, drawers

Status

An 8px dot and a fixed word, never a pill. Colour never carries the meaning alone.

DraftAI draftNeeds SME reviewApprovedPublished
Not startedIn progressCompletePassedFailedExpired
Language tracks ENHIPATATL

Green up to date, amber out of date, purple draft waiting for review, grey not started.

Cost before it runs

Every AI action states its token cost once, then returns a diff with Accept and Reject.

About 25 tokens. 4,870 left this month.
scene 6: The gap rule
- say: Keep at least three metres between the two classes.
+ say: Keep at least three metres of clear deck between the two classes, measured between pallets.

The studio path

Every studio screen shows the same five steps, so an author always knows where content goes next. The wording is fixed.

Controls

Buttons say exactly what happens and keep their name through the flow. One primary per view. The AI variant marks anything that spends tokens. Switches are the one rounded control.

Per exam. The course score can weight several exams.
What happens when the monthly tokens run out.