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.
- package/LICENSE +21 -0
- package/SKILL.md +180 -0
- package/bin/onemore.js +23 -0
- package/data/audit/hig-checklist.csv +39 -0
- package/data/components/content.csv +17 -0
- package/data/components/controls.csv +21 -0
- package/data/components/feedback.csv +17 -0
- package/data/components/input.csv +11 -0
- package/data/components/navigation.csv +15 -0
- package/data/foundations/colors.csv +38 -0
- package/data/foundations/corners.csv +13 -0
- package/data/foundations/elevation.csv +17 -0
- package/data/foundations/spacing.csv +21 -0
- package/data/foundations/typography.csv +26 -0
- package/data/patterns/animation.csv +24 -0
- package/data/patterns/gestures.csv +11 -0
- package/data/patterns/interaction.csv +16 -0
- package/data/patterns/layout.csv +20 -0
- package/data/platforms/ios.csv +21 -0
- package/data/platforms/macos.csv +16 -0
- package/data/platforms/visionos.csv +11 -0
- package/data/platforms/watchos.csv +11 -0
- package/data/platforms/web-apple.csv +21 -0
- package/data/reasoning/apple-reasoning.csv +16 -0
- package/data/stacks/astro.csv +21 -0
- package/data/stacks/flutter.csv +29 -0
- package/data/stacks/html-tailwind.csv +26 -0
- package/data/stacks/nativewind.csv +26 -0
- package/data/stacks/nextjs.csv +26 -0
- package/data/stacks/nuxtjs.csv +21 -0
- package/data/stacks/react-native.csv +26 -0
- package/data/stacks/react.csv +26 -0
- package/data/stacks/shadcn.csv +25 -0
- package/data/stacks/svelte.csv +21 -0
- package/data/stacks/swiftui.csv +31 -0
- package/data/stacks/uikit.csv +21 -0
- package/data/stacks/vue.csv +21 -0
- package/package.json +51 -0
- package/scripts/__init__.py +0 -0
- package/scripts/__pycache__/__init__.cpython-314.pyc +0 -0
- package/scripts/__pycache__/core.cpython-314.pyc +0 -0
- package/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
- package/scripts/__pycache__/exporter.cpython-314.pyc +0 -0
- package/scripts/__pycache__/platforms.cpython-314.pyc +0 -0
- package/scripts/__pycache__/redesign.cpython-314.pyc +0 -0
- package/scripts/core.py +242 -0
- package/scripts/design_system.py +291 -0
- package/scripts/exporter.py +717 -0
- package/scripts/platforms.py +309 -0
- package/scripts/redesign.py +758 -0
- 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
|