Cupertino Minimal

A design system inspired by the philosophy of radical simplicity and precision. Cupertino Minimal embraces negative space as a design element, using ultra-thin typography, frosted-glass surfaces, and a near-monochromatic palette punctuated by a single signature blue accent. Every pixel serves a purpose — if it doesn't need to be there, it isn't.

Primary#007AFF
Secondary#5856D6
Neutral#8E8E93
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Large TitleInter · 34px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Title 1Inter · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Title 2Inter · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Title 3Inter · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineDM Sans · 17px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyDM Sans · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CalloutDM Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadlineDM Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

FootnoteDM Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionDM Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A design system inspired by the philosophy of radical simplicity and precision. Cupertino Minimal embraces negative space as a design element, using ultra-thin typography, frosted-glass surfaces, and a near-monochromatic palette punctuated by a single signature blue accent. Every pixel serves a purpose — if it doesn't need to be there, it isn't.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultSelected

Elevation & Depth

Level 1
Level 2

Do's & Don'ts

Do

Use generous whitespace — let content breathe with at least 32px between sections
Maintain a strict visual hierarchy with no more than 3 levels of text emphasis per view
Keep touch targets at minimum 44px height for all interactive elements
Use system-standard animations (300ms ease-in-out for transitions, spring curves for gestures)
Use frosted glass (backdrop-filter blur) sparingly — only for overlays and navigation bars

Don't

Use borders when spacing alone can create separation
Use more than one accent color per screen — blue is the single interactive color
Use heavy drop shadows — prefer subtle, diffused multi-layer shadows
Center-align body text — always left-align for readability
Add visual decoration that doesn't serve a functional purpose
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.3 KB
Downloads 29
Copies 3
clean elegant minimal mobile-app

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/cupertino-minimal and implement it in my code

Don't have the MCP? Install it here