Last updated
March 16, 2026
MCP profile
Github RoleModel Optics Mcp
MCP Server for Optics Design System documentation and token usage.
Developer ToolsPackageJavaScript/TypeScriptOpen SourceExternal
Visibility
Public
ByRegistry
About This MCP Server
This MCP server provides 14 tools and resources for working with the Optics design system:
1. Colors (25 tokens): HSL-based color system with primary, neutral, and alert colors 2. Spacing (11 tokens): calc-based rem units with base-10 scale (2px to 80px) 3. Typography (32 tokens): Noto Sans/Serif fonts with sizes, weights, and line heights 4. Borders (10 tokens): Border radius (small to pill) and widths 5. Shadows (5 tokens): Elevation system (x-small to x-large)
Capabilities
83 Design Tokens: Real HSL-based colors, calc-based spacing, typography, borders, and shadows24 Components: All Optics components with accurate token dependencies extracted from SCSS7 Core Tools: Query tokens, components, and documentation7 Advanced Tools: Theme generation, validation, accessibility checking, code scaffolding, and style guide generation5 MCP Prompts: Pre-configured workflows for common design system tasksDocumentation: Design system guidelines and best practices
Tools & Endpoints1
Example Workflow
The easiest way to use Optics MCP - no installation required!
Add to your MCP configuration:
Add with a single command:
Specifications
Status
live
Industry
Developer Tools
Category
General
Server type
Package
Language
JavaScript/TypeScript
License
Open Source
Verified
Yes
Hosting
Hosting Options
- Package
API
Integrate this server into your application. Choose a connection method below.
1
Install
Install command
JavaScript/TypeScript
npm install2
Configure
Configuration
json
{
"mcpServers": {
"optics": {
"command": "npx",
"args": [
"@rolemodel/optics-mcp@latest"
]
}
}
}Performance
Usage
Quick Reference
- Name
- Github RoleModel Optics Mcp
- Function
- MCP Server for Optics Design System documentation and token usage.
- Available Tools
- For detailed documentation of all tools, see TOOLS.md.
- Transport
- Package
- Language
- JavaScript/TypeScript
- Install
- npm install
- Source
- External (Registry)
- License
- Open Source
Get started
Ready to integrate this MCP server?
Book a demo to see how this server fits your workflow, or explore the full catalog.