--- name: elevated-design description: Create sophisticated, Apple-inspired web interfaces with refined aesthetics and corporate elegance. Emphasizes generous whitespace, ultra-precise typography, asymmetric layouts, and purposeful interactions. Combines minimalist design philosophy with premium brand execution. Use when building premium landing pages, marketing sections, product showcases, or corporate interfaces that demand visual sophistication beyond standard business UI. --- # Elevated Design System A sophisticated design philosophy inspired by Apple's corporate design language—creating web interfaces that feel crafted by experts at the top of their field. This approach combines minimalist precision with emotional resonance, transforming standard web components into refined, gallery-worthy experiences that command attention and inspire confidence. ## When to Use This Skill Activate this skill when users request: - Premium landing pages or hero sections - Corporate marketing websites that command authority - Product showcases with sophisticated aesthetics - Feature sections that feel editorial yet professional - Interfaces that evoke quality, precision, and confidence - Apple-style minimalist corporate design - High-end SaaS product pages - Brand experiences that need to inspire trust **Trigger phrases:** - "Make it more sophisticated" - "Create an Apple-style design" - "Design something that looks premium/expensive" - "Make it feel like a luxury tech brand" - "Use the elevated/Apple design approach" ## Design Philosophy ### The Pillars of Elevated Design (Apple-Inspired) 1. **Generous Whitespace as a Strategic Tool** - Space is not empty—it's intentional, communicative, and confident - Large margins and padding create breathing room and hierarchy - Elements float in space, commanding individual attention - Whitespace guides the eye with purposeful rhythm - **Apple principle:** Less is exponentially more 2. **Ultra-Precise Typography** - San Francisco-inspired system fonts with exceptional legibility - Light to regular weights (300-400) for sophistication - Dramatic scale contrasts (72px headlines, 48px subheads) - Tight tracking (-0.02em) for headlines, optical spacing for body - Text color in subtle grays (never #000000, always #1d1d1f or similar) - **Apple principle:** Typography is the interface 3. **Grid-Based Asymmetry** - Apple's 12-column grid with intentional breaks - Use 7-5 or 8-4 splits for visual tension - Alternate scale: large hero images, compact supporting content - Balance asymmetry with perfect alignment - Create compositions that feel both free and precise - **Apple principle:** Controlled chaos breeds sophistication 4. **Restrained Color Palettes** - Near-monochromatic with surgical color accents - Neutral foundation: white, off-white (#f5f5f7), cool gray (#1d1d1f) - Brand accent used for CTAs only (1-2% of design) - Gradients are subtle and purpose-driven - Photography and product imagery provide color, not UI - **Apple principle:** Color is a tool, not decoration 5. **Purposeful Interactions** - Micro-interactions that feel inevitable, not surprising - Smooth 400-600ms transitions (slower = more premium) - Hover states that shift weight, not color - Scroll-triggered reveals with momentum - Touch targets are generous (44x44px minimum) - **Apple principle:** Motion with meaning 6. **Obsessive Attention to Detail** - Sub-pixel alignment wherever possible - Consistent 8px baseline grid - Typography with optical adjustments (not just math) - Glass morphism and depth through layering - Perfect icon-to-text alignment ### Typography (Apple System) **Font Stack (San Francisco-Inspired):** ```css /* Tailwind Default (closest to SF Pro) */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; ``` **Font Weights:** ```html font-light → 300 /* Body copy, descriptions - Apple's go-to */ font-normal → 400 /* Standard text, balanced */ font-medium → 500 /* Subtle emphasis, nav items */ font-semibold → 600 /* Headlines, but use sparingly */ font-bold → 700 /* Avoid - too heavy for elevated design */ ``` **Type Scale (Apple-Inspired Dramatic Hierarchy):** ```html text-xs → 12px /* Fine print, footnotes, legal */ text-sm → 14px /* Supporting text, captions */ text-base → 16px /* Body text (Apple's minimum) */ text-lg → 18px /* Large body, comfortable reading */ text-xl → 20px /* Small headings, emphasized text */ text-2xl → 24px /* Card titles, section labels */ text-3xl → 30px /* Subsection headings */ text-4xl → 36px /* Page titles */ text-5xl → 48px /* Hero headlines */ text-6xl → 60px /* Large hero text */ text-7xl → 72px /* Statement headlines (Apple events) */ text-8xl → 96px /* Ultra-dramatic (use with extreme restraint) */ text-9xl → 128px /* iPhone reveal style (hero images only) */ ``` **Letter Spacing (Optical Precision):** ```html tracking-tighter → -0.05em /* Massive headlines (text-8xl+) */ tracking-tight → -0.025em /* Large headlines (text-5xl+) */ tracking-normal → 0em /* Body text, natural spacing */ tracking-wide → 0.025em /* Small text for legibility */ tracking-wider → 0.05em /* Uppercase labels */ tracking-widest → 0.1em /* Micro labels (11px uppercase) */ ``` **Line Height (Apple Standard):** ```html leading-none → 1 /* Massive display type only */ leading-tight → 1.1 /* Large headlines (text-5xl+) */ leading-snug → 1.2 /* Headlines (text-2xl to text-4xl) */ leading-normal → 1.5 /* Body text - Apple's preferred */ leading-relaxed → 1.625 /* Long-form reading */ ```html text-xs → 12px /* Metadata, copyright */ text-sm → 14px /* Small body text */ text-base → 16px /* Standard body */ text-lg → 18px /* Large body */ text-xl → 20px /* Small headings */ text-2xl → 24px /* Card titles */ text-3xl → 30px /* Section headings */ text-4xl → 36px /* Page titles */ text-5xl → 48px /* Hero headlines */ text-6xl → 60px /* Large hero text */ ``` **Letter Spacing:** ```html tracking-tight → -0.025em /* Large headlines */ tracking-normal → 0em /* Body text */ tracking-wide → 0.025em /* Small labels */ tracking-wider → 0.05em /* Uppercase labels */ tracking-widest → 0.1em /* Ultra-wide labels */ ``` ### Color Philosophy **Sophisticated Neutrals:** ```html text-slate-900 → #0f172a /* Primary text */ text-slate-600 → #475569 /* Secondary text */ text-slate-500 → #64748b /* Tertiary text */ text-slate-400 → #94a3b8 /* Subtle text, labels */ ### Spacing System (Apple's 8px Grid) **The 8px Baseline (Apple's Standard):** Every measurement should be divisible by 8px for perfect rhythm. **Component Spacing:** ```html p-4 → 16px /* Compact elements (badges, pills) */ p-6 → 24px /* Small cards, tight content */ p-8 → 32px /* Standard card padding (minimum) */ p-10 → 40px /* Comfortable card padding */ p-12 → 48px /* Large cards, feature sections */ p-16 → 64px /* Extra-large padding, hero sections */ p-20 → 80px /* Apple event-style spacing */ p-24 → 96px /* Statement sections */ ``` **Section Spacing (Generous, like Apple):** ```html py-12 → 48px /* Compact sections */ py-16 → 64px /* Standard sections */ py-20 → 80px /* Comfortable sections */ py-24 → 96px /* Large sections */ py-32 → 128px /* Hero sections, dramatic reveals */ py-40 → 160px /* Apple event-style spacing */ py-48 → 192px /* Ultra-premium sections */ ``` **Gap & Margins (8px increments):** ```html gap-4 → 16px /* Tight groups */ gap-6 → 24px /* Related elements */ gap-8 → 32px /* Standard separation */ gap-12 → 48px /* Section boundaries */ gap-16 → 64px /* Large separation */ gap-20 → 80px /* Dramatic separation */ gap-24 → 96px /* Hero to content transition */ mb-4 → 16px /* Paragraph spacing */ mb-6 → 24px /* Subsection spacing */ mb-8 → 32px /* Element separation */ mb-12 → 48px /* Section separation */ mb-16 → 64px /* Large separation */ mb-20 → 80px /* Dramatic separation */ mb-24 → 96px /* Hero to section */ ``` **Layout Containers (Apple's Approach):** ```html max-w-screen-2xl → 1536px /* Ultra-wide (product grids) */ max-w-7xl → 1280px /* Wide layouts (Apple default) */ max-w-6xl → 1152px /* Standard editorial */ max-w-5xl → 1024px /* Narrow, focused content */ max-w-4xl → 896px /* Article-style layouts */ max-w-3xl → 768px /* Long-form reading */ max-w-2xl → 672px /* Comfortable reading width */ ``` **Responsive Padding (Apple's breakpoint strategy):** ```html px-6 sm:px-8 lg:px-12 /* Standard responsive padding */ px-8 sm:px-12 lg:px-20 /* Generous responsive padding */ py-12 sm:py-16 lg:py-24 /* Section responsive padding */ py-16 sm:py-24 lg:py-32 /* Hero responsive padding */ ```2 → 48px /* Extra large padding */ p-16 → 64px /* Section padding */ py-16 → 64px /* Minimum section */ py-24 → 96px /* Standard section */ py-32 → 128px /* Large section */ mb-8 → 32px /* Element separation */ mb-12 → 48px /* Section separation */ mb-16 → 64px /* Large separation */ mb-24 → 96px /* Dramatic separation */ ``` **Layout Containers:** ```html max-w-7xl → 1280px /* Wide layouts */ max-w-6xl → 1152px /* Standard */ max-w-5xl → 1024px /* Narrow, focused */ ``` ### Border Radius (Larger) ```html rounded-xl → 12px /* Minimum for cards */ rounded-2xl → 16px /* Standard cards */ rounded-3xl → 24px /* Large images */ ``` --- ## Apple-Inspired Button System **Primary CTA (Apple Blue):** ```html Buy now ``` **Secondary Button (Outlined):** ```html ``` **Tertiary Text Link (Apple style):** ```html Learn more ``` **Large CTA (Hero Section):** ```html Get started ``` **Design Rules:** - Padding: `px-5 py-3` for standard, `px-7 py-4` for large - Border radius: `rounded-xl` (12px) - Font size: 15px (Apple's preferred button size) - Transitions: `duration-400` for premium feel - Hover: Subtle color shift, never dramatic transformations --- ## Component Patterns ### Feature Card (Elevated Style) **Asymmetric Large Card:** ```html

Feature Title

Description with refined tone and generous spacing.

Feature item
``` **Asymmetric Compact Card:** ```html

Feature Title

Refined description.

Feature item
``` ### Section Header (Elevated) **Minimal with Uppercase Label:** ```html

Section Label

Primary headline with dramatic scale. Optional subtle accent.

``` **With Description:** ```html

Features

Everything your garage needs.
Nothing it doesn't.

Refined description with generous spacing and thoughtful typography.

``` ### Asymmetric Grid Layout **7-5 Split Pattern:** ```html
``` ### Background Elements (Subtle) **Layered Backgrounds:** ```html
``` ### Closing Elements (Refined) **Subtle Divider:** ```html
Crafted for excellence
``` --- ## Design Rules (Apple Edition) ### Do's ✓ - **Use generous spacing** - Follow the 8px grid religiously - **Embrace light font weights** - font-light (300) for almost everything - **Create intentional asymmetry** - 7-5 splits, alternating scales - **Surgical color use** - Near-monochrome with one accent color - **Dramatic type scales** - text-7xl for heroes, text-base minimum for body - **Minimal bullets** - 1px dots (w-1 h-1) or subtle checkmarks - **Refined borders** - Use Apple's #d2d2d7 or border-slate-200 - **Slow, smooth transitions** - duration-400 to duration-600 - **Glass morphism** - backdrop-blur with opacity for depth - **Perfect optical alignment** - Not just mathematical, but visual balance - **Generous touch targets** - Minimum 44x44px for all interactive elements - **Editorial photography** - High-res, professional, generous sizing - **Natural shadows** - Subtle, directional, mimicking light from above ### Don'ts ✗ - **Avoid tight spacing** - Never break the 8px grid - **Skip heavy fonts** - Never use font-bold (700+) - **No rigid symmetry** - Avoid 6-6, 4-4-4, 3-3-3-3 grids - **No color chaos** - Stick to neutrals + ONE accent - **Small type** - Never go below 16px for body text - **Icon overload** - Icons should whisper, not shout - **Thick borders** - Never use 2px+ borders except on buttons - **Fast transitions** - Avoid duration-150 or less - **Flat design** - Always add subtle depth through shadows or glass - **Cluttered layouts** - When in doubt, remove elements - **Small touch targets** - Never smaller than 44x44px - **Stock photography** - No generic business people smiling at laptops - **Heavy drop shadows** - Avoid pure black shadows --- ## Typography Hierarchy ### Landing Page Example ```html

Primary Headline

Supporting description with generous sizing.

Section Title

Subsection Heading

Body copy with comfortable line height.

Label ``` --- ## Color Usage Guidelines ### Primary Content - Headlines: `text-slate-900` - Body text: `text-slate-500` or `text-slate-600` - Labels: `text-slate-400` - Subtle text: `text-slate-400` ### Backgrounds - Page: `bg-white` or `bg-slate-50` - Cards: `bg-slate-50` on white, or `bg-white` on slate-50 - Hover states: Shift from slate-50 to white ### Accents - Primary brand: Use for tiny elements only (dots, small icons) - Borders: `border-slate-100` or `border-slate-200` - Never use accent color for large areas --- ## Animation Philosophy **Smooth & Purposeful:** ```html transition-all duration-300 hover:bg-white hover:border-slate-200 group-hover:bg-blue-100 transition-colors duration-300 ``` **Principles:** - Transitions should feel like water, not electricity - Use 300ms as standard duration - Avoid sudden changes - Hover states should whisper, not shout --- ## Responsive Approach **Mobile First with Generous Breakpoints:** ```html

Headline

``` --- ## Complete Section Example ```html

Features

Everything your garage needs.
Nothing it doesn't.

Never miss an appointment

Customers book online 24/7 while automatic reminders keep your schedule full and your team productive.

24/7 online booking
Auto SMS/email reminders

Digital job tracking

Replace paper trails with real-time updates customers can follow.

Instant estimates
Crafted for automotive excellence
``` --- ## When to Use vs. Standard Design ### Use Elevated/Apple Design For: - 🎯 Landing pages and marketing sites - 🎯 Product showcases and launch pages - 🎯 Premium feature sections - 🎯 Brand experiences and "About" pages - 🎯 Corporate websites that need authority - 🎯 High-end e-commerce product pages - 🎯 Portfolio presentations - 🎯 Event/conference websites - 🎯 SaaS pricing and features pages ### Use Standard Gixat Design For: - 📊 Application dashboards - 📊 Data tables and complex forms - 📊 Administrative interfaces - 📊 Internal tools and utilities - 📊 High-density information displays - 📊 Real-time monitoring interfaces ### Hybrid Approach: Combine both systems—use Elevated Design for marketing sections and Standard Design for functional app areas. The transition should feel natural: - Marketing pages → Elevated Design - Dashboard/App → Standard Design - Settings/Profile → Standard Design with elevated touches --- ## Accessibility (Apple Standard) **Touch Targets (44x44px Minimum):** ```html