onemore-design 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE +21 -0
  2. package/SKILL.md +180 -0
  3. package/bin/onemore.js +23 -0
  4. package/data/audit/hig-checklist.csv +39 -0
  5. package/data/components/content.csv +17 -0
  6. package/data/components/controls.csv +21 -0
  7. package/data/components/feedback.csv +17 -0
  8. package/data/components/input.csv +11 -0
  9. package/data/components/navigation.csv +15 -0
  10. package/data/foundations/colors.csv +38 -0
  11. package/data/foundations/corners.csv +13 -0
  12. package/data/foundations/elevation.csv +17 -0
  13. package/data/foundations/spacing.csv +21 -0
  14. package/data/foundations/typography.csv +26 -0
  15. package/data/patterns/animation.csv +24 -0
  16. package/data/patterns/gestures.csv +11 -0
  17. package/data/patterns/interaction.csv +16 -0
  18. package/data/patterns/layout.csv +20 -0
  19. package/data/platforms/ios.csv +21 -0
  20. package/data/platforms/macos.csv +16 -0
  21. package/data/platforms/visionos.csv +11 -0
  22. package/data/platforms/watchos.csv +11 -0
  23. package/data/platforms/web-apple.csv +21 -0
  24. package/data/reasoning/apple-reasoning.csv +16 -0
  25. package/data/stacks/astro.csv +21 -0
  26. package/data/stacks/flutter.csv +29 -0
  27. package/data/stacks/html-tailwind.csv +26 -0
  28. package/data/stacks/nativewind.csv +26 -0
  29. package/data/stacks/nextjs.csv +26 -0
  30. package/data/stacks/nuxtjs.csv +21 -0
  31. package/data/stacks/react-native.csv +26 -0
  32. package/data/stacks/react.csv +26 -0
  33. package/data/stacks/shadcn.csv +25 -0
  34. package/data/stacks/svelte.csv +21 -0
  35. package/data/stacks/swiftui.csv +31 -0
  36. package/data/stacks/uikit.csv +21 -0
  37. package/data/stacks/vue.csv +21 -0
  38. package/package.json +51 -0
  39. package/scripts/__init__.py +0 -0
  40. package/scripts/__pycache__/__init__.cpython-314.pyc +0 -0
  41. package/scripts/__pycache__/core.cpython-314.pyc +0 -0
  42. package/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
  43. package/scripts/__pycache__/exporter.cpython-314.pyc +0 -0
  44. package/scripts/__pycache__/platforms.cpython-314.pyc +0 -0
  45. package/scripts/__pycache__/redesign.cpython-314.pyc +0 -0
  46. package/scripts/core.py +242 -0
  47. package/scripts/design_system.py +291 -0
  48. package/scripts/exporter.py +717 -0
  49. package/scripts/platforms.py +309 -0
  50. package/scripts/redesign.py +758 -0
  51. package/scripts/search.py +426 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Juba Kitiashvili
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/SKILL.md ADDED
@@ -0,0 +1,180 @@
1
+ ---
2
+ name: onemore
3
+ description: "Apple HIG design intelligence. Generates Apple-quality UI across all platforms (iOS, macOS, watchOS, visionOS, web). Actions: design, build, create, implement, review, audit, fix, improve UI/UX code. Styles: Apple HIG, Cupertino, SF Pro, system colors, spring animations, materials, vibrancy. Projects: iOS app, macOS app, website, landing page, dashboard, mobile app, SwiftUI, React, React Native, Flutter. Elements: navigation bar, tab bar, toolbar, button, toggle, slider, picker, sheet, alert, list, card, search bar. Topics: spacing, typography, color system, dark mode, accessibility, dynamic type, haptics, gestures, continuous corners, SF Symbols."
4
+ ---
5
+
6
+ # OneMore — Apple HIG Design Intelligence
7
+
8
+ One more thing your design needs.
9
+
10
+ OneMore is an Apple HIG design intelligence skill for Claude Code. It provides authoritative, up-to-date Apple Human Interface Guidelines data, searchable by domain, platform, and stack, so every UI decision you make is grounded in Apple-quality design principles.
11
+
12
+ ---
13
+
14
+ ## Apple HIG Core Principles
15
+
16
+ - **Clarity** — Text is legible, icons precise, adornments subtle. Function drives form.
17
+ - **Deference** — UI helps people understand and interact with content without competing with it.
18
+ - **Depth** — Visual layers and realistic motion convey hierarchy and aid understanding.
19
+ - **Consistency** — Familiar standards and paradigms let people transfer knowledge across apps.
20
+ - **Direct Manipulation** — Interaction with content feels immediate and results are visible.
21
+ - **Feedback** — Every action has a response; status is always communicated clearly.
22
+
23
+ ---
24
+
25
+ ## Priority Rules Quick Reference
26
+
27
+ | Priority | Category | Impact |
28
+ |----------|----------|--------|
29
+ | 1 | Accessibility & Dynamic Type | CRITICAL |
30
+ | 2 | Touch Targets & Safe Areas | CRITICAL |
31
+ | 3 | Typography (SF Pro/NY system) | HIGH |
32
+ | 4 | Color System (semantic, adaptive) | HIGH |
33
+ | 5 | Spacing (4pt grid) | HIGH |
34
+ | 6 | Components (native patterns) | MEDIUM |
35
+ | 7 | Animation (spring physics) | MEDIUM |
36
+ | 8 | Platform-Specific Patterns | MEDIUM |
37
+
38
+ ---
39
+
40
+ ## Apple Design Maxims
41
+
42
+ These rules separate Apple-quality design from generic AI output:
43
+
44
+ ### One Focal Point Per Section
45
+ Every section gets ONE headline, ONE visual, ONE CTA. If you're adding a second visual or third button, the section is too busy. Split it or simplify.
46
+
47
+ ### Dark for Product, Light for Text
48
+ Product showcases and hero visuals use dark/black backgrounds. Text-heavy sections (features, pricing, FAQ) use light backgrounds. Alternate between them for visual rhythm.
49
+
50
+ ### Apple Product Page Animation Standard (Default)
51
+ The default animation approach matches Apple's product pages — the most iconic Apple experience:
52
+
53
+ **Hero (on load, not scroll):**
54
+ - Staggered entrance: tag → headline → subtitle → CTAs → visual mockup
55
+ - Each element: opacity 0→1, translateY(30px→0), 600ms cubic-bezier(0.25, 0.1, 0.25, 1)
56
+ - Stagger delay: 150-200ms between elements
57
+
58
+ **Every Section (scroll-triggered):**
59
+ - Use IntersectionObserver (threshold: 0.15) to trigger reveals
60
+ - Section headline fades up first, then content staggers in
61
+ - Each element: opacity 0→1, translateY(30px→0)
62
+ - Stagger delay: 100-150ms between sibling elements
63
+
64
+ **Visual Elements (scroll-linked):**
65
+ - Product mockups/dashboards: parallax effect (move at 0.3x scroll speed)
66
+ - Large visuals: clip-path reveal (inset 8%→0%) as they scroll into view
67
+ - Charts/graphs: draw animation (SVG stroke-dasharray)
68
+ - Numbers: count-up animation with ease-out cubic
69
+
70
+ **Hover Interactions:**
71
+ - Cards: translateY(-4px) + shadow increase, 200ms transition
72
+ - Buttons: subtle scale(1.02) or background shift
73
+ - Links: color transition 150ms
74
+
75
+ **Easing:** Always cubic-bezier(0.25, 0.1, 0.25, 1) — Apple's standard curve
76
+ **Performance:** Only animate transform and opacity (GPU-accelerated)
77
+ **Accessibility:** All animations disabled when prefers-reduced-motion is set
78
+
79
+ **When to use LESS animation:**
80
+ - Developer documentation / technical content → zero scroll animation
81
+ - E-commerce / transactional pages → minimal, speed-first
82
+ - Data-heavy dashboards → animate data viz only, not chrome
83
+
84
+ ### Generous Negative Space
85
+ Apple's exact spacing scale from 25 pages analyzed:
86
+ - Between elements: 8, 16, 20, 24px
87
+ - Section internal padding: 32, 40, 48px
88
+ - Between sections: 56, 64, 72, 80, 96, 120px
89
+ - Desktop sections: 80-120px vertical padding
90
+ - Tablet sections: 72-96px
91
+ - Mobile sections: 40-72px
92
+ - Content max-width: 980px for text, 1200px for card grids
93
+
94
+ ### Accent Color Identity
95
+ Every project gets ONE accent color (not always systemBlue). Choose from the reasoning database based on app category. Use it sparingly — primary CTAs and key highlights only.
96
+
97
+ ---
98
+
99
+ ## Quick Reference
100
+
101
+ - **Accessibility**: 4.5:1 contrast ratio minimum, VoiceOver labels on all interactive elements, Dynamic Type support required
102
+ - **Touch**: 44pt minimum touch target on iOS, 60pt minimum on visionOS
103
+ - **Typography**: SF Pro on native Apple platforms, Inter or system-ui on web; body text 17pt iOS / 13pt macOS
104
+ - **Colors**: Always use semantic color tokens, support dark mode, never hardcode hex values
105
+ - **Spacing**: 4pt grid — values: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48
106
+ - **Components**: Prefer native controls, use continuous corners on all rounded rects
107
+ - **Animation**: Spring physics only — never `linear` or `ease` for UI motion
108
+ - **Platform**: iOS, macOS, and visionOS have distinct patterns — verify per-platform before shipping
109
+
110
+ ---
111
+
112
+ ## How to Use
113
+
114
+ **Step 1: Analyze requirements**
115
+ Identify the product type (app, website, dashboard), target platform (iOS, macOS, visionOS, web), and tech stack (SwiftUI, React, React Native, Flutter).
116
+
117
+ **Step 2: Generate a design system**
118
+ ```
119
+ python3 scripts/search.py "query" --design-system -p "ProjectName"
120
+ ```
121
+
122
+ **Step 3: Search specific domains**
123
+ ```
124
+ python3 scripts/search.py "keyword" --domain colors
125
+ ```
126
+ Available domains: `colors`, `typography`, `spacing`, `components`, `animation`, `patterns`, `accessibility`
127
+
128
+ **Step 4: Get platform guidelines**
129
+ ```
130
+ python3 scripts/search.py "keyword" --platform ios
131
+ ```
132
+ Available platforms: `ios`, `macos`, `watchos`, `visionos`, `web`
133
+
134
+ **Step 5: Get stack implementation**
135
+ ```
136
+ python3 scripts/search.py "keyword" --stack swiftui
137
+ ```
138
+ Available stacks: `swiftui`, `react`, `react-native`, `flutter`, `html-tailwind`
139
+
140
+ ---
141
+
142
+ ## Font Licensing Note
143
+
144
+ SF Pro and SF New York are licensed exclusively for use on Apple platforms (iOS, macOS, watchOS, visionOS). Do not embed or serve them on the web.
145
+
146
+ For web projects, use the following font stack:
147
+ ```css
148
+ font-family: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
149
+ ```
150
+
151
+ ---
152
+
153
+ ## Pre-Delivery Checklist
154
+
155
+ - [ ] Uses Apple spacing scale (4pt grid)
156
+ - [ ] Typography: SF Pro (native) or Inter/system-ui (web)
157
+ - [ ] Semantic color tokens, dark mode tested
158
+ - [ ] Continuous corners (`borderCurve: continuous`)
159
+ - [ ] Touch targets min 44pt (60pt visionOS)
160
+ - [ ] Spring animations, no linear/ease
161
+ - [ ] Dynamic Type / font scaling supported
162
+ - [ ] No emoji icons — SF Symbols or Lucide/Heroicons
163
+ - [ ] Platform-appropriate patterns
164
+ - [ ] Accessibility: VoiceOver, 4.5:1 contrast, focus states
165
+ - [ ] Materials/vibrancy where appropriate
166
+ - [ ] Safe areas respected
167
+
168
+ ---
169
+
170
+ ## Anti-Patterns
171
+
172
+ | Anti-Pattern | Fix |
173
+ |---|---|
174
+ | `border-radius: 8px` | Continuous corners, platform-correct radii |
175
+ | Arial/Helvetica | SF Pro (native), Inter (web) |
176
+ | Random spacing | 4pt grid |
177
+ | Flat lifeless UI | Materials, vibrancy, shadows |
178
+ | `ease-in-out` | Spring physics |
179
+ | `#000000` text | Semantic label color (`#1d1d1f` on web) |
180
+ | Emoji icons | SF Symbols or equivalent SVG |
package/bin/onemore.js ADDED
@@ -0,0 +1,23 @@
1
+ #!/usr/bin/env node
2
+
3
+ const { execSync } = require('child_process');
4
+ const path = require('path');
5
+ const fs = require('fs');
6
+
7
+ const args = process.argv.slice(2);
8
+ const scriptDir = path.join(__dirname, '..', 'scripts');
9
+ const searchPy = path.join(scriptDir, 'search.py');
10
+
11
+ if (!fs.existsSync(searchPy)) {
12
+ console.error('Error: search.py not found at', searchPy);
13
+ process.exit(1);
14
+ }
15
+
16
+ try {
17
+ const result = execSync(`python3 "${searchPy}" ${args.join(' ')}`, {
18
+ stdio: 'inherit',
19
+ cwd: path.join(__dirname, '..'),
20
+ });
21
+ } catch (e) {
22
+ process.exit(e.status || 1);
23
+ }
@@ -0,0 +1,39 @@
1
+ keyword,rule_id,category,description,check_instruction,severity,weight
2
+ min-tap-target,TC-01,touch,Interactive elements must be at least 44x44pt,Measure all buttons icons and tappable areas — flag anything below 44x44pt,critical,10
3
+ tap-feedback,TC-02,touch,Tappable elements must provide immediate visual feedback,Verify pressed states exist on all interactive elements; no silent taps,high,8
4
+ base-spacing,SP-01,spacing,Minimum 8pt spacing between interactive elements,Check that adjacent tappable elements have at least 8pt separation,high,7
5
+ screen-margin,SP-02,spacing,Content must respect 16pt horizontal safe-area margin on iPhone,Confirm leading and trailing content insets are 16pt minimum on iPhone,critical,9
6
+ consistent-spacing,SP-03,spacing,Use spacing scale values (4/8/12/16/20/24/32pt) — no arbitrary values,Audit layout constants for off-scale values like 5 7 11 15 or 22pt,medium,6
7
+ dynamic-type,TY-01,typography,All text must support Dynamic Type scaling,Enable largest accessibility text size and verify no truncation or overlap,critical,10
8
+ text-contrast,TY-02,typography,Body text must meet 4.5:1 contrast ratio (WCAG AA),Run contrast check on all text/background combinations,critical,10
9
+ max-font-size,TY-03,typography,Display text should not exceed 34pt for body content,Check that body paragraph text stays within largeTitle size or smaller,medium,5
10
+ system-colors,CL-01,color,Use Apple semantic system colors not hardcoded hex values,Search for hardcoded color values that should be semantic tokens,high,8
11
+ dark-mode-colors,CL-02,color,All UI colors must adapt correctly in dark mode,Toggle dark mode and inspect every screen for unreadable or missing colors,critical,10
12
+ color-not-only,CL-03,color,Do not use color as the only way to convey information,Check that status icons and badges also use text or iconography,high,7
13
+ spring-animation,AN-01,animation,Use spring or natural easing — avoid linear or ease-in-out tweens,Review animation curves in all transitions and confirm no linear timing,medium,5
14
+ reduced-motion,AN-02,animation,All animations must respect Reduce Motion accessibility setting,Enable Reduce Motion and confirm animations fade or disable gracefully,critical,9
15
+ continuous-corners,CR-01,corners,Use continuous (squircle) corner style not circular,Verify cornerCurve is continuous on all rounded rectangles,high,6
16
+ corner-consistency,CR-02,corners,Corner radii must match the component type from the HIG scale,Audit radius values against: button 12 card 10/16/24 sheet 21,medium,5
17
+ voiceover,AX-01,accessibility,All interactive elements must have an accessibility label,Run VoiceOver and confirm every button and icon announces a meaningful label,critical,10
18
+ focus-order,AX-02,accessibility,Focus order must follow logical reading order top-to-bottom left-to-right,Navigate screen with VoiceOver and verify order matches visual layout,high,8
19
+ color-blind,AX-03,accessibility,UI must be usable with color blindness filters,Enable Color Filters (Deuteranopia) and confirm all states are distinguishable,high,7
20
+ font-legibility,AX-04,accessibility,Minimum body font size is 15pt; avoid sub-12pt text,Search codebase for fontSize values below 12 and audit legibility,high,7
21
+ error-description,AX-05,accessibility,Error states must provide descriptive accessible text not just color,Confirm error messages are read by VoiceOver and include corrective guidance,critical,9
22
+ native-controls,CO-01,components,Prefer native iOS controls over custom re-implementations,Identify any custom date pickers toggles or pickers — evaluate replacement,medium,6
23
+ standard-nav,CO-02,components,Use UINavigationController tab bar and sheet patterns as specified by HIG,Confirm navigation follows standard push/pop tab and modal patterns,high,7
24
+ swipe-actions,CO-03,components,List rows should support swipe-to-delete or swipe actions when appropriate,Verify list items that support deletion have trailing swipe action,medium,5
25
+ safe-areas,PL-01,platform,All content must respect device safe area insets,Check top bottom and side insets — no content hidden behind notch or home indicator,critical,10
26
+ platform-idiom,PL-02,platform,iPad layout must use sidebar or split view at regular width,On iPad verify app shows sidebar or multi-column layout not stretched iPhone layout,high,7
27
+ dark-system-bg,DM-01,dark-mode,Backgrounds must use systemBackground not #FFFFFF hardcoded,Search for hardcoded white backgrounds and replace with semantic tokens,critical,9
28
+ dark-images,DM-02,dark-mode,Images and icons must have dark-mode variants or use SF Symbols,Check asset catalog for dark mode variants on all color-sensitive images,high,7
29
+ dark-contrast,DM-03,dark-mode,Text contrast must meet 4.5:1 in both light and dark modes,Run contrast audit in dark mode across all text and background combinations,critical,10
30
+ sf-symbols,IC-01,icons,Use SF Symbols for system iconography — match weight to adjacent text,Verify all system-concept icons use SF Symbols at matching weight,high,7
31
+ icon-size,IC-02,icons,Navigation bar icons 24pt toolbar icons 22pt tab bar icons 25pt,Measure icon sizes in each context and flag mismatches,medium,5
32
+ section-padding,SP-04,spacing,Section padding minimum 100px vertical,Check that main page sections have at least 100px (preferably 120px) top and bottom padding,critical,5
33
+ content-width,SP-05,spacing,Content max-width 980px for text,Check that text content blocks are constrained to max-width 980px for readability,high,4
34
+ card-grid-width,SP-06,spacing,Card grid max-width 1200px,Check that card grids and visual content are constrained to max-width 1200px,medium,3
35
+ scroll-reveal,AN-03,animation,All sections use scroll-triggered stagger reveal,Check that content sections fade in when scrolled into view with staggered timing,high,4
36
+ hero-stagger,AN-04,animation,Hero uses staggered entrance animation,Check that hero elements animate in sequence on page load with increasing delays,high,4
37
+ parallax,AN-05,animation,Product visuals use parallax scrolling,Check that hero/product mockups have subtle parallax depth effect,medium,3
38
+ easing-curve,AN-06,animation,Uses Apple standard easing curve,Check that all transitions use cubic-bezier(0.25 0.1 0.25 1) not ease-in-out or linear,high,4
39
+ gpu-animation,AN-07,animation,Only GPU-accelerated properties animated,Check that animations only use transform and opacity not width/height/margin,critical,5
@@ -0,0 +1,17 @@
1
+ keyword,component,variant,height_pt,usage,platform,priority
2
+ list-inset-grouped,List,insetGrouped,44,Rounded section lists with inset margins,iOS,high
3
+ list-sidebar,List,sidebar,44,Navigation sidebar list style,iOS iPadOS macOS,high
4
+ list-plain,List,plain,44,Full-width edge-to-edge list without sections,iOS,medium
5
+ list-grouped,List,grouped,44,Full-width grouped sections with headers/footers,iOS,medium
6
+ cell-standard,Cell,standard,44,Single-line label with optional leading/trailing content,iOS,high
7
+ cell-subtitle,Cell,subtitle,60,Two-line label with primary and secondary text,iOS,high
8
+ cell-value,Cell,value,44,Label with right-aligned value string,iOS,high
9
+ cell-detail,Cell,detail,60,Label with supporting detail text below,iOS,medium
10
+ card-small,Card,small,120,Compact card with subtle shadow and 10pt radius,iOS,medium
11
+ card-medium,Card,medium,200,Standard card layout with 16pt corner radius,iOS,high
12
+ card-large,Card,large,300,Full-feature card with image and 24pt corner radius,iOS,medium
13
+ grid-flexible,Grid,flexible,varies,Equal-width columns that fill available space (LazyVGrid),iOS,high
14
+ grid-fixed,Grid,fixed,varies,Fixed-width columns regardless of container width (LazyVGrid),iOS,medium
15
+ grid-adaptive,Grid,adaptive,varies,Minimum-width columns that expand to fill (LazyHGrid),iOS,medium
16
+ collection-flow,CollectionView,flow layout,varies,Line-based layout wrapping items to next row,iOS macOS,medium
17
+ collection-compositional,CollectionView,compositional layout,varies,Section-specific layouts with groups and items,iOS macOS,high
@@ -0,0 +1,21 @@
1
+ keyword,component,variant,height_pt,corner_radius,font_weight,font_size,padding_h,states,platform,priority
2
+ button-filled,Button,filled,50,12,semibold,17,16,normal;pressed;disabled,iOS,high
3
+ button-tinted,Button,tinted,50,12,semibold,17,16,normal;pressed;disabled,iOS,high
4
+ button-bordered,Button,bordered,50,12,semibold,17,16,normal;pressed;disabled,iOS,high
5
+ button-plain,Button,plain,44,0,semibold,17,0,normal;pressed;disabled,iOS,medium
6
+ button-small,Button,small,32,8,semibold,15,12,normal;pressed;disabled,iOS,medium
7
+ button-large,Button,large,56,14,semibold,17,20,normal;pressed;disabled,iOS,medium
8
+ toggle-standard,Toggle,standard,31,16,regular,17,0,on;off;disabled,iOS,high
9
+ slider-continuous,Slider,continuous,28,0,regular,17,0,normal;dragging;disabled,iOS,high
10
+ slider-discrete,Slider,discrete,28,0,regular,17,0,normal;dragging;disabled,iOS,medium
11
+ stepper-standard,Stepper,standard,32,8,regular,17,0,normal;increment;decrement;disabled,iOS,medium
12
+ picker-wheel,Picker,wheel,216,0,regular,17,0,normal;spinning,iOS,medium
13
+ picker-menu,Picker,menu,44,8,regular,17,8,normal;expanded,iOS,high
14
+ picker-segmented,Picker,segmented,32,8,regular,13,8,normal;selected,iOS,high
15
+ segmented-control,SegmentedControl,standard,32,8,regular,13,8,normal;selected;disabled,iOS,high
16
+ date-picker-compact,DatePicker,compact,44,8,regular,17,8,normal;expanded,iOS,medium
17
+ date-picker-graphical,DatePicker,graphical,308,12,regular,17,0,normal;selected,iOS,medium
18
+ date-picker-wheel,DatePicker,wheel,216,0,regular,17,0,normal;spinning,iOS,low
19
+ button-filled-macos,Button,macOS filled,22,5,semibold,13,8,normal;pressed;disabled,macOS,medium
20
+ button-bordered-macos,Button,macOS bordered,22,5,regular,13,8,normal;pressed;disabled,macOS,medium
21
+ toggle-checkbox,Toggle,checkbox,18,4,regular,13,0,on;off;mixed;disabled,macOS,medium
@@ -0,0 +1,17 @@
1
+ keyword,component,variant,corner_radius,usage,platform,priority
2
+ alert-standard,Alert,standard,14,Blocking modal dialog for critical information or confirmation,iOS macOS,high
3
+ alert-destructive,Alert,destructive,14,Alert with destructive action button styled in red,iOS macOS,high
4
+ action-sheet-standard,ActionSheet,standard,13,Bottom sheet with list of contextual actions,iOS,high
5
+ action-sheet-popover,ActionSheet,iPad popover,8,Popover-presented action list on iPad,iPadOS,medium
6
+ sheet-modal,Sheet,modal,10,Full interactive modal covering presenting view,iOS,high
7
+ sheet-form,Sheet,formSheet,10,Medium detent sheet for forms and pickers,iOS,high
8
+ sheet-page,Sheet,pageSheet,10,Page-style sheet showing part of parent beneath,iOS,medium
9
+ sheet-fullscreen,Sheet,fullScreen,0,Full screen cover without visible parent,iOS,medium
10
+ toast-banner,Toast,notification banner,14,Non-blocking transient notification at top of screen,iOS,high
11
+ progress-linear,ProgressIndicator,linear,2,Horizontal bar showing task completion percentage,iOS macOS,high
12
+ progress-circular,ProgressIndicator,circular,capsule,Circular ring showing determinate progress,iOS macOS,medium
13
+ activity-small,ActivityIndicator,small,capsule,Small spinning indicator for inline loading states,iOS macOS,high
14
+ activity-medium,ActivityIndicator,medium,capsule,Medium spinner for content area loading,iOS macOS,high
15
+ activity-large,ActivityIndicator,large,capsule,Large spinner for full-screen loading states,iOS macOS,medium
16
+ confirmation-dialog,ConfirmationDialog,menu-style,13,Menu-style confirmation with action list,iOS,medium
17
+ progress-indeterminate,ProgressIndicator,indeterminate,2,Linear bar with animated shimmer for unknown duration,iOS macOS,medium
@@ -0,0 +1,11 @@
1
+ keyword,component,variant,height_pt,corner_radius,usage,platform,priority
2
+ text-field-standard,TextField,standard,44,8,Single-line text entry with label and optional icons,iOS,high
3
+ text-field-rounded,TextField,rounded,44,10,Round-rect bordered text field style,iOS,high
4
+ secure-field,SecureField,password,44,8,Password entry with text obscured by bullets,iOS,high
5
+ search-bar-nav,SearchBar,navigation,36,10,Search field integrated into navigation bar scope,iOS,high
6
+ search-bar-standalone,SearchBar,standalone,44,10,Freestanding search with cancel button,iOS,medium
7
+ text-editor-multiline,TextEditor,multiline,varies,8,Scrollable multiline text editing area,iOS,high
8
+ text-editor-expandable,TextEditor,expandable,44,8,Single-line that grows vertically as content is added,iOS,medium
9
+ form-inset-grouped,Form,insetGrouped,varies,10,SwiftUI Form using insetGrouped list style with sections,iOS,high
10
+ form-plain,Form,plain,varies,0,Edge-to-edge Form without card-style grouping,iOS,medium
11
+ text-field-macos,TextField,macOS standard,22,4,Standard macOS text input field,macOS,medium
@@ -0,0 +1,15 @@
1
+ keyword,component,variant,height_pt,usage,platform,priority
2
+ navigation-bar-inline,NavigationBar,inline,44,Standard navigation with inline title,iOS,high
3
+ navigation-bar-large,NavigationBar,large-title,96,Expanded large title at scroll top,iOS,high
4
+ navigation-bar-macos,NavigationBar,macOS toolbar,38,Toolbar with controls and title,macOS,medium
5
+ tab-bar-standard,TabBar,standard,49,Bottom tab navigation without home indicator,iOS,high
6
+ tab-bar-home-indicator,TabBar,with-home-indicator,83,Bottom tab nav on devices with home indicator,iOS,high
7
+ tab-bar-macos,TabBar,macOS sidebar,240,Sidebar-style tab navigation,macOS,medium
8
+ tab-bar-visionos,TabBar,visionOS vertical,49,Vertical ornament-based tab bar,visionOS,low
9
+ toolbar-standard,Toolbar,standard,44,Bottom toolbar with action buttons,iOS,high
10
+ toolbar-macos,Toolbar,macOS,38,Window toolbar with controls,macOS,medium
11
+ sidebar-macos,Sidebar,macOS,240,Collapsible navigation sidebar minimum width,macOS,high
12
+ sidebar-ipad,Sidebar,iPad,320,Split view primary column width,iPadOS,high
13
+ sidebar-visionos,Sidebar,visionOS leading ornament,320,Leading ornament panel,visionOS,low
14
+ search-bar-inline,SearchBar,inline,36,Inline search within content area,iOS,medium
15
+ search-bar-nav,SearchBar,navigation bar integrated,36,Search embedded in navigation bar,iOS,high
@@ -0,0 +1,38 @@
1
+ keyword,name,light_hex,dark_hex,usage,semantic_role,platform
2
+ systemBlue,systemBlue,#007AFF,#0A84FF,Links and interactive elements,accent,all
3
+ systemGreen,systemGreen,#34C759,#30D158,Success states and confirmation,success,all
4
+ systemIndigo,systemIndigo,#5856D6,#5E5CE6,Secondary accent and decorative,accent-secondary,all
5
+ systemOrange,systemOrange,#FF9500,#FF9F0A,Warnings and highlights,warning,all
6
+ systemPink,systemPink,#FF2D55,#FF375F,Favorites and media actions,accent-tertiary,all
7
+ systemPurple,systemPurple,#AF52DE,#BF5AF2,Creative and premium features,premium,all
8
+ systemRed,systemRed,#FF3B30,#FF453A,Errors and destructive actions,destructive,all
9
+ systemTeal,systemTeal,#5AC8FA,#64D2FF,Communication and informational,info,all
10
+ systemYellow,systemYellow,#FFCC00,#FFD60A,Stars ratings and caution,caution,all
11
+ systemGray,systemGray,#8E8E93,#8E8E93,Neutral secondary elements,neutral,all
12
+ systemGray2,systemGray2,#AEAEB2,#636366,Disabled states and placeholders,neutral-2,all
13
+ systemGray3,systemGray3,#C7C7CC,#48484A,Borders and light fills,neutral-3,all
14
+ systemGray4,systemGray4,#D1D1D6,#3A3A3C,Light borders and dividers,neutral-4,all
15
+ systemGray5,systemGray5,#E5E5EA,#2C2C2E,Grouped background highlights,neutral-5,all
16
+ systemGray6,systemGray6,#F2F2F7,#1C1C1E,Secondary background level,neutral-6,all
17
+ label,label,#000000,#FFFFFF,Primary text content,text-primary,all
18
+ secondaryLabel,secondaryLabel,#3C3C4399,#EBEBF599,Supporting and descriptive text,text-secondary,all
19
+ tertiaryLabel,tertiaryLabel,#3C3C4330,#EBEBF530,Placeholder and hint text,text-tertiary,all
20
+ quaternaryLabel,quaternaryLabel,#3C3C431E,#EBEBF51E,Decorative and disabled text,text-quaternary,all
21
+ systemFill,systemFill,#78788033,#78788058,Thin fills over content,fill-primary,ios
22
+ secondarySystemFill,secondarySystemFill,#78788029,#78788052,Secondary fills and overlays,fill-secondary,ios
23
+ tertiarySystemFill,tertiarySystemFill,#7676801F,#7676803D,Tertiary fills for backgrounds,fill-tertiary,ios
24
+ quaternarySystemFill,quaternarySystemFill,#74748014,#7676802E,Subtle background fills,fill-quaternary,ios
25
+ systemBackground,systemBackground,#FFFFFF,#000000,Primary screen background,bg-primary,ios
26
+ secondarySystemBackground,secondarySystemBackground,#F2F2F7,#1C1C1E,Cards and grouped content background,bg-secondary,ios
27
+ tertiarySystemBackground,tertiarySystemBackground,#FFFFFF,#2C2C2E,Tertiary layer background,bg-tertiary,ios
28
+ systemGroupedBackground,systemGroupedBackground,#F2F2F7,#000000,Grouped inset table background,bg-grouped,ios
29
+ secondarySystemGroupedBackground,secondarySystemGroupedBackground,#FFFFFF,#1C1C1E,Grouped inset table cells,bg-grouped-secondary,ios
30
+ tertiarySystemGroupedBackground,tertiarySystemGroupedBackground,#F2F2F7,#2C2C2E,Grouped inset nested layers,bg-grouped-tertiary,ios
31
+ separator,separator,#3C3C434A,#54545899,List row dividers and borders,border,all
32
+ opaqueSeparator,opaqueSeparator,#C6C6C8,#38383A,Opaque divider lines,border-opaque,all
33
+ link,link,#007AFF,#0984FF,Tappable text links,link,all
34
+ placeholderText,placeholderText,#3C3C434D,#EBEBF54D,TextInput placeholder text,placeholder,all
35
+ appleText,appleText,#1d1d1f,#f5f5f7,Apple.com primary body text,text-primary,web
36
+ appleSecondary,appleSecondary,#86868b,#a1a1a6,Apple.com secondary and caption text,text-secondary,web
37
+ appleBackground,appleBackground,#fbfbfd,#000000,Apple.com page background,bg-primary,web
38
+ appleLink,appleLink,#2997ff,#2997ff,Apple.com call-to-action links,link,web
@@ -0,0 +1,13 @@
1
+ keyword,component,radius_pt,style,usage,platform
2
+ button,Button,12,continuous,Standard tappable buttons and CTAs,all
3
+ card-small,Small Card,10,continuous,Compact list row cards and thumbnails,all
4
+ card-medium,Medium Card,16,continuous,Standard content cards and panels,all
5
+ card-large,Large Card,24,continuous,Hero cards and featured content modules,all
6
+ text-field,Text Field,8,continuous,Input fields and search bars at rest,all
7
+ toggle,Toggle / Switch,16,continuous,Capsule-shaped on/off toggle control,ios
8
+ alert,Alert Dialog,14,continuous,System alert and confirmation dialogs,ios
9
+ action-sheet,Action Sheet,13,continuous,Bottom action sheet container corners,ios
10
+ sheet,Presentation Sheet,21,continuous,Bottom sheet and form sheet detents,ios
11
+ notification,Notification Banner,14,continuous,Push notification and in-app banner,ios
12
+ app-icon,App Icon,varies,continuous,Formula: 10/57 * icon size (e.g. 60pt icon = 10.5pt radius),ios
13
+ search-bar,Search Bar,10,continuous,Search field in navigation bar or standalone,all
@@ -0,0 +1,17 @@
1
+ keyword,name,blur,opacity,color,offset_y,material,platform
2
+ ultraThinMaterial,Ultra Thin Material,0,0,ultraThinMaterial,0,ultraThinMaterial,ios
3
+ thinMaterial,Thin Material,0,0,thinMaterial,0,thinMaterial,ios
4
+ regularMaterial,Regular Material,0,0,regularMaterial,0,regularMaterial,ios
5
+ thickMaterial,Thick Material,0,0,thickMaterial,0,thickMaterial,ios
6
+ chromeMaterial,Chrome Material,0,0,chromeMaterial,0,chromeMaterial,ios
7
+ vibrancyLabel,Vibrancy Label,0,1.0,label,0,vibrancy,ios
8
+ vibrancySecondaryLabel,Vibrancy Secondary Label,0,0.6,secondaryLabel,0,vibrancy,ios
9
+ vibrancyTertiaryLabel,Vibrancy Tertiary Label,0,0.3,tertiaryLabel,0,vibrancy,ios
10
+ vibrancyQuaternaryLabel,Vibrancy Quaternary Label,0,0.18,quaternaryLabel,0,vibrancy,ios
11
+ shadowSmall,Small Shadow,4,0.12,#000000,2,none,all
12
+ shadowMedium,Medium Shadow,10,0.16,#000000,4,none,all
13
+ shadowLarge,Large Shadow,20,0.20,#000000,8,none,all
14
+ liquidGlassRegular,Liquid Glass Regular,20,0.72,#FFFFFF,4,liquidGlass,ios
15
+ liquidGlassClear,Liquid Glass Clear,20,0.50,#FFFFFF,2,liquidGlass,ios
16
+ liquidGlassIdentity,Liquid Glass Identity,24,0.80,#FFFFFF,6,liquidGlass,ios
17
+ webNav,Web Navigation Bar,20,0.72,rgba(255,255,255,0.72),0,backdrop-filter saturate(180%) blur(20px),web
@@ -0,0 +1,21 @@
1
+ keyword,name,value_pt,value_px,usage,platform,priority
2
+ xxs,Extra Extra Small,2,4,Tight internal component gaps,all,low
3
+ xs,Extra Small,4,8,Icon-to-label gap and badge padding,all,high
4
+ sm,Small,8,16,Internal padding within compact components,all,high
5
+ md,Medium,12,24,Standard internal component padding,all,medium
6
+ base,Base,16,32,Default horizontal screen margin and cell padding,all,critical
7
+ lg,Large,20,40,Section-level internal spacing,all,medium
8
+ xl,Extra Large,24,48,Card-to-card spacing and large component padding,all,medium
9
+ 2xl,2X Large,32,64,Major section separation,all,medium
10
+ 3xl,3X Large,40,80,Hero and onboarding section gaps,all,low
11
+ 4xl,4X Large,48,96,Full-bleed section separation,all,low
12
+ card-padding,Card Padding,16,32,Internal padding inside card components,all,critical
13
+ section-spacing,Section Spacing,32,64,Vertical gap between major page sections,all,high
14
+ icon-label-gap,Icon Label Gap,4,8,Horizontal gap between icon and adjacent label,all,high
15
+ field-label-gap,Field Label Gap,10,20,Vertical space between field label and input,ios,high
16
+ error-gap,Error Gap,4,8,Vertical space between input and error message,all,critical
17
+ section-header-margin,Section Header Margin,16,32,Bottom margin below a section header,all,high
18
+ container-padding-phone,Container Padding Phone,16,32,Horizontal edge padding on iPhone screens,ios,critical
19
+ container-padding-tablet,Container Padding Tablet,20,40,Horizontal edge padding on iPad screens,ios,high
20
+ button-row-gap,Button Row Gap,8,16,Gap between adjacent buttons in a row or stack,all,high
21
+ screen-margin-iphone,Screen Margin iPhone,16,32,Safe-area-aware horizontal margin on iPhone,ios,critical
@@ -0,0 +1,26 @@
1
+ keyword,style_name,size_pt,weight,tracking,line_height,font_family,platform,priority
2
+ extraLargeTitle,Extra Large Title,36,Bold,0,44,SF Pro Display,ios,low
3
+ extraLargeTitle2,Extra Large Title 2,28,Bold,0,34,SF Pro Display,ios,low
4
+ largeTitle,Large Title,34,Regular,+0.40px,41,SF Pro Display,ios,high
5
+ title1,Title 1,28,Regular,+0.36px,34,SF Pro Display,ios,high
6
+ title2,Title 2,22,Regular,0,28,SF Pro Text,ios,high
7
+ title3,Title 3,20,Regular,+0.45px,25,SF Pro Text,ios,medium
8
+ headline,Headline,17,Semibold,-0.43px,22,SF Pro Text,ios,critical
9
+ body,Body,17,Regular,-0.43px,22,SF Pro Text,ios,critical
10
+ callout,Callout,16,Regular,-0.32px,21,SF Pro Text,ios,high
11
+ subheadline,Subheadline,15,Regular,-0.24px,20,SF Pro Text,ios,high
12
+ footnote,Footnote,13,Regular,-0.08px,18,SF Pro Text,ios,medium
13
+ caption1,Caption 1,12,Regular,0px,16,SF Pro Text,ios,medium
14
+ caption2,Caption 2,11,Regular,+0.07px,13,SF Pro Text,ios,low
15
+ macLargeTitle,Large Title (macOS),26,Regular,+0.36px,32,SF Pro Display,macos,high
16
+ macTitle1,Title 1 (macOS),22,Regular,+0.36px,28,SF Pro Display,macos,high
17
+ macTitle2,Title 2 (macOS),17,Regular,0,22,SF Pro Text,macos,high
18
+ macTitle3,Title 3 (macOS),15,Regular,0,20,SF Pro Text,macos,medium
19
+ macHeadline,Headline (macOS),13,Bold,0,16,SF Pro Text,macos,critical
20
+ macBody,Body (macOS),13,Regular,0,16,SF Pro Text,macos,critical
21
+ macCallout,Callout (macOS),12,Regular,0,15,SF Pro Text,macos,high
22
+ macSubheadline,Subheadline (macOS),11,Regular,+0.06px,14,SF Pro Text,macos,medium
23
+ macFootnote,Footnote (macOS),10,Regular,+0.12px,13,SF Pro Text,macos,medium
24
+ webBody,Web Body,17,Regular,0,1.47,"-apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif",web,critical
25
+ webCaption,Web Caption,12,Regular,0,1.4,"-apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif",web,medium
26
+ webHeadline,Web Headline,21,Semibold,0,1.19,"-apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif",web,high
@@ -0,0 +1,24 @@
1
+ keyword,name,type,response,damping_fraction,blend_duration,usage,source,platform
2
+ smooth,smooth,spring,0.5,1.0,0,General view transitions and state changes,SwiftUI preset,iOS macOS
3
+ snappy,snappy,spring,0.35,1.0,0,Quick confirmatory actions and feedback,SwiftUI preset,iOS macOS
4
+ bouncy,bouncy,spring,0.5,0.7,0,Playful delightful interactions,SwiftUI preset,iOS macOS
5
+ interactive,interactive,spring,0.15,0.86,0.25,Gesture-driven real-time following,SwiftUI preset,iOS
6
+ button-press,button-press,spring,0.3,0.8,0,Button tap scale feedback,Observed,iOS macOS
7
+ card-expansion,card-expansion,spring,0.3,0.82,0,Card expanding to detail view,Observed,iOS
8
+ sheet-presentation,sheet-presentation,spring,0.45,0.9,0,Sheet and modal show and hide,Observed,iOS
9
+ keyboard,keyboard,spring,0.35,1.0,0,Layout adjustment when keyboard appears,Observed,iOS
10
+ default-balanced,default-balanced,spring,0.55,0.75,0,General purpose balanced spring,Common,iOS macOS
11
+ dramatic,dramatic,spring,0.9,0.95,0,Slow modal or hero transitions,Common,iOS macOS
12
+ web-ease,web-ease,css,0.3s,n/a,n/a,Standard cubic-bezier(0.25 0.1 0.25 1) ease,apple.com,web
13
+ web-scroll-reveal,web-scroll-reveal,css,0.6s,n/a,n/a,Fade and translateY on scroll into viewport,apple.com,web
14
+ hero-stagger,hero-stagger-entrance,pattern,n/a,n/a,n/a,Hero elements stagger on load: tag(0ms) headline(150ms) subtitle(300ms) CTAs(450ms) visual(600ms). Each: opacity 0→1 translateY(30px→0) 600ms,Apple product pages standard,all
15
+ section-reveal,section-scroll-reveal,pattern,n/a,n/a,n/a,Every section uses IntersectionObserver(threshold 0.15). Headline reveals first then content staggers 100-150ms apart. opacity 0→1 translateY(30px→0),Apple product pages standard,all
16
+ parallax-visual,parallax-product-visual,pattern,n/a,n/a,n/a,Product mockups and hero visuals move at 0.3x scroll speed creating depth. Use CSS custom property --parallax-offset updated via rAF,Apple product pages standard,all
17
+ clip-reveal,clip-path-reveal,pattern,n/a,n/a,n/a,Large visuals reveal via clip-path: inset(8% round 16px) → inset(0% round 16px) as element scrolls into view. 1s transition,Apple product pages standard,all
18
+ chart-draw,svg-chart-draw,pattern,n/a,n/a,n/a,SVG charts animate stroke-dasharray from 0 to full length creating a drawing effect. Triggered on scroll into view,Apple product pages standard,all
19
+ counter-animate,number-count-up,pattern,n/a,n/a,n/a,Numbers count from 0 to final value with ease-out cubic timing over 2s. Triggered by IntersectionObserver(threshold 0.5),Apple product pages standard,all
20
+ hover-card-lift,card-hover-lift,pattern,n/a,n/a,n/a,Cards lift on hover: translateY(-4px) + box-shadow increase. transition: all 200ms cubic-bezier(0.25 0.1 0.25 1),Apple product pages standard,all
21
+ gradient-text,gradient-text-reveal,pattern,n/a,n/a,n/a,Headlines use background: linear-gradient with background-clip: text. Gradient activates/sweeps when scrolled into view,Apple product pages standard,all
22
+ reduced-motion,reduced-motion-respect,rule,n/a,n/a,n/a,Always check prefers-reduced-motion. When active disable ALL decorative animation and show all content immediately,WCAG + Apple a11y,all
23
+ apple-easing,apple-standard-easing,reference,n/a,n/a,n/a,Apple's standard easing: cubic-bezier(0.25 0.1 0.25 1). Use for ALL transitions. Never use linear or ease-in-out,Apple product pages,all
24
+ gpu-only,gpu-accelerated-only,rule,n/a,n/a,n/a,Only animate transform and opacity for 60fps performance. Never animate width height margin padding top left. Use will-change on animated elements,Apple performance standard,all
@@ -0,0 +1,11 @@
1
+ keyword,name,type,min_duration,usage,platform,priority
2
+ tap,tap,discrete,0,Primary selection and activation of controls,iOS iPadOS macOS,high
3
+ double-tap,double-tap,discrete,0,Secondary action or zoom toggle on content,iOS iPadOS,medium
4
+ long-press,long-press,discrete,0.5,Context menu presentation and drag initiation,iOS iPadOS macOS,high
5
+ swipe,swipe,continuous,0,Directional navigation or reveal of swipe actions,iOS iPadOS,high
6
+ edge-pan,edge-pan,continuous,0,Back navigation via screen left-edge pan gesture,iOS,high
7
+ pinch,pinch,continuous,0,Zoom in and out on maps images and content,iOS iPadOS,high
8
+ rotation,rotation,continuous,0,Rotate maps images and placed objects,iOS iPadOS,medium
9
+ drag,drag,continuous,0,Reorder list items or drag-and-drop between apps,iOS iPadOS macOS,high
10
+ haptic-touch,haptic-touch,discrete,0.5,Peek preview via long press replacing 3D Touch,iOS,high
11
+ scroll-momentum,scroll-momentum,continuous,0,Inertial scrolling with rubber-band bounce at edges,iOS iPadOS,high
@@ -0,0 +1,16 @@
1
+ keyword,name,type,description,usage,platform,priority
2
+ haptic-impact-light,haptic-impact-light,haptic,Light physical impact sensation for subtle feedback,Toggling small controls and selecting items,iOS,high
3
+ haptic-impact-medium,haptic-impact-medium,haptic,Medium physical impact for moderate interaction weight,Confirming actions and completing drags,iOS,high
4
+ haptic-impact-heavy,haptic-impact-heavy,haptic,Heavy physical impact for prominent interaction weight,Completing significant actions or collisions,iOS,medium
5
+ haptic-notification-success,haptic-notification-success,haptic,Success notification pattern: two light taps,Task completion confirmation,iOS,high
6
+ haptic-notification-warning,haptic-notification-warning,haptic,Warning notification pattern: three ascending taps,Alerting user to a potential issue,iOS,high
7
+ haptic-notification-error,haptic-notification-error,haptic,Error notification pattern: distinct failure rhythm,Indicating a failed operation,iOS,high
8
+ haptic-selection,haptic-selection,haptic,Light single tap for discrete value changes,Scrolling picker wheels and selecting list rows,iOS,high
9
+ progressive-disclosure,progressive-disclosure,pattern,Revealing information gradually as user needs it,Complex settings and multi-step flows,iOS macOS,high
10
+ pull-to-refresh,pull-to-refresh,gesture,Pulling list down past threshold triggers content reload,Updating feeds and list content,iOS,high
11
+ rubber-banding,rubber-banding,visual,Elastic deceleration when scrolling past content boundaries,All scroll views providing spatial awareness,iOS,high
12
+ swipe-actions,swipe-actions,gesture,Horizontal swipe on list row reveals contextual action buttons,Quick delete archive or label on list rows,iOS,high
13
+ context-menu,context-menu,gesture,Long press or right-click reveals menu of contextual actions,Secondary actions on any content element,iOS macOS,high
14
+ drag-and-drop,drag-and-drop,gesture,Long press lifts item into drag session for repositioning,Reordering lists and transferring data between apps,iOS iPadOS macOS,medium
15
+ undo-shake,undo-shake,gesture,Shaking device presents undo or redo alert dialog,Undoing recent text or action changes,iOS,low
16
+ peek-and-pop,peek-and-pop,gesture,Long press shows preview then pop navigates to destination,Previewing links emails and content before committing,iOS,medium
@@ -0,0 +1,20 @@
1
+ keyword,pattern,description,usage,platform,priority
2
+ navigation-stack,Navigation Stack,Push-pop stack of views with back button navigation,Hierarchical content with drill-down flow,iOS macOS,high
3
+ tab-based,Tab-Based Navigation,Root-level tab bar switching between independent sections,Apps with 2-5 parallel top-level sections,iOS macOS,high
4
+ split-view,Split View,Primary and secondary columns side by side,Master-detail on larger screens,iPadOS macOS,high
5
+ sidebar-detail,Sidebar-Detail,Three-column layout with sidebar list and detail pane,Complex navigation with categories and content,iPadOS macOS,high
6
+ modal-sheet,Modal Sheet,Overlay sheet at medium or large detent over parent,Task flows that do not replace current context,iOS,high
7
+ popover,Popover,Anchored floating panel pointing to source element,Contextual options and pickers on iPad and macOS,iPadOS macOS,high
8
+ disclosure-group,Disclosure Group,Expandable section header revealing child content,Progressive disclosure of hierarchical data,iOS macOS,medium
9
+ page-scroll,Page Scroll,Horizontal or vertical paging through full-screen views,Onboarding carousels and media galleries,iOS iPadOS,medium
10
+ master-detail,Master-Detail,Persistent list alongside replaceable detail area,iPad email or settings-style layouts,iPadOS macOS,high
11
+ floating-panel,Floating Panel,Detached resizable inspector or tool panel,Tool palettes and inspector panels,macOS,medium
12
+ ornament,Ornament,Attached floating panel anchored to a window edge,Controls and navigation in spatial context,visionOS,low
13
+ full-screen-modal,Full-Screen Modal,Full screen cover with no visible parent,Immersive tasks such as camera and media capture,iOS,medium
14
+ dark-hero,dark-hero-section,Hero and product showcase sections use dark/black background for visual impact,Product launches and hero areas — lets visuals pop against black,all,critical
15
+ light-content,light-content-section,Text-heavy sections (features pricing FAQ) use light background for readability,Features grids and pricing tables — optimized for scanning text,all,critical
16
+ alternating,alternating-sections,Alternate dark and light sections for visual rhythm like apple.com,Creates the contrast and pacing that defines Apple product pages,web,high
17
+ product-page,product-page-layout,Apple product page layout: hero(dark) → stats → features(light) → product-deep-dive(dark) → pricing(light) → CTA(dark) → footer. Alternating dark/light sections.,Default layout for product/SaaS/app landing pages,web,critical
18
+ developer-page,developer-page-layout,Apple developer page layout: all content visible immediately. No scroll animations. Tile-based cards. Dual navigation (global + local tabs). Content-first.,Documentation and developer-focused pages,web,high
19
+ services-page,services-page-layout,Apple services page layout: moderate animation. Service tiles/cards. Subscription pricing. Feature comparison grids.,Service catalog and subscription pages,web,high
20
+ story-page,story-page-layout,Apple story/values page layout: data visualization with Lottie/SVG animation. Progress indicators. Environmental/impact metrics. High dark/light alternation.,Impact reports and brand story pages,web,medium
@@ -0,0 +1,21 @@
1
+ keyword,element,metric,value,unit,context,min_os,priority
2
+ navbar,NavigationBar,height,44,pt,inline title,14.0,critical
3
+ navbar,NavigationBar,height,96,pt,large title expanded,11.0,critical
4
+ tabbar,TabBar,height,49,pt,standard,7.0,critical
5
+ tabbar,TabBar,height,83,pt,with home indicator,11.0,critical
6
+ statusbar,StatusBar,height,54,pt,with dynamic island,16.0,high
7
+ statusbar,StatusBar,height,47,pt,without dynamic island,14.0,high
8
+ safe-area,SafeArea,bottom,34,pt,home indicator,11.0,critical
9
+ safe-area,SafeArea,top,59,pt,dynamic island,16.0,high
10
+ touch,TouchTarget,minimum,44,pt,all interactive,2.0,critical
11
+ keyboard,Keyboard,height,291,pt,iPhone portrait,14.0,medium
12
+ screen,Screen,width,375,pt,iPhone SE/8,7.0,medium
13
+ screen,Screen,width,390,pt,iPhone 14/15,14.0,medium
14
+ screen,Screen,width,393,pt,iPhone 15 Pro,17.0,medium
15
+ screen,Screen,width,430,pt,iPhone Pro Max,14.0,medium
16
+ home-indicator,HomeIndicator,height,5,pt,bar height,11.0,medium
17
+ search,SearchBar,height,36,pt,inline search,11.0,high
18
+ list-cell,Cell,height,44,pt,standard row,2.0,high
19
+ list-cell,Cell,height,60,pt,subtitle row,2.0,medium
20
+ margin,ScreenMargin,width,16,pt,standard,7.0,critical
21
+ corner,DisplayCorner,radius,55,pt,iPhone 14-16,14.0,medium
@@ -0,0 +1,16 @@
1
+ keyword,element,metric,value,unit,context,min_os,priority
2
+ titlebar,TitleBar,height,28,pt,standard,11.0,critical
3
+ titlebar,TitleBar,height,52,pt,with toolbar,11.0,high
4
+ toolbar,Toolbar,height,38,pt,standard,11.0,high
5
+ sidebar,Sidebar,width-min,240,pt,default minimum,11.0,high
6
+ sidebar,Sidebar,width-default,280,pt,default width,11.0,medium
7
+ menubar,MenuBar,height,24,pt,system,10.0,critical
8
+ traffic-lights,TrafficLights,width,54,pt,three buttons,10.0,critical
9
+ traffic-lights,TrafficLights,offset-x,7,pt,from window edge,10.0,high
10
+ traffic-lights,TrafficLights,offset-y,7,pt,from top edge,10.0,high
11
+ touch,ClickTarget,minimum,20,pt,all interactive,10.0,critical
12
+ body-text,BodyText,size,13,pt,system default,10.0,critical
13
+ window,Window,min-width,480,pt,recommended minimum,11.0,medium
14
+ window,Window,min-height,320,pt,recommended minimum,11.0,medium
15
+ scroll,ScrollBar,width,7,pt,overlay style,10.0,low
16
+ spacing,ContentMargin,width,20,pt,standard,10.0,high
@@ -0,0 +1,11 @@
1
+ keyword,element,metric,value,unit,context,min_os,priority
2
+ touch,TouchTarget,minimum,60,pt,eye tracking,1.0,critical
3
+ spacing,TargetSpacing,minimum,4,pt,between targets,1.0,critical
4
+ tabbar,TabBar,position,leading-vertical,ornament,ornament,1.0,critical
5
+ toolbar,Toolbar,position,bottom-ornament,ornament,ornament,1.0,high
6
+ ornament,Ornament,overlap,20,pt,window overlap,1.0,high
7
+ window,Window,material,glass,system,system,1.0,critical
8
+ window,Window,shadow,real-world,depth,depth,1.0,medium
9
+ volume,Volume,type,3D-content,RealityKit,RealityKit,1.0,medium
10
+ hover,HoverEffect,type,highlight,eye tracking,eye tracking,1.0,high
11
+ immersion,ImmersionLevel,types,mixed/progressive/full,spatial,spatial,1.0,medium