UI & brand system

A quiet interface system for tools people work in all day.

Near-monochrome surfaces, no stray strokes, one accent hue reserved for meaning. Built for developer consoles, dashboards and documentation — light and dark, comfortable density, and responsive down to a phone.

Browse componentsOpen the app shell
No runtime dependenciesNext.js 16v0.1
01DocumentationInstall, tokens, principles and the full component reference — one page.02FoundationsColour, type scale, spacing, radius, elevation, motion, icons.03ComponentsButtons, inputs, tabs, badges, overlays, toasts, code, command palette.04PatternsSign in, onboarding, article tiles, editorial, and the empty states.05App shellHideable sidebar, a top bar with no edge, and the dashboard behind it.06Data tableSortable, filterable, selectable. Stacks into cards below 640px.07Forms & settingsField anatomy, validation, destructive confirmation.
TypeManrope · Roboto Mono
IconsMaterial Symbols · wght 200
Accent hueoklch 265
Neutralschroma 0
Themelight

Install

private git dependency
1 — add the dependency
npm i git+https://git.jbarszcz.pl/ASSETIS/ui.git#v0.1.0
2 — transpile it
// next.config.ts
export default {
  transpilePackages: ["@assetis/ui"],
};
3 — styles and providers
import {
  AssetisFonts,
  ThemeProvider,
  ThemeScript,
} from "@assetis/ui";
import "@assetis/ui/styles.css";

<head>
  <AssetisFonts />
  <ThemeScript />
</head>
<body>
  <ThemeProvider>{children}</ThemeProvider>
</body>

Pin a tag, never a branch. Update with npm update @assetis/ui once you move it. Press ⌘K anywhere in the app demo.

Changes in this build

8 deviations from the base system
Marketing nav
One floating pill, detached from the top edge; links collapse into a sheet on phones.
App chrome
The top bar has no border and no fill — content fades under a gradient veil as it scrolls.
Sidebar
Collapses to an icon rail or disappears; becomes an overlay drawer below 900px.
Borders
Buttons, inputs, badges and cards are defined by fills. Hairlines only separate regions.
Accent
Two variables — hue and chroma — drive every accent token, ring and gradient.
Icons
Material Symbols Outlined, weight 200, everywhere.
Outbound links
Get a trailing arrow and safe rel defaults. Navigation links never do.
Motion
Opacity only. Nothing slides, scales or nudges, so text never renders soft.