Components

Size: 36 px high, 16 px side padding, 8 px radius, 8 px between an icon and the label, text 14 / 20 Medium, after Apiko's design concept.

• Size and weight. The board: 44 px high, 20 px side padding, Semibold, a gray-300 border on the secondary button. Since 2026-10-07 the button follows Apiko's design concept: 36 px, 16 px padding, Medium, a lighter border with the card shadow.
• Icon button. The board has a 44 × 44 square button with a plus ("Add action"). The app has no such component: actions are added with an ordinary text button.

Sizes: label 12 / 16 Semibold gray-700; 6 px between label, field and the line under it; field 36 px high (the height of a button, after Apiko's design concept), 12 px side padding, 8 px radius, text 14 px; the Show / Hide button inside a password field is 28 px; an error is a 2 px crit-text border.

• Height. The board: 44 px. Since 2026-10-07 the field is 36 px, the height of a button, after Apiko's design concept; its border stays gray-300, so its edge doesn't fade further.
• Search. On the board the search field has a magnifier icon inside. In the app it is a plain field with a "Search" button beside it.

The lists open as the app's dropdown: a 16 px chevron 12 px in from the edge that turns when the list is open, a white panel on the popover shadow with 36 px options and a check on the chosen one, above the control when there is more room there. Keyboard: arrows, Home, End, Page Up and Page Down move; typing finds an option by its own word ("b" steps through the regions starting with B); Enter and Space choose; Escape closes.

Filter (Select)

Labeled field (LabelledSelect)

Size: 36 px high (the height of a button and a field, after Apiko's design concept), 12 px side padding, 8 px radius, text 14 px; the filter is at least 160 px wide.

• Height. The board: 44 px. Since 2026-10-07 the control is 36 px, in line with the button and the text field, after Apiko's design concept.
• The boards draw native selects. The app has opened its own list since 2026-10-07 (App changes item 1, now in the app); the boards still show the browser's arrow and leave the list to the system.

Sizes: field 36 px high, 12 px side padding, 8 px radius, a 16 px calendar icon. Calendar: 12 px padding, 8 px radius, the popover shadow, seven 36 px columns 2 px apart, always six weeks so its height does not change from month to month; arrows and text buttons 32 px high.

• The text is trimmed before it is applied, and is at most 100 characters.
• The applied search lives in the page's URL, with the filters and the page number.
• Clearing the filters empties the box.

• No button on the board. The board draws one search field with a magnifier inside; the app pairs a plain field with a Search button.

Size: 44 × 24 px track, fully rounded; 20 px white knob with a soft shadow, 2 px in from either end. While a change is being saved the switch is disabled.

• Not on the foundations boards. The switch appears only on the Opportunity board.

Size: 24 px high, 10 px side padding, text 12 / 16 Medium; a 6 px dot, 6 px before the text. Stage, deal type and tag are fully rounded; a function has 8 px corners.

• The concept's chips. The board: Semibold pills, and the deal type as a square white tag with a gray border. Since 2026-10-07 the chips follow Apiko's design concept: Medium text; a stage and a deal type carry a dot and a hairline border (plain in a table cell); the deal type and any other tag are gray pills; a function has 8 px corners.
• The "Buyer stage" chip. The board labels the stage "Buyer stage"; in the app the stage is called "Buyer".

Size: 24 px high, fully rounded, 10 px side padding, 6 px between icon and text, text 12 / 16 Semibold.

In the app the panel is 384 px wide and fixed to the viewport. It opens below the score, or above it when there is more room there, and closes on Escape, a click outside, a page scroll or when focus leaves it.

Score (HealthChip)

Breakdown (HealthBreakdown)

Size: 24 px high, the height of a chip, fully rounded, 10 px side padding, a 1 px border a shade darker than the band's tint, text 12 / 16 Medium with tabular figures; the "i" of the button form is 12 px and a little quieter.

• Size. The board: 32 px, 14 px Semibold, no border. Since 2026-10-07 the score follows Apiko's design concept: 24 px, 12 px Medium, a hairline border in its band's tone. Its icon keeps the band's shape, and its number keeps the band's text color rather than the concept's paler one, so it still passes 4.5:1.
• Breakdown content. The board: a 320 px panel with rows "Start 100", the deductions that fired, and "Score". The app: 384 px, always all five components with the fact under each, and a separate block of the stall rules that fired.
• Shadow. The board gives the panel the popover shadow; the app gives it the card shadow.

Size: the track is gray-100 with 4 px padding, a 12 px radius and 4 px between tabs; a tab is 32 px high with 12 px side padding, an 8 px radius and text 14 / 20 Medium. The Opportunity page's bar spans its row and, from 1024 px on, spreads its tabs; the others size to their tabs. In the app the tabs are links (filter buttons on Accounts); here they are buttons, so the samples switch in place.

Every tab has the same weight, so no tab moves when the active one changes. The hidden Semibold copy of each label that TabLink held for that (the design review's fix of 2026-10-07) went with the concept's tabs.

• Inactive tab. The board colors it gray-700; the code uses gray-500, darker only on hover.
• The concept's tabs. The board: underlined tabs, the active one blue and Semibold, on a white strip with rounded top corners. Since 2026-10-07 the tabs follow Apiko's design concept: a gray track with the active tab raised on white, one weight for every tab, and the Opportunity page's bar on its own row under the header card.

Message bar: 12 px vertical and 14 px side padding, 8 px radius, 10 px between the 18 px icon and the text, text 14 / 20. Rule: 16 px icon, 8 px gap, text 14 / 20.

Sizes: 12 px radius, 1 px gray-200 border, the card shadow; title bar 56 px high with 20 px side padding and a line under it; title 16 / 24 Medium; body padding 20 px.

• Header facts. The boards put a line above a record's facts and set each value in Regular. Since 2026-10-07 they follow Apiko's design concept: no line above, a thin rule between the facts, values in Medium.
• Padding. The board: 16 px, 24 px for large cards. In the code the card has 20 px.

Total sites

6

Active

5

Not exchanged, completed or lost

Weighted pipeline fee

£412,500

Instructed

–

Sizes: 20 px padding, 12 px radius, the card shadow; label 13 / 20 Regular in sentence case; figure 26 / 32 Medium with tabular figures. Tiles sit in a grid with 16 px gaps: two across, four on a wide screen.

"Critical" is a neutral tag; "Oldest outstanding" is a warn pill; an overdue deadline is crit-text with the number of days late.

• Owner column. The board puts a function chip in the table. The app writes the deal owner's name, or "Unassigned".
• Row height. The board: 56 px. The code sets no row height: the content and the cell padding decide it.
• Legal task status. The board: a colored icon and a label ("Completed"). The app: plain text ("Complete"), and the critical-path mark is a "Critical" tag instead of a "Critical path" chip.

Size: 56 px high, 16 px side padding, a 1 px gray-200 line above it, text 14 px gray-500; two secondary buttons 8 px apart. A change of the text is announced politely.

Sizes: 6 px segments, fully rounded, 6 px apart; 8 px between segment and label; label 12 / 16, left-aligned; the steps share the width equally. Screen readers hear each stage with "(done)" or "(current)".

• The concept's segments. The board draws a dot per stage joined by a line, the current one a white circle with a 3 px ring. Since 2026-10-07 the bar follows Apiko's design concept: a segment per stage, the current one half filled, the labels left-aligned. The concept's "Done · 41 days" and "Signed 1 Sep" under each stage need a stage history the app doesn't keep, so they aren't shown.
• Buyer journey. The board draws seven steps (Coverage, Teaser, Pitched, Interested, Offered, Board, Agreed) as the same bar. The app has four stages plus Withdrawn, and shows them as counts.
• The "Contractor stage not applicable" note. It is on the board; the app simply does not show the Contractors tab on such deals.

AheadTarget

42 days

16 Nov 2026

TomorrowTarget

1 day

7 Oct 2026

TodayTarget

Today

6 Oct 2026

PassedTarget

3 days ago

3 Oct 2026

No dateHard date

Not set

Each date is a tile with a 1 px gray-200 border, 12 px radius and 16 px padding; the label 14 / 20 gray-500 with its tag at the right (Target in blue, Hard date in the critical tone, 20 px); the countdown 24 / 32 Medium with tabular figures; the date 14 / 20 gray-500 under it. Three tiles in a row, 16 px apart; one column on a narrow screen.

• Layout. The board: rows with a large day count (32 px) at the right. Since 2026-10-07 the app follows Apiko's design concept: three tiles, each led by its countdown with the date under it, and a Target or Hard date tag. The concept's progress bar and its notes ("5 critical items open", "subject to PC") need data the app doesn't hold per date, so they aren't shown.

An open action also has a button to complete it, at the right of its row; the admin, who is read-only, sees a lock line instead. An empty list reads "No actions yet."

A row is a grid: 28 px for the mark, 130 px for the function chip, the title, then the due state; 12 px gaps and padding, a 1 px gray-100 line between rows, text 14 / 20. Since 2026-10-07 the open mark is a primary-600 ring and the due states are Medium, after Apiko's design concept; the concept's dashed line under the mark isn't drawn.

A menu item is 40 px high with an 8 px radius, 12 px side padding, an 18 px icon and 12 px between icon and label; items are 2 px apart, groups 16 px. The fold button is labeled "Collapse sidebar" or "Expand sidebar" and tells screen readers whether the sidebar is open; the choice is kept in localStorage, and a browser that blocks storage still folds, for that page only. The user card is one link to My account; its label starts with the visible name.

The page sits on white with 24 px padding; its blocks are 16 px apart. The shell sets no maximum width.

• The concept's shell. Since 2026-10-07 the shell follows Apiko's design concept, not the boards: a gray sidebar with the user at its top and grouped items (the boards: a white sidebar, the user at the right of a top bar), the current page on gray (the boards: primary-100), a white page (the boards: gray-50), and a sidebar that folds.
• Not taken from the concept. Its top bar (breadcrumbs, page actions, search, the "Updated" time, team avatars, Share and Inbox) and its item counts and Activity Feed, Regional, Capacity and Settings items: the bar would need the pages to hand it their content, a change of how the app is built, and the rest needs data or features the app doesn't have. The breadcrumbs stay above the page header.
• Content width. The board: fluid, at most 1440 px. The shell sets no width limit.