# Minimal Product Design Cheatsheet

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

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 is 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](https://xiry.app/topics/design.md)
- Topic: [Design Systems](https://xiry.app/topics/design/design-systems.md)
- 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](https://x.com/_heyrico/status/2056412029637054539): Concrete, reusable defaults for a clean SaaS/agent-app look: type scale, gray palette with hex values, and icon source.
- [@_heyrico, 8 June 2026](https://x.com/_heyrico/status/2063998746757886299): Ready-to-copy typography scale and hex palette for a clean dark-mode AI product look, plus a specific icon library.

## Related

- [Awesome DESIGN.md](https://xiry.app/resources/awesome-design-md): Curated collection of plain-text design systems extracted from popular tech websites. (GitHub repo, Open source)
- [Modulor](https://xiry.app/resources/modulor): Open-source, token-driven design system and Figma UI kit by GR8 Tech. (Website, Open source)
- [Refero Styles](https://xiry.app/resources/refero-styles): AI-readable DESIGN.md style references extracted from popular websites. (Web app, Free)
- [Building Effective Agents: Workflow and Agent Patterns](https://xiry.app/resources/building-effective-agents-workflow-and-agent-patterns): Architectural framework categorizing LLM workflows and autonomous agent patterns (Framework, Free)
- [Checklist Design](https://xiry.app/resources/checklist-design): Curated UI and UX checklists for websites, apps, and user flows (Website, Free)
- [Clean UI Blueprint](https://xiry.app/resources/clean-ui-blueprint): A concise spec sheet of typography, colors, and radii for minimal UI (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/minimal-product-design-cheatsheet

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.