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

Loading states open

Weights 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, StatusDot, Alert, Avatar, SegmentedControl, FormItem, Upload, ValueCopy, CloseButton, SplitButton open

Choice & password — Radio, RadioGroup, Checkbox, StrengthMeter, Chip, ChannelTypePill, ThemedTag, Time, CheckableTag, CronBuilder open

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

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

Citations — CitedText, CitationPill, CitationHoverCard, CitationsFooter, CitationNodeCard open

Tool progress & plan — InlineProgressCard, TodoList, DeepResearchProgress open

Transcript & segmented switch — TranscriptSegment, LanguageChip, SegmentedControl open

Tables & filters — DataTable, TableAction, SearchFilterToolbar, Pagination, Breadcrumb, Description, Tree, TypeBadge, ProviderMark, SecretPreview, MultiSelectFilter, QuotaMeter, PermissionDisplay, Transfer open

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

Feedback & states — Empty, SkeletonText, Spin, Tooltip, MessageToast, Progress, Result open

Charts & KPI — KpiCard, ChartCard, BarChart, LineChart, DonutChart, RankingBadge 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