← Back to board-brief case
board-brief · deliverable

Visual Mockups & Style Guide — Board Brief

Kit 26 · Board Brief · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Ledger-crimson #9f1239 on warm paper (2D) and a wood-and-plaster boardroom (3D): a meeting, not a dashboard. Crimson marks structure (slot frames, section labels, threads); it never marks a right or wrong card. Outcomes use green (approved) or amber (every other ending) together with a text label.

Type system

Instrument Serif for headlines and the opening sentence on the page · Source Sans for body copy and options · JetBrains Mono for labels, the minute stamps and the hourglass counter.

Key screens

Cards on the page

Twelve cards in a grid with name, value and a neutral note; a slot number appears on cards that are on the page. No up/down colouring of values (the earlier build coloured them, which hinted at importance).

The one-pager

Paper-white preview: opening sentence in serif, the claim as one sentence, five card slots (dashed until filled), the trade-off line. Updates live as the brief is built.

The read

Hourglass bar, a timeline with minute stamps (questions in amber), the outcome box, the score table and part-by-part feedback; "Revise this brief" returns to the builder with everything kept.

3D boardroom

Credenza with twelve standing cards, board table with the brief in front of the chair, hourglass with a minute counter, wall calendar for 1 January. During the read: a ring follows the chair's attention, thread ties supporting cards to the claim, "?" marks where minutes were lost, the outcome is stamped on the page.

Accessibility

Every card, option and action is a native button with aria-pressed; the opening sentence has a label and a live word count; the read's outcome is announced; the hourglass bar has a text equivalent ("8 of 15 minutes"). In 3D every action is also in the panel, and the scene objects are reachable through the keyboard "Look at" list.

Prefer the source? Download the raw markdown.