Component gallery

Clean UI, ready to rinse and repeat

Applied Imani product patterns built from design tokens, shadcn/ui components, operational forms, dashboard surfaces, and accessible component states.

View tokens

Refill rate

68%

+12% this cycle

Batch score

+4 this cycle

Orders packed

1,248

+18% this cycle

Delivery SLA

97.2%

+2.1% this cycle

Product Setup

Direct labels keep product setup fast and unambiguous.

Product name

Ready

All product fields are complete.

Review

Ingredient disclosure needs approval.

Packed

Fulfillment label generated.

Dark Surface

Dark elevated surfaces ground high-focus panels and footers.

Batch quality score

Buttons

Dropdown Menu

Action menus match select radius, spacing, and row rhythm.

Menu rows use a 40px minimum height with 12px or more horizontal padding.

Popover

Compact overlays for metrics, guidance, and batch metadata.

Batch Verification

Verification controls support approval workflows without becoming decorative pills.

Release code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Approval scope

Ingredient Compliance

Regulatory, formula, and packaging reviews need compact status views.

Formula disclosedApproved

Fragrance allergensReview

Claims languageApproved

Token Stack

Generated implementation artifacts for every Imani project.

variables.cssCSS variables tokens.tstyped constants tailwind-preset.jstheme extension design-rules.mdagent rules

Refill Channels

Weekly order-source mix across refill plans, starter kits, and bulk deliveries.

Refill

64%

Starter

21%

Bulk

15%

Inventory Forecast

Forecast refill packs, concentrates, and packaging components before stock runs low.

On hand

14.2k

Runway

18d

Reorder

May 4

Invite Reviewers

Add launch reviewers before a product update ships.

Menu & Dialog

Menus and confirmation dialogs inherit the same overlay tokens.

Workflow Shortcuts

Search⌘ K

Quick actions⌘ J

New product⌘ N

Batch Health

Semantic states stay readable in both light and dark modes.

Ingredients disclosed100%

Packaging recycled82%

Refill inventory74%

Refill Preferences

Input controls model customer subscriptions and reorder thresholds.

Refillable packaging

Weekly replenishmentMonthly replenishment

Auto reorder

Reorder threshold68%

Route Efficiency

Compare delivery planning, collection loops, and refill route performance.

Kampala loop92%

Entebbe refill76%

Jinja bulk68%

Report Component Issue

Capture UI defects with enough context for design-system triage.

Design Contributors 312

ACBKCMDLEFGHIJKLMNOPQRST

Design Feedback

Subscription Mix

Show channel health with complementary chart tokens, not one-note green.

Refill plans52%

Starter kits28%

Bulk orders20%

Contributor Profile

Manage visible contributor information for design-system reviews.

Analytics

Documentation traffic, refill education starts, and support deflection.

418.2K

Documentation visits

+10%

Guide views162.4K

Refill finder starts38.7K

Support deflection21%