Manila's Finest · System Design
The DND MNL Design System
The visual language and reusable primitives powering the storefront and the POS & Inventory Management platform — one system across walk-in, website, live-selling, and pre-order channels.
Foundations
Color tokens
A warm neutral base with a near-black ink and an antique-gold accent. Every token is a CSS variable, so a `.dark` class re-themes the whole system for back-office surfaces.
background
#FFFFFF
surface
#FAF9F7
surface-2
#F4F2EF
foreground
#1C1917
foreground-muted
#78716C
border
#E7E5E4
primary
#1C1917
accent
#A97C3E
accent-soft
#F7EFE1
Foundations
Typography
Geist — a modern geometric sans — carries the editorial, high-contrast feel. Hierarchy comes from weight, size, and tracking rather than extra typefaces.
Eyebrow / kicker
Display · 48
Heading 1 · 30
Heading 2 · 24
Heading 3 · 18
Body · 16 — Inventory quantities must be synchronized in real time across the POS, IMS, and website while enforcing strict control over serial numbers, reservations, and inventory movements.
Muted small · 14 — supporting copy, hints, and metadata.
Mono · DND-4821 · PO-0193 · LD-2210
Components
Buttons
Six variants across four sizes. Ink primary for commitment, gold accent for premium moments, danger for destructive actions gated by role.
Components · Signature
Status system
Every serial and order in the platform lives in exactly one state. This shared palette makes those states instantly legible — the same tone means the same thing on the POS, the logistics dashboard, and every report.
Inventory states (§4.9)
Order & fulfillment lifecycle (§6–§12)
Payment & stock type
Components
Metric tiles
Dashboard KPIs for owners and managers — sales, sell-through, and exception counts from the reporting layer (§13).
Sales (MTD)
vs. last month
Sell-through
units sold / available
Pending approval
items in For Approval
RTS rate
returned / shipped
Storefront
Product cards
Image-forward grid for the customer-facing store. Availability is surfaced with the same status tones used in the back office.
Back office
Data table
The workhorse of the POS, logistics, and reporting screens — every row carries a serial, a channel, and a single source-of-truth status.
| Order Ref | Customer | Channel | Serial | Amount | Status |
|---|---|---|---|---|---|
| LS-20260703-014 | J. dela Cruz | Live Selling | DND-4791 | ₱18,995 | For Full Payment Verification |
| WEB-20260703-233 | M. Santos | Website | DND-4788 | ₱7,495 | For Shipping |
| POS-000-104502 | Walk-In | Walk-In | DND-4802 | ₱11,250 | Sold |
| SL-20260702-006 | R. Aquino | Shared Link | PO-0188 | ₱24,500 | In Transit |
| WEB-20260701-198 | K. Reyes | Website | — | ₱5,200 | Expired |
Components
Forms
Order forms are the single source of truth for the customer (§6.2). Inputs, selects, and textareas share one focus treatment.
Customer order form
Shared-link pre-order submission
Customer-entered, free text (§8.4)
Reservation held
Payment verified
Approval overdue
Duplicate reference detected