Use the "Apple Glass" design system. Elegant frosted-glass minimalism. Ceramic neutrals, display serif headlines, iOS squircle corners, airy generous spacing and springy haptic-feeling motion — premium calm for consumer products.

Use a ceramic studio palette with a warm bone-white background (#F6F1EC). Primary actions in deep terracotta (#B5654A), secondary in earthy sage (#6B8F5E), and accents in golden amber (#C48B3F). Cards use warm paper white (#FEFCFA) with organic clay borders (#E4D9CE). Body text is rich espresso (#2F2E2B), secondary text in warm stone (#7D7870). Pair with rounded corners (12-16px) and generous whitespace to reinforce the artisanal feel. This palette conveys handcrafted warmth, natural authenticity, and quiet sophistication.

Use an elegant display typography system with Cormorant Garamond for headings (font-weight: 600, size: 2.75rem for h1) and Lato for body text (font-weight: 400, line-height: 1.6). Headings should feel refined and high-contrast with generous letter-spacing. Body text should be clean and neutral at 16px base, letting headings take center stage. Use Lato at weight 700 for CTAs and buttons. This pairing conveys luxury, refinement, and timeless elegance.

Implement an Apple-style premium cardiovascular lift effect. Cards should have a base diffuse shadow (0 8px 30px #0000000A). On hover, transition slowly (600ms custom cubic-bezier) into a very large diffuse shadow (0 30px 60px #0000001F) and scale the card to 1.015. The movement must feel grounded, physical, and expensive.

Use the Squircle iOS radius system for Apple-inspired, premium corners. Border radii: 10px for buttons and inputs, 14px for cards, 20px for modals and sheets, 9999px for avatars and pills. These values mimic iOS continuous corners (squircle shape). Pair with subtle shadows and clean spacing for an authentic premium feel. All corners should feel smooth and intentional — no mixing of sharp and round.

Use a peach blossom gradient flowing from soft rose (#FDA4AF) through warm peach (#FDBA74) to light gold (#FDE68A) at a 135-degree angle. Apply to hero backgrounds, feature sections, and card accents. Since these are light colors, use dark text (#1C1917) for readability. For dark-mode variants, reduce opacity to 15-20% as a background wash. Use as button backgrounds with dark text for CTAs. This gradient conveys warmth, softness, and natural feminine beauty.

Use the Airy Generous spacing system for a premium, editorial feel. Base unit: 8px. Spacing scale: xs=8px, sm=16px, md=24px, lg=40px, xl=64px, 2xl=96px. This system uses generous whitespace to create visual luxury. Card padding: 24-32px. Section spacing: 64-96px between major blocks. Body line-height: 1.8. Paragraph spacing: 24px. Let every element breathe — whitespace is a design feature, not wasted space.

Use the Spring Bounce easing system for playful, interactive UI. Primary curve: cubic-bezier(0.34, 1.56, 0.64, 1) at 500ms — this overshoots slightly then settles, creating a springy feel. Use 300ms for small elements (buttons, toggles), 500ms for medium (cards, modals), 700ms for large (page transitions). The overshoot amount is subtle (1.56 control point) — it feels bouncy without being cartoonish. Apply to button presses, toggle switches, notification pop-ins, and card reveals.

Create an Apple-style magnetic glass button. The button uses a frosted white background (#FEFCFAB3) with backdrop blur and a tiny 1px subtle border (#0000000D). Text is a sleek dark gray (#2F2E2B). On hover, it brightens slightly and casts a beautifully diffuse shadow (0 20px 40px #00000014). Add a long 700ms physics-based ease-out transition (cubic-bezier(0.33, 1, 0.68, 1)) and implement an active/depressed state scaling down to 0.96.

Create a global command menu/palette UI inspired by Windsurf IDE:
1. Container: Floating centered modal, slightly translucent dark background (#FEFCFAD9) with backdrop-blur, subtle 1px inner border (#2F2E2B1A), and a pronounced drop shadow.
2. Input Area: Borderless top input section, large white text, muted placeholder (#7D7870).
3. Divider: A 1px subtle line separating search and results.
4. Results List: Rows with icons (#7D7870) and text. Active/hover rows should have a rounded background (#2F2E2B1A) and a thin sky-blue (#B5654A) left-accent bar.
5. Badges: Include keyboard shortcut hints (e.g., '⌘ K') aligned to the right, styled with small text and light borders.

Build an Apple-style frosted glass navigation bar.

Key design decisions:
1. Background: #FEFCFAB8 with backdrop-filter: saturate(180%) blur(20px). The saturation boost prevents the blur from washing out colors beneath.
2. Typography: 12px, -0.01em letter-spacing, 500 weight. Apple uses surprisingly small nav text — it stays out of the way.
3. Border: A single pixel (#0000001A) at the bottom. No shadows. The blur provides all the depth.
4. Links: #7D7870 default, #2F2E2B on hover (150ms). The color shift is subtle — users feel it more than see it.
5. Structure: Fixed position, full-width, z-50. Logo left, links center, CTA right.
6. CTA: Small rounded-full button in #B5654A (Apple Blue), white text. No shadow, no border.

The navigation should feel like it's not there until you need it.

Build an Apple-style minimal hero section.

Design philosophy — whitespace as power:
1. Background: Pure white. No gradients, no patterns, no images. The absence of decoration IS the design.
2. Headline: 56-80px (clamp(3.5rem, 5vw, 5rem)), font-weight 700, tracking -0.03em, color #2F2E2B. Apple's near-black is warmer than pure black. One line if possible, two lines maximum.
3. Subtitle: 21px, font-weight 400, color #7D7870, line-height 1.5. Placed 16px below the headline. Maximum one sentence. If you need two sentences, your first sentence isn't good enough.
4. CTA group: Two buttons, centered, 20px below subtitle. Primary: rounded-full, bg #B5654A, white text, 17px, px-8 py-3. Secondary: text-only link in #B5654A, 17px, with a subtle chevron (›).
5. Spacing: The hero should be at least 80vh. Content sits at roughly 40% from top (not centered — slightly above center feels more intentional).
6. Animation: Content fades in with opacity 0→1 and translateY 20px→0, duration 800ms, ease [0.25, 0.1, 0.25, 1].

The result should make you feel like you're looking at a museum wall, not a website.

Implement a colorful Mesh Gradient background replicating Apple's standard aesthetic. Use 5 to 6 overlapping radial-gradients of vibrant pastel HSLA colors positioned at corners and edges, fading into transparency at 50% radius over a white canvas.

Build an Apple-style haptic toggle switch micro-interaction.

Design philosophy — tactile certainty:
1. Track: 51×31px rounded-full pill. Off state: #E4D9CE. On state: #34c759 (Apple system green). The color transition uses 300ms ease — it should feel like dye filling a container, not a binary flip.
2. Knob: 27×27px circle, pure white (#FFFFFF), shadow 0 2px 8px #00000026. The shadow is critical — it creates the illusion of a physical object sitting on a surface.
3. Spring physics: Knob travel uses cubic-bezier(0.68, -0.55, 0.265, 1.55) over 500ms. The -0.55 creates overshoot — the knob travels ~3px past its destination then bounces back. This tiny overshoot is what makes it feel "haptic."
4. Active state: On press (mousedown), the knob stretches horizontally by ~15% (scaleX(1.15)). This mimics the rubber deformation of a real button being pressed.
5. Accessibility: Use a real <button role="switch"> with aria-checked. The visual state must match aria state.
6. Label: 17px medium weight #2F2E2B, with an optional description line in 13px #7D7870 below.

The result should make users toggle it repeatedly just for the satisfaction.