Components
All 22 components the kit ships, by category. Each page carries live examples, a copyable snippet per example, and usage guidance.
General
ButtonAction trigger in five variants and three sizes, with loading and disabled states.
Neutral
Accent
On track
At risk
Breach
BadgeStatus chip with semantic tints and an optional dot.
RK
Ricardos Khoury
President & CEO · Founder
AvatarRound headshot or monogram identity slot, small on cards and large in bio modals.
app name
Brand lockupPlaced master logo with automatic dark-mode swap, and the two-tone product wordmark.
Layout
One centered column, --container = 1200px, side padding --gutter.
ContainerThe shared centered content column every app aligns to.
Grid & RowToken-gapped grid, and a wrapping flex line for button groups.
Primary text on a surface.
Secondary text uses .muted, it re-tunes correctly in dark mode.
Surface & text utilitiesSurface ground and secondary-text helpers that stay correct in dark mode.
console
Main content aligns to the same centered column as the bars above.
App shellFull-bleed header and nav whose content aligns to the shared 1200px column.
Data Display
Why Novus
Info tiles are static, no hover response.
CardBordered surface; interactive cards lift on hover and take a stretched-link trigger.
| Market | Entity | Since |
|---|
| Singapore (HQ) | Novus Technologies Pte Ltd | 2013 |
| Philippines | Novus Transact Philippines Corporation | - |
| Sri Lanka | NovusTech Transact Lanka (Pvt) Ltd | - |
| Indonesia | PT Nova Digital Perkasa | - |
TableData-dense table with tinted header and right-aligned tabular numerals.
1M+touchpoints served
120M+transactions / month
99.8%platform uptime
7countries
StatsKPI cells that reflow instead of colliding, the canonical stat layout.
- The marker sits in a fixed slot; wrapped text aligns under the text, never under the marker.
- Markers render in the accent-text colour and re-tune in dark mode.
- Use for any bulleted content, never fake a bullet as a "› " text run.
BulletsHanging-indent list, wrapped text aligns under the text, never the marker.
LeadersClickable people cards with round avatar, name, and role.
Logo wallClient and scheme proof walls, full-colour marks on white tiles, no hover.
Regulatory standing
BSP-registered Operator of Payment Systems and BancNet member in the Philippines.
Collapse & DisclosureProgressive disclosure behind a click toggle; native details works with JS off.
Acceptacceptance & channel enablement
›
Processswitching, routing, orchestration
›
Controlfraud, reporting, reconciliation
›
Expandnew use cases, partnerships, growth
Value chainLabelled steps joined by › arrows, informational, no hover.
Feedback
Scheduled maintenance window: Sunday 02:00–04:00 SGT.
Settlement file processed.
Certificate expires in 14 days.
Reconciliation breach, review required.
AlertInline banner in the four semantic tones; risk messages are always red.
ModalIn-page detail dialog, native dialog gives focus trap, Esc, and inert background.
Field & InputLabelled text input, select, and textarea with help and error states.
Lead form & CTA rowLead-capture form grid, and the one-row contact CTA.
Navigation
NavHorizontal link bar; the current page carries aria-current.
Theming
Product themesScope classes that re-skin the accent role to a product identity, one accent per view.
