Overview

Foundations

Color

Neutral ramp + one accent per product, remapped by data-nx-product; status and chart palettes are fixed.

Typography

System-sans app type scale plus a monospace layer for technical labels.

Space & radius

A density-aware spacing/radius scale; row-icon and a few chip sizes are documented off-grid exceptions.

Motion

One easing curve for kit transitions plus the mark's draw-on animation; everything honors prefers-reduced-motion.

Elevation

Flat by default — hierarchy comes from hairline borders and accent tints; the one sanctioned shadow is for overlays.

Tokens

Two-layer token model — RGB channel vars are the source of truth, rgb() aliases are the convenience layer consumers read.

Mark & lockup

The nx ligature — a constant ink n crossed by a per-product accent x — plus the lockup that pairs it with the product prefix.

Core

Button

Primary action control with primary/ghost/danger variants and a small size cut.

Icon button

Square icon-only control for compact actions (close, more, toggle) — no dedicated NxKit wrapper, apply the class directly.

Card

Bordered, clipped surface — the standard container for a themed panel.

CheckAC

Card body content.

Product header

Tinted header bar holding the product lockup and an optional avatar.

CheckAC

KPI tile

Tinted stat tile for one headline number + label.

14

Jobs today

List row

Icon + title/sub + optional status pill, the atomic row of a list or table-like feed.

NKNordküste — window clean09:30 · A. BergerOn site

Status pill

Small accent chip for a short state or count, usually trailing a list row.

On site

Field

Labelled text input with hint/error wiring and an accent focus ring.

Search jobs

Tabs

Roving-tabindex tab strip with an accent active indicator.

Avatar

Circular accent-filled initials badge.

JD

Divider

1px hairline rule for separating stacked content within a panel.

Group A

Group B

Forms

Checkbox

Custom-box checkbox with checked/indeterminate/invalid/disabled states.

Email notificationsSMS notifications

Radio

Custom-dot radio button, grouped by a shared name.

DailyWeekly

Switch

Binary on/off track-and-knob control, RTL-aware knob travel.

Auto-assign jobsLocked

Select

Styled native <select> with a caret icon and accent focus ring.

Team

Textarea

Multi-line field input, vertical-resize only, reuses the Field's input tokens.

Note

Data

Table

Bordered data table with a tinted header, row hover, and empty/loading/selected states.

Job	Customer	Status	Value
#4412	Nordküste — window clean	On site	€380

Feedback

Badge

Small solid or soft label for a fixed category or count, with status colour variants.

Default Soft Live Beta Down

Alert

Tinted banner with a coloured leading bar + icon for info/success/warning/danger messages.

Heads up

Your trial ends in 5 days.

Progress

Determinate or indeterminate accent bar on a tinted track.

Skeleton

Shimmering placeholder block for content that hasn't loaded yet.

Spinner

Small rotating ring for an inline or button-embedded loading indicator.

Tooltip

Hover/focus popover label, dismissible with Escape, WCAG 1.4.13-compliant.

Empty state

Centered icon + title + copy + optional action for a list/table with no data yet.

Keine JobsErstelle deinen ersten Job, um loszulegen.

Overlays

Drawer

Edge-docked panel with scrim, focus trap, and Esc-to-close — inline-start/end aware.

Filters×

Open

Modal

Centered confirmation/detail dialog with scrim, focus trap, and Esc-to-close.

Breadcrumb

Horizontal trail of ancestor links ending in the current page.

Menu

Popover action list with roving-tabindex keyboard navigation and a danger item variant.

Charts

Bar

Single-series weekly volume, thin rounded-end bars on a recessive grid.

Line & area

Two-series session trend, line + soft area fill under the primary series.

Donut

Parts-of-a-whole traffic-source split with a centered total.

Stat tiles

Row of headline KPI cards with a signed delta and up/down/good/bad framing.