DSS Material¶

Machine-readable Material Design 3 specifications in Design System Spec format.

Overview¶

DSS Material provides Material Design 3 specifications in a structured, machine-readable format that enables:

AI-Assisted Development: LLMs can understand component specs, variants, and accessibility requirements
Automated Evaluation: Measure spec completeness and application conformance
Cross-Platform Consistency: Platform-agnostic source of truth for all implementations

Quick Links¶

:material-palette:{ .lg .middle } Foundations

Design tokens: colors, typography, spacing, elevation

:octicons-arrow-right-24: View Foundations
:material-view-grid:{ .lg .middle } Components

23 Material Design 3 component specifications

:octicons-arrow-right-24: View Components
:material-chart-bar:{ .lg .middle } Evaluation

Spec completeness metrics and coverage dashboard

:octicons-arrow-right-24: View Evaluation
:material-code-braces:{ .lg .middle } MCP Server

Use with Claude Desktop for AI-assisted development

:octicons-arrow-right-24: Integration Guide

Live Component Demos¶

Material Web components rendered directly from the material-web library:

Buttons¶

Filled

Outlined

Text

Elevated

Tonal

Selection Controls¶

Text Fields¶

Icon Buttons & FABs¶

settings

favorite

edit

share

add

Progress Indicators¶

Slider¶

Why DSS?¶

Official Material Design implementations are in maintenance mode:

Repository	Status
`material-components/material-web`	Maintenance mode, pending maintainers
`material-components-android`	Migrating to Compose
`material-components-flutter`	Archived Nov 2023
`material-components-ios`	Archived Dec 2025

DSS Material provides a platform-agnostic specification that:

Preserves detailed component documentation
Enables AI agents to generate compliant implementations
Supports automated quality evaluation
Works across all platforms and frameworks

Installation¶

Go Library¶

go get github.com/plexusone/dss-material

MCP Server for Claude¶

go install github.com/plexusone/dss-material/cmd/dss-material-mcp@latest

Configure in Claude Desktop:

{
  "mcpServers": {
    "material-design": {
      "command": "dss-material-mcp",
      "args": ["--version", "v3"]
    }
  }
}

Spec Structure¶

specs/v3/
├── meta.json           # Version, description
├── accessibility.json  # Global a11y requirements
├── foundations/
│   ├── colors.json     # Dynamic color system
│   ├── typography.json # Type scale
│   ├── spacing.json    # Spacing tokens
│   └── elevation.json  # Shadow definitions
└── components/
    ├── button.json     # 5 variants
    ├── textfield.json  # filled, outlined
    ├── dialog.json
    └── ...             # 23 components

License¶

MIT License - See LICENSE for details.