风格 · 10

Cupertino 风格

Cupertino 风格 = 大标题、分组列表、系统蓝，内容始终优先于界面装饰。

大标题、分组列表、系统蓝、连续圆角。

North Search

Today

Large titles. Grouped lists.

Large titles over grouped cards. The system blue does the pointing.

Featured

Quiet order

Grouped lists, bold titles, one continuous radius.

Today · Apps · Read more

Collection

Focus tools

Tinted covers on grouped white. Nothing shouts.

Today · Work · Read more

Story

Small software

Apps that respect the system and the dark.

Yesterday · Design · Read more

Email

整页整体

整页

配方保持英文，便于直接贴进工具。

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.

卡片

配方保持英文，便于直接贴进工具。

Build a single Cupertino card. Not a page, not a dashboard.

STYLE
- Cupertino: grouped cells on a pale canvas, continuous radii
- Card #FFFFFF, 14px radius, no border, shadow 0 1px 2px rgba(0,0,0,0.06)
- Kicker SPECIMEN in #007AFF, title #1C1C1E, body #3C3C43. Stage is grouped canvas #F2F2F7

LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one filled button
- No extra tiles, no navbar

INTERACTION
- Hover dims the card to 96% brightness. No lift, no glow

CONSTRAINTS
- One accent #007AFF. No hairline borders around the whole card, no shadows heavier than 0 2px 6px

TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to these tokens - not default shadcn

按钮

配方保持英文，便于直接贴进工具。

Build a Cupertino button row only: Continue (filled), Save (tinted), Skip (plain). Not a card, not a page.

STYLE
- Continue: #007AFF fill, white type, 12px radius, 50px height feel
- Save: tinted #007AFF at 12% alpha fill, type #007AFF, same radius
- Skip: plain type #007AFF, no fill. Stage is grouped canvas #F2F2F7

LAYOUT
- One horizontal row, 10px gap, full-width lanes stacked or one row, no wrapping card

INTERACTION
- Hover dims each button to 92% brightness. No translate, no shadow

CONSTRAINTS
- One system accent #007AFF. No pills, no gradients, no outlines

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look

顶栏

配方保持英文，便于直接贴进工具。

Build a Cupertino navigation bar only. Not tabs, not a page.

STYLE
- Frosted white bar: rgba(249,249,249,0.94) with backdrop blur and an inset 0 -0.5px 0 rgba(0,0,0,0.15) hairline
- Wordmark North #1C1C1E bold; links Today and Browse #007AFF; Get #007AFF bold type, no button chrome

LAYOUT
- Single horizontal bar: wordmark, two links, Get. No panel, no pill CTA

INTERACTION
- Hover dims links to 70% brightness. The bar itself never lifts

CONSTRAINTS
- Frosted translucency, one system accent #007AFF, no filled buttons in the bar

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn

标签

配方保持英文，便于直接贴进工具。

Build a Cupertino segmented control with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Track: #E9E9EB, 9px radius, 2px padding
- Selected: white segment, 7px radius, shadow 0 1px 2px rgba(0,0,0,0.12), type #1C1C1E weight 600
- Unselected: type #3C3C43 on the track. Panel: white, 12px radius, 16px padding

LAYOUT
- One segmented track + one panel. No wordmark, no CTA

INTERACTION
- Selection slides as a white segment; hover on unselected darkens type to #1C1C1E

CONSTRAINTS
- No underline rules, no pill fills outside the track, one accent #007AFF

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look