Resona Design Review
RESONA Phase 5 · Design · Nov 3, 2026
Before any code

The Figma frames next to today’s screens

Each current Resona page is shown next to the frame it would follow, with a short proposal. At the end are the decisions to make before the build. Click any screenshot to open it full size.

15 frames · Website Designs/ · 1280 px 12 screens · build of main @ db290ca example data in a scratch database

The style in the frames

The frames are grey wireframes with outlined text and crossed boxes for icons and images. Their footer names the style “Structural brutalism v1.0”. This page uses that style, with the dark mode proposed below: switch your system to dark to see it.

Greys used in the frames (light)contrast against the page grey #F9F9F9
#F9F9F9Page
#FFFFFFCards, inputs
#F3F3F3Grey panels
#EEEEEE · #E8E8E8Header bars
#E2E2E2Active menu item, tags
#C6C6C6Thin lines. 1.6:1, too faint for input borders (3:1)
#777777Small text. 4.25:1, fails AA; use #6B6B6B (5.1:1)
#474747Secondary text, 8.8:1
#1A1C1CText, 16.3:1
#000000Active item, primary button
Dark, derived (proposal; not drawn)the same tonal steps, reversed; white becomes the “black”
#131313Page
#1B1B1BCards, inputs
#1F1F1FGrey panels
#2A2A2ABars, active item
#474747Thin lines
#919191Small text, 5.9:1
#E2E2E2Text, 14.3:1
#FFFFFFActive item, primary button
Type
Due soon Write the D3 evaluation chapter Body text in Inter Regular. The frames’ text is outlined, so the names come from matching glyphs: headings, body and labels all match Inter. Labels: Inter Semibold, all caps, wide spacing orcid.org/0000-0002 · D3 · 125 KB · a monospace for codes and IDs (face unknown)
Rules the frames follow
  • Square corners everywhere. No shadows.
  • 1 px grey borders; a 3 px black rule under section headings.
  • Black fill marks the active item and the one primary button; secondary buttons are outlined or grey.
  • Small all-caps labels above fields and on card header bars.
  • Tags are grey or outlined rectangles, e.g. PUBLICATION PROBLEM
  • Notes such as “[3] TABLIST ROLE: ARROW-KEY NAVIGATION ENABLED” are designer notes, not UI. The behaviour they ask for (arrow keys inside tab lists and chip groups) does get built.

Layout: top bar or side rail

The frames come in two shells. Today Resona has a top bar plus a menu on the left of every page.

Top bar · Workspace
Side rail · Workspace (alternate)

Top bar

  • Global links across the top; the project’s own menu down the left (Dashboard, Files, Tasks…).
  • Closest to today, so the least rework.
  • The project menu grows with Stages, Runs, Assistant and Wiki; on a phone it needs a menu button, and today that menu sits above the content (see the phone shots).

Side rail

  • An 80 px rail of icons for the global sections; inside a project, tabs across the top.
  • More width for the board and the file table: the 2-column left menu goes.
  • On a phone the rail turns into a bottom tab bar, a common pattern.
  • Today the rail would hold only Projects and Settings; Feed, Match, Problems and Funding appear when they are built.

Page by page

Left: the frame the page would follow. Right: the page as it is today. The proposals assume the side rail.

Current screens

On a phone today

iPhone 13 · light

The frames are desktop only. Today the page menu stacks above the content, so on the dashboard the first task sits below a full screen of links. A bottom tab bar fixes this.

Frames kept for the community screens

No Resona page uses these yet. Convos lends its list rows and button pair to the inbox; Personalization lends its segmented control.

Decisions to make

Each one has a recommendation. Nothing is built until these are agreed.

  1. Layout

    Side rail (the alternate frames) or top bar (the other frames).

    Recommended

    Side rail. Inside a project: its name with the switcher, then tabs Overview · Tasks · Inbox · Files (Stages when it exists). The filters in today’s left menus become a chip bar like Home (alternate). Global sections that aren’t built yet are hidden rather than greyed out, so the rail isn’t mostly dead icons.

  2. Colours

    Black, white and grey as drawn; or this layout with Resona’s coral and navy; or one accent.

    Recommended

    Monochrome as drawn, plus red only where it means something (blocked and overdue, always with a text label). Coral and navy would fight the black-means-active rule. The orbital logo stays, drawn in the text colour, in the rail’s logo box.

  3. Fonts

    The names can’t be read from the SVGs; the glyphs match Inter.

    Recommended

    Inter for everything (headings Extrabold/Black with tight spacing). Playfair Display goes. A monospace for codes and IDs: the system one until Hammad reads its name in the Figma file.

  4. Which frame each page follows

    PageFollows