Design · Tip
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's 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
- Topic
- Design Systems
- 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: Concrete, copyable values for type, greys, icon sizes and radii that produce the clean SaaS look.
Related
Curated collection of plain-text design systems extracted from popular tech websites.
Quick typography, color palette, and iconography reference for clean product interfaces.
Open-source, token-driven design system and Figma UI kit by GR8 Tech.
AI-readable DESIGN.md style references extracted from popular websites.
Architectural framework categorizing LLM workflows and autonomous agent patterns
Curated UI and UX checklists for websites, apps, and user flows
Updated