TOTAL ASSETS
$2.48M12.5%
Alexandria Design System
Component Showcase — Nam Leong Quotation Generator
Design Tokens — Complete Color Palette
Primary & Status Colors
Primary
#3366CC
--color-primary
Brand, actions, links, active states
Primary Soft
rgba(51,102,204,0.1)
--color-primary-soft
Active nav bg, hover tints, focus rings
Info
#3366CC
--color-info
Informational status (= primary)
On Primary
#FFFFFF
--color-on-primary
Text/icons on primary backgrounds
Success
#10B981
--color-success
Positive: Active, Approved, Indexed
Warning
#F59E0B
--color-warning
Pending, draft, Emerging states
Error
#EF4444
--color-error
Destructive, error, validation
Status Tints — Soft Backgrounds for Banners & Badges
INFORMATION
New catalog version available
bg: var(--color-primary-soft)
SUCCESS
247 products matched
bg: var(--color-success-soft)
WARNING
5 items need review
bg: var(--color-warning-soft)
ERROR
Import failed
bg: var(--color-error-soft)
Primary Color — Usage Spectrum
Solid Primary
70%
40%
20%
10% (soft)
Solid for buttons & active states. 10% (primary-soft) for hover tints & active nav backgrounds. Intermediate opacities for overlays & progress indicators.
Text Colors — Slate Palette
Text — The quick brown fox jumps over the lazy dog
Primary body text, headings
#0F172A
Slate 900
Text Secondary — The quick brown fox jumps over the lazy dog
Metadata, inactive labels
#64748B
Slate 500
Text Tertiary — The quick brown fox jumps over the lazy dog
Placeholders, disabled, timestamps
#94A3B8
Slate 400
Background Colors
BG Layout
Main app background
--color-bg-layout → #F8FAFC
BG Container
Cards, panels, content areas
--color-bg-container → #FFFFFF
BG Elevated
Modals, dropdowns, floating
--color-bg-elevated → #FFFFFF
Border Colors
Border
--color-border → #E2E8F0
Standard borders (Slate 200)
Border Secondary
--color-border-secondary → #F1F5F9
Subtle borders (Slate 100)
Contrast Pairs — Foreground on Background
Aa
On-Primary / Primary
White on Blue
Aa
Primary / Primary-Soft
Blue on Blue 10%
Aa
Text / Container
Slate 900 on White
Aa
Text / Layout
Slate 900 on Slate 50
Aa
Text-Secondary / Container
Slate 500 on White
Aa
Text-Tertiary / Container
Slate 400 on White
Aa
Success / White
Green on White
Aa
Error / White
Red on White
Aa
Warning / White
Amber on White
Aa
White / Dark
White on Slate 900
Complete Token Reference
| Swatch | Token | Hex | Usage |
|---|---|---|---|
--color-primary | #3366CC | Brand, actions, links, active states | |
--color-primary-soft | rgba(51,102,204,0.1) | Active nav bg, hover tints, focus rings | |
--color-info | #3366CC | Informational status (= primary) | |
--color-on-primary | #FFFFFF | Text/icons on primary backgrounds | |
--color-success | #10B981 | Positive: Active, Approved, Indexed | |
--color-warning | #F59E0B | Pending, draft, Emerging states | |
--color-error | #EF4444 | Destructive, error, validation | |
--color-text | #0F172A | Primary body text, headings | |
--color-text-secondary | #64748B | Metadata, inactive labels | |
--color-text-tertiary | #94A3B8 | Placeholders, disabled, timestamps | |
--color-bg-layout | #F8FAFC | Main app background | |
--color-bg-container | #FFFFFF | Cards, panels, content areas | |
--color-bg-elevated | #FFFFFF | Modals, dropdowns, floating | |
--color-border | #E2E8F0 | Standard borders (Slate 200) | |
--color-border-secondary | #F1F5F9 | Subtle borders (Slate 100) | |
--surface-white | #FFFFFF | Surface tier | |
--surface-50 | #F8FAFC | Surface tier | |
--surface-100 | #F1F5F9 | Surface tier | |
--surface-200 | #E2E8F0 | Surface tier | |
--surface-300 | #CBD5E1 | Surface tier | |
--surface-400 | #94A3B8 | Surface tier |
Typography — 4-Font System
Noto Serif — Display Headings
H1 / Display
48px / 700 / -0.02em
48px / 700 / -0.02em
Industry Curator
H2 / Title
36px / 700 / -0.01em
36px / 700 / -0.01em
Global Registry
H3 / Section
24px / 600
24px / 600
Archive Standards
Inter — Data UI (Tables, Forms, Nav, Descriptions)
Body — 16px / 400
Manage the taxonomic structure of market sectors and industrial domains. These definitions serve as the primary matching anchors for procurement and supply chain intelligence.
Body Semibold — 16px / 600
Precision Aerospace — High-tolerance component manufacturing
Small / Meta — 14px / 500 / 0.01em
Showing 1 to 5 of 42 entries — Last updated 30 Mar 2026
Public Sans — Labels, Metadata, Tags
Label — 11px / 600 / 0.08em / Uppercase
TOTAL CATEGORIESLINKED PRODUCTSDATA HEALTHNAME & ARCHIVE CODE
Tag — 12px / 700 / 0.05em / Uppercase
GLOBALACTIVEEMERGINGUNDER REVIEW
JetBrains Mono — IDs & Codes
ARC-AS-9022ARC-RE-1140IVA-200PRD-001
Surface Tiers — Slate Scale
White
#FFFFFF
--surface-whiteSlate 50
#F8FAFC
--surface-50Slate 100
#F1F5F9
--surface-100Slate 200
#E2E8F0
--surface-200Slate 300
#CBD5E1
--surface-300Slate 400
#94A3B8
--surface-400Elevation & Shape
Flat (No Shadow)
Borders only. Used for layout surfaces, table rows.
border: 1px solid var(--color-border)
Standard (shadow-sm)
Cards, stat cards, content panels.
.card-surface
Elevated (shadow-md)
Modals, dropdowns, floating panels.
.card-elevated
Border Radius Scale
0px
--radius-none
Dividers, table cells
2px
--radius-sm
Tags, small badges
4px
--radius-default
Buttons, inputs, tables
6px
--radius-md
Elevated cards, dropdowns
8px
--radius-lg
Cards, modals, panels
12px
--radius-xl
Large panels, hero sections
16px
--radius-2xl
Feature cards, onboarding
pill
--radius-full
Avatars, pills, toggles
Default (4px) remains the workhorse for most controls. Use larger radii for containers and floating elements, smaller for compact/dense UI.
Spacing System — 4px Base Unit
--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px
Container Padding
X-axis: 32px (space-8) — Y-axis: 48px (space-12)
Ant Design — Theme Verification
Buttons — All Variants (padding: 10px 24px)
Buttons — Sizes
Buttons — Danger / Destructive Actions
Buttons — Icon Only (Toolbar Actions)
Buttons — Icon + Label Combinations
Buttons — Loading States
Buttons — Active:scale Press Feedback
Click and hold any button to see the scale(0.98) press feedback.
Inputs (hover: solid primary border)
Tags — Status Presets (Public Sans, caps, tracked)
GLOBALACTIVEEMERGINGSECTORUNDER REVIEWERRORINDEXED
Table (headerBg: Slate 50, headerColor: Slate 500)
| PRODUCT NAME | SKU | SEGMENT | PRICE |
|---|---|---|---|
| Industrial Valve A200 | IVA-200 | Oil & Gas | $1,250.00 |
| Copper Pipe 25mm | CPP-025 | Marine & Offshore | $45.50 |
| Steel Flange DN100 | SFL-100 | Petrochemical | $320.00 |
Text & Color Combinations
Text Hierarchy — All 3 Text Tiers on White
Primary Text (Slate 900) — Product names, headings, key data
Secondary Text (Slate 500) — Descriptions, metadata, inactive labels
Tertiary Text (Slate 400) — Timestamps, placeholders, disabled text
Status Text — Semantic Color Usage
Catalog indexed successfully — 247 products matched
Processing batch upload — estimated 3 minutes remaining
5 products have incomplete specifications — review recommended
Import failed — file format not recognized
Text on Colored Backgrounds
White on Primary Blue
Used for primary action buttons and active nav states
Primary on Primary Soft
Active sidebar items, selected states, focus rings
Primary Text on Slate 100
Hover states, secondary backgrounds, table headers
Primary Text on Slate 50
Layout background, subtle content areas
Status Banners — Colored Backgrounds
Information
A new catalog version is available for import.
Success
All 247 products have been indexed and matched.
Warning
5 products have incomplete data and may not match correctly.
Error
Import failed. The uploaded file could not be parsed.
Mixed Typography — Real-World Composition
PRODUCT DETAIL
Industrial Valve A200
High-pressure butterfly valve designed for marine and offshore applications. Rated for continuous operation at 250 PSI with corrosion-resistant coating.
IVA-200ACTIVEUpdated 2 hours ago
CUSTOMER PROFILE
Precision Aerospace Pte Ltd
Tier 1 supplier for high-tolerance aerospace components. Primary contact: Michael Lim, Senior Procurement.
CUS-PA-001GLOBALMember since Jan 2024
Card Patterns — Surface Variations
card-surface — Standard
Product Catalog
247 products across 12 categories. Last sync 2 hours ago.
card-elevated — Floating
Quick Actions
Elevated cards for modals, dropdowns, and floating panels.
Stat Cards — Colored Top Accent
TOTAL PRODUCTS
247
+12 this month
MATCHED
198
80.2% match rate
PENDING REVIEW
37
Needs attention
ERRORS
12
Import failures
Feature Card — Gradient Primary
AI MATCHING ENGINE
Smart Quotation Matching
Our AI engine analyzes product specifications, industry requirements, and historical data to generate accurate quotation matches in seconds.
Content Cards — Mixed Layouts
Products
Master data management
Manage your product catalog, specifications, and pricing data for quotation generation.
Matching
AI-powered results
View and approve AI-generated matches between customer requirements and your product catalog.
Reviews
Pending approval
Items flagged for manual review due to low confidence scores or missing specifications.
List Card — Bordered Rows
Industrial Valves
42 productsACTIVE
Marine Equipment
31 productsACTIVE
Precision Tools
18 productsEMERGING
Safety Equipment
7 productsUNDER REVIEW
Dark Card — Inverted Surface
SYSTEM STATUS
All Systems Operational
The matching engine, catalog indexer, and quotation generator are all running normally.
99.9%
Uptime
142ms
Avg Response
3
Queued Jobs
Atoms — Base Components
Button — AntD Wrapper
Standard Variants
With Icons
States
Tag — Native `color` + `.text-tag` (theme-driven presets)
Preset colors (DESIGN_SYSTEM)
GLOBALSECTORACTIVEINDEXEDEMERGINGUNDER REVIEWERROR
Filled variant
GLOBALACTIVEEMERGINGERROR
Manual color override
CUSTOMCYANMAGENTA
StatValue — Numeric Display with Trend
2,84712.5%
Total Products
2,3418.3%
Active Products
1563.2%
Under Review
24
Categories
Additional Variants
92%
AI Confidence
48,75015.2%
Estimated Cost
124.1%
Pending Reviews
Avatar — Ant Design (re-exported atom)
With Image (32 / 40 / 64)
Initials as children (32 / 40 / 64)
MLPSWT
No image (Ant Design default icon)
DataCell — Icon + Primary / Secondary Text
With Icon + Primary + Secondary
Industrial Valve A200High-pressure butterfly valve for marine applications
Without Icon
Copper Pipe 25mmStandard grade copper tubing
With Avatar as Icon
MLMichael LimSenior Procurement Officer
Primary Text Only
Single-line cell content
Molecules — Composite Components
StatCard — Label + StatValue + optional `renderExtra` slot
With renderExtra (icon slot)
Product Stats (from mock data)
Total Products
2,84712.5%
Active Products
2,3418.3%
Under Review
1563.2%
Categories
24
Industry Stats (from mock data)
Total Industries
185.6%
Global Scope
8
Emerging Sectors
433.3%
NavItem — Sidebar Navigation Link
Active vs Inactive States
Hover to see interaction
Active item has a 3 px left blue border, blue text, and light blue background. Inactive items highlight on hover.
FormField — Label + Input + Error
Category is required
FormDrawer + ProductForm — Sticky chrome, body spin while saving
Sample drawer shows scrollable body; loading drawer shows disabled actions + Spin; product drawer runs real validation (no API call).
BreadcrumbNav — Uppercase Breadcrumb
Standard Path
Deep Path
FileListItem — Upload States
draft_manifest.xlsx120 KB
Pending
catalog_2026_q1.xlsx2.1 MB
Indexed
pricing_update_mar.csv640 KB
ErrorInvalid column format
requirements_pacific_eng.pdf3.4 MB
62%
rfq_keppel_marine.xlsx1.8 MB
Indexed
DataTable — Ant Design Table + Alexandria header/cell typography
From mockProducts (`.text-label` headers, `.text-data` cells)
| PRODUCT NAME | SKU | SEGMENT | SIZE | SOURCE | PRICE |
|---|---|---|---|---|---|
| Industrial Valve A200High-pressure industrial valve | IVA-200 | Oil & Gas | 200 | Price Table - 29 Oct 2025 Data .xlsx | $1,250.00 |
| Copper Pipe 25mmStandard copper piping | CPP-025 | Marine & Offshore | 25 | — | SGD 45.50 |
| Steel Flange DN100Stainless steel flange | SFL-100 | Petrochemical | 100 | — | $320.00 |
| Gasket Set PremiumPremium gasket set | GSP-001 | — | — | — | MYR 85.00 |
Notes
Use Ant Design columns and native table features; this wrapper only applies semantic typography classes.
SectionHeader — Title + Subtitle + Action Slot
Title Only
Products
Title + Subtitle
Industry Registry
Manage the taxonomic structure of market sectors and industrial domains.
Title + Subtitle + Action Button
Master Data — Products
Browse and manage the product catalog for quotation matching.
EmptyState — No Data / No Results
No Products Found
No Products Found
There are no products in the catalog yet. Add your first product to get started.
Search Returned No Results (with action)
Search Returned No Results
No items matched your search criteria. Try adjusting your filters or search terms.
SearchInputGroup — Search + Optional Category Filter
With Category Dropdown (Industries)
Oil & Gas
Search Only (no categories)
Organisms
SideBar — 256 px Fixed Navigation
TopBar — Sticky Header with Tab Navigation
Without notifications
Templates
DashboardLayout
Full application shell: fixed SideBar (256 px) + sticky TopBar (64 px) + scrollable Content area. Composes SideBar and TopBar organisms inside AntD Layout / Sider / Header / Content.
Open Dashboard Layout →AuthLayout
Split-panel authentication layout: left editorial branding panel (warm gradient, serif headline, security badge) + right form slot. Bottom status bar with active curators count and system status.
Route: /login (Phase 6)