stylemcp 0.1.0

package/packs/saas/tokens.json

@@ -0,0 +1,226 @@
+{
+  "version": "1.0",
+  "name": "SaaS Design Tokens",
+  "description": "A neutral, professional design token set for B2B SaaS products",
+
+  "colors": {
+    "primary": {
+      "50": { "value": "#eff6ff", "description": "Lightest primary, backgrounds" },
+      "100": { "value": "#dbeafe", "description": "Light primary, hover states" },
+      "200": { "value": "#bfdbfe", "description": "Light primary" },
+      "300": { "value": "#93c5fd", "description": "Medium-light primary" },
+      "400": { "value": "#60a5fa", "description": "Medium primary" },
+      "500": { "value": "#3b82f6", "description": "Base primary, buttons" },
+      "600": { "value": "#2563eb", "description": "Dark primary, pressed states" },
+      "700": { "value": "#1d4ed8", "description": "Darker primary" },
+      "800": { "value": "#1e40af", "description": "Very dark primary" },
+      "900": { "value": "#1e3a8a", "description": "Darkest primary" }
+    },
+    "neutral": {
+      "50": { "value": "#f9fafb", "description": "Page background" },
+      "100": { "value": "#f3f4f6", "description": "Card background, subtle" },
+      "200": { "value": "#e5e7eb", "description": "Borders, dividers" },
+      "300": { "value": "#d1d5db", "description": "Disabled state" },
+      "400": { "value": "#9ca3af", "description": "Placeholder text" },
+      "500": { "value": "#6b7280", "description": "Secondary text" },
+      "600": { "value": "#4b5563", "description": "Body text" },
+      "700": { "value": "#374151", "description": "Dark text" },
+      "800": { "value": "#1f2937", "description": "Headings" },
+      "900": { "value": "#111827", "description": "Darkest text" }
+    },
+    "semantic": {
+      "success": {
+        "light": { "value": "#d1fae5", "description": "Success background" },
+        "default": { "value": "#10b981", "description": "Success primary" },
+        "dark": { "value": "#047857", "description": "Success text on light" }
+      },
+      "warning": {
+        "light": { "value": "#fef3c7", "description": "Warning background" },
+        "default": { "value": "#f59e0b", "description": "Warning primary" },
+        "dark": { "value": "#b45309", "description": "Warning text on light" }
+      },
+      "error": {
+        "light": { "value": "#fee2e2", "description": "Error background" },
+        "default": { "value": "#ef4444", "description": "Error primary" },
+        "dark": { "value": "#b91c1c", "description": "Error text on light" }
+      },
+      "info": {
+        "light": { "value": "#dbeafe", "description": "Info background" },
+        "default": { "value": "#3b82f6", "description": "Info primary" },
+        "dark": { "value": "#1d4ed8", "description": "Info text on light" }
+      }
+    },
+    "background": {
+      "primary": { "value": "#ffffff", "description": "Main background" },
+      "secondary": { "value": "#f9fafb", "description": "Secondary/subtle background" },
+      "tertiary": { "value": "#f3f4f6", "description": "Card background" }
+    },
+    "text": {
+      "primary": { "value": "#111827", "description": "Main text, headings" },
+      "secondary": { "value": "#6b7280", "description": "Secondary text, captions" },
+      "tertiary": { "value": "#9ca3af", "description": "Placeholder, disabled" },
+      "inverse": { "value": "#ffffff", "description": "Text on dark backgrounds" }
+    }
+  },
+
+  "typography": {
+    "fontFamilies": {
+      "sans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      "mono": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace"
+    },
+    "fontWeights": {
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "fontSizes": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem"
+    },
+    "lineHeights": {
+      "tight": 1.25,
+      "snug": 1.375,
+      "normal": 1.5,
+      "relaxed": 1.625
+    },
+    "styles": {
+      "h1": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "2.25rem",
+        "fontWeight": 700,
+        "lineHeight": 1.25,
+        "letterSpacing": "-0.025em"
+      },
+      "h2": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "1.875rem",
+        "fontWeight": 600,
+        "lineHeight": 1.25,
+        "letterSpacing": "-0.025em"
+      },
+      "h3": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "1.5rem",
+        "fontWeight": 600,
+        "lineHeight": 1.375
+      },
+      "h4": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "1.25rem",
+        "fontWeight": 600,
+        "lineHeight": 1.375
+      },
+      "body": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "1rem",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "bodySmall": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "caption": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "0.75rem",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "label": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": 500,
+        "lineHeight": 1.25
+      },
+      "button": {
+        "fontFamily": "Inter, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": 500,
+        "lineHeight": 1.25
+      },
+      "code": {
+        "fontFamily": "JetBrains Mono, monospace",
+        "fontSize": "0.875rem",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      }
+    }
+  },
+
+  "spacing": {
+    "0": { "value": "0", "description": "No spacing" },
+    "1": { "value": "0.25rem", "description": "4px" },
+    "2": { "value": "0.5rem", "description": "8px" },
+    "3": { "value": "0.75rem", "description": "12px" },
+    "4": { "value": "1rem", "description": "16px - base unit" },
+    "5": { "value": "1.25rem", "description": "20px" },
+    "6": { "value": "1.5rem", "description": "24px" },
+    "8": { "value": "2rem", "description": "32px" },
+    "10": { "value": "2.5rem", "description": "40px" },
+    "12": { "value": "3rem", "description": "48px" },
+    "16": { "value": "4rem", "description": "64px" },
+    "20": { "value": "5rem", "description": "80px" },
+    "24": { "value": "6rem", "description": "96px" }
+  },
+
+  "borderRadius": {
+    "none": { "value": "0", "description": "No radius" },
+    "sm": { "value": "0.125rem", "description": "2px - subtle" },
+    "default": { "value": "0.375rem", "description": "6px - default for buttons, inputs" },
+    "md": { "value": "0.5rem", "description": "8px - cards" },
+    "lg": { "value": "0.75rem", "description": "12px - modals" },
+    "xl": { "value": "1rem", "description": "16px - large cards" },
+    "full": { "value": "9999px", "description": "Fully rounded (pills, avatars)" }
+  },
+
+  "shadows": {
+    "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "description": "Subtle shadow" },
+    "default": { "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "description": "Default shadow" },
+    "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "description": "Medium shadow" },
+    "lg": { "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "description": "Large shadow" },
+    "xl": { "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", "description": "Extra large shadow" }
+  },
+
+  "breakpoints": {
+    "sm": { "value": "640px", "description": "Small devices" },
+    "md": { "value": "768px", "description": "Medium devices (tablets)" },
+    "lg": { "value": "1024px", "description": "Large devices (laptops)" },
+    "xl": { "value": "1280px", "description": "Extra large devices" },
+    "2xl": { "value": "1536px", "description": "2XL devices" }
+  },
+
+  "zIndex": {
+    "dropdown": 1000,
+    "sticky": 1020,
+    "fixed": 1030,
+    "modalBackdrop": 1040,
+    "modal": 1050,
+    "popover": 1060,
+    "tooltip": 1070,
+    "toast": 1080
+  },
+
+  "transitions": {
+    "duration": {
+      "fast": "75ms",
+      "normal": "150ms",
+      "slow": "300ms",
+      "slower": "500ms"
+    },
+    "easing": {
+      "linear": "linear",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }
+}

package/packs/saas/voice.yaml

@@ -0,0 +1,232 @@
+version: "1.0"
+name: "SaaS Professional"
+description: "Clear, confident, and helpful. We're experts who make complex things simple."
+
+tone:
+  summary: "Professional but approachable. Confident but not arrogant. Helpful without being patronizing."
+  attributes:
+    - name: professional
+      weight: 0.8
+      description: "Expert, competent, trustworthy"
+    - name: clear
+      weight: 0.9
+      description: "Simple, direct, jargon-free unless necessary"
+    - name: helpful
+      weight: 0.7
+      description: "Solution-oriented, empathetic, supportive"
+    - name: confident
+      weight: 0.6
+      description: "Assured but not boastful"
+    - name: friendly
+      weight: 0.5
+      description: "Warm but not overly casual"
+
+vocabulary:
+  rules:
+    - preferred: "use"
+      avoid: ["utilize", "leverage", "employ"]
+      context: "General usage"
+    - preferred: "help"
+      avoid: ["assist", "aid", "facilitate"]
+      context: "When offering support"
+    - preferred: "start"
+      avoid: ["commence", "initiate", "begin"]
+      context: "Starting actions"
+    - preferred: "end"
+      avoid: ["terminate", "conclude", "finalize"]
+      context: "Ending actions"
+    - preferred: "get"
+      avoid: ["obtain", "acquire", "retrieve"]
+      context: "Receiving or accessing"
+    - preferred: "show"
+      avoid: ["display", "exhibit", "demonstrate"]
+      context: "Revealing information"
+    - preferred: "need"
+      avoid: ["require", "necessitate"]
+      context: "Requirements"
+    - preferred: "about"
+      avoid: ["approximately", "roughly", "circa"]
+      context: "Approximations"
+    - preferred: "buy"
+      avoid: ["purchase", "procure"]
+      context: "Transactions"
+    - preferred: "try"
+      avoid: ["attempt", "endeavor"]
+      context: "Attempting actions"
+    - preferred: "change"
+      avoid: ["modify", "alter", "adjust"]
+      context: "Making changes"
+    - preferred: "set up"
+      avoid: ["configure", "establish"]
+      context: "Initial setup"
+    - preferred: "fix"
+      avoid: ["rectify", "resolve", "remediate"]
+      context: "Correcting problems"
+
+  forbidden:
+    - "synergy"
+    - "synergize"
+    - "paradigm"
+    - "paradigm shift"
+    - "disrupt"
+    - "disruptive"
+    - "revolutionary"
+    - "game-changing"
+    - "best-in-class"
+    - "world-class"
+    - "cutting-edge"
+    - "bleeding-edge"
+    - "state-of-the-art"
+    - "next-generation"
+    - "robust"
+    - "scalable solution"
+    - "holistic"
+    - "move the needle"
+    - "circle back"
+    - "touch base"
+    - "low-hanging fruit"
+    - "boil the ocean"
+    - "at the end of the day"
+    - "going forward"
+    - "it is what it is"
+    - "no-brainer"
+    - "pain point"
+    - "value-add"
+    - "value proposition"
+    - "bandwidth"
+    - "leverage" # as a verb
+    - "utilize"
+    - "incentivize"
+    - "operationalize"
+    - "democratize"
+    - "10x"
+    - "100x"
+
+  encouraged:
+    - "you"
+    - "your"
+    - "we"
+    - "our"
+    - "team"
+
+doNot:
+  - pattern: "\\bplease\\b.*\\bplease\\b"
+    isRegex: true
+    reason: "Double 'please' sounds desperate"
+    severity: warning
+    suggestion: "Use 'please' once or not at all"
+
+  - pattern: "^sorry"
+    isRegex: true
+    reason: "Don't start with apology unless actually apologizing for a mistake"
+    severity: info
+    suggestion: "Lead with solution or action"
+
+  - pattern: "\\b(obviously|clearly|simply|just|easily)\\b"
+    isRegex: true
+    reason: "These words can make users feel stupid if something isn't obvious to them"
+    severity: warning
+    suggestion: "Remove the word entirely"
+
+  - pattern: "\\bwe're sorry for any inconvenience\\b"
+    isRegex: true
+    reason: "Corporate non-apology"
+    severity: error
+    suggestion: "Be specific about what went wrong and what you're doing about it"
+
+  - pattern: "\\bclick here\\b"
+    isRegex: true
+    reason: "Poor accessibility and unclear destination"
+    severity: error
+    suggestion: "Describe the destination: 'View your dashboard' or 'Read the documentation'"
+
+  - pattern: "\\b(please do not hesitate|don't hesitate|feel free)\\b"
+    isRegex: true
+    reason: "Implies hesitation is expected"
+    severity: info
+    suggestion: "Just tell them what to do"
+
+  - pattern: "!"
+    isRegex: false
+    reason: "Exclamation marks feel unprofessional in most SaaS contexts"
+    severity: info
+    suggestion: "Use periods. Let the content convey enthusiasm."
+
+  - pattern: "\\b(very|really|extremely|incredibly|absolutely)\\b"
+    isRegex: true
+    reason: "Intensifiers weaken writing"
+    severity: info
+    suggestion: "Use stronger verbs or nouns instead"
+
+  - pattern: "\\bours? is the (best|only|first|most)\\b"
+    isRegex: true
+    reason: "Unsubstantiated superlatives hurt credibility"
+    severity: warning
+    suggestion: "Be specific about what makes you different"
+
+  - pattern: "\\bfyi\\b"
+    isRegex: true
+    reason: "Informal abbreviation"
+    severity: info
+    suggestion: "Spell it out or rephrase"
+
+  - pattern: "\\betc\\.?\\b"
+    isRegex: true
+    reason: "Lazy writing that doesn't help the reader"
+    severity: info
+    suggestion: "Be specific or use 'and more'"
+
+  - pattern: "\\bASAP\\b"
+    isRegex: true
+    reason: "Vague and pressure-inducing"
+    severity: warning
+    suggestion: "Give a specific timeframe"
+
+examples:
+  - bad: "We're excited to announce our revolutionary new feature!"
+    good: "Introducing batch exports. Now you can export up to 1,000 records at once."
+    explanation: "Specifics beat hyperbole"
+
+  - bad: "Please don't hesitate to reach out if you have any questions."
+    good: "Questions? Email support@example.com."
+    explanation: "Direct and actionable"
+
+  - bad: "We're sorry for any inconvenience this may have caused."
+    good: "Your export failed because the file was too large. We're increasing the limit to 500MB this week."
+    explanation: "Acknowledge the specific issue and state the fix"
+
+  - bad: "Click here to learn more."
+    good: "Read the migration guide."
+    explanation: "Accessible and descriptive"
+
+  - bad: "We utilize cutting-edge technology to leverage synergies."
+    good: "We built our own search engine so your queries return in under 100ms."
+    explanation: "Concrete claims beat jargon"
+
+  - bad: "Simply configure your settings and you're good to go!"
+    good: "Set up your preferences in Settings > Notifications."
+    explanation: "Specific guidance, no 'simply'"
+
+  - bad: "Due to unforeseen circumstances, your request could not be processed at this time."
+    good: "We couldn't process your request. Our payment provider is down. We'll retry automatically in 10 minutes."
+    explanation: "Tell them what happened and what's next"
+
+  - bad: "Thank you for your patience."
+    good: "This is taking longer than usual. Here's why: [specific reason]."
+    explanation: "Don't thank people for something they didn't choose"
+
+  - bad: "Invalid input."
+    good: "Email addresses need an @ symbol. Example: name@company.com"
+    explanation: "Show what's wrong and how to fix it"
+
+  - bad: "Are you sure you want to delete this? This action cannot be undone."
+    good: "Delete this project? You'll lose all 47 tasks and 12 files. This can't be undone."
+    explanation: "Show what they'll lose, not just that something will happen"
+
+constraints:
+  maxSentenceLength: 25
+  maxParagraphLength: 4
+  readingLevel: moderate
+  personPov: first-plural
+  contractions: allowed
+  oxfordComma: true