Three rules decide every visual call. The audience is blue-collar trade workers and the employers who hire them — often on a phone, on a job site, sometimes lower-literacy or bilingual (EN/ES). Clarity beats cleverness.

Yellow is reserved for the single primary action / highlight on a screen — never decoration. Navy ink carries text and dark actions. Everything else is a cool neutral or a semantic accent used sparingly.

Archivo — an engineered, slightly squared grotesque with industrial character and high legibility. Archivo Expanded handles display + numbers (wage figures, metrics). Deliberately not Inter / Roboto / system. Numbers use tabular-nums so money lines up.

Color helpers: .muted (text-2) · .faint (text-3) · .pos / .neg / .warn · .tabnum for tabular figures.

A strict 4-pt spacing grid and a 6-step radius scale keep rhythm consistent. Screen gutters use --s5 (20px) via .pad; cards stack with --s3 (12px).

Five soft, cool-tinted shadows. Sized by intent, not whim: cards rest low, sheets and FABs float. The two colored shadows tie the yellow FAB and dark buttons to their fills.

Motion utilities are opt-in (add a class) and every one is disabled under prefers-reduced-motion. Three easings, short durations. Used live across the loading, refresh, sheet and create-menu screens.

A single SVG <symbol> sprite, thin geometric stroke (1.9px), 24px grid. Reference with <svg class="ic"><use href="#i-home"/></svg>. Sizes: .ic 22 · .ic-sm 18 · .ic-lg 26 · .ic-xl 30. One glyph = one meaning per mode (e.g. i-network = Network, i-users = Talent).

One .btn base, five intents, three sizes. Primary (yellow) appears once per screen. Dark is the secondary heavyweight; outline / ghost are quiet. Destructive uses the danger tint.

Initials on navy by default; yellow for the signed-in worker; squared (--org) for companies. A dashed placeholder covers the no-photo case.

Small status pills carry meaning by color. Match score uses the inverted ink/yellow pair to feel premium. Badges are for unread counts.

Three selection patterns: filter chips (multi, horizontal scroll), segmented control (one of N, compact), and underline tabs (top-level views).

52px touch targets, 1.5px borders that darken to ink on focus and to danger on error. Inputs always pair with a .label and optional .hint.

The card is the workhorse container. Highlight (yellow wash) marks the one thing that matters; dark inverts for AI insights / wallet. List rows and section headers structure long content.

Banners give persistent context; the toast confirms an action; dialogs confirm decisions; action sheets offer choices. Empty states always point to the next step.

Purpose-built compositions for IronLink's core jobs: pay transparency, hiring and the feed. These encode the product, not just the brand.

Designed for spotty job-site 4G: read & draft always work, writes queue, and every gap is explained. Skeletons hold layout; placeholders cover missing photos.

The bottom tab bar is mode-adaptive — same shape, different destinations for each of the three modes (Worker · Employer · Marketplace), all switched from the avatar → mode switcher (94). The center FAB is the one global create action (ink for employer, yellow otherwise); it expands into a context-aware create menu. Per-screen create shortcuts are labelled buttons, never a bare “+”.