Calm, precise, trustworthy.
The shared design system for Nitti Intelligence and Polyther. Tokens, components and motion are designed here first, then released as @nitti-ai/design-system.
Brand
How the two products are named, how they relate, and how their names and marks are drawn.
Foundations
Colour, type, surfaces and motion: the values every component reads.
Icons
One set at one weight, and the seven ways an icon is shown.
Components
Each shared component, rendered for both products from the same code.
Patterns
Front desk, widget grid, composer and toolbars, assembled from the parts.
Documents
Briefs and reports: the editor, the page behind a share link, and the type they are set in.
Charts
One look for every chart, grouped by the question a reader brings.
Tables
One data table: columns by kind, sorting, filters, selection, and what waiting looks like.
People
The politician card, a table of people as a gallery, and someone followed in a widget.
Screens
Whole screens of both products, at the width of a desktop, a laptop, a tablet and a phone.
Stack
Pinned versions and the rules for the four apps that consume the system.
What it holds to
Space before lines
Areas separate by fill and distance. A hairline appears only where data needs rows.
Two faces, one voice
Instrument Serif for the moments that set a page; Geist for everything you read and click.
Motion that explains
Things move the way they would on an iPhone: from where they were, to where they belong.
One family, two accents
Nitti Intelligence and Polyther share every value except the accent: deep blue, and citron.