Mango ERP Design System

CI Palette

Primary brand reads as Mango green, supported by deep teal navigation, white dashboard surfaces, and blue only as a secondary data accent.

Mango Green#00804c

Primary CTA, headline emphasis, success.

Deep Teal#003f45

Navigation bars and dark brand surfaces.

Lime#72db5f

CTA gradient and optimistic highlights.

Navy Ink#1f2937

Primary text and dashboard labels.

Data Blue#007dfc

Secondary links, analytics, route highlights.

Amber#f59e0b

Warnings, delay risk, attention.

Red#ef4444

Critical exception only.

Typography

Display / UI

Manage Every Project with Mango ERP

Plus Jakarta Sans for English UI and dashboard density.

Thai body

ระบบ ERP สำหรับธุรกิจรับเหมาและอสังหาริมทรัพย์

Sarabun keeps Thai copy readable inside handbooks and form-heavy demos.

Component Primitives

Open Demo 2 AI Live · Mock Mode On track

Operational Card

Use white cards with 8px radius, low blue-tinted shadow, and crisp borders.

Executive Surface

Use navy gradients only for high-level summary moments.

Usage Contract

Load /mango-design-system.css before page-specific CSS. Page CSS may map local variables to Mango tokens, but should not introduce a separate dominant palette.