THE SYSTEM BEHIND THE WORKSPACE

One visual language.
Every part of ViRef.

Brand foundations, reusable components and clear rules for building a consistent reference workspace.

14px minimum UI label16px base body44px action target2 themes shared semantics

Neutral surfaces. Purposeful teal. Clear next steps. Reference images keep their own identity.

Brand foundations

White and neutral working surfaces give the references room. Teal signals action, focus and selection.

Canvas

--background

Page, header, form and dialog surfaces.

Light #FFFFFFDark #171B1C

Text

--foreground

Headings, body copy and control values.

Light #292E2FDark #F2F5F4

Primary

--primary

Primary actions, selection and focus.

Light #286D73Dark #80C8CE

Primary hover

--primary-hover

Hover treatment for primary actions.

Light #205B60Dark #9CDADE

Support

--surface-soft

Supporting panels and subtle separation.

Light #F7F8F8Dark #22292A

Muted

--muted

Secondary copy and supporting icons.

Light #687174Dark #AFBABD

Border

--border

Fields, dividers and card outlines.

Light #E2E5E5Dark #3B4547

Strong border

--border-strong

Higher contrast boundaries and switch track.

Light #B9C1C2Dark #657478

Selection

--accent

Active navigation and selected context.

Light #DFEBE8Dark #263C3E

Token flow

Brand primitives → semantic purpose → shared component styling.

--brand-teal: #286D73;
--primary: var(--brand-teal);
.button.primary { background: var(--primary); }

The current implementation uses CSS semantic variables and shared classes. Theme overrides change semantics, not individual page colors.

Spacing, shape & motion

4px

8px

12px

16px

24px

32px

48px

Use a 4px spacing rhythm. Field radius: 8px; workspace radius: 10px; Radix tokens: 6 / 8 / 12px. Preserve component-specific radii in the source instead of inventing new values.

Small feedback transitions, approximately 160ms. Respect reduced motion. Motion explains state; it does not decorate every action.

Brand voice

Direct, calm and actionable. Tell users what happened and what to do next. “Save reference”, “Paste AI result”, “Review DNA”. Never label inferred observations as confirmed facts.

English and Indonesian UI are supported. Notes, titles, extracted DNA and exported briefs retain their original language. Brand colors belong to ViRef's interface, not the user's exported design.

Typography

Arial / system sans-serif. A readable scale, deliberate hierarchy and no UI labels below 14px.

Page title

35px / 1.2 · 500 · −1.35px

Reference library.

Section heading

24px / 1.3 · 500 · Normal

A place for your next idea

Card title

18px / 1.5 · 600 · Normal

.reference-title

Editorial hero reference

Body / input

16px / 1.6 · 400 · Normal

body / .field input

Collect what catches your eye.

Label / helper

14px / 1.5 · 400–600 · Normal

.field / .form-note

Save a reference, then review its DNA.

Eyebrow

14px / 1.5 · 600 · 1.8px

.eyebrow

COLLECT. UNDERSTAND. CREATE.

Page title reduces to 30px at narrower breakpoints. Card titles reduce to 16px on mobile. Section heading examples use the documented 24px hierarchy; source-specific headings remain recorded in their modules. Allow Indonesian copy to wrap instead of shrinking it.

Atoms

Small, reusable building blocks. Every interactive atom needs focus, disabled and accessible states.

Actions

Primary for the next meaningful action; secondary for alternatives; quiet for low-priority actions. Lead with the icon, trail with a directional arrow. Disabled controls must not run actions.

workspace.css · .button

SectionNeeds reviewInferred

Icons & badges

Lucide only, normally 18px for actions and 20px for navigation; stroke 1.75. Use concise status text with meaning beyond color. Icon-only buttons require accessible names.

lucide-react · .reference-tags

Reference titleDemo field — nothing is saved.Disabled field

Text fields

16px field text, 14px label/helper, a neutral surface and semantic border. Support placeholder, focus, filled, disabled and invalid states. Bind labels to inputs and show errors in text.

workspace.css · .field

Select this reference

Select & selection

Shared Radix primitives provide keyboard behavior. Triggers and menus use semantic background/text colors in both themes. Checked states expose their meaning to assistive technology.

components/ui/select.tsx · checkbox.tsx

State contract

DefaultHoverFocus visibleSelected / checkedDisabledLoadingErrorEmptySaved / unsaved

Do not simulate focus as a static decoration: Tab through these controls. Error messages explain recovery. Saving and loading indicate real work; these gallery demos do not call production APIs.

Molecules

Atoms assembled around one task, with labels, guidance and honest state.

/

Search field + filter dropdown + reset action.

Search & filter

A 16px search field, clear filter labels, optional advanced filters and an explicit reset. Preserve the user's query when changing display density.

reference-workspace.tsx · Choice / Field

Could not save. Your changes are still here.

Feedback & recovery

Explain what failed, protect unsaved input and offer a next action. Use danger semantics, never brand teal to signal failure.

workspace.css · .inline-error / .loading-state

Start with a reference.

Save a screenshot or source URL.

Empty state

One clear title, a concrete explanation and one primary action. Empty is a valid state, not an error.

reference-workspace.tsx · Empty

Source mosaic

Real shared component with public demo sources. One to four screenshots, deduplicated IDs, lazy images, and honest no-image/link-only fallbacks. Never replace private images with invented content.

components/reference-mosaic.tsx

Pagination

Shared product component. 12 items per page by default; hide on a single page. Use in Library, Collections lists/detail and Directions. Never in save/review forms or the Library picker.

components/pagination.tsx

Organisms

The major product surfaces. Composition rules preserve hierarchy across the entire workspace.

design guidelines

Direct-access brand and component documentation with safe demonstrations and a searchable source inventory. No application navigation entry; no private workspace data or writes.

components/design-guidelines.tsx

navbar preferences

Shared language selector and accessible theme switch. Both controls share a 44px frame and 18px icons. Browser-persisted preferences update every page; technical documentation remains English.

components/navbar-preferences.tsx

reference workspace

Application shell, Library, reference capture/detail/review, Directions and Settings. Owns loading, empty, error and edit states. Keep storage status in the sidebar; language and theme in the navbar.

components/reference-workspace.tsx

collections

One visible Collection level; select existing Library references or upload new ones. Keep originals unique and show source mosaics. Deleting a Collection does not delete Library references.

components/collections.tsx

blend canvas

Visible Combine reference rail and page scaffold. Click or drag to fill a named section; dropping replaces its target. Reorder with drag or keyboard buttons. Empty guides are not persisted or exported. Source selection, page tabs and shared style remain visible; optional notes are secondary.

components/blend-canvas.tsx

blend board

Compare and Combine share a visible source rail and page outline. Show a direct Blend name below the A/B/C tabs; remove optional variants with the named X buttons while preserving the last plan. Keep style selection, optional project context, brief review and a save recap together in the content column, with Save at the end.

components/blend-board.tsx

dna extraction flow

Grouped Prepare for AI → Paste result → Review DNA flow. Validate pasted JSON before review; show editable evidence and preserve personal notes. Saving without DNA remains supported.

components/dna-extraction-flow.tsx

style recipe

Reviewed design characteristics and borrowing guidance. Keep visual observations separate from inferred or unknown claims.

components/style-recipe.tsx

mcp connection

MCP setup, scoped credentials and connection instructions. Expose rotation/revocation clearly; do not display real tokens in this documentation.

components/mcp-connection.tsx

ai setup dialog

Optional AI provider configuration dialog with loading, connected and error states. Core reference saving must remain usable without an API connection.

components/ai-setup-dialog.tsx

product tour

First-use video guidance with explicit skip/start and replay from Settings. Use real player controls and captions; do not block access to the workspace.

components/product-tour.tsx

pagination

Library, Collections list/detail and Directions only. Hide when one page is enough; keep it out of capture/review and Library pickers. Previous/next boundaries are disabled.

components/pagination.tsx

reference mosaic

Preview up to four actual saved screenshots. Deduplicate source IDs, top-align crops, lazy-load images and show honest empty/link-only states.

components/reference-mosaic.tsx

Templates & pages

A stable shell, predictable actions and focused content across five workspace routes.

ViRef.ai

LibraryCollectionsBlendDirectionsCloud saved

Breadcrumb Language · Theme

CONTEXT

Page heading

Purpose and next action

Content 1

Content 2

Content 3

Pagination when needed

Page	Route	Composition	Important states
Library	/	Heading → filters → tabs → reference grid → pagination	Loading, empty, filtered empty, selection, error
Collections	/collections	Collection mosaics → direct Library membership	Empty, picker, rename, delete, stale save
Blend	/blend	Scope → Compare/Combine → variant → sections → export	A/B/C, saved/unsaved, conflict, no references
Directions	/directions	Source preview → saved brief → edit/export	Empty, edit, delete, missing source
Settings	/settings	Preferences guidance → connections → data controls	Configured, unavailable, error

At ≤700px: compact icon navigation, wrapping header and stacked content. At ≤400px: single-column references. No pagination behind capture/review dialogs. A full-page guideline navigation is specific to this documentation, not the workspace shell.

Complete component inventory

Every product module and every available UI module. Search by name, exported component or source path.

74 modules shown. “Used by product” means imported directly by a product module; available primitives may be used transitively by other UI primitives. Availability does not make a module an approved product pattern.

accordionDisclosure

components/ui/accordion.tsx

accordion is a shared disclosure primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Accordion, AccordionItem, AccordionTrigger, AccordionContent

Product usage: Available support module; no direct product import.

Rules: semantic colors; minimum 14px UI copy; keyboard and visible focus for interactive variants; accessible names; disabled/error/empty behavior where applicable. Default variants and compound anatomy are defined in the source module.

alert dialogOverlays

components/ui/alert-dialog.tsx

alert dialog is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger

Product usage: components/collections.tsx, components/reference-workspace.tsx

alertFeedback

components/ui/alert.tsx

alert is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Alert, AlertTitle, AlertDescription

Product usage: components/collections.tsx, components/reference-workspace.tsx

aspect ratioLayout

components/ui/aspect-ratio.tsx

aspect ratio is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: AspectRatio

Product usage: Available support module; no direct product import.

attachmentMessaging

components/ui/attachment.tsx

attachment is a shared messaging primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger

Product usage: Available support module; no direct product import.

avatarData display

components/ui/avatar.tsx

avatar is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount

Product usage: Available support module; no direct product import.

badgeData display

components/ui/badge.tsx

badge is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Badge

Product usage: Available support module; no direct product import.

breadcrumbNavigation

components/ui/breadcrumb.tsx

breadcrumb is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis

Product usage: Available support module; no direct product import.

bubbleMessaging

components/ui/bubble.tsx

bubble is a shared messaging primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: BubbleGroup, Bubble, BubbleContent, BubbleReactions

Product usage: Available support module; no direct product import.

button groupActions

components/ui/button-group.tsx

button group is a shared actions primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ButtonGroup, ButtonGroupSeparator, ButtonGroupText

Product usage: Available support module; no direct product import.

buttonActions

components/ui/button.tsx

button is a shared actions primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Button

Product usage: Available support module; no direct product import.

calendarForms

components/ui/calendar.tsx

calendar is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Calendar, CalendarDayButton

Product usage: Available support module; no direct product import.

cardLayout

components/ui/card.tsx

card is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent

Product usage: Available support module; no direct product import.

carouselLayout

components/ui/carousel.tsx

carousel is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext

Product usage: Available support module; no direct product import.

chartData display

components/ui/chart.tsx

chart is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle

Product usage: Available support module; no direct product import.

checkboxForms

components/ui/checkbox.tsx

checkbox is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Checkbox

Product usage: Available support module; no direct product import.

collapsibleDisclosure

components/ui/collapsible.tsx

collapsible is a shared disclosure primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Collapsible, CollapsibleTrigger, CollapsibleContent

Product usage: Available support module; no direct product import.

comboboxForms

components/ui/combobox.tsx

combobox is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue

Product usage: Available support module; no direct product import.

commandUI primitive

components/ui/command.tsx

command is a shared interface primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator

Product usage: Available support module; no direct product import.

context menuNavigation

components/ui/context-menu.tsx

context menu is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup

Product usage: Available support module; no direct product import.

dialogOverlays

components/ui/dialog.tsx

dialog is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger

Product usage: components/ai-setup-dialog.tsx, components/collections.tsx, components/mcp-connection.tsx, components/reference-workspace.tsx

directionLayout

components/ui/direction.tsx

direction is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: DirectionProvider

Product usage: Available support module; no direct product import.

drawerOverlays

components/ui/drawer.tsx

drawer is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription

Product usage: Available support module; no direct product import.

dropdown menuNavigation

components/ui/dropdown-menu.tsx

dropdown menu is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent

Product usage: Available support module; no direct product import.

emptyFeedback

components/ui/empty.tsx

empty is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia

Product usage: Available support module; no direct product import.

fieldForms

components/ui/field.tsx

field is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle

Product usage: Available support module; no direct product import.

formForms

components/ui/form.tsx

form is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField

Product usage: Available support module; no direct product import.

hover cardOverlays

components/ui/hover-card.tsx

hover card is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: HoverCard, HoverCardTrigger, HoverCardContent

Product usage: Available support module; no direct product import.

input groupForms

components/ui/input-group.tsx

input group is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea

Product usage: Available support module; no direct product import.

input otpForms

components/ui/input-otp.tsx

input otp is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator

Product usage: Available support module; no direct product import.

inputForms

components/ui/input.tsx

input is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Input

Product usage: Available support module; no direct product import.

itemLayout

components/ui/item.tsx

item is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter

Product usage: Available support module; no direct product import.

kbdData display

components/ui/kbd.tsx

kbd is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Kbd, KbdGroup

Product usage: Available support module; no direct product import.

labelForms

components/ui/label.tsx

label is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Label

Product usage: Available support module; no direct product import.

markerData display

components/ui/marker.tsx

marker is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Marker, MarkerIcon, MarkerContent

Product usage: Available support module; no direct product import.

menubarNavigation

components/ui/menubar.tsx

menubar is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent

Product usage: Available support module; no direct product import.

message scrollerMessaging

components/ui/message-scroller.tsx

message scroller is a shared messaging primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton

Product usage: Available support module; no direct product import.

messageMessaging

components/ui/message.tsx

message is a shared messaging primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader

Product usage: Available support module; no direct product import.

native selectForms

components/ui/native-select.tsx

native select is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: NativeSelect, NativeSelectOptGroup, NativeSelectOption

Product usage: Available support module; no direct product import.

navigation menuNavigation

components/ui/navigation-menu.tsx

navigation menu is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport

Product usage: Available support module; no direct product import.

paginationNavigation

components/ui/pagination.tsx

pagination is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis

Product usage: components/collections.tsx

popoverOverlays

components/ui/popover.tsx

popover is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription

Product usage: Available support module; no direct product import.

progressFeedback

components/ui/progress.tsx

progress is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Progress

Product usage: Available support module; no direct product import.

radio groupForms

components/ui/radio-group.tsx

radio group is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: RadioGroup, RadioGroupItem

Product usage: Available support module; no direct product import.

resizableLayout

components/ui/resizable.tsx

resizable is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ResizableHandle, ResizablePanel, ResizablePanelGroup

Product usage: Available support module; no direct product import.

scroll areaLayout

components/ui/scroll-area.tsx

scroll area is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ScrollArea, ScrollBar

Product usage: Available support module; no direct product import.

selectForms

components/ui/select.tsx

select is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue

Product usage: components/reference-workspace.tsx

separatorLayout

components/ui/separator.tsx

separator is a shared layout primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Separator

Product usage: Available support module; no direct product import.

sheetOverlays

components/ui/sheet.tsx

sheet is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription

Product usage: Available support module; no direct product import.

sidebarNavigation

components/ui/sidebar.tsx

sidebar is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger

Product usage: Available support module; no direct product import.

skeletonFeedback

components/ui/skeleton.tsx

skeleton is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Skeleton

Product usage: Available support module; no direct product import.

sliderForms

components/ui/slider.tsx

slider is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Slider

Product usage: Available support module; no direct product import.

sonnerFeedback

components/ui/sonner.tsx

sonner is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Toaster

Product usage: components/reference-workspace.tsx

spinnerFeedback

components/ui/spinner.tsx

spinner is a shared feedback primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Spinner

Product usage: Available support module; no direct product import.

switchForms

components/ui/switch.tsx

switch is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Switch

Product usage: Available support module; no direct product import.

tableData display

components/ui/table.tsx

table is a shared data display primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption

Product usage: Available support module; no direct product import.

tabsNavigation

components/ui/tabs.tsx

tabs is a shared navigation primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Tabs, TabsList, TabsTrigger, TabsContent

Product usage: components/reference-workspace.tsx

textareaForms

components/ui/textarea.tsx

textarea is a shared forms primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Textarea

Product usage: Available support module; no direct product import.

toggle groupActions

components/ui/toggle-group.tsx

toggle group is a shared actions primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: ToggleGroup, ToggleGroupItem

Product usage: Available support module; no direct product import.

toggleActions

components/ui/toggle.tsx

toggle is a shared actions primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Toggle

Product usage: Available support module; no direct product import.

tooltipOverlays

components/ui/tooltip.tsx

tooltip is a shared overlays primitive. Prefer the existing module and its exported variants over a page-specific replacement.

Exports: Tooltip, TooltipTrigger, TooltipContent, TooltipProvider

Product usage: Available support module; no direct product import.

ai setup dialogProduct organism

components/ai-setup-dialog.tsx

Optional AI provider configuration dialog with loading, connected and error states. Core reference saving must remain usable without an API connection.

Exports: AISetupDialog

Product usage: components/reference-workspace.tsx

blend boardProduct organism

components/blend-board.tsx

Exports: BlendBoardEditor

Product usage: components/reference-workspace.tsx

blend canvasProduct organism

components/blend-canvas.tsx

Exports: BlendCanvas

Product usage: components/blend-board.tsx

collectionsProduct organism

components/collections.tsx

One visible Collection level; select existing Library references or upload new ones. Keep originals unique and show source mosaics. Deleting a Collection does not delete Library references.

Exports: Collections

Product usage: components/reference-workspace.tsx

design guidelinesProduct organism

components/design-guidelines.tsx

Direct-access brand and component documentation with safe demonstrations and a searchable source inventory. No application navigation entry; no private workspace data or writes.

Exports: DesignGuidelines

Product usage: Available support module; no direct product import.

dna extraction flowProduct organism

components/dna-extraction-flow.tsx

Grouped Prepare for AI → Paste result → Review DNA flow. Validate pasted JSON before review; show editable evidence and preserve personal notes. Saving without DNA remains supported.

Exports: DNAExtractionFlow

Product usage: components/reference-workspace.tsx

mcp connectionProduct organism

components/mcp-connection.tsx

MCP setup, scoped credentials and connection instructions. Expose rotation/revocation clearly; do not display real tokens in this documentation.

Exports: MCPConnection

Product usage: components/reference-workspace.tsx

navbar preferencesProduct organism

components/navbar-preferences.tsx

Shared language selector and accessible theme switch. Both controls share a 44px frame and 18px icons. Browser-persisted preferences update every page; technical documentation remains English.

Exports: NavbarPreferences

Product usage: components/reference-workspace.tsx

paginationProduct organism

components/pagination.tsx

Library, Collections list/detail and Directions only. Hide when one page is enough; keep it out of capture/review and Library pickers. Previous/next boundaries are disabled.

Exports: Pagination

Product usage: components/collections.tsx, components/reference-workspace.tsx

product tourProduct organism

components/product-tour.tsx

First-use video guidance with explicit skip/start and replay from Settings. Use real player controls and captions; do not block access to the workspace.

Exports: ProductTour

Product usage: components/reference-workspace.tsx

reference mosaicProduct organism

components/reference-mosaic.tsx

Preview up to four actual saved screenshots. Deduplicate source IDs, top-align crops, lazy-load images and show honest empty/link-only states.

Exports: ReferenceMosaic

Product usage: components/collections.tsx, components/reference-workspace.tsx

reference workspaceProduct organism

components/reference-workspace.tsx

Application shell, Library, reference capture/detail/review, Directions and Settings. Owns loading, empty, error and edit states. Keep storage status in the sidebar; language and theme in the navbar.

Exports: ReferenceWorkspace

Product usage: Available support module; no direct product import.

style recipeProduct organism

components/style-recipe.tsx

Reviewed design characteristics and borrowing guidance. Keep visual observations separate from inferred or unknown claims.

Exports: StyleRecipe

Product usage: components/reference-workspace.tsx

Implementation & maintenance

Keep this guide, the source and the rendered product in sync.

Source of truth

src/styles/workspace.css — semantic colors, shared UI styling and responsive rules.

components/ui/* — primitive anatomy and variants.

components/* — product composition and behavior.

lib/design-catalog.ts — module inventory with source and direct usage.

docs/ATOMIC-DESIGN.md — component contract and change procedure.

Before adding a component

Find an existing pattern in the inventory.
Use semantic tokens; verify light and dark.
Keep labels ≥14px and body/input at 16px.
Verify keyboard, focus, long copy and mobile layout.
Document states, source and usage in a ticket.
Run checks; verify the published commit and UI.

This direct-access route is not linked from the application. It is documentation, not a private or authenticated page. It contains only public demo assets and source specifications; no workspace data or credentials.

One visual language.Every part of ViRef.

Brand foundations

Canvas

Text

Primary

Primary hover

Support

Muted

Border

Strong border

Selection

Token flow

Spacing, shape & motion

Brand voice

Typography

Page title

Section heading

Card title

Body / input

Label / helper

Eyebrow

Atoms

Actions

Icons & badges

Text fields

Select & selection

State contract

Molecules

Search & filter

Feedback & recovery

Start with a reference.

Empty state

Source mosaic

Pagination

Organisms

design guidelines

navbar preferences

reference workspace

collections

blend canvas

blend board

dna extraction flow

style recipe

mcp connection

ai setup dialog

product tour

pagination

reference mosaic

Templates & pages

Page heading

Complete component inventory

Implementation & maintenance

Source of truth

Before adding a component

One visual language.
Every part of ViRef.