illog Design System
UI components, design tokens, and guidelines for building illog.
Foundation
Color
The color system of the illog design system — Primitive, Light/Dark semantic colors
Typography
Font family, scale, weight, and text style tokens
Spacing
Space tokens for layout gaps and padding
Radius
Border radius tokens
Depth & Shadow
z-index and shadow effect tokens
Icon Size
Icon size tokens
Icons
List of available SVG icons
Components
Button
Basic interaction component to trigger user actions
Box
Styling-capable universal container — foundation building block for all components
Icon
SVG icon component with theme color and size token support
Text
Typography component with text style presets and semantic HTML support
Overlay
Overlay component for modals, dialogs, and side panels
BadgeSelector
Badge-based single select compound component with built-in search and CRUD
TagSelector
Tag-based multi-select compound component with built-in search and CRUD
Center
A layout container that vertically and horizontally centers its children
Inline
Horizontal layout container based on flexbox row
Stack
Vertical layout container based on flexbox column
Portal
Utility component to render children elsewhere in the DOM tree
Input
Styled text input field with error message support
BasicSelector
Generic single-select dropdown with controlled/uncontrolled modes
TimePicker
Start/end date and time range selection compound component
Badge
Color label chip for categorization and status indication
Tag
Color tag chip optimized for multi-select contexts
Card
Clickable list card — interactive content container
Divider
Horizontal/vertical dividing line for visual content separation
SortableTable
Sortable data table with generic type safety
DonutChart
SVG donut chart implemented in pure React without dependencies
HorizontalBar
Horizontal progress bar for displaying progress
TimeDistribution
Data visualization component combining donut chart and legend
Calendar
Time-based calendar grid for weekly/daily schedule display
Dialog
Modal dialog based on the native dialog element
ContextMenu
Custom right-click context menu with nested submenu support
Toast
Notification toast system with auto-dismiss
ToggleMenu
Segmented button group for single selection toggle
Navigation
Sidebar navigation based on React Router NavLink