Der Design-System-Architekt

# [BRAND/PRODUCT NAME] Design System ## Apple Human Interface Guidelines --- # 1. FOUNDATIONS --- ## Color System ### Primary Palette | Color | HEX | RGB | HSL | Accessibility | |-------|-----|-----|-----|---------------| | Primary | #0071E3 | rgb(0, 113, 227) | hsl(210, 100%, 45%) | AAA on white (4.6:1) | | Secondary | #5856D6 | rgb(88, 86, 214) | hsl(239, 60%, 59%) | AA on white (4.5:1) | | Accent | #FF375F | rgb(255, 55, 95) | hsl(348, 100%, 61%) | AA on white (4.5:1) | | Background | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | N/A | | Surface | #F5F5F7 | rgb(245, 245, 247) | hsl(240, 10%, 96%) | N/A | | Text Primary | #1D1D1F | rgb(29, 29, 31) | hsl(240, 3%, 12%) | AAA on white (15.4:1) | ### Semantic Colors | Semantic | HEX | RGB | HSL | Usage | |----------|-----|-----|-----|-------| | Success | #34C759 | rgb(52, 199, 89) | hsl(145, 63%, 49%) | Confirmation, completion | | Warning | #FF9500 | rgb(255, 149, 0) | hsl(35, 100%, 50%) | Caution, pending | | Error | #FF3B30 | rgb(255, 59, 48) | hsl(3, 100%, 59%) | Failure, destructive | | Info | #5AC8FA | rgb(90, 200, 250) | hsl(199, 94%, 67%) | Information, neutral | ### Dark Mode Equivalents | Color | HEX | Contrast Ratio | |-------|-----|----------------| | Primary | #0A84FF | 4.8:1 on #000000 | | Secondary | #6E6AE2 | 4.6:1 on #000000 | | Accent | #FF6B8A | 4.5:1 on #000000 | | Background | #000000 | N/A | | Surface | #1C1C1E | N/A | | Text Primary | #F5F5F7 | 15.4:1 on #000000 | ### Color Usage Rules - **Primary**: Main actions, links, active states, focus indicators - **Secondary**: Secondary actions, selected states, informational elements - **Accent**: Highlights, promotions, special features (use sparingly - max 5% of screen) - **Background**: Base canvas, never use for content - **Surface**: Cards, sheets, elevated containers - **Text Primary**: All body text, headings, labels --- ## Typography ### Primary Typeface: SF Pro | Style | Weight | Size | Line Height | Letter Spacing | |-------|--------|------|-------------|----------------| | Display | 700 | 44px | 52px | -0.5px | | Headline | 700 | 28px | 34px | -0.3px | | Title | 600 | 22px | 28px | -0.2px | | Body | 400 | 17px | 24px | -0.1px | | Callout | 400 | 16px | 22px | 0px | | Subheadline | 400 | 15px | 20px | 0px | | Footnote | 400 | 13px | 18px | 0px | | Caption | 400 | 12px | 16px | 0px | ### Font Pairing Strategy - **Primary**: SF Pro for all UI elements - **Secondary**: SF Pro Rounded for numbers, stats, and data visualization - **Fallback**: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif ### Accessibility Minimums - Body text: 17px minimum (16px for secondary content) - Interactive elements: 17px minimum - Caption text: 12px minimum (never below) - Contrast: 4.5:1 minimum for all text --- ## Layout Grid ### Responsive Grid Specifications | Breakpoint | Device | Columns | Gutter | Margin | |------------|--------|---------|--------|--------| | Desktop | 1440px | 12 | 24px | 80px | | Tablet | 768px | 8 | 20px | 40px | | Mobile | 375px | 4 | 16px | 20px | ### Breakpoint Definitions - **Small**: 0 - 767px (mobile) - **Medium**: 768px - 1023px (tablet) - **Large**: 1024px - 1439px (desktop) - **Extra Large**: 1440px+ (wide desktop) ### Safe Areas - Top: 44px (notch devices) - Bottom: 34px (home indicator) - Left/Right: 20px (landscape notch) --- ## Spacing System ### 8px-Based Scale | Token | Value | Usage | |-------|-------|-------| | space-1 | 4px | Icon gaps, inline elements | | space-2 | 8px | Compact spacing, icon-to-text | | space-3 | 12px | Button padding, small cards | | space-4 | 16px | Default padding, form fields | | space-5 | 24px | Card padding, section gaps | | space-6 | 32px | Component groups | | space-7 | 48px | Section separation | | space-8 | 64px | Major sections | | space-9 | 96px | Page-level spacing | | space-10 | 128px | Hero sections, large breaks | --- # 2. COMPONENTS --- ## Navigation ### Header **Anatomy**: Logo (left) + Navigation Links (center) + Actions (right) **States**: Default, Scrolled (adds shadow), Mobile (hamburger) **Usage**: Global navigation, persistent across pages **Accessibility**: Skip to content link, ARIA label "Main navigation" **Specs**: Height 64px, padding 0 24px, background #FFFFFF, shadow 0 1px 3px rgba(0,0,0,0.1) --- ### Tab Bar **Anatomy**: 3-5 tabs with icon + label **States**: Default, Active (primary color), Disabled **Usage**: Mobile primary navigation, max 5 tabs **Accessibility**: ARIA role "tablist", keyboard arrow navigation **Specs**: Height 49px, icon 24px, label 10px, active color #0071E3 --- ### Sidebar **Anatomy**: Navigation items with icons + labels, collapsible sections **States**: Default, Hover, Active, Collapsed **Usage**: Desktop secondary navigation, settings pages **Accessibility**: ARIA role "navigation", focus states with 2px outline **Specs**: Width 280px, item height 44px, padding 8px 12px, border-radius 8px --- ### Breadcrumbs **Anatomy**: Page hierarchy with separators **States**: Default, Hover, Current (bold) **Usage**: Deep navigation, e-commerce categories **Accessibility**: ARIA label "Breadcrumb", current page marked with aria-current **Specs**: Font 13px, separator " / " with 8px padding, color #86868B --- ## Input Components ### Buttons **Variants**: Primary, Secondary, Tertiary, Destructive, Link, Icon **Anatomy**: Container + Label + Optional Icon **States**: Default, Hover, Active, Disabled, Loading, Focus **Usage**: Primary for main action, Secondary for alternatives, Tertiary for less important **Accessibility**: ARIA role "button", min 44x44px touch target, focus ring 3px **Specs**: - Primary: bg #0071E3, text #FFFFFF, radius 12px, padding 12px 24px - Secondary: bg #F5F5F7, text #1D1D1F, radius 12px, padding 12px 24px - Tertiary: bg transparent, text #0071E3, radius 12px, padding 12px 24px - Destructive: bg #FF3B30, text #FFFFFF, radius 12px, padding 12px 24px - Link: bg transparent, text #0071E3, no border, padding 0 - Icon: 44x44px, radius 12px, icon 20px --- ### Text Fields **Anatomy**: Label + Input + Helper Text + Error Message **States**: Default, Focus, Error, Disabled, Filled **Usage**: Single-line text input, forms, search **Accessibility**: ARIA label, error message with aria-describedby **Specs**: Height 44px, padding 0 16px, radius 12px, border 1px #D1D1D6, focus border 2px #0071E3 --- ### Dropdowns **Anatomy**: Trigger + Selected Value + Options List **States**: Default, Open, Selected, Disabled **Usage**: Single selection from predefined options **Accessibility**: ARIA role "combobox", keyboard navigation with arrows **Specs**: Height 44px, radius 12px, options list with 8px padding, max height 280px --- ### Toggles **Anatomy**: Track + Thumb + Label **States**: On, Off, Disabled **Usage**: Binary settings, immediate effect **Accessibility**: ARIA role "switch", keyboard toggle with Space **Specs**: Width 51px, height 31px, thumb 27px, on color #34C759 --- ### Checkboxes **Anatomy**: Box + Label + Optional Description **States**: Unchecked, Checked, Indeterminate, Disabled **Usage**: Multi-select options, forms **Accessibility**: ARIA role "checkbox", keyboard toggle with Space **Specs**: 22x22px, radius 6px, check icon 14px, label 17px --- ### Radio Buttons **Anatomy**: Circle + Label + Optional Description **States**: Unselected, Selected, Disabled **Usage**: Single selection from small option sets (max 5) **Accessibility**: ARIA role "radio", arrow key navigation **Specs**: 22x22px, inner dot 12px, label 17px --- ### Sliders **Anatomy**: Track + Thumb + Value Label **States**: Default, Dragging, Disabled **Usage**: Continuous value selection, volume, brightness **Accessibility**: ARIA role "slider", arrow keys for adjustment **Specs**: Track height 4px, thumb 28px, radius 50% --- ## Feedback Components ### Alerts **Anatomy**: Icon + Title + Message + Actions **States**: Success, Warning, Error, Info **Usage**: Important information requiring user attention **Accessibility**: ARIA role "alert", focus moves to alert **Specs**: Width 320px, radius 16px, padding 20px, shadow 0 8px 24px rgba(0,0,0,0.15) --- ### Toasts **Anatomy**: Icon + Message + Optional Action **States**: Success, Error, Info **Usage**: Transient feedback, auto-dismiss after 4 seconds **Accessibility**: ARIA role "status", pause on hover **Specs**: Width auto (max 480px), height 44px, radius 12px, padding 0 16px, bottom 24px --- ### Modals **Anatomy**: Overlay + Container + Title + Content + Actions **States**: Open, Closing **Usage**: Focused tasks, confirmations, forms **Accessibility**: Focus trap, ESC to close, ARIA role "dialog" **Specs**: Width 540px (desktop), 90% (mobile), radius 20px, overlay rgba(0,0,0,0.4) --- ### Progress Indicators **Variants**: Linear, Circular, Indeterminate **Anatomy**: Track + Fill + Optional Label **States**: Progressing, Complete, Error **Usage**: Loading states, upload progress **Accessibility**: ARIA role "progressbar", aria-valuenow **Specs**: Linear height 4px, circular 32px, color #0071E3 --- ### Skeleton Screens **Anatomy**: Placeholder blocks matching content layout **States**: Loading **Usage**: Initial content loading, image placeholders **Accessibility**: ARIA label "Loading", reduced motion support **Specs**: Background #E5E5EA, radius 8px, shimmer animation 1.5s --- ## Data Display ### Cards **Anatomy**: Container + Image + Title + Description + Actions **States**: Default, Hover (elevation), Selected, Disabled **Usage**: Content collections, dashboards, media **Accessibility**: ARIA role "article", keyboard focusable **Specs**: Radius 16px, padding 20px, shadow 0 2px 8px rgba(0,0,0,0.08), hover shadow 0 4px 16px --- ### Tables **Anatomy**: Header Row + Data Rows + Optional Footer **States**: Default, Hover, Selected, Sorted **Usage**: Structured data comparison, dense information **Accessibility**: ARIA role "table", sort indicators with aria-sort **Specs**: Cell padding 12px 16px, header 13px bold, row height 44px, border-bottom 1px #E5E5EA --- ### Lists **Anatomy**: Items with icon + title + subtitle + optional action **States**: Default, Hover, Selected, Swipeable (mobile) **Usage**: Navigation, settings, contacts **Accessibility**: ARIA role "list", keyboard navigation **Specs**: Item height 44px, padding 0 16px, radius 8px, separator 1px #E5E5EA --- ### Stats **Anatomy**: Value + Label + Optional Trend Indicator **States**: Default, Positive, Negative **Usage**: KPIs, metrics, dashboards **Accessibility**: ARIA label with context **Specs**: Value 28px bold, label 13px, trend icon 16px --- ### Charts **Variants**: Line, Bar, Pie, Donut **Anatomy**: Chart Area + Axes + Legend + Tooltip **States**: Default, Hover (tooltip), Selected **Usage**: Data visualization, trends, comparisons **Accessibility**: Data table alternative, ARIA label with summary **Specs**: Tooltip 12px, legend 13px, grid lines #E5E5EA --- ## Media Components ### Image Containers **Anatomy**: Image + Optional Overlay + Optional Caption **States**: Default, Loading, Error, Zoomed **Usage**: Product images, galleries, avatars **Accessibility**: Alt text required, ARIA role "img" **Specs**: Radius 12px, object-fit cover, loading skeleton 1.5s --- ### Video Players **Anatomy**: Player + Controls + Progress + Fullscreen **States**: Playing, Paused, Buffering, Error **Usage**: Product demos, tutorials, media content **Accessibility**: Keyboard controls, captions required, ARIA role "application" **Specs**: Controls height 44px, progress 4px, play button 44px --- ### Avatars **Anatomy**: Image + Optional Status Indicator **States**: Default, Hover, Selected, Offline **Usage**: User profiles, comments, team lists **Accessibility**: Alt text with user name **Specs**: Sizes 24px, 32px, 40px, 56px, 80px; radius 50%; status dot 12px --- # 3. PATTERNS --- ## Page Templates ### Landing Page **Structure**: Hero + Features + Testimonials + Pricing + CTA + Footer **Key Elements**: Large headline (44px), primary CTA, product imagery, social proof **Spacing**: 96px section gaps, 64px internal padding --- ### Dashboard **Structure**: Sidebar + Header + Stats Row + Charts + Recent Activity **Key Elements**: KPI cards (3-4), data visualization, quick actions **Spacing**: 24px card gaps, 32px section gaps --- ### Settings **Structure**: Sidebar Navigation + Content Sections **Key Elements**: Grouped sections, toggles, dropdowns, save button **Spacing**: 32px section gaps, 24px item gaps --- ### Profile **Structure**: Header + Avatar + Bio + Activity + Connections **Key Elements**: Large avatar (80px), name, bio, stats, edit button **Spacing**: 32px section gaps, 16px item gaps --- ### Checkout **Structure**: Steps + Form + Order Summary + Payment **Key Elements**: Progress indicator, form fields, order summary card, pay button **Spacing**: 32px section gaps, 24px form field gaps --- ## User Flows ### Onboarding **Steps**: Welcome → Features → Personalization → Permissions → Complete **Pattern**: 3-5 screens, progress indicator, skip option **Best Practice**: Show value first, minimize friction, allow skip --- ### Authentication **Steps**: Email → Password → Verification → Success **Pattern**: Single form, error states, password recovery link **Best Practice**: Clear error messages, show/hide password, remember me --- ### Search **Steps**: Input → Results → Filter → Select **Pattern**: Search bar with suggestions, results list, filter options **Best Practice**: Debounce input (300ms), show recent searches, empty state --- ### Filtering **Steps**: Select Category → Apply Filters → View Results → Clear **Pattern**: Filter panel with checkboxes, sliders, dropdowns **Best Practice**: Show active filter count, allow multi-select, clear all option --- ### Empty States **Elements**: Illustration + Title + Description + Action **Pattern**: Friendly illustration, clear explanation, next step CTA **Best Practice**: Never show blank space, provide guidance, include action --- ## Feedback Patterns ### Success **Elements**: Green checkmark + Confirmation message **Timing**: Immediate, auto-dismiss (toast) or persistent (alert) **Best Practice**: Confirm action completed, provide next step --- ### Error **Elements**: Red icon + Error message + Recovery action **Timing**: Immediate, persistent until resolved **Best Practice**: Explain what happened, provide solution, never blame user --- ### Loading **Elements**: Spinner or skeleton + Status message **Timing**: Under 1s (skeleton), 1-3s (spinner), 3s+ (progress bar) **Best Practice**: Show progress, allow cancellation, never block navigation --- ### Empty **Elements**: Illustration + Explanation + Action **Timing**: When no data exists **Best Practice**: Make it helpful, provide clear next step, match brand tone --- # 4. TOKENS --- ```json { "tokens": { "color": { "primary": { "default": "#0071E3", "hover": "#0077ED", "active": "#0066CC", "disabled": "#99C9F5", "dark": "#0A84FF" }, "secondary": { "default": "#5856D6", "hover": "#5E5CE6", "active": "#4F4DBF", "disabled": "#B8B7E8", "dark": "#6E6AE2" }, "accent": { "default": "#FF375F", "hover": "#FF4D70", "active": "#E62E52", "disabled": "#FFB3C2", "dark": "#FF6B8A" }, "background": { "light": "#FFFFFF", "dark": "#000000" }, "surface": { "light": "#F5F5F7", "dark": "#1C1C1E" }, "text": { "primary": { "light": "#1D1D1F", "dark": "#F5F5F7" }, "secondary": { "light": "#86868B", "dark": "#98989D" }, "disabled": { "light": "#C7C7CC", "dark": "#48484A" } }, "semantic": { "success": { "light": "#34C759", "dark": "#30D158" }, "warning": { "light": "#FF9500", "dark": "#FF9F0A" }, "error": { "light": "#FF3B30", "dark": "#FF453A" }, "info": { "light": "#5AC8FA", "dark": "#64D2FF" } } }, "typography": { "display": { "fontSize": "44px", "lineHeight": "52px", "fontWeight": 700, "letterSpacing": "-0.5px" }, "headline": { "fontSize": "28px", "lineHeight": "34px", "fontWeight": 700, "letterSpacing": "-0.3px" }, "title": { "fontSize": "22px", "lineHeight": "28px", "fontWeight": 600, "letterSpacing": "-0.2px" }, "body": { "fontSize": "17px", "lineHeight": "24px", "fontWeight": 400, "letterSpacing": "-0.1px" }, "callout": { "fontSize": "16px", "lineHeight": "22px", "fontWeight": 400, "letterSpacing": "0px" }, "subheadline": { "fontSize": "15px", "lineHeight": "20px", "fontWeight": 400, "letterSpacing": "0px" }, "footnote": { "fontSize": "13px", "lineHeight": "18px", "fontWeight": 400, "letterSpacing": "0px" }, "caption": { "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "letterSpacing": "0px" } }, "spacing": { "space-1": "4px", "space-2": "8px", "space-3": "12px", "space-4": "16px", "space-5": "24px", "space-6": "32px", "space-7": "48px", "space-8": "64px", "space-9": "96px", "space-10": "128px" }, "radius": { "small": "8px", "medium": "12px", "large": "16px", "xlarge": "20px", "full": "50%" }, "shadow": { "small": "0 1px 3px rgba(0,0,0,0.08)", "medium": "0 2px 8px rgba(0,0,0,0.08)", "large": "0 4px 16px rgba(0,0,0,0.12)", "xlarge": "0 8px 24px rgba(0,0,0,0.15)" }, "breakpoints": { "small": "375px", "medium": "768px", "large": "1024px", "xlarge": "1440px" }, "grid": { "columns": { "small": 4, "medium": 8, "large": 12 }, "gutter": { "small": "16px", "medium": "20px", "large": "24px" }, "margin": { "small": "20px", "medium": "40px", "large": "80px" } }, "components": { "button": { "height": "44px", "padding": "12px 24px", "radius": "12px", "fontSize": "17px" }, "input": { "height": "44px", "padding": "0 16px", "radius": "12px", "border": "1px solid #D1D1D6" }, "card": { "padding": "20px", "radius": "16px", "shadow": "0 2px 8px rgba(0,0,0,0.08)" }, "modal": { "width": "540px", "radius": "20px", "padding": "24px" }, "toast": { "height": "44px", "padding": "0 16px", "radius": "12px", "duration": "4s" } }, "animation": { "duration": { "fast": "150ms", "normal": "250ms", "slow": "400ms" }, "easing": { "standard": "cubic-bezier(0.4, 0, 0.2, 1)", "decelerate": "cubic-bezier(0, 0, 0.2, 1)", "accelerate": "cubic-bezier(0.4, 0, 1, 1)" } } } } ``` --- # 5. DOCUMENTATION --- ## Design Principles ### 1. Clarity Through Simplicity **Principle**: Remove complexity to reveal the essential. Every element must serve a purpose. **Example**: A checkout form shows only required fields with clear labels. Optional fields are hidden behind "Add optional details" to reduce cognitive load. --- ### 2. Consistency Creates Trust **Principle**: Similar actions produce similar results. Reuse patterns and components across the product. **Example**: All destructive actions use the same red button style with the same confirmation dialog, regardless of context. --- ### 3. Feedback Builds Confidence **Principle**: Every user action produces immediate, visible feedback. Users always know what happened and what will happen next. **Example**: After submitting a form, a success toast appears with a checkmark, and the form transitions to a confirmation state. --- ## Do's and Don'ts ### 1. Button Labels **DO**: Use action verbs - "Save Changes", "Delete Account", "Continue" **DON'T**: Use vague labels - "OK", "Submit", "Click Here" --- ### 2. Form Validation **DO**: Validate inline with clear error messages below the field **DON'T**: Validate only on submit with a general error at the top --- ### 3. Loading States **DO**: Use skeleton screens that match the final content layout **DON'T**: Use full-screen spinners that block all interaction --- ### 4. Empty States **DO**: Provide a helpful illustration with a clear next action **DON'T**: Show a blank page with no guidance --- ### 5. Navigation **DO**: Keep navigation consistent across all pages **DON'T**: Change navigation structure based on page type --- ### 6. Color Usage **DO**: Use color to convey meaning and state **DON'T**: Use color as the only indicator (always pair with icons/text) --- ### 7. Typography **DO**: Use the type scale consistently for hierarchy **DON'T**: Use multiple font families or arbitrary sizes --- ### 8. Touch Targets **DO**: Maintain 44x44px minimum touch targets **DON'T**: Make interactive elements smaller than 44px --- ### 9. Error Messages **DO**: Explain what happened and how to fix it **DON'T**: Use technical jargon or blame the user --- ### 10. Dark Mode **DO**: Design dark mode from the start, not as an afterthought **DON'T**: Simply invert colors - adjust saturation and contrast --- ## Implementation Guide for Developers ### Getting Started 1. Install the design token package 2. Import the CSS variables or JSON tokens 3. Use the component library (React, Vue, or Swift) 4. Follow the spacing and typography scale ### Best Practices - Use semantic tokens, not hardcoded values - Support both light and dark mode via CSS variables - Test all components at minimum touch target sizes - Implement keyboard navigation for all interactive elements - Use ARIA labels for screen reader compatibility - Test with 200% zoom for accessibility ### Performance - Lazy load images and media - Use system fonts for faster rendering - Optimize SVG icons (24px default) - Minimize shadow usage for better performance ### Accessibility Checklist - All images have alt text - All form fields have labels - All interactive elements are keyboard accessible - Color contrast meets WCAG 2.1 AA standards - Motion respects prefers-reduced-motion - Focus states are visible and consistent ### Browser Support - Safari 14+ - Chrome 88+ - Firefox 85+ - Edge 88+ - iOS 14+ - Android 11+ --- *This design system is maintained by the [BRAND/PRODUCT NAME] Design Team. For questions or contributions, contact the design system team.*