AegisX Design System

North star

Five principles, in five words.

Every design decision serves one of these. If it doesn't, it doesn't ship.

Calm

Color is expensive. Use only where meaning changes.

↑

High-contrast

WCAG 2.1 AA minimum. AAA preferred for body text.

ก

Thai-first

IBM Plex Sans Thai leads. Line-height ≥ 1.5 for vowel marks.

⚕

Clinical-dense

14px body, 40px row height, 48px display max.

⌿

No ornament

Border > shadow > gradient. Every pixel earns its seat.

→ Read the full design principles

Layer 1 + 2

Foundations.

Tailwind Zinc + Indigo · IBM Plex Sans Thai · 14px clinical body. Three-layer tokens: primitive → semantic → component.

Color · Zinc + Indigo

Neutral Zinc dominates surfaces. Indigo for actions. 5 status hues for messaging.

Explore palette →

Typography · IBM Plex

Thai-first stack. Display 24–48px, body capped at 14px for clinical density.

AegisX สวัสดี Display headline Body 14px · บอดี้ภาษาไทย

Explore typography →

Spacing · 4pt grid

xs → 4xl scale. Default gap 16px, card padding 24px.

Explore spacing →

Shadow · Untitled UI soft

elevation-0 to 4. Subtle borders do most of the work; shadows only for floating UI.

Explore elevation →

Layer 3

Components.

Token-driven primitives. Importable as tokens/css/components.css or pulled through Angular Material via the bridge.

Buttons

Badges Active Pending Rejected Draft New

Alert

Lab results received

HN-44821 · Reviewed by Dr. Chaiyaphum

Field

Patient ID

→ View all components in the component preview

Identity

Brand.

Pick the lockup that matches your background. Click any tile to download the SVG.

horizontal-light.svg↓

horizontal-dark.svg↓

horizontal-mono.svg↓

horizontal-mono-inverse.svg↓

vertical-light.svg↓

vertical-dark.svg↓

icon-light.svg↓

icon-dark.svg↓

Brand background

brand/aegisx-brand-bg.svg ↓ download

→ Social media assets (18 PNGs) + favicons available on the mockups page

153 mono icons · 13 categories

Icon library.

Click any icon to copy its <mat-icon> snippet.

analytics1

dashboard-bi

back-office2

cgd

cost-center

clinical30

appointment

blood-bank

checkup

cssd

dental

discharge

emergency

forensic

hemodialysis

home-health

icu

infection-control

ipd

kiosk

maternal

med-records

nursing

nutrition

occupational-health

opd

ot-manage

pharmacy

queue

referral

registration

rehab

special-clinic

surgery

telehealth

thai-med

compliance4

complaint

internal-audit

quality-ha

risk-mgmt

diagnostics3

laboratory

pathology

radiology

facilities8

cafeteria

facilities

laundry

meeting-room

security

staff-housing

vehicle

waste

finance3

billing

nhso-claims

revenue

hr5

duty-schedule

leave

social-security

social-work

training

inventory29

alert

app-inventory

auth-lock

barcode-scan

bin-location

budget-ledger

dashboard

delivery

dispensing

drug-interaction

drug-master

drug-return

fefo-expiry

goods-receive

inv-budget

inv-procurement

inv-substore

inv-warehouse

lot-tracking

purchase-order

purchase-requisition

stock-count

stock-overview

supplier

tmt-catalog

transfer

ven-abc

wave-picking

zone-picking

platform9

api-integration

audit-log

integration

monitoring

multi-site

organization

rbac

settings

users

thai-integration6

thai-43files

thai-dmsic

thai-drg

thai-e-referral

thai-icd10

thai-moph

tools4

help-center

migration

notifications

report-builder

uncategorised49

act-add

act-cancel

act-copy

act-delete

act-duplicate

act-edit

act-export

act-filter

act-import

act-more

act-print

act-refresh

act-save

act-search

act-sort

empty-no-data

empty-no-permission

empty-no-results

empty-offline

empty-welcome

err-alert-triangle

err-ban

err-circle-alert

err-clock

err-lock

err-rotate-ccw

err-search

err-server-crash

err-shield-alert

err-wifi-off

err-wrench

file-excel

file-generic

file-image

file-pdf

file-word

file-zip

notify-email

notify-line

notify-push

notify-sms

st-active

st-approved

st-cancelled

st-draft

st-expired

st-locked

st-pending

st-rejected

Pick your lane

Two ways in.

Developers npm

Install via GitHub Packages, then import tokens or component CSS directly.

.npmrc# In repo root
@aegisx-platform:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

terminalpnpm add @aegisx-platform/design-system

styles.scss@import '@aegisx-platform/design-system/tokens/css/tokens.css';
@import '@aegisx-platform/design-system/tokens/css/components.css';
// Angular Material v3
@use   '@aegisx-platform/design-system/tokens/scss/material-theme';
@use   '@aegisx-platform/design-system/tokens/scss/material-bridge';
@use   '@aegisx-platform/design-system/tokens/scss/material-overrides';

Native bindings

tokens/tailwind/tailwind-preset.cjs — Tailwind v3 preset
tokens/ios/AegisXTokens.swift — SwiftUI
tokens/android/{colors,dimens}.xml — Android resources
tokens/flutter/aegisx_tokens.dart — Flutter

→ Full guide: Angular Material setup

Designers Figma

Pull tokens into Figma via Tokens Studio. Get the brand asset bundle from the brand section above.

tokens-studio config# In Figma → Tokens Studio plugin
File: tokens/aegisx-tokens.json       # base set
File: tokens/aegisx-tokens-dark.json  # dark overrides

# Sync workflow:
# 1. Designer edits in Figma → exports back to JSON
# 2. Engineer ports change into dtcg/*.json
# 3. pnpm tokens:studio regenerates aegisx-tokens.json

Reference docs

Design principles — five pillars + domain-token policy
Tokens spec — three-layer architecture
Live token preview — palette, typography, spacing
A11y audit — WCAG contrast for every pair

→ Brand assets in the Brand section above

Design system for the AegisX Hospital Platform.