Table of Contents

Design System

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Design System

Visual language and UI conventions, migrated from the original design spec (Docs/01-design-document.md §7, §9 and Docs/DESIGN.md §9, now retired). These are the design intentions; the implemented source of truth is Tailwind v4 + shadcn/ui in App/components/.

Colour palette

Token	Hex	Usage
`primary`	`#2563EB`	Primary actions, active states, links
`primary-dark`	`#1D4ED8`	Hover on primary
`success`	`#16A34A`	Approved, paid, closed states
`warning`	`#D97706`	Pending review, edits requested
`danger`	`#DC2626`	Rejected, destructive actions
`neutral-50`	`#F9FAFB`	Page background
`neutral-100`	`#F3F4F6`	Card / panel background
`neutral-700`	`#374151`	Body text
`neutral-900`	`#111827`	Headings

Typography

Element	Font	Weight	Size
Headings (H1–H3)	Inter	600–700	24 / 20 / 16 px
Body	Inter	400	14 px
Labels / captions	Inter	500	12 px
Data / mono values	JetBrains Mono	400	13 px

Component conventions

Cards: rounded-lg, shadow-sm, 16 px padding.
Status badges: pill shape, colour-coded to match the PO lifecycle state colours.
Tables: alternating row shading, sticky header on scroll.
Forms: floating labels; validation errors below the field in danger colour.
Buttons: primary = blue fill, secondary = white with border, danger = red fill.
Admin action buttons (Edit / Delete) are bordered (asserted in E2E).

Key UI patterns

Status badges — every PO status has a distinct colour (see the lifecycle page); colour is never the sole signal (icon + label accompany it).
Confirm-before-destruction — Delete uses a two-step inline confirm ("Delete X? Confirm / Cancel") that replaces the button in place — no modal.
Inline table editing — manager line-item editing happens inline on the approval page (not a modal) so the rest of the PO stays visible.
Live GST summary — below the line-items table: Taxable, GST, Grand Total update as you type. See Purchase Orders.
Product autocomplete — typing in a line-item name field fuzzy-searches the catalogue; the dropdown shows product name/code and per-vendor price hints (e.g. "Vendor A: ₹1,200 · Vendor B: ₹1,050").
Cheapest / ★ Closest tags — computed independently so both can show at once. See Inventory and Catalogue.
Cart persistence — localStorage under a fixed key; survives navigation, local to the device/user; a cart-updated event lets components react live.
Mobile — Manager/Accounts get mobile cards + a bottom nav; other roles get a "Desktop Required" overlay. See Pages and Navigation.
Environment banner — a fixed non-prod banner via NEXT_PUBLIC_ENV_LABEL (EnvBanner); renders nothing in production.

Accessibility & i18n

Target WCAG 2.1 AA.
All interactive elements keyboard-navigable with a visible focus ring.
Colour is never the sole conveyor of meaning (icons + labels accompany status colours).
English-only for v1; an i18n architecture (react-i18next) was envisioned to be wired but not populated.

A non-functional Reports UX mockup also exists under Planned Features → Reports — UX Mockup — proposed layouts and chart treatments for spend reporting.

Pelagia Portal (PPMS)

Home

Overview

Build & Run

System

Product

Planned

Quality

Ops

Engineering

Tech Debt

Pelagia Portal (PPMS) — internal purchase-order management. Self-hosted on pms1, live at pms.pelagiamarine.com. This wiki tracks the shipped product; authoritative sources are the repo code, App/CLAUDE.md, Docs/, and CHANGELOG.md.