Brief 11, Salesforce Lightning Design System
The screen. SA-04417, the gearbox oil-change program Northwind Field runs for Ridgeline Wind Cooperative. One record, in SLDS's record shape: highlights panel, path, tabbed detail, related lists in the right rail.
Direction
Archetype. Shell, in the SLDS record-page shape. Under 1024px the rail's three lists become the Related tab, so exactly one of the two is ever on screen.
Data stance. Prose-first. The activity timeline is the record; the fields are what the sentences refer to.
Density. SLDS default (Comfy). 13px body, the 4px spacing scale, 32px controls.
The bold thing. The path is a state machine with four states, not three. Each stage carries its guidance for success and its exit condition. One stage is held by something outside the path — an approval that expires before a board sits — and it carries the warning colour and names the date and the record holding it up. The stage behind it is grey and says which stage it waits on, so the warning colour means one problem rather than two.
Generators
slds_tokens.py --theme hooks
slds_tokens.py --theme primitive --grep duration --format css
slds_tokens.py --contrasttokens.css is the first command's output and nobody edits it. The hooks set carries no duration, which is why the second command exists: motion-tokens.css holds the six SLDS duration primitives and nothing else.
Pointer states on the path
All six stages answer a pointer, because all six are real targets: clicking one changes the guidance panel, and a completed one moves the record back to it. The refusal lives one level down, on the panel's action button, which carries a real disabled treatment and its reasons. A held stage that read as unhoverable would suppress the affordance on the two stages an account manager most wants to open.
Each state hovers and presses two steps down its own ramp, so a pointer never paints a stage the colour of a state it is not in:
| State | Rest | Hover | Press |
|---|---|---|---|
| Complete | brand-base-95 | brand-base-90 | brand-base-80 |
| Current | brand-base-50 | brand-base-40 | brand-base-30 |
| Blocked | warning-base-90 | warning-base-80 | warning-base-70, ink to warning-base-20 |
| Waiting, not started | neutral-base-95 | neutral-base-90 | neutral-base-80 |
Two of these were self-assignments before state-probe.mjs found them: a completed stage's rest colour was the generic hover colour, and the blocked rule repainted the stage its own background to stop the generic hover reaching it. Both are the same defect — a control that looks inert to a pointer — and the completed stage is the one this page made clickable.
The second state
A record you can only partly see. Preview as in the global header switches the page between the agreement's owner and a field technician, and the technician's render is the honest one. The annual value and the margin read Not available to your role. Two of the three contacts stay hidden. A no-access message takes the place of the files list and names who can share it. Edit, Send for signature and Add on the contacts list go disabled together under one sentence naming whose they are, and the path's stage control goes disabled too — giving both its reasons where a stage is refused for two. Field-level security and sharing are the states an SLDS screen has to render, and the platform's own guidance warns against showing an action the running user cannot perform.
Measured
color-neutral-base-10oncolor-neutral-base-100, the body text: 17.76:1color-neutral-base-100oncolor-brand-base-50, the primary action: 4.63:1color-border-base-3on white, every control boundary: 3.07:1color-border-base-1on white, rules between rows only: 1.66:1color-warning-base-30oncolor-warning-base-90, a held stage: 7.66:1color-neutral-base-30oncolor-neutral-base-95, a waiting stage: 8.78:1color-neutral-base-40oncolor-neutral-base-95, its edge marker: 6.03:1color-brand-base-20oncolor-brand-base-95, a complete stage: 12.29:1
Deviations
Light only. The hooks set carries one set of values, and inside Lightning Experience the theme belongs to the org rather than to a component.
Easing. SLDS tokenizes durations and not easings, so transitions run the ease-in-out keyword over the generated duration tokens.
Type and spacing in rem. Colour, radius, shadow, font family, and duration all come from the token files as var(). Type and spacing follow SLDS's published modular and 4px scales, the values its slds-text-* and slds-p-* utilities carry, since no SLDS stylesheet ships with this page.
A larger record name. font-scale-4 (25.6px) runs larger than a Lightning Experience page header and gives the page one focal size.
<button> rather than <lightning-button>. lwc_lint.py reports 16 native-control warnings and every one of them is right about an LWC template. Off the platform no base-component runtime exists, and a custom element with no definition takes neither focus nor a keypress, so the native control is the accessible answer here.
APCA. Body text at 13px is SLDS's density and clears WCAG 2.2 AA at 17.76:1. APCA asks for 15px at weight 400 and disagrees.