@mytechtoday/augment-extensions 1.2.1 → 1.3.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/AGENTS.md +33 -1
- package/README.md +3 -3
- package/augment-extensions/domain-rules/software-architecture/README.md +143 -0
- package/augment-extensions/domain-rules/software-architecture/examples/banking-layered.md +961 -0
- package/augment-extensions/domain-rules/software-architecture/examples/ecommerce-microservices.md +990 -0
- package/augment-extensions/domain-rules/software-architecture/examples/iot-eventdriven.md +882 -0
- package/augment-extensions/domain-rules/software-architecture/examples/monolith-to-microservices-migration.md +703 -0
- package/augment-extensions/domain-rules/software-architecture/examples/serverless-imageprocessing.md +957 -0
- package/augment-extensions/domain-rules/software-architecture/examples/trading-eventdriven.md +747 -0
- package/augment-extensions/domain-rules/software-architecture/module.json +119 -0
- package/augment-extensions/domain-rules/software-architecture/rules/challenges-solutions.md +763 -0
- package/augment-extensions/domain-rules/software-architecture/rules/definitions-terminology.md +409 -0
- package/augment-extensions/domain-rules/software-architecture/rules/design-principles.md +684 -0
- package/augment-extensions/domain-rules/software-architecture/rules/evaluation-testing.md +1381 -0
- package/augment-extensions/domain-rules/software-architecture/rules/event-driven-architecture.md +616 -0
- package/augment-extensions/domain-rules/software-architecture/rules/fundamentals.md +306 -0
- package/augment-extensions/domain-rules/software-architecture/rules/industry-architectures.md +554 -0
- package/augment-extensions/domain-rules/software-architecture/rules/layered-architecture.md +776 -0
- package/augment-extensions/domain-rules/software-architecture/rules/microservices-architecture.md +503 -0
- package/augment-extensions/domain-rules/software-architecture/rules/modeling-documentation.md +1199 -0
- package/augment-extensions/domain-rules/software-architecture/rules/monolithic-architecture.md +351 -0
- package/augment-extensions/domain-rules/software-architecture/rules/principles.md +556 -0
- package/augment-extensions/domain-rules/software-architecture/rules/quality-attributes.md +797 -0
- package/augment-extensions/domain-rules/software-architecture/rules/scalability-performance.md +1345 -0
- package/augment-extensions/domain-rules/software-architecture/rules/security-architecture.md +1039 -0
- package/augment-extensions/domain-rules/software-architecture/rules/serverless-architecture.md +711 -0
- package/augment-extensions/domain-rules/software-architecture/rules/skills-development.md +568 -0
- package/augment-extensions/domain-rules/software-architecture/rules/tools-methodologies.md +961 -0
- package/augment-extensions/visual-design/CHANGELOG.md +132 -0
- package/augment-extensions/visual-design/README.md +255 -0
- package/augment-extensions/visual-design/__tests__/README.md +119 -0
- package/augment-extensions/visual-design/__tests__/style-selector.test.ts +172 -0
- package/augment-extensions/visual-design/__tests__/vendor-styles.test.ts +214 -0
- package/augment-extensions/visual-design/domains/other/ai-prompt-helper.ts +157 -0
- package/augment-extensions/visual-design/domains/other/dotnet-application.ts +156 -0
- package/augment-extensions/visual-design/domains/other/linux-platform.ts +156 -0
- package/augment-extensions/visual-design/domains/other/mobile-application.ts +157 -0
- package/augment-extensions/visual-design/domains/other/motion-picture.ts +156 -0
- package/augment-extensions/visual-design/domains/other/os-application.ts +156 -0
- package/augment-extensions/visual-design/domains/other/print-campaigns.ts +158 -0
- package/augment-extensions/visual-design/domains/other/web-app.ts +157 -0
- package/augment-extensions/visual-design/domains/other/website.ts +161 -0
- package/augment-extensions/visual-design/domains/other/windows-platform.ts +156 -0
- package/augment-extensions/visual-design/domains/web-page-styles/amazon-cloudscape.ts +506 -0
- package/augment-extensions/visual-design/domains/web-page-styles/google-modern.ts +615 -0
- package/augment-extensions/visual-design/domains/web-page-styles/microsoft-fluent.ts +531 -0
- package/augment-extensions/visual-design/examples/README.md +97 -0
- package/augment-extensions/visual-design/examples/ai-prompt-generation.md +233 -0
- package/augment-extensions/visual-design/examples/basic-usage.md +216 -0
- package/augment-extensions/visual-design/examples/domain-workflows.md +257 -0
- package/augment-extensions/visual-design/examples/vendor-comparison.md +247 -0
- package/augment-extensions/visual-design/module.json +78 -0
- package/augment-extensions/visual-design/style-selector.ts +177 -0
- package/augment-extensions/visual-design/types.ts +302 -0
- package/augment-extensions/visual-design/visual-design-core.ts +469 -0
- package/augment-extensions/workflows/adr-support/README.md +227 -0
- package/augment-extensions/workflows/adr-support/__tests__/adr-validator.test.ts +203 -0
- package/augment-extensions/workflows/adr-support/adr-validator.ts +162 -0
- package/augment-extensions/workflows/adr-support/examples/complete-lifecycle-example.md +449 -0
- package/augment-extensions/workflows/adr-support/examples/integration-example.md +580 -0
- package/augment-extensions/workflows/adr-support/examples/superseding-example.md +436 -0
- package/augment-extensions/workflows/adr-support/module.json +112 -0
- package/augment-extensions/workflows/adr-support/rules/adr-creation.md +372 -0
- package/augment-extensions/workflows/adr-support/rules/beads-integration.md +443 -0
- package/augment-extensions/workflows/adr-support/rules/conflict-detection.md +486 -0
- package/augment-extensions/workflows/adr-support/rules/decision-detection.md +362 -0
- package/augment-extensions/workflows/adr-support/rules/lifecycle-management.md +427 -0
- package/augment-extensions/workflows/adr-support/rules/openspec-integration.md +465 -0
- package/augment-extensions/workflows/adr-support/rules/template-selection.md +405 -0
- package/augment-extensions/workflows/adr-support/rules/validation-rules.md +543 -0
- package/augment-extensions/workflows/adr-support/schemas/adr-config.json +191 -0
- package/augment-extensions/workflows/adr-support/schemas/adr-metadata.json +172 -0
- package/augment-extensions/workflows/adr-support/templates/business-case.md +235 -0
- package/augment-extensions/workflows/adr-support/templates/madr-elaborate.md +197 -0
- package/augment-extensions/workflows/adr-support/templates/madr-simple.md +68 -0
- package/augment-extensions/workflows/adr-support/templates/nygard.md +84 -0
- package/augment-extensions/workflows/beads/rules/workflow.md +1 -1
- package/cli/dist/utils/__tests__/adr-validator.example.d.ts +6 -0
- package/cli/dist/utils/__tests__/adr-validator.example.d.ts.map +1 -0
- package/cli/dist/utils/__tests__/adr-validator.example.js +148 -0
- package/cli/dist/utils/__tests__/adr-validator.example.js.map +1 -0
- package/cli/dist/utils/adr-validator.d.ts +65 -0
- package/cli/dist/utils/adr-validator.d.ts.map +1 -0
- package/cli/dist/utils/adr-validator.js +203 -0
- package/cli/dist/utils/adr-validator.js.map +1 -0
- package/modules.md +40 -3
- package/package.json +1 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mobile Application Domain Module
|
|
3
|
+
*
|
|
4
|
+
* Mobile-specific design patterns for iOS and Android applications
|
|
5
|
+
* following Human Interface Guidelines and Material Design for mobile.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// Mobile Application Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const MOBILE_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'App Primary',
|
|
17
|
+
hex: '#007AFF',
|
|
18
|
+
rgb: { r: 0, g: 122, b: 255 },
|
|
19
|
+
hsl: { h: 211, s: 100, l: 50 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Primary Light', hex: '#5AC8FA', usage: 'Highlights' },
|
|
22
|
+
{ name: 'Primary Dark', hex: '#0051D5', usage: 'Pressed states' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Gray 1', hex: '#F2F2F7', rgb: { r: 242, g: 242, b: 247 }, hsl: { h: 240, s: 25, l: 96 } },
|
|
28
|
+
{ name: 'Gray 2', hex: '#E5E5EA', rgb: { r: 229, g: 229, b: 234 }, hsl: { h: 240, s: 11, l: 91 } },
|
|
29
|
+
{ name: 'Gray 5', hex: '#636366', rgb: { r: 99, g: 99, b: 102 }, hsl: { h: 240, s: 1, l: 39 } },
|
|
30
|
+
{ name: 'Black', hex: '#000000', rgb: { r: 0, g: 0, b: 0 }, hsl: { h: 0, s: 0, l: 0 } }
|
|
31
|
+
],
|
|
32
|
+
semantic: {
|
|
33
|
+
success: { hex: '#34C759', usage: 'Success states' },
|
|
34
|
+
warning: { hex: '#FF9500', usage: 'Warnings' },
|
|
35
|
+
error: { hex: '#FF3B30', usage: 'Errors, destructive' },
|
|
36
|
+
info: { hex: '#007AFF', usage: 'Information' }
|
|
37
|
+
},
|
|
38
|
+
accessibility: {
|
|
39
|
+
minimumContrast: 4.5,
|
|
40
|
+
targetContrast: 7,
|
|
41
|
+
colorBlindSafe: true,
|
|
42
|
+
guidelines: [
|
|
43
|
+
'Support iOS Dynamic Type',
|
|
44
|
+
'Support Android Material You theming',
|
|
45
|
+
'Ensure 44x44pt touch targets (iOS)',
|
|
46
|
+
'Ensure 48x48dp touch targets (Android)',
|
|
47
|
+
'Test with accessibility scanners'
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// ============================================================================
|
|
53
|
+
// Mobile Application Typography
|
|
54
|
+
// ============================================================================
|
|
55
|
+
|
|
56
|
+
const MOBILE_TYPOGRAPHY: TypographyRules = {
|
|
57
|
+
fontFamilies: {
|
|
58
|
+
primary: '-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif',
|
|
59
|
+
secondary: 'system-ui, sans-serif',
|
|
60
|
+
monospace: '"SF Mono", "Roboto Mono", monospace'
|
|
61
|
+
},
|
|
62
|
+
hierarchy: {
|
|
63
|
+
h1: { fontSize: '34px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
|
|
64
|
+
h2: { fontSize: '28px', fontWeight: 700, lineHeight: 1.3, letterSpacing: '0' },
|
|
65
|
+
h3: { fontSize: '22px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
66
|
+
h4: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
67
|
+
h5: { fontSize: '17px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
h6: { fontSize: '15px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
+
body: { fontSize: '17px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
70
|
+
small: { fontSize: '15px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
|
|
71
|
+
caption: { fontSize: '13px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
|
|
72
|
+
},
|
|
73
|
+
scale: {
|
|
74
|
+
base: 17,
|
|
75
|
+
ratio: 1.15,
|
|
76
|
+
sizes: [11, 13, 15, 17, 20, 22, 28, 34]
|
|
77
|
+
},
|
|
78
|
+
guidelines: [
|
|
79
|
+
'Use San Francisco for iOS',
|
|
80
|
+
'Use Roboto for Android',
|
|
81
|
+
'Support Dynamic Type (iOS)',
|
|
82
|
+
'Support scalable text (Android)',
|
|
83
|
+
'Larger base size for mobile readability'
|
|
84
|
+
]
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// ============================================================================
|
|
88
|
+
// Mobile Application Layout System
|
|
89
|
+
// ============================================================================
|
|
90
|
+
|
|
91
|
+
const MOBILE_LAYOUT: LayoutSystem = {
|
|
92
|
+
grid: {
|
|
93
|
+
columns: 4,
|
|
94
|
+
gutter: '16px',
|
|
95
|
+
margin: '16px',
|
|
96
|
+
breakpoints: {
|
|
97
|
+
phone: '0-599px',
|
|
98
|
+
tablet: '600-839px',
|
|
99
|
+
large: '840px+'
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
spacing: {
|
|
103
|
+
unit: 8,
|
|
104
|
+
scale: [0, 8, 16, 24, 32, 40, 48, 64],
|
|
105
|
+
guidelines: [
|
|
106
|
+
'Use 8px base unit for spacing',
|
|
107
|
+
'Maintain 44x44pt touch targets (iOS)',
|
|
108
|
+
'Maintain 48x48dp touch targets (Android)',
|
|
109
|
+
'Use safe area insets for notched devices'
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
containerWidths: {
|
|
113
|
+
phone: '100%',
|
|
114
|
+
tablet: '100%',
|
|
115
|
+
large: '100%'
|
|
116
|
+
},
|
|
117
|
+
guidelines: [
|
|
118
|
+
'Use native navigation patterns (tab bar, navigation bar)',
|
|
119
|
+
'Implement swipe gestures for navigation',
|
|
120
|
+
'Support portrait and landscape orientations',
|
|
121
|
+
'Use bottom navigation for primary actions',
|
|
122
|
+
'Implement pull-to-refresh for lists',
|
|
123
|
+
'Use modal sheets for secondary actions'
|
|
124
|
+
]
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// ============================================================================
|
|
128
|
+
// Mobile Application Domain Export
|
|
129
|
+
// ============================================================================
|
|
130
|
+
|
|
131
|
+
export const MOBILE_APPLICATION_DOMAIN: DomainStyle = {
|
|
132
|
+
domain: 'mobile-application',
|
|
133
|
+
characteristics: [
|
|
134
|
+
'Touch-first interaction design',
|
|
135
|
+
'Native navigation patterns (iOS/Android)',
|
|
136
|
+
'Gesture-based interactions',
|
|
137
|
+
'Bottom navigation and tab bars',
|
|
138
|
+
'Pull-to-refresh and infinite scroll',
|
|
139
|
+
'Modal sheets and action sheets',
|
|
140
|
+
'Safe area inset handling',
|
|
141
|
+
'Haptic feedback integration',
|
|
142
|
+
'Offline-first architecture',
|
|
143
|
+
'Push notification support'
|
|
144
|
+
],
|
|
145
|
+
colorScheme: MOBILE_COLORS,
|
|
146
|
+
typography: MOBILE_TYPOGRAPHY,
|
|
147
|
+
layout: MOBILE_LAYOUT,
|
|
148
|
+
examples: [
|
|
149
|
+
'Social media feed with infinite scroll',
|
|
150
|
+
'E-commerce app with product catalog',
|
|
151
|
+
'Messaging app with chat interface',
|
|
152
|
+
'Banking app with dashboard',
|
|
153
|
+
'Fitness tracker with charts',
|
|
154
|
+
'News reader with article cards'
|
|
155
|
+
]
|
|
156
|
+
};
|
|
157
|
+
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Motion Picture Design Domain Module
|
|
3
|
+
*
|
|
4
|
+
* Design patterns for cinematography, TV production, and web series
|
|
5
|
+
* including color grading, composition, and visual storytelling.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// Motion Picture Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const MOTION_PICTURE_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'Cinematic Gold',
|
|
17
|
+
hex: '#D4AF37',
|
|
18
|
+
rgb: { r: 212, g: 175, b: 55 },
|
|
19
|
+
hsl: { h: 46, s: 65, l: 52 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Gold Light', hex: '#FFD700', usage: 'Highlights, awards' },
|
|
22
|
+
{ name: 'Gold Dark', hex: '#B8860B', usage: 'Shadows, depth' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Light Gray', hex: '#E0E0E0', rgb: { r: 224, g: 224, b: 224 }, hsl: { h: 0, s: 0, l: 88 } },
|
|
28
|
+
{ name: 'Mid Gray', hex: '#808080', rgb: { r: 128, g: 128, b: 128 }, hsl: { h: 0, s: 0, l: 50 } },
|
|
29
|
+
{ name: 'Dark Gray', hex: '#404040', rgb: { r: 64, g: 64, b: 64 }, hsl: { h: 0, s: 0, l: 25 } },
|
|
30
|
+
{ name: 'Black', hex: '#000000', rgb: { r: 0, g: 0, b: 0 }, hsl: { h: 0, s: 0, l: 0 } }
|
|
31
|
+
],
|
|
32
|
+
semantic: {
|
|
33
|
+
success: { hex: '#4CAF50', usage: 'Approved takes' },
|
|
34
|
+
warning: { hex: '#FF9800', usage: 'Review needed' },
|
|
35
|
+
error: { hex: '#F44336', usage: 'Rejected takes' },
|
|
36
|
+
info: { hex: '#2196F3', usage: 'Production notes' }
|
|
37
|
+
},
|
|
38
|
+
accessibility: {
|
|
39
|
+
minimumContrast: 4.5,
|
|
40
|
+
targetContrast: 7,
|
|
41
|
+
colorBlindSafe: true,
|
|
42
|
+
guidelines: [
|
|
43
|
+
'Use color grading for mood and atmosphere',
|
|
44
|
+
'Maintain skin tone accuracy',
|
|
45
|
+
'Ensure proper white balance',
|
|
46
|
+
'Test on calibrated monitors'
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// ============================================================================
|
|
52
|
+
// Motion Picture Typography
|
|
53
|
+
// ============================================================================
|
|
54
|
+
|
|
55
|
+
const MOTION_PICTURE_TYPOGRAPHY: TypographyRules = {
|
|
56
|
+
fontFamilies: {
|
|
57
|
+
primary: '"Helvetica Neue", Arial, sans-serif',
|
|
58
|
+
secondary: '"Times New Roman", Georgia, serif',
|
|
59
|
+
monospace: '"Courier New", monospace'
|
|
60
|
+
},
|
|
61
|
+
hierarchy: {
|
|
62
|
+
h1: { fontSize: '48px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
|
|
63
|
+
h2: { fontSize: '36px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
|
|
64
|
+
h3: { fontSize: '28px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
65
|
+
h4: { fontSize: '24px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
66
|
+
h5: { fontSize: '20px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
67
|
+
h6: { fontSize: '18px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.6, letterSpacing: '0' },
|
|
69
|
+
small: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
70
|
+
caption: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' }
|
|
71
|
+
},
|
|
72
|
+
scale: {
|
|
73
|
+
base: 16,
|
|
74
|
+
ratio: 1.25,
|
|
75
|
+
sizes: [12, 14, 16, 18, 20, 24, 28, 36, 48]
|
|
76
|
+
},
|
|
77
|
+
guidelines: [
|
|
78
|
+
'Use Courier for screenplay format',
|
|
79
|
+
'Use sans-serif for production documents',
|
|
80
|
+
'Ensure readability in low light',
|
|
81
|
+
'Follow industry standard formatting',
|
|
82
|
+
'Use consistent font sizes for hierarchy'
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// ============================================================================
|
|
87
|
+
// Motion Picture Layout System
|
|
88
|
+
// ============================================================================
|
|
89
|
+
|
|
90
|
+
const MOTION_PICTURE_LAYOUT: LayoutSystem = {
|
|
91
|
+
grid: {
|
|
92
|
+
columns: 16,
|
|
93
|
+
gutter: '24px',
|
|
94
|
+
margin: '24px',
|
|
95
|
+
breakpoints: {
|
|
96
|
+
mobile: '0-639px',
|
|
97
|
+
tablet: '640-1023px',
|
|
98
|
+
desktop: '1024px+'
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
spacing: {
|
|
102
|
+
unit: 8,
|
|
103
|
+
scale: [0, 8, 16, 24, 32, 40, 48, 64, 80, 96],
|
|
104
|
+
guidelines: [
|
|
105
|
+
'Use 16:9 aspect ratio for HD',
|
|
106
|
+
'Use 2.39:1 for cinematic widescreen',
|
|
107
|
+
'Follow rule of thirds for composition',
|
|
108
|
+
'Maintain safe zones for titles'
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
containerWidths: {
|
|
112
|
+
mobile: '100%',
|
|
113
|
+
tablet: '100%',
|
|
114
|
+
desktop: '100%'
|
|
115
|
+
},
|
|
116
|
+
guidelines: [
|
|
117
|
+
'Use storyboard templates for planning',
|
|
118
|
+
'Follow shot composition rules',
|
|
119
|
+
'Maintain consistent framing',
|
|
120
|
+
'Use color grading for mood',
|
|
121
|
+
'Implement proper lighting setups',
|
|
122
|
+
'Follow continuity guidelines'
|
|
123
|
+
]
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
// ============================================================================
|
|
127
|
+
// Motion Picture Domain Export
|
|
128
|
+
// ============================================================================
|
|
129
|
+
|
|
130
|
+
export const MOTION_PICTURE_DOMAIN: DomainStyle = {
|
|
131
|
+
domain: 'motion-picture',
|
|
132
|
+
characteristics: [
|
|
133
|
+
'Cinematic aspect ratios (16:9, 2.39:1, 1.85:1)',
|
|
134
|
+
'Color grading and LUT application',
|
|
135
|
+
'Rule of thirds composition',
|
|
136
|
+
'Three-point lighting setups',
|
|
137
|
+
'Shot types (wide, medium, close-up)',
|
|
138
|
+
'Camera movements (pan, tilt, dolly, crane)',
|
|
139
|
+
'Depth of field control',
|
|
140
|
+
'Visual storytelling techniques',
|
|
141
|
+
'Continuity and match cuts',
|
|
142
|
+
'Sound design integration'
|
|
143
|
+
],
|
|
144
|
+
colorScheme: MOTION_PICTURE_COLORS,
|
|
145
|
+
typography: MOTION_PICTURE_TYPOGRAPHY,
|
|
146
|
+
layout: MOTION_PICTURE_LAYOUT,
|
|
147
|
+
examples: [
|
|
148
|
+
'Feature film with cinematic color grading',
|
|
149
|
+
'TV series with consistent visual style',
|
|
150
|
+
'Web series with episodic structure',
|
|
151
|
+
'Documentary with interview setups',
|
|
152
|
+
'Music video with creative visuals',
|
|
153
|
+
'Commercial with product focus'
|
|
154
|
+
]
|
|
155
|
+
};
|
|
156
|
+
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* OS Application Domain Module
|
|
3
|
+
*
|
|
4
|
+
* General OS application design patterns for desktop applications
|
|
5
|
+
* across Windows, macOS, and Linux platforms.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// OS Application Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const OS_APP_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'App Accent',
|
|
17
|
+
hex: '#0078D4',
|
|
18
|
+
rgb: { r: 0, g: 120, b: 212 },
|
|
19
|
+
hsl: { h: 206, s: 100, l: 42 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Accent Light', hex: '#4A9EFF', usage: 'Hover states' },
|
|
22
|
+
{ name: 'Accent Dark', hex: '#005A9E', usage: 'Pressed states' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Gray 10', hex: '#FAFAFA', rgb: { r: 250, g: 250, b: 250 }, hsl: { h: 0, s: 0, l: 98 } },
|
|
28
|
+
{ name: 'Gray 20', hex: '#F3F3F3', rgb: { r: 243, g: 243, b: 243 }, hsl: { h: 0, s: 0, l: 95 } },
|
|
29
|
+
{ name: 'Gray 130', hex: '#8A8A8A', rgb: { r: 138, g: 138, b: 138 }, hsl: { h: 0, s: 0, l: 54 } },
|
|
30
|
+
{ name: 'Gray 190', hex: '#201F1E', rgb: { r: 32, g: 31, b: 30 }, hsl: { h: 30, s: 3, l: 12 } }
|
|
31
|
+
],
|
|
32
|
+
semantic: {
|
|
33
|
+
success: { hex: '#107C10', usage: 'Success states' },
|
|
34
|
+
warning: { hex: '#FFB900', usage: 'Warnings' },
|
|
35
|
+
error: { hex: '#D13438', usage: 'Errors' },
|
|
36
|
+
info: { hex: '#0078D4', usage: 'Information' }
|
|
37
|
+
},
|
|
38
|
+
accessibility: {
|
|
39
|
+
minimumContrast: 4.5,
|
|
40
|
+
targetContrast: 7,
|
|
41
|
+
colorBlindSafe: true,
|
|
42
|
+
guidelines: [
|
|
43
|
+
'Support system theme (light/dark)',
|
|
44
|
+
'Respect OS high contrast mode',
|
|
45
|
+
'Ensure keyboard focus visibility',
|
|
46
|
+
'Test with platform accessibility tools'
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// ============================================================================
|
|
52
|
+
// OS Application Typography
|
|
53
|
+
// ============================================================================
|
|
54
|
+
|
|
55
|
+
const OS_APP_TYPOGRAPHY: TypographyRules = {
|
|
56
|
+
fontFamilies: {
|
|
57
|
+
primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
|
|
58
|
+
secondary: 'system-ui, sans-serif',
|
|
59
|
+
monospace: '"SF Mono", "Consolas", "Courier New", monospace'
|
|
60
|
+
},
|
|
61
|
+
hierarchy: {
|
|
62
|
+
h1: { fontSize: '28px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
|
|
63
|
+
h2: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
64
|
+
h3: { fontSize: '16px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
65
|
+
h4: { fontSize: '14px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
66
|
+
h5: { fontSize: '12px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
67
|
+
h6: { fontSize: '11px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
body: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
+
small: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
|
|
70
|
+
caption: { fontSize: '11px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
|
|
71
|
+
},
|
|
72
|
+
scale: {
|
|
73
|
+
base: 14,
|
|
74
|
+
ratio: 1.15,
|
|
75
|
+
sizes: [11, 12, 14, 16, 20, 28]
|
|
76
|
+
},
|
|
77
|
+
guidelines: [
|
|
78
|
+
'Use system fonts for native feel',
|
|
79
|
+
'Follow platform typography conventions',
|
|
80
|
+
'Ensure readability at default system zoom',
|
|
81
|
+
'Support dynamic type/font scaling',
|
|
82
|
+
'Use platform-specific font weights'
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// ============================================================================
|
|
87
|
+
// OS Application Layout System
|
|
88
|
+
// ============================================================================
|
|
89
|
+
|
|
90
|
+
const OS_APP_LAYOUT: LayoutSystem = {
|
|
91
|
+
grid: {
|
|
92
|
+
columns: 12,
|
|
93
|
+
gutter: '12px',
|
|
94
|
+
margin: '12px',
|
|
95
|
+
breakpoints: {
|
|
96
|
+
compact: '0-639px',
|
|
97
|
+
medium: '640-1023px',
|
|
98
|
+
expanded: '1024px+'
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
spacing: {
|
|
102
|
+
unit: 4,
|
|
103
|
+
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
|
|
104
|
+
guidelines: [
|
|
105
|
+
'Use 4px base unit for consistency',
|
|
106
|
+
'Follow platform spacing conventions',
|
|
107
|
+
'Maintain touch-friendly targets (44x44px minimum)',
|
|
108
|
+
'Use consistent padding in panels'
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
containerWidths: {
|
|
112
|
+
compact: '100%',
|
|
113
|
+
medium: '100%',
|
|
114
|
+
expanded: '100%'
|
|
115
|
+
},
|
|
116
|
+
guidelines: [
|
|
117
|
+
'Use native window chrome and controls',
|
|
118
|
+
'Implement platform-specific menu bars',
|
|
119
|
+
'Support window resizing and states',
|
|
120
|
+
'Follow platform keyboard shortcuts',
|
|
121
|
+
'Implement proper focus management',
|
|
122
|
+
'Support drag-and-drop where appropriate'
|
|
123
|
+
]
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
// ============================================================================
|
|
127
|
+
// OS Application Domain Export
|
|
128
|
+
// ============================================================================
|
|
129
|
+
|
|
130
|
+
export const OS_APPLICATION_DOMAIN: DomainStyle = {
|
|
131
|
+
domain: 'os-application',
|
|
132
|
+
characteristics: [
|
|
133
|
+
'Native window management',
|
|
134
|
+
'Platform-specific menu bars and toolbars',
|
|
135
|
+
'Keyboard shortcuts and accessibility',
|
|
136
|
+
'System tray/menu bar integration',
|
|
137
|
+
'File system integration',
|
|
138
|
+
'Multi-window support',
|
|
139
|
+
'Drag-and-drop functionality',
|
|
140
|
+
'System theme integration (light/dark)',
|
|
141
|
+
'High DPI/Retina display support',
|
|
142
|
+
'Offline-first architecture'
|
|
143
|
+
],
|
|
144
|
+
colorScheme: OS_APP_COLORS,
|
|
145
|
+
typography: OS_APP_TYPOGRAPHY,
|
|
146
|
+
layout: OS_APP_LAYOUT,
|
|
147
|
+
examples: [
|
|
148
|
+
'Text editor with syntax highlighting',
|
|
149
|
+
'File manager with tree view',
|
|
150
|
+
'Email client with multi-pane layout',
|
|
151
|
+
'Media player with playback controls',
|
|
152
|
+
'Settings/preferences application',
|
|
153
|
+
'Development IDE with panels and toolbars'
|
|
154
|
+
]
|
|
155
|
+
};
|
|
156
|
+
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Print Campaigns Domain Module
|
|
3
|
+
*
|
|
4
|
+
* Design patterns for print media including flyers, posters,
|
|
5
|
+
* banners, and billboards with CMYK color and print specifications.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// Print Campaigns Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const PRINT_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'Print Red',
|
|
17
|
+
hex: '#E63946',
|
|
18
|
+
rgb: { r: 230, g: 57, b: 70 },
|
|
19
|
+
hsl: { h: 356, s: 78, l: 56 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Red Light', hex: '#FF6B6B', usage: 'Highlights' },
|
|
22
|
+
{ name: 'Red Dark', hex: '#C1121F', usage: 'Emphasis' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Light Gray', hex: '#F1FAEE', rgb: { r: 241, g: 250, b: 238 }, hsl: { h: 105, s: 60, l: 96 } },
|
|
28
|
+
{ name: 'Mid Gray', hex: '#A8DADC', rgb: { r: 168, g: 218, b: 220 }, hsl: { h: 182, s: 41, l: 76 } },
|
|
29
|
+
{ name: 'Dark Gray', hex: '#457B9D', rgb: { r: 69, g: 123, b: 157 }, hsl: { h: 203, s: 39, l: 44 } },
|
|
30
|
+
{ name: 'Black', hex: '#1D3557', rgb: { r: 29, g: 53, b: 87 }, hsl: { h: 215, s: 50, l: 23 } }
|
|
31
|
+
],
|
|
32
|
+
semantic: {
|
|
33
|
+
success: { hex: '#2A9D8F', usage: 'Positive messaging' },
|
|
34
|
+
warning: { hex: '#F4A261', usage: 'Attention grabbing' },
|
|
35
|
+
error: { hex: '#E76F51', usage: 'Urgent calls-to-action' },
|
|
36
|
+
info: { hex: '#264653', usage: 'Information blocks' }
|
|
37
|
+
},
|
|
38
|
+
accessibility: {
|
|
39
|
+
minimumContrast: 4.5,
|
|
40
|
+
targetContrast: 7,
|
|
41
|
+
colorBlindSafe: true,
|
|
42
|
+
guidelines: [
|
|
43
|
+
'Use CMYK color mode for print',
|
|
44
|
+
'Ensure 300 DPI resolution minimum',
|
|
45
|
+
'Add bleed area (0.125" standard)',
|
|
46
|
+
'Test with print proofs before production'
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// ============================================================================
|
|
52
|
+
// Print Campaigns Typography
|
|
53
|
+
// ============================================================================
|
|
54
|
+
|
|
55
|
+
const PRINT_TYPOGRAPHY: TypographyRules = {
|
|
56
|
+
fontFamilies: {
|
|
57
|
+
primary: '"Helvetica", "Arial", sans-serif',
|
|
58
|
+
secondary: '"Garamond", "Georgia", serif',
|
|
59
|
+
monospace: '"Courier", monospace'
|
|
60
|
+
},
|
|
61
|
+
hierarchy: {
|
|
62
|
+
h1: { fontSize: '72pt', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em' },
|
|
63
|
+
h2: { fontSize: '48pt', fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.01em' },
|
|
64
|
+
h3: { fontSize: '36pt', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
|
|
65
|
+
h4: { fontSize: '24pt', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
66
|
+
h5: { fontSize: '18pt', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
67
|
+
h6: { fontSize: '14pt', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
body: { fontSize: '12pt', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
+
small: { fontSize: '10pt', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
|
|
70
|
+
caption: { fontSize: '8pt', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
|
|
71
|
+
},
|
|
72
|
+
scale: {
|
|
73
|
+
base: 12,
|
|
74
|
+
ratio: 1.5,
|
|
75
|
+
sizes: [8, 10, 12, 14, 18, 24, 36, 48, 72]
|
|
76
|
+
},
|
|
77
|
+
guidelines: [
|
|
78
|
+
'Use points (pt) instead of pixels',
|
|
79
|
+
'Embed fonts or convert to outlines',
|
|
80
|
+
'Ensure minimum 8pt for body text',
|
|
81
|
+
'Use high-quality font files',
|
|
82
|
+
'Test readability at actual print size'
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// ============================================================================
|
|
87
|
+
// Print Campaigns Layout System
|
|
88
|
+
// ============================================================================
|
|
89
|
+
|
|
90
|
+
const PRINT_LAYOUT: LayoutSystem = {
|
|
91
|
+
grid: {
|
|
92
|
+
columns: 12,
|
|
93
|
+
gutter: '0.25in',
|
|
94
|
+
margin: '0.5in',
|
|
95
|
+
breakpoints: {
|
|
96
|
+
flyer: '8.5x11in',
|
|
97
|
+
poster: '18x24in',
|
|
98
|
+
banner: '3x6ft',
|
|
99
|
+
billboard: '14x48ft'
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
spacing: {
|
|
103
|
+
unit: 0.125,
|
|
104
|
+
scale: [0, 0.125, 0.25, 0.5, 0.75, 1, 1.5, 2],
|
|
105
|
+
guidelines: [
|
|
106
|
+
'Use inches for measurements',
|
|
107
|
+
'Add 0.125" bleed on all sides',
|
|
108
|
+
'Maintain 0.25" safe zone from trim',
|
|
109
|
+
'Use consistent margins'
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
containerWidths: {
|
|
113
|
+
flyer: '8.5in',
|
|
114
|
+
poster: '24in',
|
|
115
|
+
banner: '72in',
|
|
116
|
+
billboard: '576in'
|
|
117
|
+
},
|
|
118
|
+
guidelines: [
|
|
119
|
+
'Design at actual size or proportional scale',
|
|
120
|
+
'Use CMYK color mode',
|
|
121
|
+
'Set resolution to 300 DPI minimum',
|
|
122
|
+
'Add bleed and crop marks',
|
|
123
|
+
'Convert text to outlines before printing',
|
|
124
|
+
'Use high-resolution images only'
|
|
125
|
+
]
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
// ============================================================================
|
|
129
|
+
// Print Campaigns Domain Export
|
|
130
|
+
// ============================================================================
|
|
131
|
+
|
|
132
|
+
export const PRINT_CAMPAIGNS_DOMAIN: DomainStyle = {
|
|
133
|
+
domain: 'print-campaigns',
|
|
134
|
+
characteristics: [
|
|
135
|
+
'CMYK color mode for accurate printing',
|
|
136
|
+
'300 DPI resolution minimum',
|
|
137
|
+
'Bleed area (0.125" standard)',
|
|
138
|
+
'Safe zone for important content',
|
|
139
|
+
'High-contrast for visibility',
|
|
140
|
+
'Large, readable typography',
|
|
141
|
+
'Clear visual hierarchy',
|
|
142
|
+
'Strong call-to-action placement',
|
|
143
|
+
'Brand consistency across materials',
|
|
144
|
+
'Print-ready file formats (PDF, EPS)'
|
|
145
|
+
],
|
|
146
|
+
colorScheme: PRINT_COLORS,
|
|
147
|
+
typography: PRINT_TYPOGRAPHY,
|
|
148
|
+
layout: PRINT_LAYOUT,
|
|
149
|
+
examples: [
|
|
150
|
+
'Event flyer (8.5x11") with bold headline and event details',
|
|
151
|
+
'Concert poster (18x24") with artist photo and venue info',
|
|
152
|
+
'Trade show banner (3x6ft) with company branding',
|
|
153
|
+
'Highway billboard (14x48ft) with simple message',
|
|
154
|
+
'Business card (3.5x2") with contact information',
|
|
155
|
+
'Brochure (tri-fold) with product features'
|
|
156
|
+
]
|
|
157
|
+
};
|
|
158
|
+
|