Design System¶
The QualCoder Design System is a comprehensive PySide6-based component library featuring 180+ reusable, themeable components following Material Design principles.
Overview¶
The design system provides:
- Design Tokens — Consistent colors, spacing, typography, and layout values
- 180+ Components — Buttons, inputs, cards, modals, tables, charts, and more
- Theme Support — Light and dark themes with custom theme registration
- Material Icons — 7,000+ icons via qtawesome (mdi6 prefix)
- Qt Signals — Event-driven interactivity patterns
Quick Example¶
from design_system import (
Button, Input, Label, Card,
COLORS, SPACING
)
# Create a simple form
card = Card()
card.add_widget(Label("Username", variant="title"))
card.add_widget(Input(placeholder="Enter username..."))
card.add_widget(Button("Submit", variant="primary"))
Sections¶
| Section | Description |
|---|---|
| Getting Started | Installation and quick start guide |
| Design Tokens | Colors, spacing, typography, and layout constants |
| Components | 180+ UI components organized by category |
| Patterns | Signal handling, theming, and composition patterns |
| Reference | Module index and dependency information |
Component Categories¶
| Category | Components | Description |
|---|---|---|
| Core | Button, Input, Label, Card, Badge | Fundamental UI elements |
| Icons | Icon, IconText | Material Design Icons |
| Layout | AppContainer, Panel, Sidebar, Toolbar | Application structure |
| Forms | SearchBox, Select, Textarea | User input |
| Navigation | Tab, Breadcrumb, NavList | Navigation patterns |
| Data Display | DataTable, CodeTree, InfoCard | Data presentation |
| Lists | FileList, CaseList, AttributeList | Collection displays |
| Media | VideoContainer, Timeline | Media playback |
| Chat & AI | MessageBubble, ChatInput | AI interface |
| Document | TextPanel, TranscriptPanel | Document handling |
| Feedback | Spinner, Toast, ProgressBar | User feedback |
| Visualization | ChartWidget, NetworkGraph | Data visualization |
| Pickers | TypeSelector, ColorSchemeSelector | Selection widgets |
| Advanced | Modal, ContextMenu, CodeEditor | Complex components |
Integration with Architecture¶
The Design System is the Presentation Layer of QualCoder v2's architecture:
Components receive updates via Qt signals from the SignalBridge, maintaining the separation between pure domain logic and UI.
See the Architecture Overview for how the Design System fits into the larger system.