The complete component library behind the marine procurement platform. Every screen — public, buyer, the internal desks and admin — is built from these primitives, so the platform reads as one product rather than four applications sharing a logo.
Colour, typography and elevation
Navy — brand foundation
navy-50
#eef4fb
navy-100
#d8e6f6
navy-200
#b3cdec
navy-400
#4f84c8
navy-600
#21508f
navy-700
#1b4074
navy-800
#17335c
navy-900
#122744
navy-950
#0a1729
Sea — accent
sea-50
#e9faf6
sea-100
#c7f2e9
sea-200
#92e4d4
sea-400
#2bb5a0
sea-500
#119685
sea-600
#08786b
sea-700
#0a6057
sea-800
#0d4d47
sea-900
#0f403b
Ink — surfaces & text
ink-50
#f7f9fb
ink-100
#eef2f6
ink-200
#e0e6ed
ink-300
#cbd4de
ink-400
#97a4b3
ink-500
#6b7a8c
ink-600
#506070
ink-700
#3b4855
ink-800
#29323c
ink-900
#182029
Semantic status colours
Type scale — Inter
Display 30 / Page titles
Heading 22 / Section headers
Subhead 15 / Card titles
Body 13.5 / Paragraph copy, form help text and descriptions across the product.
Table 13 / Tabular data with tabular numerals: 24,850.40
Mono 12.5 / RFQ-MAR-000128 · SKU PRV-DRY-1001
Overline 11 / Field labels
shadow-card
Resting cards and inputs
shadow-raised
Dropdowns, toasts, popovers
Vessel silhouette
Inputs, selects, search, toggles and upload
Helper text sits below the control.
IMO number must be exactly 7 digits.
Checkboxes
Required before dispatch
Radios
Normal lead time applies
Vessel sails within 72 hours
Mirror in-app notifications by email.
Drag and drop files here, or browse
PDF, JPG or PNG · up to 10 MB per file
Business-Registration.pdf
Verified412 KB · Uploaded 16 Aug 2026
Packing-List-000245.pdf
96 KB · Uploaded 14 Aug 2026
Delivery-Challan.pdf
One semantic vocabulary across every workflow
RFQ statuses
Quote statuses
Order statuses
Line-item statuses
Stock statuses
Account statuses
Pills & avatars
55 domain statuses are mapped to six semantic tones, so a colour always means the same thing regardless of which workflow the user is in.
KPI tiles, tables, detail grids and cards
Active RFQs
Quotes Received
Orders in Progress
Procurement Value
Compact typography, tabular numerals, semantic status column
Showing 11–20 of 48
Label / value pairs on record pages
Card footer for secondary actions
Inline completion indicators
Steppers, pipelines and activity trails
Multi-step RFQ and registration wizards
Workload distribution across workflow stages
Attributed, timestamped activity trail
RFQ Created
Draft created from RFQ basket with 6 catalogue items.
by Priya Raghavan
Submitted
by Priya Raghavan
Quote Received — Version 1
₹26,410.00, validity 7 days.
by Wei Lin Tan
Quote Revised — Version 2
₹24,850.40 after negotiation.
by Wei Lin Tan
Accepted
Order Created
Modals, drawers, confirmations and toasts
Depth and motion, used only where they carry information
The brief warns against excessive glassmorphism and unnecessary animation, so both effects are rationed. Glass appears only where something real sits behind the panel — maritime artwork, page content scrolling under sticky chrome, or a dimmed backdrop. Blur stays at 14–20px and the tint stays weak; the detail that sells the material is the 1px lit rim, not the blur. Shimmer is a loading affordance first: every skeleton in the product shares one 1.6s sweep, so a loading page reads as a single surface. The two decorative uses — a slow 6s sheen on success surfaces, and a hover-only sheen on primary actions — fire on a moment or on intent, never idly. All of it stops under prefers-reduced-motion.
Blur has a real cost. Every backdrop-filter element becomes its own compositing layer that the browser re-blurs whenever anything behind it changes, so cost scales with how many are on screen. Two frosted chips per product card would put 18 blur layers on the catalogue grid, and at chip size the blur does almost no visible work. So anything that repeats uses the glass-plate-* treatment instead: same appearance, no compositing cost. Real glass is reserved for large, one-off surfaces, which keeps every page to a handful of blur layers — the catalogue is down to two.
tone="dark" — the navy maritime canvas
Ports served
Catalogue SKUs
Quote turnaround
median
Fulfilment
rolling 90 days
With drifting sheen
Reserved for success and hero surfaces
A 6s highlight drift — slow enough to read as a lit material rather than a progress indicator.
tone="light" — sticky chrome, toasts, chips over artwork
Boiler Water Treatment
CHM-BWT-3040
On the light canvas, glass carries a white 90% inner highlight instead of the dark rim, so the panel still reads as raised against pale surfaces.
One shared 1.6s sweep across every placeholder
KPI row
Product grid
Chart
On a dark surface
Hover sheen on primary actions, and the hero text fill
Marine Procurement, Simplified.
.text-shimmer — used exactly once, on the hero accent line.
Empty, loading, error and permission-restricted
Add products from the catalogue, or describe a custom item if what you need is not listed.
We could not load this section. Please retry — if the problem persists, contact support@bluewater.io.
A role boundary made visible
Product master data is Admin-controlled
Create Product, Edit Product, Delete Product, Category Management and Product Specification Management are Admin-only functions and are not available to the sales desk.
A deliberately narrow, validated palette
Most charts in this product measure magnitude for a single series, so they use one navy hue rather than a categorical palette. Where a chart genuinely carries identity — RFQs versus quotes versus orders — it draws from a fixed three-slot categorical order, validated for colour-vision deficiency separation on the light surface (worst all-pairs ΔE 9.2; normal-vision ΔE 24.0). Series are never cycled, and every multi-series chart ships a legend plus a hover tooltip so identity is never carried by colour alone.
Magnitude by named entity
Single-series magnitude over time
Categorical identity, fixed slot order
Counts by period; part-to-whole by rank
Explore the system in context — buyer workspace or the internal workspace.