xiry.

Design · Tip

Minimal Product Design Cheatsheet

Quick typography, color palette, and iconography reference for clean product interfaces.

From the Xiry library · Updated 11 October 2026

A compact reference of practical design tokens distilled from polished software interfaces. It provides specific font choices, type scales, and hex palettes for both light and dark modes to help build neutral SaaS or AI product UIs.

How it works

  • Font: SF Pro, regular and medium
  • Font size: 12px, 13px (base size), 14px, 16px, 18px, and 24px (the biggest)
  • Colors: subtle (7F7F7F), default (5D5D5D), strong (292929), bg-selected (F5F5F5), border (F2F2F2)
  • Icon: @nucleoicons with 1px width

What it's for

  • Style a clean web app interface without designing tokens from scratch
  • Establish consistent typography hierarchy for dashboard and tool layouts
  • Select neutral hex values for borders, text, and active states in dark or light mode

Key points

  • Recommended typography using SF Pro in regular and medium weights
  • Compact type scale from 12px to 24px with a 13px base size
  • Light-mode neutral palette for subtle, default, strong text, and borders
  • Dark-mode neutral palette with matching surface and border specs
  • Recommended icon pairing using Nucleo icons with a 1px stroke

Pricing

Free

Details

Type
Tip
Category
Design
Topic
Design Systems
Open source
No
Platforms
other
For
Product designers, indie hackers, and frontend developers building web tools.
Tags
design, ui, typography, colors, tokens, cheatsheet

Why it was saved

  • @_heyrico, 18 May 2026: Concrete, reusable defaults for a clean SaaS/agent-app look: type scale, gray palette with hex values, and icon source.
  • @_heyrico, 8 June 2026: Ready-to-copy typography scale and hex palette for a clean dark-mode AI product look, plus a specific icon library.

Related

All 14 in Design Systems →

Updated