MaiAgent Design System

Brand

Logo lockups and iconography — never redraw the mark.

Logo lockups open

Iconography open

Colors

Primary, semantic, text, surfaces, chrome, and the 9 preset themes.

Primary open

Semantic open

Brand mark open

Theme presets open

Text ramp open

Surfaces & borders open

Semantic surfaces open

Dark chrome open

Typography

Inter for admin, DM Sans / DM Serif Display / DM Mono for chat.

Heading ramp open

UI text sizes open

Chat typefaces open

Spacing & Motion

Even numbers only. One easing, three durations.

Spacing scale open

Control heights open

Corner radii open

Elevation open

Layout metrics open

Motion open

Components — Live Preview

Interactive React previews rendered from the design system bundle.

Core controls — Button, IconButton, Input, Select, Switch, Checkbox, Tag, Badge, Alert, Avatar, FormItem, Upload, ValueCopy open

App shell — AppLogo, AppHeader, SiderMenu, PageWrapper, PermissionButton, PageHeader, DetailSidebar, TrialBanner open

Chat surface — MessageBubble, MessageActions, ToolChip, TypingIndicator, ChatInputBar, ConversationListItem, SidebarNavItem open

Tables & filters — DataTable, TableAction, SearchFilterToolbar, Pagination, Breadcrumb, Description, Tree open

Surfaces — Card, Modal, Drawer, Tabs, Collapse, Dropdown open

Feedback & states — Empty, Skeleton, Spin, Tooltip, MessageToast, Progress open

Install

Available as npm package (Web) and git dependency (Flutter).

# .npmrc
@playma-co-ltd:registry=https://npm.pkg.github.com

# install
npm install @playma-co-ltd/design-system

# CSS tokens
import '@playma-co-ltd/design-system/css'

# Flutter (pubspec.yaml)
maiagent_design_tokens:
  git:
    url: https://github.com/Playma-Co-Ltd/maiagent-design-system.git
    path: dart