Summary
The platform UI should feel calm, structured, and fast. It should help users find records, complete tasks, understand obligations, and maintain transparency without adding unnecessary visual or cognitive load.
Relationship to shadcn
Opries should adapt the shadcn admin dashboard pattern: composable components, practical density, consistent tables, predictable navigation, and Tailwind tokens. The goal is not to copy an upstream template, but to align Opries with a familiar implementation model.
Product Experience
The platform should feel calm, structured, and fast. Users are often checking obligations, finding files, updating registers, reviewing evidence, or preparing reporting material.
Use Case First
Design from the user's task and setting. A coordinator reviewing overdue reports, a volunteer uploading evidence, and a committee member checking minutes all need different levels of density, explanation, and reassurance.
Layout
Use a left navigation rail for primary product areas, a top bar for organisation and account context, and page-level headers with concise actions. Avoid oversized heroes inside the product.
Use Swiss/International design principles in product layout: stable grids, aligned controls, clear typographic hierarchy, restrained surfaces, and consistent spacing. Product screens should feel ordered and legible before they feel expressive.
Density
Default density should support scanning: compact tables, clear row actions, stable columns, and persistent filters. Use generous spacing only for onboarding, empty states, and setup workflows.
Dashboard Colour Usage
Use colour to communicate state, not decoration. Most interface surfaces should remain neutral, with Eucalypt and Water used for actions and links, Ochre for review prompts, and Clay for destructive or overdue states.
Universal Design in the Product
Every workflow should be usable without relying on colour, memory, or prior product knowledge. Use clear labels, visible status text, persistent context, keyboard focus, useful defaults, and recovery paths. Where a workflow teaches a new concept, include short explanations, examples, and next actions rather than long instructional paragraphs.
Checks
- Can the user see the next useful action quickly?
- Does the layout support scanning before close reading?
- Are status, owner, due date, and evidence visible where they matter?
- Does the workflow teach new concepts without relying on long prose?