Z
ZedPortfolio
Back to projects
Project 2025

Noir UI Kit

A monochrome design system for a B2B SaaS platform, focused on legible typography, dense data layouts, and motion used as feedback instead of decoration.

Lead Designer & Developer React Design System Motion
Noir UI Kit

Overview

Noir UI Kit is a black‑and‑white design system for a multi‑product SaaS platform.
The brief: keep the visuals extremely restrained while improving scanability and perceived polish across dozens of dense, data‑heavy screens.

The kit ships as:

  • A Figma design library with tokens, components, and page templates.
  • A React implementation using shadcn/ui primitives.
  • A motion layer implemented with Framer Motion and a small, documented timing scale.

Constraints

  • Interfaces must work on older laptops and external monitors with poor contrast.
  • Teams should be able to add new modules without breaking the visual language.
  • The palette must stay strictly monochrome; no product‑specific accent colors.

These constraints pushed most of the expressiveness into:

  • Type scales and tracking.
  • Spacing and grid.
  • Micro‑interactions and motion.

System foundations

Typography

  • Two type sizes per “tier” (primary, secondary, meta) instead of a long ladder.
  • Strong use of letter‑spacing in meta labels to create rhythm in dense tables.
  • Content copy tuned for 45–75 character line lengths for easier reading.

Layout

  • A 12‑column grid with asymmetric gutters for primary vs. secondary content.
  • Reusable “rail” components for filters, actions, and secondary navigation.
  • Card and table shells that share the same spacing scale, so switching between list‑ and card‑based layouts feels consistent.

Motion

Motion is treated as a punctuation system:

  • Short, 120–160ms transitions for inline interactions (toggles, menu items).
  • Medium, 200–260ms transitions for dialogs and drawers.
  • Longer, 320–380ms transitions for page‑level context changes.

Every motion token is named and documented, for example:

  • ease.snappy for primary, high‑intent actions.
  • ease.subtle for hover and focus states.

Implementation details

On the implementation side, the React kit exposes a small set of primitives:

  • NoirCard, NoirShell, and NoirStack for layout.
  • NoirBadge, NoirTag, and NoirMeta for labels and inline metadata.
  • NoirTransition wrappers for shared Framer Motion variants.

Complex views like analytics dashboards can be assembled by composing these primitives, rather than building custom layouts per page.

Outcome

  • Support tickets about “hard to read” UIs dropped noticeably after rollout.
  • New modules launched faster because product teams worked with known patterns instead of inventing layouts per feature.
  • The client now uses Noir as its internal standard for all new products, including native apps and marketing properties.