@harness-engineering/cli 1.6.1 → 1.7.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/dist/agents/personas/planner.yaml +27 -0
- package/dist/agents/personas/verifier.yaml +30 -0
- package/dist/agents/skills/claude-code/enforce-architecture/SKILL.md +19 -0
- package/dist/agents/skills/claude-code/harness-accessibility/SKILL.md +274 -0
- package/dist/agents/skills/claude-code/harness-accessibility/skill.yaml +51 -0
- package/dist/agents/skills/claude-code/harness-autopilot/SKILL.md +111 -72
- package/dist/agents/skills/claude-code/harness-autopilot/skill.yaml +4 -2
- package/dist/agents/skills/claude-code/harness-dependency-health/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-design/SKILL.md +265 -0
- package/dist/agents/skills/claude-code/harness-design/skill.yaml +53 -0
- package/dist/agents/skills/claude-code/harness-design-mobile/SKILL.md +336 -0
- package/dist/agents/skills/claude-code/harness-design-mobile/skill.yaml +49 -0
- package/dist/agents/skills/claude-code/harness-design-system/SKILL.md +282 -0
- package/dist/agents/skills/claude-code/harness-design-system/skill.yaml +50 -0
- package/dist/agents/skills/claude-code/harness-design-web/SKILL.md +360 -0
- package/dist/agents/skills/claude-code/harness-design-web/skill.yaml +52 -0
- package/dist/agents/skills/claude-code/harness-hotspot-detector/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-impact-analysis/SKILL.md +16 -0
- package/dist/agents/skills/claude-code/harness-integrity/SKILL.md +19 -1
- package/dist/agents/skills/claude-code/harness-knowledge-mapper/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-onboarding/SKILL.md +19 -1
- package/dist/agents/skills/claude-code/harness-release-readiness/SKILL.md +13 -9
- package/dist/agents/skills/claude-code/harness-security-scan/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-verify/SKILL.md +26 -0
- package/dist/agents/skills/gemini-cli/harness-accessibility/SKILL.md +274 -0
- package/dist/agents/skills/gemini-cli/harness-accessibility/skill.yaml +51 -0
- package/dist/agents/skills/gemini-cli/harness-autopilot/SKILL.md +111 -72
- package/dist/agents/skills/gemini-cli/harness-autopilot/skill.yaml +4 -2
- package/dist/agents/skills/gemini-cli/harness-dependency-health/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-design/SKILL.md +265 -0
- package/dist/agents/skills/gemini-cli/harness-design/skill.yaml +53 -0
- package/dist/agents/skills/gemini-cli/harness-design-mobile/SKILL.md +336 -0
- package/dist/agents/skills/gemini-cli/harness-design-mobile/skill.yaml +49 -0
- package/dist/agents/skills/gemini-cli/harness-design-system/SKILL.md +282 -0
- package/dist/agents/skills/gemini-cli/harness-design-system/skill.yaml +50 -0
- package/dist/agents/skills/gemini-cli/harness-design-web/SKILL.md +360 -0
- package/dist/agents/skills/gemini-cli/harness-design-web/skill.yaml +52 -0
- package/dist/agents/skills/gemini-cli/harness-hotspot-detector/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-impact-analysis/SKILL.md +16 -0
- package/dist/agents/skills/gemini-cli/harness-knowledge-mapper/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-release-readiness/SKILL.md +13 -9
- package/dist/agents/skills/gemini-cli/harness-security-scan/skill.yaml +1 -1
- package/dist/agents/skills/node_modules/.bin/vitest +2 -2
- package/dist/agents/skills/shared/design-knowledge/anti-patterns/color.yaml +106 -0
- package/dist/agents/skills/shared/design-knowledge/anti-patterns/layout.yaml +109 -0
- package/dist/agents/skills/shared/design-knowledge/anti-patterns/motion.yaml +109 -0
- package/dist/agents/skills/shared/design-knowledge/anti-patterns/typography.yaml +112 -0
- package/dist/agents/skills/shared/design-knowledge/industries/creative.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/ecommerce.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/emerging-tech.yaml +83 -0
- package/dist/agents/skills/shared/design-knowledge/industries/fintech.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/healthcare.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/lifestyle.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/saas.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/industries/services.yaml +80 -0
- package/dist/agents/skills/shared/design-knowledge/palettes/curated.yaml +234 -0
- package/dist/agents/skills/shared/design-knowledge/platform-rules/android.yaml +125 -0
- package/dist/agents/skills/shared/design-knowledge/platform-rules/flutter.yaml +144 -0
- package/dist/agents/skills/shared/design-knowledge/platform-rules/ios.yaml +106 -0
- package/dist/agents/skills/shared/design-knowledge/platform-rules/web.yaml +102 -0
- package/dist/agents/skills/shared/design-knowledge/typography/pairings.yaml +274 -0
- package/dist/bin/harness.js +3 -2
- package/dist/{chunk-3U5VZYR7.js → chunk-4WUGOJQ7.js} +6 -3
- package/dist/{chunk-O6NEKDYP.js → chunk-FFIX3QVG.js} +697 -349
- package/dist/chunk-GA6GN5J2.js +6150 -0
- package/dist/dist-C4J67MPP.js +242 -0
- package/dist/dist-N4D4QWFV.js +2809 -0
- package/dist/index.d.ts +79 -0
- package/dist/index.js +3 -2
- package/dist/validate-cross-check-WGXQ7K62.js +7 -0
- package/package.json +12 -8
- package/dist/validate-cross-check-LNIZ7KGZ.js +0 -6
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "Healthcare"
|
|
2
|
+
description: "Calm, accessible design prioritizing clarity, trust, and universal usability for health-related products"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Calm and reassuring with high readability, generous spacing, and clear visual hierarchy"
|
|
6
|
+
secondary: "Clinical precision balanced with warmth and approachability for patient-facing applications"
|
|
7
|
+
avoid: ["Red as a decorative color (it signals emergency or danger in medical contexts)", "Small text below 16px for any patient-facing content", "Dense information layouts without progressive disclosure", "Harsh visual contrasts that create anxiety"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Blue 600"
|
|
12
|
+
hex: "#2563eb"
|
|
13
|
+
usage: "Primary actions, navigation, trust-building brand elements"
|
|
14
|
+
- name: "Blue 700"
|
|
15
|
+
hex: "#1d4ed8"
|
|
16
|
+
usage: "Hover states, active navigation, focused elements"
|
|
17
|
+
- name: "Blue 50"
|
|
18
|
+
hex: "#eff6ff"
|
|
19
|
+
usage: "Info banners, selected states, section backgrounds"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Teal 500"
|
|
22
|
+
hex: "#14b8a6"
|
|
23
|
+
usage: "Wellness indicators, positive health metrics, secondary CTAs"
|
|
24
|
+
- name: "Green 500"
|
|
25
|
+
hex: "#22c55e"
|
|
26
|
+
usage: "Healthy ranges, normal readings, completion states"
|
|
27
|
+
- name: "Lavender 400"
|
|
28
|
+
hex: "#a78bfa"
|
|
29
|
+
usage: "Mental health sections, calm interactive elements, tertiary accents"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Slate 800"
|
|
32
|
+
hex: "#1e293b"
|
|
33
|
+
usage: "Primary text, headings, critical medical information"
|
|
34
|
+
- name: "Slate 500"
|
|
35
|
+
hex: "#64748b"
|
|
36
|
+
usage: "Secondary text, labels, non-critical descriptions"
|
|
37
|
+
- name: "Slate 50"
|
|
38
|
+
hex: "#f8fafc"
|
|
39
|
+
usage: "Page backgrounds, content area surfaces"
|
|
40
|
+
- name: "White"
|
|
41
|
+
hex: "#ffffff"
|
|
42
|
+
usage: "Card surfaces, form backgrounds, reading areas"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#16a34a"
|
|
45
|
+
warning: "#ca8a04"
|
|
46
|
+
error: "#dc2626"
|
|
47
|
+
info: "#2563eb"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["Source Sans 3", "Nunito Sans"]
|
|
52
|
+
weights: [600, 700]
|
|
53
|
+
characteristics: "Humanist sans-serifs with open letterforms for maximum legibility. Friendly without being childish -- conveys competence and care."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Source Sans 3", "Nunito Sans", "system-ui"]
|
|
56
|
+
weights: [400, 600]
|
|
57
|
+
characteristics: "Minimum 16px body text, 1.6+ line-height. Must remain legible for elderly users and those with visual impairments. Avoid light font weights."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["Source Code Pro", "IBM Plex Mono"]
|
|
60
|
+
usage: "Medical record numbers, dosage values, lab result codes, appointment IDs"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Using red as a decorative or branding color"
|
|
64
|
+
reason: "In medical contexts red universally signals emergency, danger, or critical status; decorative red causes false alarm and anxiety"
|
|
65
|
+
instead: "Reserve red exclusively for errors, critical alerts, and emergency states; use blue or teal for branding"
|
|
66
|
+
- pattern: "Body text smaller than 16px on patient-facing screens"
|
|
67
|
+
reason: "Healthcare users include elderly patients and those under medical stress; small text increases error risk in dosage or appointment information"
|
|
68
|
+
instead: "Use 16px minimum for body, 14px minimum for labels, and provide text scaling options; test with users aged 65+"
|
|
69
|
+
- pattern: "Auto-dismissing notifications for medical information"
|
|
70
|
+
reason: "Patients may need extra time to read and comprehend health information; auto-dismiss causes missed critical details"
|
|
71
|
+
instead: "Use persistent notifications that require manual dismissal for any health-related information"
|
|
72
|
+
- pattern: "Complex medical jargon without plain-language alternatives"
|
|
73
|
+
reason: "Health literacy varies enormously; jargon creates barriers to understanding and informed consent"
|
|
74
|
+
instead: "Provide plain-language summaries alongside medical terminology; use progressive disclosure for clinical detail"
|
|
75
|
+
- pattern: "Date/time ambiguity in appointment scheduling"
|
|
76
|
+
reason: "Missed appointments due to AM/PM confusion or timezone errors have real health consequences"
|
|
77
|
+
instead: "Always show full date with day-of-week, use 12-hour time with explicit AM/PM, and display timezone; confirm with relative time ('in 3 days')"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["zocdoc.com", "one.app", "headspace.com", "oscar.com", "calm.com"]
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "Lifestyle"
|
|
2
|
+
description: "Warm, aspirational design that evokes feeling and connection through earthy tones, organic shapes, and inviting imagery"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Warm and aspirational with organic layouts, generous imagery, and an inviting human-centered feel"
|
|
6
|
+
secondary: "Community-driven with user-generated content integration and relatable, authentic photography"
|
|
7
|
+
avoid: ["Corporate sterility that feels disconnected from real life", "Dense text-heavy layouts that suppress the visual storytelling", "Harsh geometric precision that feels cold and institutional", "Oversaturated filters that make imagery feel artificial"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Terracotta"
|
|
12
|
+
hex: "#c2714f"
|
|
13
|
+
usage: "Primary brand, warm CTAs, hero section accents"
|
|
14
|
+
- name: "Warm Brown"
|
|
15
|
+
hex: "#8b5e3c"
|
|
16
|
+
usage: "Grounding elements, navigation, footer"
|
|
17
|
+
- name: "Sand"
|
|
18
|
+
hex: "#f5ebe0"
|
|
19
|
+
usage: "Page backgrounds, warm surface tones"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Sage Green"
|
|
22
|
+
hex: "#7c9070"
|
|
23
|
+
usage: "Wellness and nature-related content, secondary CTAs"
|
|
24
|
+
- name: "Dusty Rose"
|
|
25
|
+
hex: "#d4a0a0"
|
|
26
|
+
usage: "Lifestyle imagery overlays, soft highlights, feminine accents"
|
|
27
|
+
- name: "Sunshine"
|
|
28
|
+
hex: "#f2c94c"
|
|
29
|
+
usage: "Joy and energy indicators, featured content, seasonal promotions"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Warm Gray 800"
|
|
32
|
+
hex: "#3d3532"
|
|
33
|
+
usage: "Primary text, headings"
|
|
34
|
+
- name: "Warm Gray 500"
|
|
35
|
+
hex: "#8a817c"
|
|
36
|
+
usage: "Secondary text, captions, metadata"
|
|
37
|
+
- name: "Warm Gray 100"
|
|
38
|
+
hex: "#f0ebe5"
|
|
39
|
+
usage: "Alternating section backgrounds, card surfaces"
|
|
40
|
+
- name: "Cream"
|
|
41
|
+
hex: "#fdfbf7"
|
|
42
|
+
usage: "Primary page backgrounds, content areas"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#4ade80"
|
|
45
|
+
warning: "#fbbf24"
|
|
46
|
+
error: "#f87171"
|
|
47
|
+
info: "#60a5fa"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["Lora", "DM Serif Display"]
|
|
52
|
+
weights: [400, 700]
|
|
53
|
+
characteristics: "Warm serif typefaces that feel inviting and editorial. Organic curves and moderate contrast convey approachability and authenticity."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Nunito Sans", "DM Sans", "system-ui"]
|
|
56
|
+
weights: [400, 600]
|
|
57
|
+
characteristics: "Rounded sans-serifs that complement serif display type. Friendly letterforms with open counters for warm, approachable body text."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["Source Code Pro", "JetBrains Mono"]
|
|
60
|
+
usage: "Recipe measurements, product dimensions, order tracking codes"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Using corporate stock photography with posed models and white backgrounds"
|
|
64
|
+
reason: "Lifestyle brands depend on authenticity; staged corporate imagery breaks the emotional connection"
|
|
65
|
+
instead: "Use natural-light photography with real environments, candid moments, and diverse representation"
|
|
66
|
+
- pattern: "Dense text blocks for product descriptions or about-us content"
|
|
67
|
+
reason: "Lifestyle audiences engage through visuals and emotion first; text walls suppress the aspirational feeling"
|
|
68
|
+
instead: "Lead with imagery, use short evocative copy (2-3 sentences), and let whitespace breathe between content blocks"
|
|
69
|
+
- pattern: "Aggressive email capture pop-ups on first visit"
|
|
70
|
+
reason: "Interrupting the aspirational browsing experience before any emotional investment destroys engagement"
|
|
71
|
+
instead: "Introduce email capture after scroll depth (50%+) or second page visit; offer genuine value (styling guide, recipe book)"
|
|
72
|
+
- pattern: "Monochromatic color schemes with no warmth"
|
|
73
|
+
reason: "Pure grayscale or cool-toned palettes feel clinical and corporate for lifestyle brands"
|
|
74
|
+
instead: "Infuse warmth through earthy tones, textured backgrounds, and warm-filtered photography"
|
|
75
|
+
- pattern: "Tiny product thumbnails in grid layouts without lifestyle context"
|
|
76
|
+
reason: "Products shown in isolation lose the aspirational context that drives lifestyle purchases"
|
|
77
|
+
instead: "Show products in context (styled rooms, worn outfits, prepared meals) alongside detail views"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["airbnb.com", "goop.com", "aesop.com", "kinfolk.com", "patagonia.com"]
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "SaaS"
|
|
2
|
+
description: "Clean, data-forward design emphasizing clarity, efficiency, and scalable UI patterns for software products"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Clean minimalism with data-forward layouts and generous whitespace"
|
|
6
|
+
secondary: "Dashboard-oriented design with card-based information architecture"
|
|
7
|
+
avoid: ["Cluttered dashboards with competing visual hierarchies", "Rainbow status colors without semantic meaning", "Decorative elements that distract from data comprehension", "Heavy skeuomorphic textures"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Indigo 600"
|
|
12
|
+
hex: "#4f46e5"
|
|
13
|
+
usage: "Primary actions, active states, navigation highlights"
|
|
14
|
+
- name: "Indigo 700"
|
|
15
|
+
hex: "#4338ca"
|
|
16
|
+
usage: "Hover states, emphasis on primary elements"
|
|
17
|
+
- name: "Indigo 50"
|
|
18
|
+
hex: "#eef2ff"
|
|
19
|
+
usage: "Selected row backgrounds, active section indicators"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Cyan 500"
|
|
22
|
+
hex: "#06b6d4"
|
|
23
|
+
usage: "Secondary actions, data visualization accent, links"
|
|
24
|
+
- name: "Violet 500"
|
|
25
|
+
hex: "#8b5cf6"
|
|
26
|
+
usage: "Premium features, upgrade prompts, chart series"
|
|
27
|
+
- name: "Amber 400"
|
|
28
|
+
hex: "#fbbf24"
|
|
29
|
+
usage: "Highlights, badges, attention indicators"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Slate 900"
|
|
32
|
+
hex: "#0f172a"
|
|
33
|
+
usage: "Primary text, headings"
|
|
34
|
+
- name: "Slate 500"
|
|
35
|
+
hex: "#64748b"
|
|
36
|
+
usage: "Secondary text, labels, placeholders"
|
|
37
|
+
- name: "Slate 100"
|
|
38
|
+
hex: "#f1f5f9"
|
|
39
|
+
usage: "Page backgrounds, card surfaces, dividers"
|
|
40
|
+
- name: "White"
|
|
41
|
+
hex: "#ffffff"
|
|
42
|
+
usage: "Card backgrounds, input fields, content areas"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#16a34a"
|
|
45
|
+
warning: "#eab308"
|
|
46
|
+
error: "#dc2626"
|
|
47
|
+
info: "#2563eb"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["Inter", "Geist"]
|
|
52
|
+
weights: [600, 700]
|
|
53
|
+
characteristics: "Geometric sans-serifs with tight tracking for dashboard headers and feature titles. Inter offers excellent tabular number support for data-heavy views."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Inter", "Geist", "system-ui"]
|
|
56
|
+
weights: [400, 500]
|
|
57
|
+
characteristics: "Optimized for long-form reading in documentation and settings. 16px base with 1.6 line-height for comfortable scanning."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["Geist Mono", "JetBrains Mono", "SF Mono"]
|
|
60
|
+
usage: "Code snippets, API keys, log output, terminal emulators, and tabular data where alignment matters"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Using more than 5 colors in a single dashboard chart without a legend"
|
|
64
|
+
reason: "Users cannot distinguish more than 5-7 colors reliably; unlabeled series become meaningless"
|
|
65
|
+
instead: "Limit chart series to 5 colors with clear labels, or use interactive filtering to show subsets"
|
|
66
|
+
- pattern: "Placing critical actions behind ellipsis menus (three-dot overflow)"
|
|
67
|
+
reason: "Primary workflows become hidden, increasing time-to-task for frequent actions"
|
|
68
|
+
instead: "Surface the top 2-3 actions as visible buttons; use overflow only for rare or destructive actions"
|
|
69
|
+
- pattern: "Using modal dialogs for multi-step workflows"
|
|
70
|
+
reason: "Modals trap users and prevent reference to underlying data during complex operations"
|
|
71
|
+
instead: "Use slide-over panels or dedicated pages for multi-step flows; reserve modals for confirmations"
|
|
72
|
+
- pattern: "Inconsistent empty states across the product"
|
|
73
|
+
reason: "Blank screens confuse new users and miss onboarding opportunities"
|
|
74
|
+
instead: "Design empty states with illustration, explanation, and a clear CTA for every list and dashboard widget"
|
|
75
|
+
- pattern: "Real-time data without visible refresh indicators"
|
|
76
|
+
reason: "Users lose trust when numbers change without explanation; causes anxiety about data accuracy"
|
|
77
|
+
instead: "Show last-updated timestamps, subtle pulse animations on refresh, or explicit refresh buttons"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["linear.app", "notion.so", "stripe.com/dashboard", "vercel.com/dashboard", "arc.net"]
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "Professional Services"
|
|
2
|
+
description: "Trust-building, professional design that conveys expertise, reliability, and clear value propositions"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Professional and structured layouts that build credibility through clarity, consistency, and thoughtful restraint"
|
|
6
|
+
secondary: "Approachable authority with case-study-driven storytelling and clear service architecture"
|
|
7
|
+
avoid: ["Flashy animations that undermine professional credibility", "Unclear or hidden pricing that creates friction in the sales process", "Overly corporate stock photography with generic handshakes and skylines", "Dense text walls without scannable structure"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Blue 800"
|
|
12
|
+
hex: "#1e40af"
|
|
13
|
+
usage: "Primary brand, navigation, headers establishing professional authority"
|
|
14
|
+
- name: "Blue 700"
|
|
15
|
+
hex: "#1d4ed8"
|
|
16
|
+
usage: "CTAs, links, interactive elements"
|
|
17
|
+
- name: "Blue 50"
|
|
18
|
+
hex: "#eff6ff"
|
|
19
|
+
usage: "Section backgrounds, testimonial cards, feature highlights"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Slate 600"
|
|
22
|
+
hex: "#475569"
|
|
23
|
+
usage: "Secondary text, supporting information, subtle emphasis"
|
|
24
|
+
- name: "Emerald 600"
|
|
25
|
+
hex: "#059669"
|
|
26
|
+
usage: "Success metrics, growth indicators, value proof points"
|
|
27
|
+
- name: "Amber 500"
|
|
28
|
+
hex: "#f59e0b"
|
|
29
|
+
usage: "Attention markers, premium service tiers, important notices"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Gray 900"
|
|
32
|
+
hex: "#111827"
|
|
33
|
+
usage: "Headings, primary text, service titles"
|
|
34
|
+
- name: "Gray 500"
|
|
35
|
+
hex: "#6b7280"
|
|
36
|
+
usage: "Body text, descriptions, secondary content"
|
|
37
|
+
- name: "Gray 100"
|
|
38
|
+
hex: "#f3f4f6"
|
|
39
|
+
usage: "Page backgrounds, alternating sections, sidebar surfaces"
|
|
40
|
+
- name: "White"
|
|
41
|
+
hex: "#ffffff"
|
|
42
|
+
usage: "Content cards, form backgrounds, primary reading surfaces"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#16a34a"
|
|
45
|
+
warning: "#d97706"
|
|
46
|
+
error: "#dc2626"
|
|
47
|
+
info: "#2563eb"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["Inter", "Plus Jakarta Sans"]
|
|
52
|
+
weights: [600, 700]
|
|
53
|
+
characteristics: "Modern sans-serifs that convey competence without being cold. Strong enough for authority, approachable enough for client-facing communication."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Inter", "Source Sans 3", "system-ui"]
|
|
56
|
+
weights: [400, 500]
|
|
57
|
+
characteristics: "Highly readable at all sizes for proposals, case studies, and service descriptions. Conservative line-height (1.6) for comfortable long-form reading."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["IBM Plex Mono", "SF Mono"]
|
|
60
|
+
usage: "Contract references, project codes, technical specifications, pricing breakdowns"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Vague service descriptions without concrete deliverables"
|
|
64
|
+
reason: "Prospects cannot evaluate services they don't understand; vague copy signals lack of expertise"
|
|
65
|
+
instead: "Define each service with specific deliverables, timelines, and outcomes; use case studies as proof"
|
|
66
|
+
- pattern: "Contact form as the only conversion path"
|
|
67
|
+
reason: "A single conversion funnel ignores varied buyer intent (some want pricing, others want case studies)"
|
|
68
|
+
instead: "Offer multiple CTAs: schedule a call, download a case study, view pricing, start a trial"
|
|
69
|
+
- pattern: "Testimonials without attribution or context"
|
|
70
|
+
reason: "Anonymous testimonials carry no credibility; they read as fabricated regardless of authenticity"
|
|
71
|
+
instead: "Include full name, title, company, and headshot; tie testimonials to specific services or outcomes"
|
|
72
|
+
- pattern: "Auto-playing animations on page load for every section"
|
|
73
|
+
reason: "Excessive animation on professional sites signals flash over substance; it delays content consumption"
|
|
74
|
+
instead: "Use subtle scroll-triggered reveals for key statistics; keep animations under 300ms and respect prefers-reduced-motion"
|
|
75
|
+
- pattern: "Burying pricing information or requiring a call for basic pricing"
|
|
76
|
+
reason: "67% of B2B buyers prefer self-serve research; hidden pricing wastes both buyer and seller time"
|
|
77
|
+
instead: "Show starting prices or pricing ranges openly; use 'Contact us' only for truly custom enterprise engagements"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["mckinsey.com", "bain.com", "thoughtbot.com", "metalab.com", "basecamp.com"]
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
description: "Curated color palettes with pre-validated WCAG AA contrast pairs"
|
|
2
|
+
|
|
3
|
+
palettes:
|
|
4
|
+
- name: "Ocean Depth"
|
|
5
|
+
tags: ["professional", "trust", "saas", "fintech"]
|
|
6
|
+
colors:
|
|
7
|
+
primary: "#1e3a5f"
|
|
8
|
+
secondary: "#2563eb"
|
|
9
|
+
accent: "#06b6d4"
|
|
10
|
+
surface: "#f8fafc"
|
|
11
|
+
surface_alt: "#e2e8f0"
|
|
12
|
+
text_primary: "#0f172a"
|
|
13
|
+
text_secondary: "#475569"
|
|
14
|
+
text_inverse: "#ffffff"
|
|
15
|
+
contrast_pairs:
|
|
16
|
+
- foreground: "#0f172a"
|
|
17
|
+
background: "#f8fafc"
|
|
18
|
+
ratio: 17.06
|
|
19
|
+
passes: ["AA", "AAA"]
|
|
20
|
+
- foreground: "#ffffff"
|
|
21
|
+
background: "#1e3a5f"
|
|
22
|
+
ratio: 11.5
|
|
23
|
+
passes: ["AA", "AAA"]
|
|
24
|
+
- foreground: "#ffffff"
|
|
25
|
+
background: "#2563eb"
|
|
26
|
+
ratio: 5.17
|
|
27
|
+
passes: ["AA"]
|
|
28
|
+
- foreground: "#475569"
|
|
29
|
+
background: "#f8fafc"
|
|
30
|
+
ratio: 7.24
|
|
31
|
+
passes: ["AA", "AAA"]
|
|
32
|
+
|
|
33
|
+
- name: "Warm Earth"
|
|
34
|
+
tags: ["lifestyle", "warm", "organic", "hospitality"]
|
|
35
|
+
colors:
|
|
36
|
+
primary: "#78350f"
|
|
37
|
+
secondary: "#92400e"
|
|
38
|
+
accent: "#b45309"
|
|
39
|
+
surface: "#faf5f0"
|
|
40
|
+
surface_alt: "#f5ebe0"
|
|
41
|
+
text_primary: "#292524"
|
|
42
|
+
text_secondary: "#57534e"
|
|
43
|
+
text_inverse: "#ffffff"
|
|
44
|
+
contrast_pairs:
|
|
45
|
+
- foreground: "#292524"
|
|
46
|
+
background: "#faf5f0"
|
|
47
|
+
ratio: 14.0
|
|
48
|
+
passes: ["AA", "AAA"]
|
|
49
|
+
- foreground: "#ffffff"
|
|
50
|
+
background: "#78350f"
|
|
51
|
+
ratio: 9.07
|
|
52
|
+
passes: ["AA", "AAA"]
|
|
53
|
+
- foreground: "#ffffff"
|
|
54
|
+
background: "#b45309"
|
|
55
|
+
ratio: 5.02
|
|
56
|
+
passes: ["AA"]
|
|
57
|
+
- foreground: "#57534e"
|
|
58
|
+
background: "#faf5f0"
|
|
59
|
+
ratio: 7.04
|
|
60
|
+
passes: ["AA", "AAA"]
|
|
61
|
+
|
|
62
|
+
- name: "Bold Impact"
|
|
63
|
+
tags: ["creative", "bold", "startup", "marketing"]
|
|
64
|
+
colors:
|
|
65
|
+
primary: "#dc2626"
|
|
66
|
+
secondary: "#7c3aed"
|
|
67
|
+
accent: "#f59e0b"
|
|
68
|
+
surface: "#fafafa"
|
|
69
|
+
surface_alt: "#f4f4f5"
|
|
70
|
+
text_primary: "#18181b"
|
|
71
|
+
text_secondary: "#3f3f46"
|
|
72
|
+
text_inverse: "#ffffff"
|
|
73
|
+
contrast_pairs:
|
|
74
|
+
- foreground: "#18181b"
|
|
75
|
+
background: "#fafafa"
|
|
76
|
+
ratio: 16.97
|
|
77
|
+
passes: ["AA", "AAA"]
|
|
78
|
+
- foreground: "#ffffff"
|
|
79
|
+
background: "#dc2626"
|
|
80
|
+
ratio: 4.83
|
|
81
|
+
passes: ["AA"]
|
|
82
|
+
- foreground: "#ffffff"
|
|
83
|
+
background: "#7c3aed"
|
|
84
|
+
ratio: 5.7
|
|
85
|
+
passes: ["AA"]
|
|
86
|
+
- foreground: "#18181b"
|
|
87
|
+
background: "#f4f4f5"
|
|
88
|
+
ratio: 16.12
|
|
89
|
+
passes: ["AA", "AAA"]
|
|
90
|
+
|
|
91
|
+
- name: "Midnight"
|
|
92
|
+
tags: ["dark-mode", "tech", "developer", "modern"]
|
|
93
|
+
colors:
|
|
94
|
+
primary: "#3b82f6"
|
|
95
|
+
secondary: "#6366f1"
|
|
96
|
+
accent: "#38bdf8"
|
|
97
|
+
surface: "#0f172a"
|
|
98
|
+
surface_alt: "#1e293b"
|
|
99
|
+
text_primary: "#f1f5f9"
|
|
100
|
+
text_secondary: "#94a3b8"
|
|
101
|
+
text_inverse: "#0f172a"
|
|
102
|
+
contrast_pairs:
|
|
103
|
+
- foreground: "#f1f5f9"
|
|
104
|
+
background: "#0f172a"
|
|
105
|
+
ratio: 16.3
|
|
106
|
+
passes: ["AA", "AAA"]
|
|
107
|
+
- foreground: "#e2e8f0"
|
|
108
|
+
background: "#1e293b"
|
|
109
|
+
ratio: 11.87
|
|
110
|
+
passes: ["AA", "AAA"]
|
|
111
|
+
- foreground: "#38bdf8"
|
|
112
|
+
background: "#0f172a"
|
|
113
|
+
ratio: 8.33
|
|
114
|
+
passes: ["AA", "AAA"]
|
|
115
|
+
- foreground: "#94a3b8"
|
|
116
|
+
background: "#0f172a"
|
|
117
|
+
ratio: 6.96
|
|
118
|
+
passes: ["AA"]
|
|
119
|
+
|
|
120
|
+
- name: "Healing Calm"
|
|
121
|
+
tags: ["healthcare", "wellness", "calm", "accessible"]
|
|
122
|
+
colors:
|
|
123
|
+
primary: "#166534"
|
|
124
|
+
secondary: "#0f766e"
|
|
125
|
+
accent: "#2563eb"
|
|
126
|
+
surface: "#f0fdf4"
|
|
127
|
+
surface_alt: "#ecfdf5"
|
|
128
|
+
text_primary: "#1e293b"
|
|
129
|
+
text_secondary: "#4b5563"
|
|
130
|
+
text_inverse: "#ffffff"
|
|
131
|
+
contrast_pairs:
|
|
132
|
+
- foreground: "#1e293b"
|
|
133
|
+
background: "#f0fdf4"
|
|
134
|
+
ratio: 13.97
|
|
135
|
+
passes: ["AA", "AAA"]
|
|
136
|
+
- foreground: "#ffffff"
|
|
137
|
+
background: "#166534"
|
|
138
|
+
ratio: 7.13
|
|
139
|
+
passes: ["AA", "AAA"]
|
|
140
|
+
- foreground: "#ffffff"
|
|
141
|
+
background: "#0f766e"
|
|
142
|
+
ratio: 5.47
|
|
143
|
+
passes: ["AA"]
|
|
144
|
+
- foreground: "#4b5563"
|
|
145
|
+
background: "#f0fdf4"
|
|
146
|
+
ratio: 7.22
|
|
147
|
+
passes: ["AA", "AAA"]
|
|
148
|
+
|
|
149
|
+
- name: "Trust Shield"
|
|
150
|
+
tags: ["fintech", "banking", "insurance", "enterprise"]
|
|
151
|
+
colors:
|
|
152
|
+
primary: "#1e3a5f"
|
|
153
|
+
secondary: "#1d4ed8"
|
|
154
|
+
accent: "#059669"
|
|
155
|
+
surface: "#fafaf9"
|
|
156
|
+
surface_alt: "#f5f5f4"
|
|
157
|
+
text_primary: "#0c0a09"
|
|
158
|
+
text_secondary: "#44403c"
|
|
159
|
+
text_inverse: "#ffffff"
|
|
160
|
+
contrast_pairs:
|
|
161
|
+
- foreground: "#0c0a09"
|
|
162
|
+
background: "#fafaf9"
|
|
163
|
+
ratio: 18.92
|
|
164
|
+
passes: ["AA", "AAA"]
|
|
165
|
+
- foreground: "#ffffff"
|
|
166
|
+
background: "#1e3a5f"
|
|
167
|
+
ratio: 11.5
|
|
168
|
+
passes: ["AA", "AAA"]
|
|
169
|
+
- foreground: "#ffffff"
|
|
170
|
+
background: "#1d4ed8"
|
|
171
|
+
ratio: 6.7
|
|
172
|
+
passes: ["AA"]
|
|
173
|
+
- foreground: "#44403c"
|
|
174
|
+
background: "#fafaf9"
|
|
175
|
+
ratio: 9.84
|
|
176
|
+
passes: ["AA", "AAA"]
|
|
177
|
+
|
|
178
|
+
- name: "Energy Burst"
|
|
179
|
+
tags: ["ecommerce", "retail", "conversion", "vibrant"]
|
|
180
|
+
colors:
|
|
181
|
+
primary: "#c2410c"
|
|
182
|
+
secondary: "#4f46e5"
|
|
183
|
+
accent: "#eab308"
|
|
184
|
+
surface: "#fffbeb"
|
|
185
|
+
surface_alt: "#fef3c7"
|
|
186
|
+
text_primary: "#1c1917"
|
|
187
|
+
text_secondary: "#57534e"
|
|
188
|
+
text_inverse: "#ffffff"
|
|
189
|
+
contrast_pairs:
|
|
190
|
+
- foreground: "#1c1917"
|
|
191
|
+
background: "#fffbeb"
|
|
192
|
+
ratio: 16.86
|
|
193
|
+
passes: ["AA", "AAA"]
|
|
194
|
+
- foreground: "#ffffff"
|
|
195
|
+
background: "#c2410c"
|
|
196
|
+
ratio: 5.18
|
|
197
|
+
passes: ["AA"]
|
|
198
|
+
- foreground: "#ffffff"
|
|
199
|
+
background: "#4f46e5"
|
|
200
|
+
ratio: 6.29
|
|
201
|
+
passes: ["AA"]
|
|
202
|
+
- foreground: "#57534e"
|
|
203
|
+
background: "#fffbeb"
|
|
204
|
+
ratio: 7.36
|
|
205
|
+
passes: ["AA", "AAA"]
|
|
206
|
+
|
|
207
|
+
- name: "Clean Slate"
|
|
208
|
+
tags: ["minimal", "editorial", "typography", "content"]
|
|
209
|
+
colors:
|
|
210
|
+
primary: "#404040"
|
|
211
|
+
secondary: "#737373"
|
|
212
|
+
accent: "#171717"
|
|
213
|
+
surface: "#fafafa"
|
|
214
|
+
surface_alt: "#f5f5f5"
|
|
215
|
+
text_primary: "#171717"
|
|
216
|
+
text_secondary: "#525252"
|
|
217
|
+
text_inverse: "#ffffff"
|
|
218
|
+
contrast_pairs:
|
|
219
|
+
- foreground: "#171717"
|
|
220
|
+
background: "#fafafa"
|
|
221
|
+
ratio: 17.18
|
|
222
|
+
passes: ["AA", "AAA"]
|
|
223
|
+
- foreground: "#ffffff"
|
|
224
|
+
background: "#404040"
|
|
225
|
+
ratio: 10.37
|
|
226
|
+
passes: ["AA", "AAA"]
|
|
227
|
+
- foreground: "#525252"
|
|
228
|
+
background: "#fafafa"
|
|
229
|
+
ratio: 7.49
|
|
230
|
+
passes: ["AA", "AAA"]
|
|
231
|
+
- foreground: "#171717"
|
|
232
|
+
background: "#f5f5f5"
|
|
233
|
+
ratio: 16.44
|
|
234
|
+
passes: ["AA", "AAA"]
|