Sample requirement
Review keyboard access before implementation. This detail can be hidden from the menu.
DELIVERY SAAS / COMPONENT LIBRARY64 components
One language. Every component.
The complete shadcn library, adapted to our Supernova design reference. Explore the controls and states before we build the product screens.
Examples use local demo data. No project changes are saved.
Foundations
The shared language beneath every component: warm surfaces, readable type, deliberate emphasis and state expressed with words.
Color roles
Choose the role before the hue. Ember is earned by emphasis and interaction; neutral ink carries everyday actions. This preparation library is light only.
Canvas
--background#f8f7f4Surface
--card#ffffffInk
--foreground#121212Ember
--primary#ff2e0dWarm fill
--muted#eeece9Secondary text
--muted-foreground#666663Surface and text pairs
Card
Card foreground
Warm fill
Secondary text
Ember
White text on brand orange
Navigation uses the same language
State has a shape and a name
CompletedIn progressNeeds attentionFailedNo signal
Color reinforces meaning. Keep the label and distinct mark together. Unknown is not zero; no recorded failure is not proof of health.
Chart palettes
Standard component slots
Brand
--chart-1#ff2e0dInk
--chart-2#121212Grey
--chart-3#666663Soft grey
--chart-4#9e9c99Orange
--chart-5#ff5a30Overview categories
Category 1
--viz-cat-1#d63a12Category 2
--viz-cat-2#2a78d6Category 3
--viz-cat-3#1baf7aCategory 4
--viz-cat-4#eda100Category 5
--viz-cat-5#e87ba4Category 6
--viz-cat-6#4a3aa7Sequential scale
Step 1
--viz-seq-1#86b6efStep 2
--viz-seq-2#5598e7Step 3
--viz-seq-3#2a78d6Step 4
--viz-seq-4#1c5cabStep 5
--viz-seq-5#104281Category order stays consistent. Positive, attention and adverse colors remain reserved for states. Some marks need labels or outlines to be distinguishable; every real chart provides the same records in a table.
Readable color pairs
Normal text needs at least 4.5:1 contrast. Large text needs 3:1. Brand-orange surfaces use white text and icons, following our shared rule. The measured white/red pair is below 4.5:1; the table records the actual contrast. Muted large labels and chart marks are not body-text colors.
| Pair | Specimen | Contrast | Normal text |
|---|---|---|---|
| Main text / canvas | Aa 123 | 17.49:1 | Passes 4.5:1 |
| Secondary text / canvas | Aa 123 | 5.38:1 | Passes 4.5:1 |
| White / brand orange | Aa 123 | 3.72:1 | Below 4.5:1 |
| Failure text / white | Aa 123 | 7.21:1 | Passes 4.5:1 |
| Attention text / white | Aa 123 | 6.46:1 | Passes 4.5:1 |
| Positive text / white | Aa 123 | 7.54:1 | Passes 4.5:1 |
Typography
Reading title
Space Grotesk · 32px
Clarity before complexity.
Work-list title
Space Grotesk · 24px
Work in focus
Section heading
Space Grotesk · 20px / 600
A clear next action
Subheading
Space Grotesk · 16px / 600
Supporting context
Reading prose
Instrument Sans · 17px / 1.75
Make room for the work. Authored explanations stay readable in a single column, with complete criteria and enough space between groups. The page grows to fit the content.
UI and body
Instrument Sans · 15px
Compact controls, useful labels and quiet supporting text.
Technical values
IBM Plex Mono · 12.5px
UC-01 · request_id · 10 Oct 2026, 09:30 IST
Reading: 46rem. Forms and indexes: 48rem. Work lists: 56rem. Genuine tables and charts: up to 72rem. Wide authored text never disappears behind truncation.
Spacing
A 4px base rhythm. Compact controls and rows; generous separation between groups.
4px8px12px16px24px32px48px64pxOne-line row: 44px. Useful two-line row: approximately 60px. Wrapped authored text grows.
Radius
The shared base is 14px. Actions are pills; supporting surfaces use the calibrated radius scale.
sm
8.4pxmd
11.2pxlg
14pxxl
19.6px2xl
25.2px3xl
30.8px4xl
36.4pxpill
FullSurfaces and elevation
Canvas
No elevation. The work surface stays quiet.
Raised surface
A small shadow and surface contrast.
Contextual overlay
Enough lift to show a separate layer.
Use surface contrast and elevation before borders. Reserve dividers for functional separation. Avoid repeated bordered cards and nested cards.
Control states and motion
Warm fill becomes white with one ember border.
Disabled controls cannot be activated.
Explain the correction in words.
Keyboard focus stays visible. Buttons use one outline; filled inputs use one border. Color and opacity settle in 150–250ms when useful. Navigation stays still, and reduced motion is respected.
Toggle
Documentation ↗A pressed state for one optional formatting or view preference.
Try formatting this text.
Toggle Group
Documentation ↗Related options with single or multiple selection.
MULTIPLE SELECTION / FORMATTING
A local formatting preview.
SINGLE SELECTION / VIEW
ContextChangeEvidence
A visual hint for a keyboard shortcut. The hint itself does not bind a shortcut.
Keyboard notationCtrlK⌘KEscEnter
Hints only; no global shortcuts bound by this example.
Input
Documentation ↗Warm filled controls, one accent border on focus, and explicit disabled and invalid states.
Click or tab into the control to see its focus treatment.
Use letters and numbers, separated by single hyphens.
Input Group
Documentation ↗Prefixes, suffixes, and contextual actions within one field.
- Invite a team member
- Review a delivery plan
- Inspect verification evidence
Illustrative requirements, filtered locally.
Plain text preview
Textarea
Documentation ↗Multi-line authored content stays readable and can grow.
0 / 500 characters
Add a description before continuing.
Label
Documentation ↗Every form control has a visible, associated label.
Field
Documentation ↗Labels, descriptions, controls, and errors form one accessible unit.
Checkbox
Documentation ↗Independent choices with checked, unchecked, and disabled states.
Radio Group
Documentation ↗One choice from a set, with a shared accessible name.
Switch
Documentation ↗An immediate, reversible on/off preference.
Notifications enabled in this preview.
Compact switch is on.
Select
Documentation ↗A custom single-choice menu with a selected value.
Selected: normal
Choose a team to continue.
Inspect the full long label, then scroll through 24 options. Use arrow keys, Home/End, and Enter to select.
Selected: Product discovery and requirements clarification across multiple connected repositories, services and delivery teams
Native Select
Documentation ↗The browser’s native select for simple choices.
Selected team: engineering.
A team is required.
Combobox
Documentation ↗Search and select from a list. Try typing a role.
Type to filter. Use arrow keys and Enter to select.
No role selected.
Select a role from the list.
Open to inspect scrolling and the full long label. Type “product” to filter, or use arrow keys and Enter to select.
No inspection topic selected.
Input OTP
Documentation ↗A grouped, keyboard-accessible one-time code input. This demo does not verify codes.
Paste a code or enter digits. No verification request is sent.
Incomplete code: 0 of 6 digits entered.
1
2
3
4
Slider
Documentation ↗Adjust a continuous value, with the selected amount shown in words.
25% to 75% capacity. Use arrow keys on a thumb to adjust.
Selected amount: 40%.
Locked at 60% in this preview.
Calendar
Documentation ↗Keyboard-accessible date selection in our warm-neutral palette.
Selected: 12 Oct. Weekends are disabled.
Date Picker
Documentation ↗A composition of Popover, Button, and Calendar.
Selecting a date closes the popover and updates the trigger.
Selected: 12 Oct.
Questionnaire
Documentation ↗A progressive form with choices and explicit previous, next, and submit controls.
Answers stay in this demo. Nothing is saved or sent.
Pagination
Documentation ↗Explicit page navigation. This example changes its current page locally.
- Button states
- Field states
- Overlay states
Page 1 of 3 · Showing 1–3 of 9 sample rows
Tabs
Documentation ↗Always underlined. Transparent tabs use an underline and stronger text for selection, never pills or filled segments.
Underline tabs, always
The selected tab has an underline and stronger text. All tab backgrounds stay transparent. This is a product-wide rule.
Command
Documentation ↗Filter commands and select a local demo action.
Use arrow keys, then Enter.
Selected command: None
--background: #f8f7f4Dialog
Documentation ↗A focused task, with a visible title, description, and dismiss control.
Preview title: Design review
Alert Dialog
Documentation ↗A confirmation pattern for a consequential action. This demo changes no records.
Sample note: Review the spacing of this confirmation.
Sheet
Documentation ↗A side surface for short supporting information.
Switch sides, then open. Escape returns focus to the trigger.
Drawer
Documentation ↗A bottom surface that keeps its initiating context nearby.
Open the drawer; drag the handle down to dismiss.
Popover
Documentation ↗A small contextual surface anchored to a control.
A sample surface with a committed width of 280px. It shrinks to fit a narrow viewport.
Applied width: 280px
Tooltip
Documentation ↗A short hint available on hover and keyboard focus.
Hints supplement a visible label or accessible name.
Hover Card
Documentation ↗Supporting context for an identity, available without navigating away.
Accordion
Documentation ↗Related disclosures expand in place, with clear expanded state.
Collapsible
Documentation ↗A single supporting section disclosed on demand.
Card
Documentation ↗A raised surface for one coherent piece of content. Avoid nesting cards.
Avatar
Documentation ↗An identity image with a legible fallback.
PMDVQAAB
PMDVQA
+2
Image, initials fallback, size, presence badge, and a grouped identity set.
Badge
Documentation ↗Compact labels. Status also needs words and a shape.
DefaultRepositoryDraft Failed Completed
Item
Documentation ↗Compact rows with a title, description, and supporting action.
Preserve the complete acceptance criteria when a requirement spans several repositories and includes permission-sensitive behaviour
Long authored text wraps. It remains readable in the row, without a line clamp hiding the condition that makes the requirement meaningful.
Implementation plan
Keep authored content readable.
Attachment
Documentation ↗A file identity with its name, type, and size preserved.
Choose a visual state or remove and restore the example. No file is uploaded.
Aspect Ratio
Documentation ↗A predictable frame for visual content.
Typography
Documentation ↗Space Grotesk headings, Instrument Sans body, and IBM Plex Mono technical values.
A reading page title
A compact work-list title
A section heading
Supporting structure
A story connects intended behaviour to the change needed to deliver it. Keep its acceptance criteria visible, readable, and connected to the evidence that verifies the outcome.
UI copy uses Instrument Sans at a comfortable 14–15px.
request_id: preview-01Code describes implementation. Requirements describe intent. Test results provide verification evidence.
Table
Documentation ↗A quiet header and readable rows, with horizontal scrolling contained to the table.
Illustrative data only. Changes stay in this example.
| Item | Owner | Status | Test cases |
|---|---|---|---|
Workspace navigation EX-001 | Mira | Complete | 3 |
Requirement review EX-002 | Arun | In progress | 5 |
Release checklist for cross-repository changes, migration evidence and regression coverage EX-003 | Sam | Needs attention | 2 |
Data Table
Documentation ↗A TanStack Table composition with filtering, sorting, selection, and pagination.
Illustrative data only. Changes stay in this example.
Workspace navigation EX-001 | Mira | Complete | 3 | |
Requirement review EX-002 | Arun | In progress | 5 | |
Release checklist for cross-repository changes, migration evidence and regression coverage EX-003 | Sam | Needs attention | 2 |
0 selected · 7 matching items
Page 1 of 3
Chart
Documentation ↗A labeled trend with an equivalent data table. All values here are illustrative.
Illustrative data only. Changes stay in this example.
Planned and completed items
Count per week · illustrative five-week trend
PlannedCompleted
Planned is dashed in the line view and hatched in the bar view. Completed is solid in both. Use the table for exact values.
Alert
Documentation ↗Inline context or failure information, with an icon and useful words.
Design examples use local data
Interactions are safe to explore and reset when this page reloads.
Example connection error
The example could not be loaded. Try again to preview the recovered state.
Empty
Documentation ↗Explain what is absent and what can happen next.
Illustrative data only. Changes stay in this example.
No example items yet
Add an illustrative item to see how the empty state gives way to content.
Progress
Documentation ↗Determinate completion with a matching text value.
Example import
40% complete in this local example.
Skeleton
Documentation ↗A temporary shape for known loading content.
Loading example content.
Spinner
Documentation ↗Indeterminate activity, paired with a text label.
Loading example content
Loading example content.
Toast
Documentation ↗Transient feedback that reports the actual outcome. These are local demo messages.
Illustrative data only. Changes stay in this example.
Example item present
No notification sent yet.
Notifications announce their own content. Dismiss with the close button. Hover pauses the timeout; loading waits for the outcome you choose.
Separator
Documentation ↗A functional divider, used sparingly between content groups.
Separate groups when their relationship benefits from a divider.
CodeRequirementsEvidence
Scroll Area
Documentation ↗Overflow stays within its own surface, without widening the page.
Scroll or focus the viewport and use arrow keys. Overflow is contained here.
Resizable
Documentation ↗Two-dimensional work can give its panes adjustable space.
Drag the divider, or focus it and use left / right arrow keys to resize. Panes stack on narrow screens.
Navigation
A resizable supporting pane.
Work surface
Content adapts to available space.
Carousel
Documentation ↗Keyboard and button controls traverse a small set of visual examples.
Use the buttons or focus the carousel and press left / right arrow keys.
01 / 03
Readable first
A clear type hierarchy gives each surface a purpose.
02 / 03
One accent
Antino red brings emphasis to a meaningful action.
03 / 03
Honest feedback
Every interaction describes its actual local outcome.
Slide 1 of 3
Direction
Documentation ↗A provider for right-to-left layout, without changing the page’s global direction.
Interface direction preview
01Controls keep their logical order
The provider and HTML direction apply only to this preview.
Bubble
Documentation ↗Compact conversational content with restrained background treatments.
Message
Documentation ↗An authored message with identity, content, and time.
Message Scroller
Documentation ↗A conversation viewport with a control to return to its end.
Illustrative data only. Changes stay in this example.
10 local messages · maximum 20
Scroll up to reveal the return-to-end control. New messages stay in this preview. Reset restores the original ten.
Marker
Documentation ↗A quiet marker for dates or events within a conversation.
10 Oct 2026 · Sample date
Earlier activity
Start of the sample conversation