Studio library One shared source for people and agents Every component understands its job. Choose any interface piece. See when it belongs, what can happen, what it must show, what the product still owns, and what has to work before it ships.
179 complete guides The same maintained instructions power this room, the public handoff, the installer, the agent skill, and the release checks.
10 families 11 visual kits 1 shared contract
Foundations Color Swatch See how Color Swatch shapes every screen. Foundations Type Specimen See how Type Specimen shapes every screen. Foundations Spacing Guide See how Spacing Guide shapes every screen. Foundations Radius Guide See how Radius Guide shapes every screen. Foundations Shadow Guide See how Shadow Guide shapes every screen. Foundations Focus Ring See how Focus Ring shapes every screen. Foundations Separator See how Separator shapes every screen. Foundations Surface See how Surface shapes every screen. Foundations Container See how Container shapes every screen. Foundations Stack See how Stack shapes every screen. Actions Button Button keeps the next move clear and touchable. Actions Button Group Button Group keeps the next move clear and touchable. Actions Icon Button Icon Button keeps the next move clear and touchable. Actions Split Button Split Button keeps the next move clear and touchable. Actions Menu Button Menu Button keeps the next move clear and touchable. Actions Toggle Button Toggle Button keeps the next move clear and touchable. Actions Toggle Group Toggle Group keeps the next move clear and touchable. Actions Segmented Control Segmented Control keeps the next move clear and touchable. Actions Floating Action Button Floating Action Button keeps the next move clear and touchable. Actions Link Button Link Button keeps the next move clear and touchable. Actions Copy Button Copy Button keeps the next move clear and touchable. Actions Favorite Button Favorite Button keeps the next move clear and touchable. Actions Toolbar Toolbar keeps the next move clear and touchable. Actions Bulk Action Bar Bulk Action Bar keeps the next move clear and touchable. Forms Input Input collects a choice without hiding its state. Forms Textarea Textarea collects a choice without hiding its state. Forms Select Select collects a choice without hiding its state. Forms Checkbox Checkbox collects a choice without hiding its state. Forms Checkbox Group Checkbox Group collects a choice without hiding its state. Forms Radio Group Radio Group collects a choice without hiding its state. Forms Switch Switch collects a choice without hiding its state. Forms Slider Slider collects a choice without hiding its state. Forms Range Slider Range Slider collects a choice without hiding its state. Forms Progress Show determinate progress for work whose completion can be measured. Forms Meter Show a measured value inside a known range, such as storage or score. Forms File Upload Select files and make upload progress, cancellation, failure, retry, and completion unmistakable. Forms Dropzone Add drag-and-drop file selection without removing the native file picker. Forms OTP Input OTP Input collects a choice without hiding its state. Forms Search Field Search Field collects a choice without hiding its state. Forms Combobox Combobox collects a choice without hiding its state. Forms Date Picker Date Picker collects a choice without hiding its state. Forms Time Input Time Input collects a choice without hiding its state. Forms Number Input Number Input collects a choice without hiding its state. Forms Password Input Password Input collects a choice without hiding its state. Forms Color Input Color Input collects a choice without hiding its state. Forms Rating Rating collects a choice without hiding its state. Forms Field Field collects a choice without hiding its state. Forms Inline Edit Inline Edit collects a choice without hiding its state. Navigation Tabs Tabs keeps place and direction easy to scan. Navigation Breadcrumb Breadcrumb keeps place and direction easy to scan. Navigation Pagination Pagination keeps place and direction easy to scan. Navigation Stepper Stepper keeps place and direction easy to scan. Navigation Sidebar Sidebar keeps place and direction easy to scan. Navigation Topbar Topbar keeps place and direction easy to scan. Navigation Bottom Nav Bottom Nav keeps place and direction easy to scan. Navigation Navigation Menu Navigation Menu keeps place and direction easy to scan. Navigation Command Menu Command Menu keeps place and direction easy to scan. Navigation Filter Tabs Filter Tabs keeps place and direction easy to scan. Navigation View Switcher View Switcher keeps place and direction easy to scan. Navigation Page Header Page Header keeps place and direction easy to scan. Navigation Back Link Back Link keeps place and direction easy to scan. Navigation Anchor Nav Anchor Nav keeps place and direction easy to scan. Navigation Table Of Contents Table Of Contents keeps place and direction easy to scan. Navigation App Switcher App Switcher keeps place and direction easy to scan. Overlays Dialog Dialog brings a focused task forward without losing context. Overlays Alert Dialog A real focus-contained confirmation surface with a safe initial action and complete keyboard behavior. Overlays Sheet Sheet brings a focused task forward without losing context. Overlays Drawer Drawer brings a focused task forward without losing context. Overlays Popover Popover brings a focused task forward without losing context. Overlays Tooltip Tooltip brings a focused task forward without losing context. Overlays Dropdown Menu Dropdown Menu brings a focused task forward without losing context. Overlays Context Menu Context Menu brings a focused task forward without losing context. Overlays Hover Card Hover Card brings a focused task forward without losing context. Overlays Command Palette Command Palette brings a focused task forward without losing context. Overlays Lightbox Lightbox brings a focused task forward without losing context. Overlays Action Menu Action Menu brings a focused task forward without losing context. Feedback Badge Badge makes the current state visible at a glance. Feedback Alert Alert makes the current state visible at a glance. Feedback Banner Banner makes the current state visible at a glance. Feedback Toast Toast makes the current state visible at a glance. Feedback Snackbar Snackbar makes the current state visible at a glance. Feedback Empty State Empty State makes the current state visible at a glance. Feedback Skeleton Skeleton makes the current state visible at a glance. Feedback Loading Dots Loading Dots makes the current state visible at a glance. Feedback Spinner Spinner makes the current state visible at a glance. Feedback Status Dot Status Dot makes the current state visible at a glance. Feedback Progress Card Progress Card makes the current state visible at a glance. Feedback Error State Error State makes the current state visible at a glance. Feedback Success State Success State makes the current state visible at a glance. Feedback Offline State Offline State makes the current state visible at a glance. Data Card Card turns information into a readable, useful object. Data Avatar Avatar turns information into a readable, useful object. Data Avatar Group Avatar Group turns information into a readable, useful object. Data Table Table turns information into a readable, useful object. Data Data Table Data Table turns information into a readable, useful object. Data Description List Description List turns information into a readable, useful object. Data List List turns information into a readable, useful object. Data List Item List Item turns information into a readable, useful object. Data Stat Stat turns information into a readable, useful object. Data Stat Group Stat Group turns information into a readable, useful object. Data Timeline Timeline turns information into a readable, useful object. Data Activity Feed Activity Feed turns information into a readable, useful object. Data Calendar Calendar turns information into a readable, useful object. Data Agenda Agenda turns information into a readable, useful object. Data Accordion Accordion turns information into a readable, useful object. Data Collapsible Collapsible turns information into a readable, useful object. Data Carousel Carousel turns information into a readable, useful object. Data Bar Chart Bar Chart turns information into a readable, useful object. Data Donut Chart Donut Chart turns information into a readable, useful object. Data Tree View Tree View turns information into a readable, useful object. Patterns App Shell App Shell assembles related pieces into a complete task. Patterns Auth Card Auth Card assembles related pieces into a complete task. Patterns Sign In Form Sign In Form assembles related pieces into a complete task. Patterns Sign Up Form Sign Up Form assembles related pieces into a complete task. Patterns Forgot Password Form Forgot Password Form assembles related pieces into a complete task. Patterns Profile Form Profile Form assembles related pieces into a complete task. Patterns Settings Panel Settings Panel assembles related pieces into a complete task. Patterns Invite Form Invite Form assembles related pieces into a complete task. Patterns Contact Form Contact Form assembles related pieces into a complete task. Patterns Feedback Form Feedback Form assembles related pieces into a complete task. Patterns Checkout Form Checkout Form assembles related pieces into a complete task. Patterns Cart Summary Cart Summary assembles related pieces into a complete task. Patterns Order Summary Order Summary assembles related pieces into a complete task. Patterns Pricing Card Pricing Card assembles related pieces into a complete task. Patterns Pricing Table Pricing Table assembles related pieces into a complete task. Patterns Filter Bar Filter Bar assembles related pieces into a complete task. Patterns Search Results Search Results assembles related pieces into a complete task. Patterns Notification Center Notification Center assembles related pieces into a complete task. Patterns Application Shell Application Shell assembles related pieces into a complete task. Patterns Workspace Tree Workspace Tree assembles related pieces into a complete task. Patterns Viewer Shell Viewer Shell assembles related pieces into a complete task. Patterns Editor Toolbar Editor Toolbar assembles related pieces into a complete task. Patterns Task Board Task Board assembles related pieces into a complete task. Patterns Task Rail Task Rail assembles related pieces into a complete task. Patterns Status Bar Status Bar assembles related pieces into a complete task. Patterns Mobile App Nav Mobile App Nav assembles related pieces into a complete task. Patterns Terminal Surface Terminal Surface assembles related pieces into a complete task. Patterns Document Surface Document Surface assembles related pieces into a complete task. Patterns Visibility Publication Control One clear place to understand and change who can open an object before publishing it. Patterns Evidence Source Block Verification, uncertainty, sources, limitations, and review dates kept together. Patterns Share Qr Panel A complete sharing surface with the text link, copy, native sharing, QR display, and recovery. Patterns Destructive Action Consequences, strong confirmation, progress, failure, undo, recovery, and irreversible states in one safe flow. OS Patterns · Optional Desktop Shell A complete desktop work surface with regions for the menu bar, working windows, widgets, and dock. OS Patterns · Optional Window Shell A solid, resizable-window frame with clear title, actions, content, and status regions. OS Patterns · Optional Menu Bar A calm global bar that keeps the current place and useful system status visible. OS Patterns · Optional Dock A reachable app launcher with an unmistakable current destination and 44-pixel targets. OS Patterns · Optional Widget Shell A measured small surface that shows the most useful state without clipping or decorative motion. OS Patterns · Optional Master Detail A shared-state list and detail pattern that becomes a real back-driven phone flow. OS Patterns · Optional Split View A sturdy multi-panel workspace that collapses by priority instead of squeezing content. OS Patterns · Optional Command Bar A plain-language action entry with honest results, keyboard control, and recovery. OS Patterns · Optional Settings Sheet A focused settings surface with tabs, stable fields, visible state, and a full-screen phone form. Animation Patterns · Optional Studio Shell A complete creative workspace with one clear canvas, supporting rails, and an anchored timeline. Animation Patterns · Optional Studio Header A compact global bar for project identity, mode, device, and high-value actions. Animation Patterns · Optional Workspace Switcher A touch-safe Story, Preview, Code, and Inspect switcher for narrow workspaces. Animation Patterns · Optional Project Switcher A focused project chooser with honest saved and local states. Animation Patterns · Optional Storyboard Rail A scroll-owned scene sequence that keeps order, timing, and selection obvious. Animation Patterns · Optional Scene List Item A scene row with thumbnail, name, timing, purpose, and unmistakable selection. Animation Patterns · Optional Stage Viewport A quiet work surface that gives the current composition visual priority. Animation Patterns · Optional Device Frame A solid phone, desktop, browser, or canvas frame that does not compete with authored work. Animation Patterns · Optional Preview Toolbar A close-at-hand view, scale, and fit control for the stage. Animation Patterns · Optional AI Director A plain-language motion command that applies changes with visible, recoverable feedback. Animation Patterns · Optional Command Suggestions Keyboard-ready example directions and recent commands without hidden magic. Animation Patterns · Optional Inspector Panel A single scroll-owned place for scene, layer, and motion properties. Animation Patterns · Optional Layer List A readable layer stack with visibility, type, and current selection. Animation Patterns · Optional Style Inspector Direct position, size, scale, radius, and content controls for one layer. Animation Patterns · Optional Motion Inspector Purpose, easing, duration, and transition controls with safe defaults. Animation Patterns · Optional Motion Preset Picker Purposeful Rise, Pop, Fade, directional, and Exit choices with exact timing. Animation Patterns · Optional Transport Reachable start, previous, play, next, and end controls with visible time. Animation Patterns · Optional Motion Timeline A horizontally scrollable time ruler with separate scene, motion, and layer lanes. Animation Patterns · Optional Timeline Segment A selectable time block that exposes name, duration, and current state. Animation Patterns · Optional Playhead A keyboard-operable current-time control that stays visible across timeline lanes. Animation Patterns · Optional Delivery Workspace A final work surface for output choice, checks, rendering, and handoff. Animation Patterns · Optional Delivery Action An output action with idle, working, complete, and failed states. Animation Patterns · Optional Render Status Honest queued, rendering, complete, and failed progress with useful next actions. Animation Patterns · Optional Motion Check A review list for purpose, easing, duration, travel, scale, and reduced motion. Animation Patterns · Optional Code Panel A readable, selectable source surface with copy and export actions. Animation Patterns · Optional Template Gallery A responsive set of starting compositions with clear device and duration context. Animation Patterns · Optional Guided Tour A solid, focusable callout that explains one useful region at a time. Animation Patterns · Optional Workspace Error Boundary A real recovery boundary that protects the rest of the creative workspace. Use it when You need one shared rule to shape many screens consistently.
Choose something else when The value is local content or a one-off product decision.
What can happen apply review reset
What people can see documented applied reviewed
How the control can be used default
Render directly from the active system tokens.
Kit takes care of Semantic visual roles, component anatomy, interaction expression, and complete visible states. At least 44-pixel controls, visible focus, keyboard and touch behavior, phone containment, and reduced motion. Solid surfaces, legible hierarchy, and compatibility with every complete Kit visual system. The product still decides The product's content hierarchy and exceptional constraints. Which states and events are actually legal for this product and user. Everyone can use it Use native semantics first and expose the current state without relying on color alone. Keep every action reachable by keyboard with a visible focus indicator and an understandable name. Announce asynchronous success or failure when the changed object does not make the outcome obvious. It fits the phone Contain the complete task at 320 pixels without hiding the primary action behind sideways scrolling. Recompose dense layouts for touch instead of shrinking controls or text. Prove it before release Exercise every declared state and every legal event, including failure and recovery. Verify keyboard order, focus return where focus moves, touch targets, and reduced motion. Check 320, 375, 414, 768, and desktop widths with no page overflow or unreachable action. Try the real piece The guidance stays. The visual kit changes. Choose a kit, then open the working component in that system.
Vanilla Purple Rain JADE OS Animation Studio Voltage Calm Desktop Draftline Sableline Shadow AURELIA