Flat
KWORKSPACE / 01↗
Project momentum
78%24 tasks complete+12.4%
✓ On trackQ4 · 2026
Opaque · clear and calm
DESIGN THAT CONNECTS.
Thoughtful design,
for your product.
Where ideas become interfaces.
Use carefully crafted components and complete blocks
to create your next experience.
ONE SYSTEM. ENDLESS POSSIBILITIES.
Small details. A meaningful difference.
Workspace
YOUR NEXT WORKSPACE
KA clearer day.
Sample data
Project progress84%This week's progress
Active projects 12Completed 08Team members 06
Design your next experienceDesign system · In progress
Aa
INTERFACE / 001BUILT ON A FOUNDATIONOne foundation. Many experiences.klic.
CRAFTED FOR REAL EXPERIENCES
Where design craft meets engineering standards.
Components Blocks Design tokens CLI MCP API
KLIC / THE SHAPE OF OUR IDENTITYFrom our logo.
From our logo.
To one design language.
The familiar KLiC curves, with light and depth. The original silhouette, a blue identity and a finish considered for each surface. Our design foundation starts with the smallest mark.
Original proportionsA blue identityLight and depth
Explore our logo design ↗Get the light & dark SVG kit ↓ORIGINAL FORM. NEW DIMENSION.01 / LIGHT
ONE SYSTEM · FOUR MATERIALS
Choose your material ↗The same structure. A different depth.
Compare four live surfaces. Layout, type and blue identity stay consistent.
Glass
KWORKSPACE / 01↗
Project momentum
78%24 tasks complete+12.4%
✓ On trackQ4 · 2026
Translucent · softly layered
Solid Glass
RecommendedKWORKSPACE / 01↗
Project momentum
78%24 tasks complete+12.4%
✓ On trackQ4 · 2026
Substantial · balanced clarity
Liquid Glass
KWORKSPACE / 01↗
Project momentum
78%24 tasks complete+12.4%
✓ On trackQ4 · 2026
Luminous · tint, blur and rim
Liquid Glass is a CSS optical approximation using tint, blur and rim; it does not reproduce native refraction.
THE COLLECTION / 01From small details,
From small details,
to complete screens.
Interfaces that make complex work clearer.
Explore, interact, and adapt them to your own work.
SELECTED LIVE PREVIEWS
Workspace intelligence
Information at a glance. Work in one place.
A clearer workflow
A board that makes the next team action clear.
Time, beautifully arranged
One flow from planning to execution.
Everything is connected
Make complex connections clear.
A connected service landscape
Explore service relationships and the impact of failures at a glance.
Parallel work, clearly connected
Make parallel tasks and synchronization points clear.
A considered first impression
A considered first impression.
Details that do the work
Clear foundations for every input.
A guided first experience
Guide the first visit and the next action with care.
WBS work breakdown
Connect task hierarchy and dependencies in one plan.
Sankey flow
Follow the volume from acquisition to conversion.
Gantt schedule
Compare schedules, progress and dependencies together.
247 executable examples share 61 implementation modules. Planned items are listed separately.
MAKE IT YOURS / 02From exploring,
From exploring,
to hands-on experience.
Try a different theme and density.
See how the same design takes on a different character.
LIVE COMPONENTS
Design workspace
Your next idea starts here.
Good experiences begin with small choices.
Create with your team
YOUR DESIGN LANGUAGE
AaClear hierarchy.
A comfortable rhythm.
A comfortable rhythm.
Ready to build100%
Explore token references FROM DESIGN TO CODE / 03Thoughtful design,
Thoughtful design,
closer to implementation.
The same components you discover in the browser.
Use the same names with agents and in your terminal.
Your tools.
Our design language.
Search, inspect the structure, and obtain the source. The web UI, MCP, CLI, and API read the same registry.
PACKAGE
Guide Install KLIC
One package. Choose your package manager.
klic-design · Agent Skill · Library · Motion
Source candidate [email protected] is unpublished. Install commands use public [email protected]. See the package guide for candidate availability.
bun add [email protected]
bunx --bun [email protected] klic version --json~/KLIC
codex mcp add klic --url https://design.klic.co.kr/api/v1/mcpPublic read-only MCP for external clients. In ChatGPT, use the personal plugin.
Your next experience
starts here.
Explore the KLIC library All components and blocks
All components and blocks
Explore item previews, actual source and design adoption guidance.
Components · 109
- Accordion
- Alert
- Alert Dialog
- Anchor
- Aspect Ratio
- Autocomplete
- Avatar
- Avatar Group
- Badge
- Banner
- Bar Chart
- Blockquote
- Bottom Navigation
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Cascader
- Checkbox
- Chip
- Code Block
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data Grid
- Date Picker
- Date Range Picker
- Decision Inbox
- Descriptions
- Dialog
- Donut Chart
- Dropdown Menu
- Dropzone
- Empty State
- Field
- File Upload
- Form
- Ghostty
- Hover Card
- Icon
- Image
- Input
- Input Group
- Input OTP
- Kbd
- Line Chart
- Link
- List
- Loading Overlay
- macOS Terminal
- Mentions
- Menubar
- Message Actions
- Multi Select
- Navigation Menu
- Notification
- Number Input
- Pagination
- Password Input
- Popconfirm
- Popover
- Progress
- Radio Group
- Range Slider
- Rating
- Resizable
- Result
- Scroll Area
- Search Input
- Segmented Control
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Smart Recommendation
- Sparkline
- Spinner
- Splitter
- Statistic
- Stepper
- Steps
- Switch
- Table
- Tabs
- Tag
- Tag Input
- Termius
- Textarea
- Time Picker
- Timeline
- Toast
- Toggle
- Toggle Group
- Tool Call Card
- Toolbar
- Tooltip
- Transfer
- Tree
- Tree Select
- Typography
- Ubuntu Terminal
- Watermark
- Windows PowerShell
Blocks · 237
- Deployment pipeline
- Operations log stream
- Distributed trace waterfall
- File upload queue
- Repository tree view
- Grouped multi-select
- Delivery route status card
- Project progress dashboard
- Payment authorization monitor
- AI email workspace
- Sales follow-up dashboard
- Sales pipeline dashboard
- Report management dashboard
- Activation goals dashboard
- Automation flow operations
- Personal finance overview
- Right drawer · risk review
- Right drawer · task discussion
- Right panel · customer inspector
- Right panel · timeline and related context
- Automation operations dashboard
- AI workspace dashboard
- Sales analytics dashboard
- Testimonial wall
- System logo marquee
- Response editing workspace
- Agent review workspace
- Target attainment bullet
- Daily activity heatmap
- Cohort retention
- Correlation matrix
- Before-after dumbbell
- Centered streamgraph
- Area-proportional treemap
- Cumulative waterfall
- Trend spark table
- Duration state timeline
- Price-level order book
- Cumulative market depth
- Peak drawdown
- Forecast interval fan
- OHLC candlestick
- Probability calibration
- Scatter brush selection
- Observation beeswarm
- Violin distribution
- Distribution histogram
- Release gate timeline
- Milestone baseline variance timeline
- Team handoff swimlane timeline
- Agent execution waterfall
- Live plan vs actual timeline
- Hover response and recent changes
- Retry and timeout
- Guarded state transitions
- Parallel execution and join
- Decision and merge
- Directional tapered connection
- Offset relationship labels
- Nested feedback lanes
- Hyperedge junction
- Port fanout routing
- Rounded detour lanes
- Bidirectional connection
- Dashed connection
- Step connection
- Bezier curve
- Elbow connection
- Straight connection
- Directed radial exchange ribbons
- Conserved flow ribbons
- Detected crossing bridges
- Broadcast bus backbone
- Compatible-group edge bundling
- Container gateways
- Self-loops and feedback lanes
- Multiple relations and return paths
- Metro parallel strands
- Obstacle-aware orthogonal routing
- Service flow diagram
- Customer retention and NRR expansion portal (PulseGuard)
- Multicloud FinOps cost optimization portal (CloudPulse)
- Data pipeline and lineage studio (StrataFlow)
- Product A/B experiments and feature flag console (LaunchGrid)
- Security compliance and audit evidence portal (VantaShield)
- Agent task lifecycle · integrated board
- Agile sprint Kanban board
- Squad swimlane Kanban board
- B2B sales pipeline board
- SRE incident triage board
- Hiring pipeline board
- Three-column project deadline and sharing cards
- Holographic graphic and simulated trading feature card
- Grid canvas and 24/7 monitoring feature card
- Sponsor and official partner cards
- Delivery details and tracking card
- Collaborative meeting and video call card
- Advisor knowledge base and document conflict dashboard
- Client escalation and SLA risk dashboard
- Advisor methodology and guardrail rule builder
- Practice profitability and playbook contribution dashboard
- Client diagnostic and 90-day roadmap dashboard
- Workspace app integration dialog
- Permanent resource deletion confirmation
- Document sharing and access permissions
- New API access token dialog
- Bulk CSV import dialog
- Multitenant workspace header
- Folder tabs and period filter navigation
- Floating bulk action dock
- Product module mega menu
- System status and canary deployment banner
- Slash-command block editor
- Technical Markdown editor
- Collaborative editor
- Incident postmortem editor
- Email template editor
- Agent task lifecycle · standalone task list
- Security audit and activity feed
- Unified notifications and mentions
- Commit and production deployment history
- Team members and on-call directory
- Registered webhook endpoints
- No search or filter results
- Create the first workspace project
- Access restricted state
- Disconnected data source state
- All tickets and approvals completed
- Team and approval permissions
- Workspace and branding settings
- Enterprise SSO and security policy
- Notification routing matrix
- Developer API keys and request quotas
- Subscription and payment settings
- Project and task update feed
- Floating toasts and action snackbars
- Approval and access request center
- 24/7 incident paging and escalation
- Document mentions and threaded discussions
- Daily executive briefing and priorities
- Ten-year financial statement and ROI formula sheet
- Smart purchasing and supply-chain cell editor
- Master-detail inspector and multitag editor
- Before-and-after bulk editing sandbox
- Environment policy and key-value matrix editor
- Issue detail sheet
- Distributed trace inspector
- Customer 360 profile sheet
- Query builder filter sheet
- Before-and-after audit sheet
- Lead routing flow
- Reconciliation and approval DAG
- AI scoring stream
- CI/CD deployment flow
- Webhook workflow builder
- Data lineage flow
- Service topology map
- Approval branching flow
- Multilevel sidebar shell
- Dual-rail three-pane shell
- Top-navigation portal shell
- Split inbox shell
- Full-screen canvas shell
- WBS planning and SVG Gantt
- Project schedule and dependencies Gantt
- Resource utilization and allocation Gantt
- Quarterly milestone roadmap
- Sprint release train
- Critical path and float analysis
- Initial setup checklist
- Role-based onboarding survey
- Spotlight guided tour
- SDK integration quickstart
- Third-party data migration
- Cluster provisioning wizard
- Plan and renewal wizard
- RBAC role creation wizard
- Scheduled report wizard
- SAML identity provider wizard
- Release and freeze calendar
- Marketing campaign calendar
- SRE on-call rotation calendar
- Room and equipment booking
- Security compliance schedule
- KLIC blue glow card login
- Split grid and glass ribbon login
- B2B workspace sign-up and team joining
- Two-factor authentication and passkey verification
- Password recovery and elevated reauthentication
- Open shifts and optimized assignment schedule
- Field engineer dispatch and duty coverage
- Daily stand-up and time-block schedule
- Technical interview scheduling
- Global region maintenance schedule
- Customer support global shift planner
- Daily reconciliation and batch schedule
- Executive KPI strip
- Availability and response statistics
- Resource quota statistics
- Conversion benchmark statistics
- DORA engineering statistics
- Incident detection and recovery timeline
- Equipment procurement and delivery timeline
- Release notes timeline
- Customer contract history
- Code review execution timeline
- Urgent incident report form
- Software procurement request
- Webhook endpoint settings form
- Database connection and SSL form
- Feature flag targeting form
- Revenue and funnel Sankey flow
- Error budget runway slope chart
- Cash inflow and API health radial chart
- Error budget burn and deployment freeze tracker
- Six-stage deployment promotion pipeline
- Batch execution history tracker
- Capital inflows 3D stacked columns
- Cloud spend composition
- Stacked active-user area
- Self-serve conversion funnel
- Customer support ticket queue
- Striped treasury ledger grid
- SLA risk index
- Course catalog
- Product catalog
- Access permissions matrix
- Shared drive folders
- Release approval queue
- Subtask tracker
- Plan upgrades and renewals
- App integrations and synchronization health
- Scheduled and on-demand reports
- Payment and billing history
- Workspace overview
- Roadmap stages
- Revenue by region