Hitlist
Ranked by `frequency x utility x gap` to prioritize what should be drawn next.
| Rank | Icon Situation | Category | Status | Priority Score | Selected Source | Used In |
|---|
Stage 1
Atoms and Core Controls
Small, foundational pieces: buttons, fields, direct entry, and low-level interactive controls.
Buttons and States
Forced state matrixes per button variant for contrast and token diagnosis.
Controls
Inputs and Fields
Scrollbars and Popouts
Stage 2
Application Layout and Chrome
Larger structural patterns: nested surfaces, app shells, rails, inspector actions, and tool-heavy compositions.
Inspector Group
Structural card plus secondary console surface for nested settings and readonly references.
Inspector Group
Console Panel
Dashboard Summary
Primary metric paired with a quieter secondary detail panel.
Dashboard Summary
Primary Metric
Revenue trend and main signal.
Detail Panel
Supporting metric, breakdown, or contextual notes.
Content Card with Actions
Title, body, and utility actions kept aligned without turning the card into a toolbar.
Content Card with Actions
Use for content sections that need utility actions without breaking title and body rhythm.
Rail and Snapshot
Chrome and Utility Actions (Source of Truth)
Workspace Chrome
Primary shell framing, rail context, and top-level production actions.
Use fixed-width sidebars for persistent navigation and settings context.
Inspector Utilities
Compact header actions with persistent state and low-emphasis controls.
Inspector Utility States
Master Control Panel
Wide control surfaces should span the stage so range fields and status blocks have room.
Master Control Panel
Exposure
Glow
Pan X
Pan Y
Dataset Routing
Spatial Control Pads
Dense directional widgets for camera and transform control.
Layout Tokens Preview
--ds-layout-rail-w
--ds-layout-panel-w
--ds-hud-card-min-w / --ds-hud-card-max-w
--ds-layout-breakpoint-md
Stage 3
Navigation, Feedback, and Commands
Mid-level interaction structures for validation, tabbed navigation, and command-driven workflows.
Actions and Validation
Try a broader search or clear category/status filters.
Tabs, Skeleton, and Command Palette
Stage 4
Date, Time, and Embedded Data
Specialized inputs and compact data widgets that sit between primitive controls and full data views.
Date and Time
Mini Calendar and Progress
Stage 5
Large Data Views
Full-width, information-heavy patterns that benefit from more room than the smaller component cards.
Table
| Project | Owner | Status | Updated |
|---|---|---|---|
| Quickdash | SV | Active | Today |
| Nomz | SV | Review | Yesterday |
| MapitMine | SV | Blocked | 2 days ago |
| Alias | Mapped Icon | Status | |
|---|---|---|---|
nav.home |
house-line |
Resolved | |
actions.export |
arrow-up-tray |
Review | |
alert.error |
triangle-warning |
Missing |
Charts and Diagrams
Studio Overview
The sidebar gets you to the workspace. The Guide explains how each workspace is organized so the tabs themselves can stay focused on doing the work.
- Use `Theme Builder` to assemble, tune, preview, and export a theme.
- Use `Components` to browse how tokens affect live interface patterns.
- Use `Icons` to manage alias choices, source options, and creation priorities.
- Use `Wiki` to open source-of-truth docs without leaving the Studio.
Theme Builder
Theme Builder is for assembling a preset stack, tuning token groups, checking the result in live preview, and exporting a theme package.
- Preset Layer sets family, hue, scheme, style, typography, scale, and texture.
- Preset Owner narrows the token editor by which preset family owns a token group.
- Token Group switches the current token slice you want to edit.
- Search finds tokens by name, label, section, or owner.
- Preview / Export stays in the side pane so editing and output remain visible together.
Theme name, base theme, and stack recipe controls.
Preset owner, token groups, and search.
Main token editor on the left, preview and export on the right.
Components
Components is a browser for the system, not the place that explains the system. Category chips stay at the top of the workspace while stage navigation lives in the shell panel so the content area can stay focused on demos.
- Category filters the stage cards by the kind of component behavior you want to inspect.
- Stage jumps between the major layers of the component library and tracks the stage currently in view.
- The main content region is for live component browsing, not long documentation blocks.
Use when you want only actions, inputs, data, layout, overlays, or feedback-related components.
Use stage navigation to jump to atoms, chrome, flows, specialized controls, or data-heavy views.
Icons
Icons is a working library browser. Inline filter controls narrow the alias set, the gallery shows grouped candidates, and the shell panel carries status plus inspector actions.
- Search looks across alias names, tags, and app usage.
- Status / Category / Source narrow the working set before you inspect an icon.
- Hitlist ranks which icons should be created next.
- Inspector is for final choice, defaulting, reset, and SVG export.
Grouped icon gallery plus hitlist table.
Registry status plus inspector with source choice and export actions.
Wiki / Docs
Wiki is the source-of-truth document workspace. Use it when you need standards, package workflow, audits, or governance docs without leaving the Studio.
- Core Guide covers foundations, patterns, content UX, and cross-app rules.
- Implementation covers architecture, presets, packages, components, icons, and validation.
- Governance covers the docs index, decisions log, and changelog.