Facto Suite · Interface standard
Component Library
The building blocks behind every Facto app. Each component on these pages is the real, live one your team uses in CRM and Invoicing, so what you see here is exactly what ships.
62Components
8Families
2Themes, both designed
How the library works
Four rules that keep every Facto app feeling like one product.
Tokens, never hard-coded values
Colour, spacing and radius all come from one set of tokens, so a change made once reaches every screen in every app.
One home for every component
Components live here and nowhere else. A one-off built inside a page is treated as a bug, not a shortcut.
Comfortable on a phone
Every control is at least 44px under tablet width and a dense 32px on desktop, where people work for hours.
Designed twice, for light and dark
Dark mode is drawn on purpose, not inverted, and every text colour is checked for contrast in both themes.
Browse the components
Grouped by what they do. Every page has live examples, code to copy and the full list of options.
Foundations
4Colours & tokensEvery colour in the product resolves to a CSS custom property. No component hard-codes one.
IconsScreens ask for a name, never a glyph, so swapping the icon set is one file.
IllustrationsDrawn as SVG against the tokens, so they re-skin with the brand instead of being flat art.
Product identityOne family, one hue per product. Every product shares the furniture and differs in three things: its hue, its glyph and the motif in its banner.
Controls
10ButtonThree tones crossed with four fills, at two radii. A grid, not a list of hand-picked variants.
InputLabel, hint, error and password reveal in one shell. 16px font on mobile so iOS does not zoom on focus.
SelectA real listbox that keeps the native picker on mobile.
TextareaMatches Input’s shell, and grows with its content rather than scrolling inside a fixed box.
Checkbox & Radio16px box, with the 44px touch target on the label wrapper rather than the box.
ToggleA real input[type=checkbox][role=switch], not a styled div.
ComboboxA searchable select for long or icon-bearing lists.
Number, slider, colour, segmentedThe specialised inputs: steppers with units, ranges, colour choice and short exclusive choices.
Calendar & date fieldA month grid and a date field built on it. Always six rows, so paging months never moves the arrows.
File uploadDrop or pick files. Images are compressed on the device first; PDFs pass through untouched.
Display
12TagPill status chip in eleven colours, each a contrast-checked pair for both themes.
AvatarInitials with a tint derived from the name. Deterministic, so the same person looks the same everywhere.
BannerFor a condition that is still true. A toast is for something that happened and is over.
Empty stateIllustration, title, the reason it is empty, and the action that fixes it.
SkeletonKeeps the real headings and filters, bars only the records.
Card & description listA titled surface with an optional action, and the label/value grid that usually sits inside it.
Stat & progressA headline number with its trend, and a bar for how far along something is.
Accordion & dividerCollapsible sections for long forms and FAQs, and a rule that can carry a label.
Page skeletonsWhole-page loading shapes. Skeleton the data, keep the chrome.
LogoThe Elevate IQ mark and wordmark, in every size the product uses.
Icon tileA glyph on a soft square of its own colour, so a row of kinds can be told apart before it is read.
Ghost emptyThe shape of the data that is not there yet, blurred, with a short hint on top. For one dashboard panel among many.
Data
7Data tableThe one table for every list in the suite: selection, sorting, drag to reorder, row actions, sticky header, loading and empty states, and cards on a phone.
Cell renderersOne typed renderer per field type, shared by the table, the board and the record panel.
Kanban boardDrag cards between stages. Cards are built from the same cell renderers as the table.
Sortable groupsRows in labelled groups: reorder by drag, move between groups, and drag in from a separate list.
Pagination & filtersPage through long lists, and show which filters are narrowing them.
Inline fieldsLabel and value rows on a record, edited in place with no separate edit mode.
Action list“What is waiting on me”, as counts that open the list they count. Zoho Inventory’s Pending Actions panel.
Charts & scheduling
15ChartsBar, line, donut and more on ECharts, coloured by the same tokens as the rest of the product.
Dashboard gridWidgets on a 12-column grid that people can drag, resize, add and remove.
Gantt chartTasks over time, grouped by crew, with progress, a now marker, zoom and pan.
Event calendarMonth, week, day and agenda views. Drag an event to reschedule it.
Flow canvasProcess diagrams laid out automatically, with cards you can drag and a minimap.
Trend chartA time series with a toolbar: line or candles, minimap, pan and go-to-now, auto-refresh, PNG and CSV export, full window, plus limit lines, event markers and shaded bands.
Pie chartPart-to-whole at a glance. The legend prints every slice’s value and share.
Donut chartA pie with the total in the hole.
Area chartVolume over an ordered axis, smooth by default, optionally stacked into a total.
Bar chartMagnitude by category: vertical or horizontal, grouped or stacked, with optional value labels.
Line chartChange over an ordered axis, up to five series on one scale.
GaugeOne reading against a fixed range, as a filled arc or as a needle over coloured bands.
Funnel chartDrop-off through ordered stages. Each label carries the count and its share of the first stage.
HeatmapIntensity across two categories, such as weekday by hour, on a one-hue ramp with a scale.
SparklineA tiny trend for a KPI tile: no axes, a dot on the latest point.
Layout
6Page headerBreadcrumbs, record navigation and page actions, in the same place on every screen.
Side panelA panel you work alongside. It splits the layout on desktop and becomes a bottom sheet on a phone.
Settings layoutTabs, cards and labelled sections for preference pages.
StepsProgress through a multi-part task, with each finished step clickable.
Page bannerThe top of a product’s home or dashboard: a greeting, the product’s tile, and its own motif drawn faintly behind.
Record headerThe head of a record’s detail screen: tile or avatar, name, status, and the identifying facts each with its icon.
Navigation
5TabsRecord tabs with optional counts. Links, not buttons. Each tab is a URL.
MenuThe signature component: sections, shortcuts, toggles, checkmarks, danger items and optional search.
Sidebar navigationSections, icon items, colour squares, nested groups, badges and a collapsed rail.
Bottom tabsPhone navigation within thumb reach. Replaces the sidebar under 768px.
View switcherSwitch the same records between table, board and calendar.