Filigran Design System

Inline feedback banner: an elevation surface with a severity-coloured left rule, a severity glyph, the message and an optional trailing action slot.

A person, or an entity identified by its name: a round disc holding two initials or a photo, optionally followed by the person's name and a one-line description.

Notification marker attached to another element: a small count, or a dot when the count itself does not matter.

Application-level message strip: full width, a gradient fill per variant, one message with an optional leading icon, an optional action and an optional close control.

Hierarchical path to the current page: its ancestors, separated by a slash, the last entry marked as the page you are on.

Primary interaction control for actions such as submit, confirm, cancel, and destructive operations.

Segmented control: a run of icon-only buttons sharing one selected value, for switching between mutually exclusive views of the same data (cards / lines / graph).

A composed surface built on Paper: header, title, subtitle, content, footer and a metadata strip, every part optional and combinable.

Binary and tri-state selection control built on @radix-ui/react-checkbox.

Compact status/tag/filter token.

A single colour field with a popover panel: an editable hex trigger with an inline swatch, and a panel offering a saturation/brightness area, hue slider, optional alpha slider, an eyedropper, a format selector (HEX/RGB/HSL/HSB), value inputs, and an optional preset-swatch grid.

Filterable selection field: the user narrows a list by typing directly in the field, with `multiple` as a prop rather than a second component.

Panel that lets a user choose which items of a collection they see, in what order, and which stay in the main area — table columns (pin mode: Pinned / Scrollable) or toolbar actions and tab bar tabs (show mode: Shown / More).

Date field for forms and filters: an editable text field wearing the Input shell (same label, required marker, helper and error rows, same hover/focus/disabled/error states), a calendar button in its end slot, and a popover calendar that follows the WAI-ARIA date picker dialog pattern (grid, roving focus, arrows by day and week, PageUp/PageDown by month, Home/End, Escape).

Modal overlay that interrupts the current context to request confirmation, collect input, or surface focused content.

Modal side panel anchored to the right edge, used to create, edit or inspect one object while the page stays in view behind it.

Inline file-collection form field.

The application top bar: a structural container that owns the banner landmark, the 68px height, the shared background gradient at Figma's 94% opacity over a 4px backdrop blur, the bottom hairline and the start/middle/end distribution — and nothing else.

A page-level introduction surface built on Paper: an elevation-1 panel with two blurred brand accents, a header row and a body separated by a rule.

A figure: 24px icon, value and label in a bordered pill, in a host row.

Single entry point for icon rendering in the design system.

Square button that renders a single icon with no text label.

Base single-line text field for forms.

Markdown text field for forms whose value is markdown displayed RENDERED elsewhere (descriptions, reports, notes, comments) — plain multi-line text that is never rendered is a Textarea, one line is an Input, and code, JSON or queries are never edited here (RULE-01).

Dropdown menu of actions triggered by a button.

The primary structural navigation container of every Filigran product: a vertical, collapsible sidebar hosting a header slot (typically ProductSwitcher), a scrollable list of NavbarItem/NavbarSubmenu rows (separated into groups by NavbarSeparator, optionally labelled by NavbarTitle), an optional footer slot, and a built-in collapse toggle.

Neutral, non-interactive surface/container with 4 elevation depths (0-3) mapped onto theme.

Determinate linear progress: how far along a known quantity of work is.

Single-choice control built on @radix-ui/react-radio-group.

HTML rich text field for content displayed as HTML, exported to PDF or sent as email (reports, templates, email bodies, remediation texts); markdown content is a MarkdownField and plain text — AI prompts included — is a Textarea (RULE-02).

Specialized text input for search and filtering.

Single-value dropdown selector for choosing one option from a predefined list.

Decorative placeholder for content that is loading: a block or circle in the elevation highlight colour, crossed by a wave once per second.

Numeric value selection along a track, built on @radix-ui/react-slider.

Transient feedback message: a severity-tinted surface with a matching left rule, a severity glyph, the message, an action slot and a close control.

Indeterminate busy indicator: says something is happening when how much is left is unknown.

Boolean on/off toggle built on @radix-ui/react-switch.

Compound tab navigation component.

The design system's typography primitive.

Multi-line text field for forms.

A 48px framed slot for a glyph or a small image.

Time-of-day field for forms: an editable text field wearing the Input shell (same label, required marker, helper and error rows, same hover/focus/disabled/error states), a clock button in its end slot, and a popover holding the clock row DatePicker's withTime already ships — hours, minutes, seconds when the pattern carries `ss`, AM/PM when it carries `a` — plus an OK button.

Contextual popup that displays informational text when a trigger element is hovered or focused.