@harness-engineering/cli 1.6.2 → 1.8.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/documentation-maintainer.yaml +3 -1
- package/dist/agents/personas/performance-guardian.yaml +23 -0
- package/dist/agents/personas/planner.yaml +27 -0
- package/dist/agents/personas/verifier.yaml +30 -0
- package/dist/agents/skills/claude-code/align-documentation/SKILL.md +13 -0
- package/dist/agents/skills/claude-code/cleanup-dead-code/SKILL.md +25 -1
- package/dist/agents/skills/claude-code/cleanup-dead-code/skill.yaml +5 -2
- package/dist/agents/skills/claude-code/detect-doc-drift/SKILL.md +12 -0
- package/dist/agents/skills/claude-code/enforce-architecture/SKILL.md +67 -1
- package/dist/agents/skills/claude-code/enforce-architecture/skill.yaml +5 -2
- package/dist/agents/skills/claude-code/harness-accessibility/SKILL.md +281 -0
- package/dist/agents/skills/claude-code/harness-accessibility/skill.yaml +51 -0
- package/dist/agents/skills/claude-code/harness-autopilot/SKILL.md +119 -72
- package/dist/agents/skills/claude-code/harness-autopilot/skill.yaml +4 -2
- package/dist/agents/skills/claude-code/harness-brainstorming/SKILL.md +76 -4
- package/dist/agents/skills/claude-code/harness-brainstorming/skill.yaml +2 -0
- package/dist/agents/skills/claude-code/harness-code-review/SKILL.md +487 -234
- package/dist/agents/skills/claude-code/harness-code-review/skill.yaml +15 -2
- package/dist/agents/skills/claude-code/harness-codebase-cleanup/SKILL.md +226 -0
- package/dist/agents/skills/claude-code/harness-codebase-cleanup/skill.yaml +64 -0
- package/dist/agents/skills/claude-code/harness-dependency-health/SKILL.md +35 -6
- 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-docs-pipeline/SKILL.md +460 -0
- package/dist/agents/skills/claude-code/harness-docs-pipeline/skill.yaml +69 -0
- package/dist/agents/skills/claude-code/harness-execution/SKILL.md +73 -8
- package/dist/agents/skills/claude-code/harness-execution/skill.yaml +1 -0
- package/dist/agents/skills/claude-code/harness-hotspot-detector/SKILL.md +32 -6
- package/dist/agents/skills/claude-code/harness-hotspot-detector/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-i18n/SKILL.md +484 -0
- package/dist/agents/skills/claude-code/harness-i18n/skill.yaml +54 -0
- package/dist/agents/skills/claude-code/harness-i18n-process/SKILL.md +388 -0
- package/dist/agents/skills/claude-code/harness-i18n-process/skill.yaml +43 -0
- package/dist/agents/skills/claude-code/harness-i18n-workflow/SKILL.md +512 -0
- package/dist/agents/skills/claude-code/harness-i18n-workflow/skill.yaml +53 -0
- package/dist/agents/skills/claude-code/harness-impact-analysis/SKILL.md +51 -6
- package/dist/agents/skills/claude-code/harness-integrity/SKILL.md +35 -1
- package/dist/agents/skills/claude-code/harness-knowledge-mapper/SKILL.md +46 -5
- 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-perf/SKILL.md +37 -8
- package/dist/agents/skills/claude-code/harness-perf/skill.yaml +3 -0
- package/dist/agents/skills/claude-code/harness-perf-tdd/SKILL.md +17 -4
- package/dist/agents/skills/claude-code/harness-planning/SKILL.md +57 -3
- package/dist/agents/skills/claude-code/harness-planning/skill.yaml +2 -0
- package/dist/agents/skills/claude-code/harness-release-readiness/SKILL.md +29 -9
- package/dist/agents/skills/claude-code/harness-roadmap/SKILL.md +562 -0
- package/dist/agents/skills/claude-code/harness-roadmap/skill.yaml +43 -0
- package/dist/agents/skills/claude-code/harness-security-review/SKILL.md +36 -2
- package/dist/agents/skills/claude-code/harness-security-review/skill.yaml +8 -6
- package/dist/agents/skills/claude-code/harness-security-scan/skill.yaml +1 -1
- package/dist/agents/skills/claude-code/harness-soundness-review/SKILL.md +1267 -0
- package/dist/agents/skills/claude-code/harness-soundness-review/skill.yaml +48 -0
- package/dist/agents/skills/claude-code/harness-test-advisor/SKILL.md +35 -6
- package/dist/agents/skills/claude-code/harness-verification/SKILL.md +66 -0
- package/dist/agents/skills/claude-code/harness-verification/skill.yaml +1 -0
- package/dist/agents/skills/claude-code/harness-verify/SKILL.md +37 -0
- package/dist/agents/skills/claude-code/initialize-harness-project/SKILL.md +15 -1
- package/dist/agents/skills/claude-code/validate-context-engineering/SKILL.md +12 -0
- package/dist/agents/skills/gemini-cli/harness-accessibility/SKILL.md +281 -0
- package/dist/agents/skills/gemini-cli/harness-accessibility/skill.yaml +51 -0
- package/dist/agents/skills/gemini-cli/harness-autopilot/SKILL.md +119 -72
- package/dist/agents/skills/gemini-cli/harness-autopilot/skill.yaml +4 -2
- package/dist/agents/skills/gemini-cli/harness-codebase-cleanup/SKILL.md +226 -0
- package/dist/agents/skills/gemini-cli/harness-codebase-cleanup/skill.yaml +64 -0
- package/dist/agents/skills/gemini-cli/harness-dependency-health/SKILL.md +35 -6
- 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-docs-pipeline/SKILL.md +460 -0
- package/dist/agents/skills/gemini-cli/harness-docs-pipeline/skill.yaml +69 -0
- package/dist/agents/skills/gemini-cli/harness-hotspot-detector/SKILL.md +32 -6
- package/dist/agents/skills/gemini-cli/harness-hotspot-detector/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-i18n/SKILL.md +484 -0
- package/dist/agents/skills/gemini-cli/harness-i18n/skill.yaml +54 -0
- package/dist/agents/skills/gemini-cli/harness-i18n-process/SKILL.md +388 -0
- package/dist/agents/skills/gemini-cli/harness-i18n-process/skill.yaml +43 -0
- package/dist/agents/skills/gemini-cli/harness-i18n-workflow/SKILL.md +512 -0
- package/dist/agents/skills/gemini-cli/harness-i18n-workflow/skill.yaml +53 -0
- package/dist/agents/skills/gemini-cli/harness-impact-analysis/SKILL.md +51 -6
- package/dist/agents/skills/gemini-cli/harness-knowledge-mapper/SKILL.md +46 -5
- package/dist/agents/skills/gemini-cli/harness-knowledge-mapper/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-perf/SKILL.md +37 -8
- package/dist/agents/skills/gemini-cli/harness-perf/skill.yaml +3 -0
- package/dist/agents/skills/gemini-cli/harness-perf-tdd/SKILL.md +17 -4
- package/dist/agents/skills/gemini-cli/harness-release-readiness/SKILL.md +29 -9
- package/dist/agents/skills/gemini-cli/harness-roadmap/SKILL.md +562 -0
- package/dist/agents/skills/gemini-cli/harness-roadmap/skill.yaml +43 -0
- package/dist/agents/skills/gemini-cli/harness-security-review/skill.yaml +8 -6
- package/dist/agents/skills/gemini-cli/harness-security-scan/skill.yaml +1 -1
- package/dist/agents/skills/gemini-cli/harness-soundness-review/SKILL.md +1267 -0
- package/dist/agents/skills/gemini-cli/harness-soundness-review/skill.yaml +48 -0
- package/dist/agents/skills/gemini-cli/harness-test-advisor/SKILL.md +35 -6
- 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/agents/skills/shared/i18n-knowledge/accessibility/intersection.yaml +142 -0
- package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/encoding.yaml +67 -0
- package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/formatting.yaml +106 -0
- package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/layout.yaml +80 -0
- package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/pluralization.yaml +80 -0
- package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/string-handling.yaml +106 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/android-resources.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/apple-strings.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/backend-patterns.yaml +50 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/flutter-intl.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/i18next.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/react-intl.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/frameworks/vue-i18n.yaml +47 -0
- package/dist/agents/skills/shared/i18n-knowledge/industries/ecommerce.yaml +66 -0
- package/dist/agents/skills/shared/i18n-knowledge/industries/fintech.yaml +66 -0
- package/dist/agents/skills/shared/i18n-knowledge/industries/gaming.yaml +69 -0
- package/dist/agents/skills/shared/i18n-knowledge/industries/healthcare.yaml +66 -0
- package/dist/agents/skills/shared/i18n-knowledge/industries/legal.yaml +66 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/ar.yaml +41 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/de.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/en.yaml +32 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/es.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/fi.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/fr.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/he.yaml +41 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/hi.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/it.yaml +32 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/ja.yaml +38 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/ko.yaml +38 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/nl.yaml +32 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/pl.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/pt.yaml +32 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/ru.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/sv.yaml +32 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/th.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/tr.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/zh-Hans.yaml +38 -0
- package/dist/agents/skills/shared/i18n-knowledge/locales/zh-Hant.yaml +35 -0
- package/dist/agents/skills/shared/i18n-knowledge/mcp-interop/i18next-mcp.yaml +56 -0
- package/dist/agents/skills/shared/i18n-knowledge/mcp-interop/lingo-dev.yaml +56 -0
- package/dist/agents/skills/shared/i18n-knowledge/mcp-interop/lokalise.yaml +60 -0
- package/dist/agents/skills/shared/i18n-knowledge/mcp-interop/tolgee.yaml +60 -0
- package/dist/agents/skills/shared/i18n-knowledge/testing/locale-testing.yaml +107 -0
- package/dist/agents/skills/shared/i18n-knowledge/testing/pseudo-localization.yaml +86 -0
- package/dist/bin/harness.js +64 -4
- package/dist/{chunk-UDWGSL3T.js → chunk-3JWCBVUZ.js} +3 -3
- package/dist/{chunk-IUFFBBYV.js → chunk-LNI4T7R6.js} +179 -61
- package/dist/{chunk-USEYPS7F.js → chunk-SJECMKSS.js} +2250 -40
- package/dist/{dist-4MYPT3OE.js → dist-BDO5GFEM.js} +295 -14
- package/dist/{dist-RBZXXJHG.js → dist-NT3GXHQZ.js} +95 -1
- package/dist/index.d.ts +266 -7
- package/dist/index.js +7 -3
- package/dist/validate-cross-check-2OPGCGGU.js +7 -0
- package/package.json +7 -7
- package/dist/validate-cross-check-CPEPNLOD.js +0 -7
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "E-Commerce"
|
|
2
|
+
description: "Conversion-focused design with bold CTAs, clear product hierarchy, and friction-minimized purchase flows"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Conversion-optimized layouts with clear visual hierarchy driving users toward purchase decisions"
|
|
6
|
+
secondary: "Editorial product storytelling with immersive imagery and aspirational lifestyle positioning"
|
|
7
|
+
avoid: ["Overwhelming product grids without filtering or visual breathing room", "Hidden or ambiguous pricing that erodes buyer confidence", "Aggressive pop-ups that interrupt the shopping flow", "Cluttered product pages with competing calls-to-action"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Orange 600"
|
|
12
|
+
hex: "#ea580c"
|
|
13
|
+
usage: "Primary CTAs (Add to Cart, Buy Now), urgency indicators"
|
|
14
|
+
- name: "Orange 700"
|
|
15
|
+
hex: "#c2410c"
|
|
16
|
+
usage: "Hover states on primary actions, active button states"
|
|
17
|
+
- name: "Orange 50"
|
|
18
|
+
hex: "#fff7ed"
|
|
19
|
+
usage: "Sale banners, promotional section backgrounds"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Rose 500"
|
|
22
|
+
hex: "#f43f5e"
|
|
23
|
+
usage: "Sale badges, discount indicators, wishlist hearts"
|
|
24
|
+
- name: "Amber 400"
|
|
25
|
+
hex: "#fbbf24"
|
|
26
|
+
usage: "Star ratings, featured product highlights, best-seller badges"
|
|
27
|
+
- name: "Emerald 500"
|
|
28
|
+
hex: "#10b981"
|
|
29
|
+
usage: "In-stock indicators, free shipping badges, trust seals"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Zinc 900"
|
|
32
|
+
hex: "#18181b"
|
|
33
|
+
usage: "Product titles, prices, primary text"
|
|
34
|
+
- name: "Zinc 500"
|
|
35
|
+
hex: "#71717a"
|
|
36
|
+
usage: "Product descriptions, secondary information, metadata"
|
|
37
|
+
- name: "Zinc 100"
|
|
38
|
+
hex: "#f4f4f5"
|
|
39
|
+
usage: "Category backgrounds, filter panels, page surfaces"
|
|
40
|
+
- name: "White"
|
|
41
|
+
hex: "#ffffff"
|
|
42
|
+
usage: "Product cards, checkout forms, content backgrounds"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#16a34a"
|
|
45
|
+
warning: "#eab308"
|
|
46
|
+
error: "#dc2626"
|
|
47
|
+
info: "#0284c7"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["DM Sans", "Plus Jakarta Sans"]
|
|
52
|
+
weights: [600, 700, 800]
|
|
53
|
+
characteristics: "Bold geometric sans-serifs that command attention for hero sections, sale headers, and category titles. Strong at large sizes."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Inter", "DM Sans", "system-ui"]
|
|
56
|
+
weights: [400, 500]
|
|
57
|
+
characteristics: "Highly legible at small sizes for product specs, reviews, and policy text. Clear distinction between regular and medium weights for scannability."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["JetBrains Mono", "SF Mono"]
|
|
60
|
+
usage: "Order numbers, tracking codes, promo codes, SKU references"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Hiding the total price until checkout"
|
|
64
|
+
reason: "Price surprises at checkout are the #1 cause of cart abandonment (48% of users cite unexpected costs)"
|
|
65
|
+
instead: "Show running total including estimated tax and shipping on the cart page; surface free-shipping thresholds early"
|
|
66
|
+
- pattern: "Requiring account creation before purchase"
|
|
67
|
+
reason: "Forced registration causes 24% of shoppers to abandon; it adds friction at the highest-intent moment"
|
|
68
|
+
instead: "Offer guest checkout as the default path; invite account creation after purchase with order-tracking incentive"
|
|
69
|
+
- pattern: "Product images that don't zoom or show only one angle"
|
|
70
|
+
reason: "Users cannot evaluate products they can't inspect; lack of imagery increases return rates"
|
|
71
|
+
instead: "Provide 4+ images per product with zoom, multiple angles, lifestyle context, and size reference"
|
|
72
|
+
- pattern: "Infinite scroll on product listing pages without pagination controls"
|
|
73
|
+
reason: "Users lose their place, cannot bookmark results, and experience scroll fatigue; footer content becomes unreachable"
|
|
74
|
+
instead: "Use paginated results with 'Load more' option; preserve scroll position on back navigation"
|
|
75
|
+
- pattern: "Using carousel sliders for critical product information"
|
|
76
|
+
reason: "Users interact with fewer than 1% of carousel slides past the first; important products get buried"
|
|
77
|
+
instead: "Use static grids or curated featured sections; if using carousels, show partial next-slide indicators"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["shopify.com/themes", "everlane.com", "apple.com/shop", "allbirds.com", "glossier.com"]
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
name: "Emerging Tech"
|
|
2
|
+
description: "Innovative, forward-looking design with dark themes, accent neons, and geometric precision for cutting-edge technology products"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Dark-first interfaces with precise geometric layouts, neon accents, and futuristic visual language"
|
|
6
|
+
secondary: "Data-rich dashboards with real-time visualization, 3D elements, and immersive product experiences"
|
|
7
|
+
avoid: ["Retro-futurism cliches (chrome text, star fields, 80s synthwave aesthetics)", "Inaccessible contrast ratios from neon-on-dark combinations", "Overuse of 3D elements that slow performance and add no information", "Gratuitous particle effects and WebGL demos that distract from product value"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Deep Space"
|
|
12
|
+
hex: "#0a0a0f"
|
|
13
|
+
usage: "Primary background, immersive dark surfaces"
|
|
14
|
+
- name: "Dark Surface"
|
|
15
|
+
hex: "#141420"
|
|
16
|
+
usage: "Card backgrounds, elevated surfaces, modal backgrounds"
|
|
17
|
+
- name: "Midnight Blue"
|
|
18
|
+
hex: "#1a1a2e"
|
|
19
|
+
usage: "Secondary surfaces, sidebar backgrounds, section dividers"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Electric Cyan"
|
|
22
|
+
hex: "#00d4ff"
|
|
23
|
+
usage: "Primary interactive elements, data visualization highlights, key metrics"
|
|
24
|
+
- name: "Neon Green"
|
|
25
|
+
hex: "#00ff88"
|
|
26
|
+
usage: "Success states, active indicators, real-time status"
|
|
27
|
+
- name: "Electric Purple"
|
|
28
|
+
hex: "#a855f7"
|
|
29
|
+
usage: "Premium features, AI/ML indicators, secondary accent"
|
|
30
|
+
- name: "Hot Pink"
|
|
31
|
+
hex: "#ec4899"
|
|
32
|
+
usage: "Alerts, critical notifications, tertiary accent"
|
|
33
|
+
neutral:
|
|
34
|
+
- name: "Light Gray"
|
|
35
|
+
hex: "#e2e8f0"
|
|
36
|
+
usage: "Primary text on dark backgrounds"
|
|
37
|
+
- name: "Cool Gray"
|
|
38
|
+
hex: "#94a3b8"
|
|
39
|
+
usage: "Secondary text, labels, descriptions"
|
|
40
|
+
- name: "Dark Gray"
|
|
41
|
+
hex: "#334155"
|
|
42
|
+
usage: "Borders, dividers, inactive states"
|
|
43
|
+
- name: "Near Black"
|
|
44
|
+
hex: "#0f172a"
|
|
45
|
+
usage: "Deepest surface level, page background in ultra-dark mode"
|
|
46
|
+
semantic:
|
|
47
|
+
success: "#00ff88"
|
|
48
|
+
warning: "#fbbf24"
|
|
49
|
+
error: "#ef4444"
|
|
50
|
+
info: "#00d4ff"
|
|
51
|
+
|
|
52
|
+
typography:
|
|
53
|
+
display:
|
|
54
|
+
families: ["Space Grotesk", "Outfit"]
|
|
55
|
+
weights: [500, 700]
|
|
56
|
+
characteristics: "Geometric sans-serifs with distinctive character at large sizes. Slightly technical feel without being cold -- conveys precision and innovation."
|
|
57
|
+
body:
|
|
58
|
+
families: ["Inter", "Space Grotesk", "system-ui"]
|
|
59
|
+
weights: [400, 500]
|
|
60
|
+
characteristics: "Clean and highly legible on dark backgrounds. Slightly increased letter-spacing (0.01em) for improved readability on dark surfaces."
|
|
61
|
+
mono:
|
|
62
|
+
families: ["JetBrains Mono", "Fira Code", "Geist Mono"]
|
|
63
|
+
usage: "Terminal output, API responses, blockchain addresses, configuration code, real-time data streams"
|
|
64
|
+
|
|
65
|
+
anti_patterns:
|
|
66
|
+
- pattern: "Neon text on dark background without sufficient contrast ratio"
|
|
67
|
+
reason: "Many neon colors (cyan, green, pink) on near-black fail WCAG AA (4.5:1); vibrant does not mean readable"
|
|
68
|
+
instead: "Test all neon accent text against backgrounds; use brighter tints for text (e.g., lighten cyan to #67e8f9 for readability) or increase font size"
|
|
69
|
+
- pattern: "Using 3D renders and WebGL for purely decorative purposes"
|
|
70
|
+
reason: "Heavy 3D adds seconds to load time, drains mobile batteries, and often communicates nothing about the product"
|
|
71
|
+
instead: "Use 3D only when it serves understanding (product visualization, spatial data); offer 2D fallbacks for performance"
|
|
72
|
+
- pattern: "Retro-futurism aesthetics (chrome text, grid floors, star fields)"
|
|
73
|
+
reason: "Dated sci-fi visuals signal that the team's vision of the future is stuck in the past; it undermines credibility for genuinely novel technology"
|
|
74
|
+
instead: "Reference current cutting-edge design (spatial computing UI, ambient interfaces, adaptive layouts) rather than pop-culture futurism"
|
|
75
|
+
- pattern: "Auto-playing demos that consume resources without user initiation"
|
|
76
|
+
reason: "Real-time visualizations and simulations consume CPU/GPU; auto-playing them causes fan noise, battery drain, and poor first impressions"
|
|
77
|
+
instead: "Show a compelling static frame with a clear 'Run demo' CTA; respect the user's device and battery"
|
|
78
|
+
- pattern: "Dark mode only with no light mode option"
|
|
79
|
+
reason: "Some users have visual conditions that make dark interfaces harder to read; accessibility requires options"
|
|
80
|
+
instead: "Offer both dark and light modes; dark can be default but light must be available and well-designed"
|
|
81
|
+
|
|
82
|
+
examples:
|
|
83
|
+
reference_sites: ["openai.com", "vercel.com", "linear.app", "github.com/features/copilot", "replit.com"]
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
name: "Fintech"
|
|
2
|
+
description: "Trust-driven, precision-focused design conveying security, reliability, and financial expertise"
|
|
3
|
+
|
|
4
|
+
styles:
|
|
5
|
+
primary: "Conservative elegance with precise data presentation and trust-building visual cues"
|
|
6
|
+
secondary: "Institutional authority balanced with modern approachability for consumer-facing products"
|
|
7
|
+
avoid: ["Playful or whimsical typography that undermines financial credibility", "Bright gradients or neon accents that feel unserious", "Overly complex data visualizations without progressive disclosure", "Gamification patterns that trivialize financial decisions"]
|
|
8
|
+
|
|
9
|
+
palette:
|
|
10
|
+
primary:
|
|
11
|
+
- name: "Navy 800"
|
|
12
|
+
hex: "#1e3a5f"
|
|
13
|
+
usage: "Primary brand, navigation, headers conveying institutional trust"
|
|
14
|
+
- name: "Navy 900"
|
|
15
|
+
hex: "#0f2440"
|
|
16
|
+
usage: "Dark mode surfaces, footer backgrounds, high-emphasis text"
|
|
17
|
+
- name: "Navy 100"
|
|
18
|
+
hex: "#dbeafe"
|
|
19
|
+
usage: "Selected states, info banners, subtle highlights"
|
|
20
|
+
accent:
|
|
21
|
+
- name: "Emerald 600"
|
|
22
|
+
hex: "#059669"
|
|
23
|
+
usage: "Positive financial indicators, gains, completed transactions"
|
|
24
|
+
- name: "Teal 500"
|
|
25
|
+
hex: "#14b8a6"
|
|
26
|
+
usage: "Secondary actions, chart accents, interactive elements"
|
|
27
|
+
- name: "Gold 500"
|
|
28
|
+
hex: "#d4a853"
|
|
29
|
+
usage: "Premium tier indicators, high-value account badges"
|
|
30
|
+
neutral:
|
|
31
|
+
- name: "Gray 900"
|
|
32
|
+
hex: "#111827"
|
|
33
|
+
usage: "Primary text, financial figures, account balances"
|
|
34
|
+
- name: "Gray 600"
|
|
35
|
+
hex: "#4b5563"
|
|
36
|
+
usage: "Secondary text, transaction descriptions, timestamps"
|
|
37
|
+
- name: "Gray 100"
|
|
38
|
+
hex: "#f3f4f6"
|
|
39
|
+
usage: "Page backgrounds, table alternating rows"
|
|
40
|
+
- name: "White"
|
|
41
|
+
hex: "#ffffff"
|
|
42
|
+
usage: "Card surfaces, input fields, modal backgrounds"
|
|
43
|
+
semantic:
|
|
44
|
+
success: "#059669"
|
|
45
|
+
warning: "#d97706"
|
|
46
|
+
error: "#dc2626"
|
|
47
|
+
info: "#2563eb"
|
|
48
|
+
|
|
49
|
+
typography:
|
|
50
|
+
display:
|
|
51
|
+
families: ["Inter", "SF Pro Display"]
|
|
52
|
+
weights: [500, 600, 700]
|
|
53
|
+
characteristics: "Clean sans-serifs with excellent tabular figures. Numeral clarity is paramount -- every digit must be unambiguous at any size."
|
|
54
|
+
body:
|
|
55
|
+
families: ["Inter", "SF Pro Text", "system-ui"]
|
|
56
|
+
weights: [400, 500]
|
|
57
|
+
characteristics: "High legibility at small sizes for transaction lists and account details. Tabular lining figures for aligned number columns."
|
|
58
|
+
mono:
|
|
59
|
+
families: ["SF Mono", "JetBrains Mono", "Fira Code"]
|
|
60
|
+
usage: "Account numbers, routing numbers, transaction IDs, API references, and any numerical data requiring exact alignment"
|
|
61
|
+
|
|
62
|
+
anti_patterns:
|
|
63
|
+
- pattern: "Displaying financial amounts without proper locale formatting"
|
|
64
|
+
reason: "Misformatted currency (e.g., missing commas, wrong decimal separator) erodes trust and can cause costly user errors"
|
|
65
|
+
instead: "Use Intl.NumberFormat with the user's locale and currency; always show currency symbol and appropriate decimal places"
|
|
66
|
+
- pattern: "Using red and green as the only differentiator for gains and losses"
|
|
67
|
+
reason: "8% of men and 0.5% of women have red-green color blindness; financial data must be accessible to all users"
|
|
68
|
+
instead: "Pair color with icons (up/down arrows), text labels (+/-), or positional cues; never rely on color alone"
|
|
69
|
+
- pattern: "Auto-refreshing account balances without user consent"
|
|
70
|
+
reason: "Unexpected balance changes cause anxiety; users viewing their balance are in a sensitive emotional state"
|
|
71
|
+
instead: "Show a 'Balance updated' indicator with timestamp; let users pull-to-refresh or tap to update"
|
|
72
|
+
- pattern: "Placing transfer/send buttons where they can be accidentally tapped"
|
|
73
|
+
reason: "Accidental financial transactions create support burden and erode trust; money movement must be intentional"
|
|
74
|
+
instead: "Require confirmation for all financial actions; use adequate spacing and distinct visual treatment for destructive actions"
|
|
75
|
+
- pattern: "Hiding fees or exchange rates behind expandable sections"
|
|
76
|
+
reason: "Perceived fee hiding destroys trust and may violate financial transparency regulations"
|
|
77
|
+
instead: "Show total cost including all fees upfront; use clear breakdowns before any confirmation step"
|
|
78
|
+
|
|
79
|
+
examples:
|
|
80
|
+
reference_sites: ["mercury.com", "wise.com", "stripe.com", "robinhood.com", "brex.com"]
|
|
@@ -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"]
|