Skip to content
UIGrammer
EN 中文

Style · 10

Cupertino

Cupertino = large titles, grouped lists, system blue, and content that sits above the chrome.

Large titles, grouped lists, system blue, continuous radii.

Page Overall
Card
Buttons
Navbar
Tabs

What is Cupertino?

Cupertino UI is the human-interface look: grouped white cards on a pale grey canvas, large bold titles, the system blue for actions, and segmented controls. Skip the grouped rhythm and the model ships a generic web admin.

Elements

  • Grouped lists
  • Large titles
  • System blue

Put this word in the prompt.

Typical colors

  • #007AFF
  • #F2F2F7
  • #FFFFFF
  • #1C1C1E

Use on

  • Mobile apps
  • Settings
  • Content feeds
Prompt formula

[Component] + Cupertino + Grouped + System blue + Large title

See also

Components
Card→Tabs→Navbar→Badge→
Themes
Personal Blog→
BUILD - Build a complete Cupertino-style content app home. Not a card, not an isolated navbar, not a marketing page, not a tabs widget. - Domain: an editorial content feed where large titles and grouped cards carry the identity. STYLE - Cupertino: grouped white cards on canvas #F2F2F7, continuous radii, frosted bars - Type #1C1C1E, mute #3C3C43, system blue #007AFF for actions and links only - Cards 14-16px radius, no borders, shadow 0 1px 2px rgba(0,0,0,0.06) - System font stack for type with bold large titles; tabular numerals for counts LAYOUT - Frosted nav as page chrome: wordmark North, links Today / Browse / Library in #007AFF, search field on grouped tint - Single column feed, max-width 680px feel - Finished app home: large title "Large titles. Grouped lists.", featured cards with covers, sidebar widgets as grouped cards, join strip, footer SECTIONS 1. Hero card: kicker "Today", large title, one line, CTA Get (#007AFF, 12px radius) 2. Grouped post cards: Quiet order / Focus tools / Small software, each with a tinted cover 3. Grouped widgets: profile, categories with counts, recents 4. Join strip: Email field + Notify me, then a grouped footer INTERACTION - Hover dims cards and buttons to 96% brightness. Nothing lifts, nothing glows TECHNICAL - React, Tailwind CSS, shadcn/ui restyled to Cupertino tokens - not default shadcn. One app route. DON'Ts - No pills, no gradients on surfaces, no second accent, no dark chrome - No emoji icons. No marketing hero with a product screenshot - Do not output only a headline plus two empty cells MOTION - Enter: 200ms ease-out. Sheets rise from the bottom edge over 280ms. - Scroll snapping and picker momentum use the platform curves, not custom ones. - Depth transitions: scale 0.96 to 1 with a scrim fade, 200ms. - prefers-reduced-motion: replace moves with cross-fades.