# Clean UI Blueprint

> A concise spec sheet of typography, colors, and radii for minimal UI

A practical styling blueprint providing concrete values for typography, grayscale hierarchy, icon sizing, and corner radii. It distills the clean, minimal SaaS look into five straightforward rules based on the Alpaca Labs interface. It serves as a fast reference for styling modern dashboards and apps without guessing design tokens.

## How it works

- Use SF Pro in regular and medium with -0.15px letter spacing
- Keep type to 12px, 13px, 14px, and 24px
- Build hierarchy with \#292929, \#5D5D5D, and \#9E9E9E
- Size icons at 14px for navigation and 20px for cards
- Use 8px navigation, 16px cards, and rounded pill CTA radii

## What it is for

- Establish baseline design tokens for a new SaaS product
- Standardize typography and grayscale hierarchy across app views
- Refine border radii and icon scaling for a polished, minimal aesthetic

## Key points

- SF Pro font pairing in regular and medium weights with -0.15px letter spacing
- Restricted type scale using 12px, 13px, 14px, and 24px
- Three-tier grayscale hierarchy using \#292929, \#5D5D5D, and \#9E9E9E
- Standard icon dimensions of 14px for navigation and 20px for cards
- Specific corner radii: 8px for navigation, 16px for cards, and full pill rounding for CTAs

## 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: UI designers and frontend developers
- Tags: ui, design tokens, typography, minimalism, styling, design guide

## Why it was saved

- [@_heyrico, 21 July 2026](https://x.com/_heyrico/status/2079628240944263565): Concrete, copyable values for type, greys, icon sizes and radii that produce the clean SaaS look.

## 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)
- [Minimal Product Design Cheatsheet](https://xiry.app/resources/minimal-product-design-cheatsheet): Quick typography, color palette, and iconography reference for clean product interfaces. (Tip, Free)
- [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)

Updated 11 October 2026. Page: https://xiry.app/resources/clean-ui-blueprint

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.