sonance-brand-mcp 1.0.0 → 1.1.0

package/dist/assets/BRAND_GUIDELINES.md

@@ -90,22 +90,101 @@ font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-s
 
 ### Brand Pillars
 
-1. **Sound Quality & Heritage** - "40+ years of sonic innovation"
-2. **Designed to Disappear** - Invisible integration is core
-3. **Partnership Excellence** - We succeed when our partners succeed
-4. **Premium Experience** - Every touchpoint feels high-end
+1. **Designed to Disappear** - Technology should disappear into architecture. Our hidden audio solutions deliver an even, balanced sound experience that blends into any style, installation, or budget.
+2. **Authentic Partnership** - From our customer-centric culture to our Studio Seminars, we aim to define what authentic partnership looks like. Our team is your team.
+3. **A Heritage of Innovation** - The history of our independently-owned companies is rooted in deep knowledge of our customers and construction—pushing the boundaries of technology and design.
+4. **Making the World a Better Place** - We believe in using our business and resources as a force for good—focusing on Environmental Impact, Social Responsibility, and Good Governance.
 
-### Logo Usage
+---
+
+## Logo Guidelines
+
+### Hero Logo
+
+The Sonance logo is clean, lean and all caps. The 2-color version, with "The Beam" (the cyan accent on the "A") should be used for any and all brand communications. One color version is available for unique applications.
+
+**Logo Variants**:
+| Variant | Use Case | File Path |
+|---------|----------|-----------|
+| 2 Color (Light BG) | Light backgrounds | `/logos/sonance/Sonance_Logo_2C_Dark_RGB.png` |
+| 2 Color (Dark BG) | Dark backgrounds | `/logos/sonance/Sonance_Logo_2C_Light_RGB.png` |
+
+### The Beam
+
+The cyan "A" in Sonance is called "The Beam". It symbolizes sound coming from above and surrounding you with even, balanced comfortability. But it also represents our team coming together with our many partners, and our complete offering of products and heritage of innovation being unified into a single company message.
+
+**The Beam Do's**:
+- Use selectively for the most impact
+- Be cautious of the proportion and relationship to the overall brand identity
+- Ensure the complete brand name can be easily put in context with the mark
+- The Beam should appear in approved Sonance colors
+- The Beam should always point upwards or forward
+
+**The Beam Don'ts**:
+- The Beam should rarely appear by itself
+- The wordmark or other significant visual indicators of the company should always be nearby
+- Unconsidered or overuse of the beam may dilute the brand message
+- Do not rotate The Beam to point downward (exception: select UI or signage)
+- Do not use unapproved colors for The Beam
+
+### Clear Space
+
+Clear space is the area around the logo that is free from any other graphic element. The minimum clear space is equal to the cap height of the logo, a distance that should be maintained to the left, right, top, and bottom.
+
+The clear space ensures the logo remains legible and impactful in all applications. Never crowd the logo with other elements. The same clear space rules apply to all Sonance logo lockups, including the tagline.
+
+### Logo Alignment
+
+**Center Point**: The mark is not centered on the peak of The Beam. When centering type or other design elements above or below the Sonance logo, use the horizontal centerpoint of the total width of the Sonance logo—not The Beam. This rule applies to all Sonance logo lockups, including trademarked versions.
+
+### Minimum Size
+
+| Application | Minimum Width |
+|-------------|---------------|
+| Digital (web, apps) | 120px |
+| Print (business cards, signage) | 1 inch |
+
+### Logo Usage Do's
+- Use 2 color logo on light backgrounds
+- Use reverse logo on Sonance blue
+- Use reverse logo when color isn't an option
+- Use negative space for placement and always observe clear space rules
+- Maintain minimum clear space equal to the cap height of the logo
+- Keep minimum width of 120px for digital applications
+
+### Logo Usage Don'ts
+- Never colorize our logo
+- Never rotate our logo (unless you've received permission)
+- Never add a stroke to our logo
+- Never stretch our logo vertically or horizontally
+- Never place our logo over busy backgrounds
+- Never modify proportions or recreate the logo
+
+### Tagline Lockups
+
+When utilizing the Sonance tagline "BEYOND SOUND", use the appropriate lockup based on available space:
+
+**Horizontal Lockup**: Use when the space allowed is horizontal. The cap height of the logo serves as a guide to ensure a consistent relationship between the Sonance logo and tagline.
 
-- Use 2-color logo (with cyan Beam) for primary applications
-- Use reverse (white) logo on dark backgrounds
-- Minimum clear space: equal to cap height of logo
-- Minimum width: 120px (digital), 1 inch (print)
+**Vertical Lockup**: Use wherever vertical space allows for it. Use the height of the beam plus the cut as a guide to ensure a consistent relationship.
 
-**Don'ts**:
-- Never colorize, rotate, stretch, or add strokes to the logo
-- Never place on busy backgrounds
-- Never modify proportions
+### Sonance Foundation
+
+The Sonance Foundation logo is clean, lean and all caps. The 2 color version, with the arrow (the green accent) should be used for any and all Foundation brand communications.
+
+**Foundation Color Palette**:
+| Color | Hex |
+|-------|-----|
+| Sonance Charcoal | `#333F48` |
+| Foundation Green | `#00B2A9` |
+| Light Gray | `#D9D9D6` |
+| White | `#FFFFFF` |
+
+There's a set of three icons that represent each focus of the foundation. Please only use the unaltered files. Do not modify proportions of the logo or icons, retype or otherwise recreate any version.
+
+### Logo as an Icon
+
+For social media profiles and spaces where real estate is limited, a unique icon has been created to represent Sonance. This icon may be used for social media profile images and other similar communication needs where the full logo cannot be displayed effectively.
 
 ---
 
@@ -294,23 +373,78 @@ For building theme-aware components, use these semantic variables:
 
 ## Photography Guidelines
 
+The ideas and suggestions outlined here are intended to result in consistent, quality images that best define Sonance in both style and substance, while providing flexibility for use across multiple mediums and marketing needs.
+
 ### Product Photography
-- Clean, simple backgrounds (white or gradient)
-- Products should "float" in space
-- Show shadow and depth but avoid clutter
-- Use natural light aesthetic
+
+It's important that all Sonance products are presented in a clean, clear, and consistent manner.
+
+**Product Photography Do's**:
+- Products should always be new and as flawlessly clean as possible
+- Products should always be silhouetted against clean, flat backgrounds—white or charcoal preferred
+- Use a soft reflection to anchor the product
+- Even lighting with no extreme highlights or shadows
+- All products should be photographed from front, back, side and 3/4 angles
+- The perspective should never make a product look distorted or unnatural
+- Choose an angle that best complements the product and messaging
+- Leave generous amounts of negative space to allow for placement of logos and typography
+
+**Product Photography Don'ts**:
+- Never show the product without the soft reflection below
+- Do not place products in a busy, confusing or messy setting
+- Do not place products over gradients or colors that aren't on brand
+- Avoid cluttered compositions that distract from the product
+- Do not use harsh lighting that creates unflattering shadows
 
 ### Lifestyle Photography
-- Rich, inviting scenes
-- Premium architectural settings
-- Products integrated naturally (invisible aesthetic)
-- Warm, sophisticated color grading
 
-**Don'ts**:
-- No cartoons, illustrations, or non-photographic imagery
-- No busy or cluttered backgrounds
-- No artificial-looking lighting
-- No low-resolution images
+Sonance lifestyle photography should always depict the experience of using our products and solutions. It's not always possible to showcase Sonance product, as it's often invisible or "designed to disappear."
+
+**Lifestyle Photography Do's**:
+- Depict the experience of using our products and solutions
+- The environment should clearly indicate a relevant space where Sonance speakers would be found
+- The environment should be clean and styled appropriately—eliminate distracting props
+- Consider generous use of large sections of negative space for type or design elements
+- The product does not need to be in the center—feature angled ceilings or interesting horizons
+- The composition should feel dynamic and intriguing
+- Environment should reflect the level of sophistication connected to the Sonance brand
+
+**Lifestyle Photography Don'ts**:
+- Do not use photography that shows product in an unflattering environment
+- Do not show our products in unfinished environments
+- Do not let photo credits disappear into the background or conflict with the subject
+- Do not leave unequal space to the left, right, and below photo credits
+
+### Layout Principles
+
+**Standard Layouts**: When the product is shot on clean white (or single color) backgrounds, that background can easily be extended to create beautiful layouts. Overall, generous amounts of negative space allows for easy and effective placement of messaging and design elements.
+
+**Dynamic Layouts**: Clean white (or single color) backgrounds and more extreme crops of certain Sonance products can create dynamic, modern layouts. Balanced compositions are preferred.
+
+**Typography Placement**: Typographic and design elements should be anchored to the left-hand side of the composition. Typography along with the relationship to other design elements should be positioned in a consistent manner from piece to piece.
+
+### Photo Credits
+
+When crediting a photographer, follow these guidelines consistently:
+
+**Placement**:
+- Appear at the bottom left or right depending on photo composition
+- Typeset in a minimal typesize (Montserrat Regular)
+- Place in an area of contrasting color
+- Ensure space to the left, right and below the credit are equal whenever possible
+
+**Format**:
+- Brief description or location of the image
+- Followed by "Photo courtesy of ______"
+- Insert dealer, photographer, etc.
+- Do not let the credit conflict with the subject of the photo
+
+### Background Guidelines
+
+| Background | Usage |
+|------------|-------|
+| White | Preferred for product photography. Allows easy extension for layouts. |
+| Charcoal (`#333F48`) | Alternative for dramatic product shots. Creates premium feel. |
 
 ---
 
@@ -358,4 +492,5 @@ When generating UI for these brands:
 8. **Buttons**: Uppercase, medium weight, tracked
 9. **Cards**: Minimal borders, subtle shadows
 10. **Spacing**: Generous whitespace, "breathable" layouts
-
+11. **Logos**: Observe clear space rules, minimum sizes, never distort
+12. **Photography**: Clean backgrounds, no clutter, premium feel

package/dist/assets/components/card.tsx

@@ -68,3 +68,16 @@ export const CardContent = forwardRef<
 
 CardContent.displayName = "CardContent";
 
+export const CardFooter = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+
+CardFooter.displayName = "CardFooter";
+

package/dist/index.js

@@ -4,8 +4,112 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import * as fs from "fs";
 import * as path from "path";
+import * as os from "os";
 import { fileURLToPath } from "url";
 // ============================================
+// INSTALLER (--init flag)
+// ============================================
+/**
+ * Get the Claude Desktop config path based on OS
+ */
+function getClaudeConfigPath() {
+    const platform = os.platform();
+    if (platform === "darwin") {
+        // macOS
+        return path.join(os.homedir(), "Library", "Application Support", "Claude", "claude_desktop_config.json");
+    }
+    else if (platform === "win32") {
+        // Windows
+        return path.join(os.homedir(), "AppData", "Roaming", "Claude", "claude_desktop_config.json");
+    }
+    else {
+        // Linux
+        return path.join(os.homedir(), ".config", "Claude", "claude_desktop_config.json");
+    }
+}
+/**
+ * Run the installer to add sonance-brand to Claude Desktop config
+ */
+function runInstaller() {
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │                                                 │");
+    console.log("  │   🎨  Sonance Brand MCP - Installer             │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    const configPath = getClaudeConfigPath();
+    const configDir = path.dirname(configPath);
+    console.log(`  📍 Claude config: ${configPath}`);
+    console.log("");
+    // Create config directory if it doesn't exist
+    if (!fs.existsSync(configDir)) {
+        console.log("  📁 Creating Claude config directory...");
+        fs.mkdirSync(configDir, { recursive: true });
+    }
+    // Read existing config or create new one
+    let config = {};
+    if (fs.existsSync(configPath)) {
+        try {
+            const content = fs.readFileSync(configPath, "utf-8");
+            config = JSON.parse(content);
+            console.log("  📄 Found existing Claude config");
+        }
+        catch {
+            console.log("  ⚠️  Could not parse existing config, creating new one");
+        }
+    }
+    else {
+        console.log("  📄 Creating new Claude config");
+    }
+    // Initialize mcpServers if not present
+    if (!config.mcpServers) {
+        config.mcpServers = {};
+    }
+    // Check if already installed
+    if (config.mcpServers["sonance-brand"]) {
+        console.log("  ✅ sonance-brand is already configured!");
+        console.log("");
+        console.log("  To use it:");
+        console.log("    1. Restart Claude Desktop (Cmd+Q / Alt+F4, then reopen)");
+        console.log("    2. Look for the 🔨 hammer icon in the chat input");
+        console.log("");
+        return;
+    }
+    // Add Sonance server config (using npx for auto-updates)
+    config.mcpServers["sonance-brand"] = {
+        command: "npx",
+        args: ["-y", "sonance-brand-mcp"],
+    };
+    // Write updated config
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+    console.log("");
+    console.log("  ✅ Sonance Brand MCP installed successfully!");
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │  Next steps:                                    │");
+    console.log("  │                                                 │");
+    console.log("  │  1. Quit Claude Desktop completely              │");
+    console.log("  │     • Mac: Press Cmd+Q                          │");
+    console.log("  │     • Windows: Press Alt+F4                     │");
+    console.log("  │                                                 │");
+    console.log("  │  2. Reopen Claude Desktop                       │");
+    console.log("  │                                                 │");
+    console.log("  │  3. Click the 🔨 hammer icon to verify          │");
+    console.log("  │     You should see 'sonance-brand' listed       │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    console.log("  Try asking Claude:");
+    console.log("    \"What are the official Sonance brand colors?\"");
+    console.log("");
+}
+// Check for --init flag BEFORE starting MCP server
+if (process.argv.includes("--init") || process.argv.includes("init")) {
+    runInstaller();
+    process.exit(0);
+}
+// ============================================
 // PATH RESOLUTION
 // ============================================
 const __filename = fileURLToPath(import.meta.url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",