Paragon Design
One system for every Paragon surface.
Tokens, components and blocks for paragon.ooo, Constellation and Telos. Distributed as a shadcn registry, so every team owns the code it ships, in English and Arabic.
- Components and blocks
- 57
- Themes: paper and night
- 2
- Arabic as a first language
- RTL
- Lines of JS for motion
- 0
Install
Start a new app on the Paragon base: tokens, fonts, RTL and the @paragon namespace in one step.
- 1
Create a project on the Paragon base
pnpm dlx shadcn@latest init https://design.paragon.ooo/r/paragon.json - 2
Add what you need
pnpm dlx shadcn@latest add @paragon/app-shell @paragon/button @paragon/field - 3
Already on shadcn? Register the namespace in components.json
components.json{ "registries": { "@paragon": "https://design.paragon.ooo/r/{name}.json" } }
In use
Four messages, one cause, one fix: Paragon’s own story, built only from registry components.
انخصم مني مرتين هالشهرI was charged twice this month.
I switched plans last week. Why are there two payments?
Please refund the extra charge on my account.
Changed my plan, got billed double. One star.
What they all mean
Changing plans charges customers twice.
- The fix
- One rule in billing.
- The result
- All four complaints stop, and the customers stay.
Brand
5 items
- WordmarkThe Paragon mark and lockup, sized by font-size.
- EyebrowUppercase kicker above headings. Drops tracking for Arabic.
- Text LinkUnderlined call to action with a direction-aware arrow.
- Section HeaderEyebrow, heading, copy and an optional action for the top of a section.
- PanelRounded atmosphere surfaces in paper, sand, haze, dusk and night, with optional film grain.
Actions
5 items
- ButtonInk, brand, outline, glass and link buttons with spring press, loading state and a direction-aware arrow.
- ToggleNewTwo-state button for formatting and view options.
- Toggle GroupNewSegmented control for switching between views or filters.
- Dropdown MenuNewActions and options in a floating list, with checkable items, radio groups and submenus.
- KbdKey caps that never mirror under RTL.
Forms
10 items
- FieldLabel, control, description and animated error, with fieldsets and choice cards. Works with any form library.
- InputText input with hover, focus, invalid, disabled, read-only and autofill states, sized to match Button.
- Input GroupOne field surface with icons, prefixes, keys and inline buttons attached, for inputs and textareas.
- TextareaAuto-growing multi-line input with the same states as Input.
- SelectChoose one option from a list, on the same surface and states as Input.
- ComboboxNewSearchable select, single or multiple with chips.
- CheckboxCheckbox whose tick draws itself in, with indeterminate, invalid and choice-card states.
- Radio GroupSingle choice from a list; the dot springs in on selection.
- SwitchOn/off toggle whose thumb springs across and stretches while pressed.
- LabelForm field label.
Overlays
5 items
- DialogModal that rises and settles into place.
- Alert DialogNewA decision that has to be made before continuing. No outside-click dismissal.
- SheetPanel that slides in from any edge.
- PopoverNewA floating card anchored to its trigger, for small forms and detail.
- TooltipInk label for icon buttons and shortcuts.
Feedback
6 items
- ToastNewBrief, non-blocking confirmation. Mount the Toaster once, call toast() anywhere.
- AlertNewInline message about a page or section, tinted by intent.
- ProgressNewDeterminate bar with label and value, in four tones.
- SpinnerThin-arc activity indicator that inherits colour and size.
- SkeletonQuiet loading placeholder.
- EmptyNewWhat a view shows before it has anything in it.
Data display
11 items
- Data TableNewTanStack Table v9 with sorting, faceted filters, grouping with totals, detail panels, sub-rows, pinning, resizing, selection, virtualisation and server mode.
- TableNewEditorial table with small-caps headers and hairline rows.
- ListNewBulleted and numbered lists with square markers; nested items hang off the trace.
- StatNewKey figure with change against the last period and a trend.
- SparklineNewWord-sized trend line that inherits colour and never mirrors.
- BadgePill labels, including landscape tones for topics and channels.
- AvatarNewPerson or workspace image with initials fallback, presence dot and stacks.
- CardA quiet card surface on the 16px card radius.
- AccordionNewStacked sections that open to their measured height.
- CollapsibleNewOne section that opens to its measured height; the base for nested sidebar menus and trees.
- SeparatorHairline rule in the line colour.
Intelligence
3 items
Marketing
5 items
- Site HeaderSticky header with wordmark, nav, primary CTA and a mobile menu.
- HeroHaze panel with eyebrow, display headline, lead and a text link.
- Product CardFull-bleed product tile with serif name and a Meet cue.
- Research ListIndex of articles with cover, topic and localised date.
- Closing CTACentred serif invitation with a glass chip and primary button.