From 2de883c70f43489b60e4bbf5b143626f596ab6db Mon Sep 17 00:00:00 2001 From: Hardik Date: Mon, 22 Jun 2026 04:30:22 +0530 Subject: [PATCH] chore(design-system): add PPMS design system reference and sync bundle Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 --- Wireframe/design-system.html | 534 ++++++++++++++++++ Wireframe/ds-bundle/components/alerts.html | 33 ++ Wireframe/ds-bundle/components/badges.html | 25 + Wireframe/ds-bundle/components/buttons.html | 36 ++ Wireframe/ds-bundle/components/cards.html | 30 + Wireframe/ds-bundle/components/charts.html | 35 ++ Wireframe/ds-bundle/components/forms.html | 27 + Wireframe/ds-bundle/components/po-status.html | 23 + Wireframe/ds-bundle/components/tables.html | 29 + Wireframe/ds-bundle/components/tabs.html | 29 + Wireframe/ds-bundle/foundations/colors.html | 33 ++ Wireframe/ds-bundle/foundations/icons.html | 22 + Wireframe/ds-bundle/foundations/tokens.html | 46 ++ .../ds-bundle/foundations/typography.html | 26 + Wireframe/ds-bundle/layout/app-shell.html | 48 ++ Wireframe/ds-bundle/layout/page-header.html | 28 + 16 files changed, 1004 insertions(+) create mode 100644 Wireframe/design-system.html create mode 100644 Wireframe/ds-bundle/components/alerts.html create mode 100644 Wireframe/ds-bundle/components/badges.html create mode 100644 Wireframe/ds-bundle/components/buttons.html create mode 100644 Wireframe/ds-bundle/components/cards.html create mode 100644 Wireframe/ds-bundle/components/charts.html create mode 100644 Wireframe/ds-bundle/components/forms.html create mode 100644 Wireframe/ds-bundle/components/po-status.html create mode 100644 Wireframe/ds-bundle/components/tables.html create mode 100644 Wireframe/ds-bundle/components/tabs.html create mode 100644 Wireframe/ds-bundle/foundations/colors.html create mode 100644 Wireframe/ds-bundle/foundations/icons.html create mode 100644 Wireframe/ds-bundle/foundations/tokens.html create mode 100644 Wireframe/ds-bundle/foundations/typography.html create mode 100644 Wireframe/ds-bundle/layout/app-shell.html create mode 100644 Wireframe/ds-bundle/layout/page-header.html diff --git a/Wireframe/design-system.html b/Wireframe/design-system.html new file mode 100644 index 0000000..8dc2828 --- /dev/null +++ b/Wireframe/design-system.html @@ -0,0 +1,534 @@ + + + + + +PPMS — Design System + + + + + + + + + +
+
+ +
+
+

PPMS Design System

+

Pelagia Purchase Management System · v1

+
+ +
+ +
+ + + + +
+ + +
+

Design System

+

+ The visual language of the Pelagia Purchase Management System — an internal PO tool for a maritime company. + Everything here is lifted from the live codebase (app/globals.css + + components/ui/*), so screens built from these tokens drop straight in. +

+
+

Framework

Next.js 15 · App Router

+

Styling

Tailwind CSS v4

+

Primitives

Radix UI · CVA

+

Charts · Icons

recharts · lucide

+
+

Tip: click any code snippet to copy it.

+
+ + +
+

Color

+

Five ramps. Primary = actions, links, active nav. Success = approved / paid. Warning = needs action (edits, vendor ID, partial). Danger = rejected / destructive. Neutral = all structure, text and borders.

+ +
+
+ + +
+

Typography

+

Inter for UI, JetBrains Mono for codes & numbers (PO numbers, accounting codes).

+
+

Page title

text-2xl font-semibold
+

Section heading

text-lg font-semibold
+

Card title

text-base font-semibold
+

Body / table text — the workhorse size for the whole app.

text-sm
+

Muted description & helper text

text-sm text-neutral-500
+

Eyebrow / label

text-xs uppercase tracking-wider
+

PMS/HNR1/9000/2024-25

font-mono
+
+
+ + +
+

Radius · Shadow · Spacing

+
+
+

Radius

+
+
rounded-md
+
rounded-lg
+
rounded-full
+
+

lg for cards/buttons/inputs, md for nav items, full for badges & avatars.

+
+
+

Elevation

+
+
border
+
shadow-sm
+
shadow-lg
+
+

Flat by default — a 1px border-neutral-200 separates surfaces. shadow-sm on cards, shadow-lg only for popovers/dialogs.

+
+
+

Spacing rhythm

+
+
gap-2 · 8px
+
gap-3 · 12px (rows)
+
p-5 · 20px (cards)
+
p-6 / gap-6 · 24px
+
+

Page padding p-6; cards p-5/p-6; controls gap gap-2/3.

+
+
+
+ + +
+

Icons

+

lucide-react, stroke 2, sized h-4 w-4 inline / h-5 w-5 standalone. They inherit text color (currentColor).

+
+
+ + +
+

App shell

+

Fixed w-60 sidebar (white, border-r) + h-16 top bar + scrollable main on bg-neutral-50 with p-6. Nav links: rounded-md px-3 py-2 text-sm font-medium; active = bg-primary-50 text-primary-700; section eyebrow = text-xs uppercase tracking-wider text-neutral-400.

+
+
+ +
+
+ Dashboard +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+

Buttons

+

From components/ui/button.tsx (CVA). Base: inline-flex items-center gap-2 rounded-lg text-sm font-medium + focus ring.

+
+
+ + + + + + + + +
+
+ + + + +
+
+ 
<Button variant="default|secondary|success|warning|destructive|ghost|link" size="sm|md|lg|icon">copied ✓
+
+ + +
+

Badges

+

From components/ui/badge.tsx. Base: rounded-full px-2.5 py-0.5 text-xs font-medium.

+
+ default + secondary + success + warning + danger + outline +
+
+ + +
+

PO status badges

+

The 13 lifecycle states map to badge variants in lib/utils.ts (PO_STATUS_LABELS / PO_STATUS_VARIANTS). Reuse this mapping — don't invent new status colors.

+
+
+ + +
+

Cards & KPI stats

+

Card = rounded-lg border border-neutral-200 bg-white shadow-sm. KPI stat cards drop the shadow and use p-4/5.

+
+
+
+

Vendor details

+

GST-verified supplier on file.

+
+

Acme Marine Supplies Pvt Ltd

GSTIN 27ABCDE1234F1Z5

+
+
+
+

Open POs

24

▲ 8% vs last month

+

Awaiting approval

7

across 3 vessels

+

Spend (FY)

₹2.4 Cr

FY 2025–26

+

Overdue

2

needs attention

+
+
+
+ + +
+

Forms

+

Inputs from components/ui/input.tsx: h-10 rounded-lg border-neutral-300, focus border-primary-500 ring-2 ring-primary-500/20.

+
+
+
+
+
+
+
+
+

Inline validation error sits under the field in text-danger-700.

+
+
+ + +
+

Tabs & segmented controls

+

Toolbar filters use a pill segmented control; page sections use an underline tab bar.

+
+
+ + + +
+
+ + + +
+
+
+ + +
+

Tables

+

Header row bg-neutral-50 with text-xs uppercase tracking-wider text-neutral-400; body rows divide-y divide-neutral-100, hover hover:bg-neutral-50; numbers tabular-nums text-right.

+
+ + + + + + + + + +
PO NumberVesselStatusAmount
PMS/HNR1/9001/2025-26MV Pelagia StarApproved₹4,82,000
PMS/OCD2/9002/2025-26MV Ocean DawnEdits Requested₹1,15,500
PMS/CRT3/9003/2025-26MV Coral TridentClosed₹92,300
+
+
+ + +
+

Alerts & dialog

+

Inline callouts use the semantic -50 tint + -700 text + matching border.

+
+
ℹ InfoImported POs are created directly in the Closed state.
+
✓ SuccessPurchase order approved and sent for payment.
+
⚠ WarningThis vendor is unverified — verify before assigning a vendor code.
+
✕ ErrorPayment date cannot be in the future.
+
+
+

Dialog

+
+
+

Delete accounting code?

+

This removes 5110 · Fuel & Lubricants. This action can't be undone.

+
+ + +
+
+
+
+
+ + +
+

Charts

+

recharts inside a standard card. Grid strokeDasharray="3 3" in #f0f0f0; axis ticks fontSize 11, #737373; bars radius, lines strokeWidth 2. Y-axis money formatted via formatCompactINR.

+
+
+

Spend by cost centre

+ + + ₹3Cr₹1.5Cr₹0 + +
+
+

Monthly trend

+ + + + + +
+
+
+

Multi-series palette

+
+
+
+ + +
+

Formatting conventions

+
+ + + + + + + + +
CurrencyIndian locale, INR — formatCurrency() → ₹4,82,000
Compact moneyformatCompactINR() → ₹2 Cr · ₹49 L · ₹75 K (lakh/crore scale)
DatesformatDate() → Jun 22, 2026 · financial year is Apr–Mar (2025-26)
PO numbersMono font, COMPANY/VESSEL/ID/FY → PMS/HNR1/9000/2024-25
Accounting codes6-digit mono codes; graphs label headings/sub-headings by name, leaves by code
+
+
+ + +
+

Do & don't

+
+
+

Do

+
    +
  • • Separate surfaces with a 1px border-neutral-200, not heavy shadows.
    • +
  • • Reuse PO_STATUS_VARIANTS for any PO status pill.
    • +
  • • Keep one primary action per view; everything else secondary/ghost.
    • +
  • • Right-align and tabular-nums all money columns.
    • +
  • • Use semantic color only for meaning (success=paid, warning=action, danger=stop).
    • +
+
+
+

Don't

+
    +
  • • Don't introduce new hues — stay within the five ramps.
    • +
  • • Don't use primary blue for decoration; it signals an action.
    • +
  • • Don't mix radii — rounded-lg for boxes, rounded-full for pills.
    • +
  • • Don't crowd charts — one chart per card, generous whitespace.
    • +
  • • Don't hardcode ₹ formatting — use the shared helpers.
    • +
+
+
+
+ +
+
+ + + + diff --git a/Wireframe/ds-bundle/components/alerts.html b/Wireframe/ds-bundle/components/alerts.html new file mode 100644 index 0000000..61b0a81 --- /dev/null +++ b/Wireframe/ds-bundle/components/alerts.html @@ -0,0 +1,33 @@ + + + + + + +PPMS · Alerts + + + + + + +

Alerts & dialog

+

Inline callouts use the semantic -50 tint + -700 text + matching border.

+
+
ℹ InfoImported POs are created directly in the Closed state.
+
✓ SuccessPurchase order approved and sent for payment.
+
⚠ WarningThis vendor is unverified — verify before assigning a vendor code.
+
✕ ErrorPayment date cannot be in the future.
+
+
+
+

Delete accounting code?

+

This removes 5110 · Fuel & Lubricants. This action can't be undone.

+
+ + +
+
+
+ + diff --git a/Wireframe/ds-bundle/components/badges.html b/Wireframe/ds-bundle/components/badges.html new file mode 100644 index 0000000..9e0e054 --- /dev/null +++ b/Wireframe/ds-bundle/components/badges.html @@ -0,0 +1,25 @@ + + + + + + +PPMS · Badges + + + + + + +

Badges

+

From components/ui/badge.tsx. Base: rounded-full px-2.5 py-0.5 text-xs font-medium.

+
+ default + secondary + success + warning + danger + outline +
+ + diff --git a/Wireframe/ds-bundle/components/buttons.html b/Wireframe/ds-bundle/components/buttons.html new file mode 100644 index 0000000..8ee1e93 --- /dev/null +++ b/Wireframe/ds-bundle/components/buttons.html @@ -0,0 +1,36 @@ + + + + + + +PPMS · Buttons + + + + + + +

Buttons

+

From components/ui/button.tsx (CVA). Base: inline-flex items-center gap-2 rounded-lg text-sm font-medium + focus ring.

+
+
+ + + + + + + + +
+
+ + + + +
+

variant="default|secondary|success|warning|destructive|ghost|link" · size="sm|md|lg|icon"

+
+ + diff --git a/Wireframe/ds-bundle/components/cards.html b/Wireframe/ds-bundle/components/cards.html new file mode 100644 index 0000000..eb8a951 --- /dev/null +++ b/Wireframe/ds-bundle/components/cards.html @@ -0,0 +1,30 @@ + + + + + + +PPMS · Cards + + + + + + +

Cards & KPI stats

+

Card = rounded-lg border border-neutral-200 bg-white shadow-sm. KPI stat cards drop the shadow, use p-4.

+
+
+

Vendor details

GST-verified supplier on file.

+

Acme Marine Supplies Pvt Ltd

GSTIN 27ABCDE1234F1Z5

+
+
+
+

Open POs

24

▲ 8% vs last month

+

Awaiting approval

7

across 3 vessels

+

Spend (FY)

₹2.4 Cr

FY 2025–26

+

Overdue

2

needs attention

+
+
+ + diff --git a/Wireframe/ds-bundle/components/charts.html b/Wireframe/ds-bundle/components/charts.html new file mode 100644 index 0000000..e2b95f3 --- /dev/null +++ b/Wireframe/ds-bundle/components/charts.html @@ -0,0 +1,35 @@ + + + + + + +PPMS · Charts + + + + + + +

Charts

+

recharts inside a standard card. Grid strokeDasharray="3 3" in #f0f0f0; axis ticks 11px #737373; bars radius, lines strokeWidth 2. Y-axis money via formatCompactINR.

+
+
+

Spend by cost centre

+ ₹3Cr₹1.5Cr₹0 +
+
+

Monthly trend

+ +
+
+
+

Multi-series palette

+
+
+ + + diff --git a/Wireframe/ds-bundle/components/forms.html b/Wireframe/ds-bundle/components/forms.html new file mode 100644 index 0000000..02fc871 --- /dev/null +++ b/Wireframe/ds-bundle/components/forms.html @@ -0,0 +1,27 @@ + + + + + + +PPMS · Forms + + + + + + +

Forms

+

From components/ui/input.tsx: h-10 rounded-lg border-neutral-300; focus border-primary-500 ring-2 ring-primary-500/20.

+
+
+
+
+
+
+
+
+

Inline validation error sits under the field in text-danger-700.

+
+ + diff --git a/Wireframe/ds-bundle/components/po-status.html b/Wireframe/ds-bundle/components/po-status.html new file mode 100644 index 0000000..a43e99f --- /dev/null +++ b/Wireframe/ds-bundle/components/po-status.html @@ -0,0 +1,23 @@ + + + + + + +PPMS · PO status + + + + + + +

PO status badges

+

Lifecycle states map to badge variants in lib/utils.ts (PO_STATUS_LABELS / PO_STATUS_VARIANTS). Reuse this mapping — don't invent new status colors.

+
+ + + diff --git a/Wireframe/ds-bundle/components/tables.html b/Wireframe/ds-bundle/components/tables.html new file mode 100644 index 0000000..3d78a62 --- /dev/null +++ b/Wireframe/ds-bundle/components/tables.html @@ -0,0 +1,29 @@ + + + + + + +PPMS · Tables + + + + + + +

Tables

+

Header bg-neutral-50 + text-xs uppercase tracking-wider text-neutral-400; rows divide-y divide-neutral-100, hover hover:bg-neutral-50; money tabular-nums text-right.

+
+ + + + + + + + + +
PO NumberVesselStatusAmount
PMS/HNR1/9001/2025-26MV Pelagia StarApproved₹4,82,000
PMS/OCD2/9002/2025-26MV Ocean DawnEdits Requested₹1,15,500
PMS/CRT3/9003/2025-26MV Coral TridentClosed₹92,300
+
+ + diff --git a/Wireframe/ds-bundle/components/tabs.html b/Wireframe/ds-bundle/components/tabs.html new file mode 100644 index 0000000..96ce6f9 --- /dev/null +++ b/Wireframe/ds-bundle/components/tabs.html @@ -0,0 +1,29 @@ + + + + + + +PPMS · Tabs + + + + + + +

Tabs & segmented controls

+

Toolbar filters use a pill segmented control; page sections use an underline tab bar.

+
+
+ + + +
+
+ + + +
+
+ + diff --git a/Wireframe/ds-bundle/foundations/colors.html b/Wireframe/ds-bundle/foundations/colors.html new file mode 100644 index 0000000..4baef2a --- /dev/null +++ b/Wireframe/ds-bundle/foundations/colors.html @@ -0,0 +1,33 @@ + + + + + + +PPMS · Color + + + + + +

Color

+

Five ramps. Primary = actions/links/active nav · Success = approved/paid · Warning = needs action · Danger = rejected/destructive · Neutral = structure, text, borders.

+
+ + + diff --git a/Wireframe/ds-bundle/foundations/icons.html b/Wireframe/ds-bundle/foundations/icons.html new file mode 100644 index 0000000..fbde1ae --- /dev/null +++ b/Wireframe/ds-bundle/foundations/icons.html @@ -0,0 +1,22 @@ + + + + + + +PPMS · Icons + + + + + + +

Icons

+

lucide-react, stroke 2, sized h-4 w-4 inline / h-5 w-5 standalone. They inherit currentColor.

+
+ + + diff --git a/Wireframe/ds-bundle/foundations/tokens.html b/Wireframe/ds-bundle/foundations/tokens.html new file mode 100644 index 0000000..a6f895e --- /dev/null +++ b/Wireframe/ds-bundle/foundations/tokens.html @@ -0,0 +1,46 @@ + + + + + + +PPMS · Tokens + + + + + + +

Radius · Shadow · Spacing

+
+
+

Radius

+
+
rounded-md
+
rounded-lg
+
rounded-full
+
+

lg for cards/buttons/inputs, md for nav items, full for badges & avatars.

+
+
+

Elevation

+
+
border
+
shadow-sm
+
shadow-lg
+
+

Flat by default — a 1px border-neutral-200 separates surfaces. shadow-sm on cards, shadow-lg only for popovers/dialogs.

+
+
+

Spacing rhythm

+
+
gap-2 · 8px
+
gap-3 · 12px (rows)
+
p-5 · 20px (cards)
+
p-6 / gap-6 · 24px
+
+

Page padding p-6; cards p-5/p-6; control gaps gap-2/3.

+
+
+ + diff --git a/Wireframe/ds-bundle/foundations/typography.html b/Wireframe/ds-bundle/foundations/typography.html new file mode 100644 index 0000000..23a1509 --- /dev/null +++ b/Wireframe/ds-bundle/foundations/typography.html @@ -0,0 +1,26 @@ + + + + + + +PPMS · Typography + + + + + + +

Typography

+

Inter for UI, JetBrains Mono for codes & numbers (PO numbers, accounting codes).

+
+

Page title

text-2xl font-semibold
+

Section heading

text-lg font-semibold
+

Card title

text-base font-semibold
+

Body / table text — the workhorse size for the whole app.

text-sm
+

Muted description & helper text

text-sm text-neutral-500
+

Eyebrow / label

text-xs uppercase tracking-wider
+

PMS/HNR1/9000/2024-25

font-mono
+
+ + diff --git a/Wireframe/ds-bundle/layout/app-shell.html b/Wireframe/ds-bundle/layout/app-shell.html new file mode 100644 index 0000000..3aaf41d --- /dev/null +++ b/Wireframe/ds-bundle/layout/app-shell.html @@ -0,0 +1,48 @@ + + + + + + +PPMS · App shell + + + + + + +

App shell

+

Fixed w-60 white sidebar (border-r) + h-16 top bar + scrollable main on bg-neutral-50, p-6. Active nav = bg-primary-50 text-primary-700; section eyebrow = text-xs uppercase tracking-wider text-neutral-400.

+
+
+ +
+
+ Dashboard + +
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Wireframe/ds-bundle/layout/page-header.html b/Wireframe/ds-bundle/layout/page-header.html new file mode 100644 index 0000000..d9c27b0 --- /dev/null +++ b/Wireframe/ds-bundle/layout/page-header.html @@ -0,0 +1,28 @@ + + + + + + +PPMS · Page header + + + + + + +

Page header

+

Title + muted subtitle on the left, one primary action on the right.

+
+
+
+

Purchase Orders

+

Create, track and approve orders across the fleet.

+
+ +
+
+ +