skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

matter-ui-skills

Enforce Matter UI design constraints for dark mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#dark mode#spacing#matter
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill matter-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: matter-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/matter
Command: npx skills add https://github.com/ihlamury/design-skills --skill matter-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Matter's design system, ensuring a cohesive and branded user experience.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark themes.
  • Consistent Typography: Utilizes the 'Inter' font family with defined heading and body text styles.
  • Grid-Based Spacing: Adheres to a 4px grid system for consistent spacing and layout.
  • Use Case: When designing a new feature for a platform that needs to match Matter's existing aesthetic, use these guidelines to ensure the new UI elements are indistinguishable from the original design.

Quick Start

Apply Matter's UI design system to create a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about matter-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a dark mode interface using a 4px grid system?▼

Build a dark mode interface on a 4px grid by enforcing specific color tokens, Inter typography styles, spacing rules, border-radius scales, and layout dimensions. This ensures visual consistency and adherence to accessibility contrast ratios for interactive state styling.

What typography styles and font family does the Matter UI design system use?▼

The Matter UI design system uses the Inter font family with defined heading and body text styles. These typography constraints ensure consistent text rendering across dark mode interfaces built on the 4px grid.

Can I use Matter's color tokens and spacing rules for a new feature design?▼

You can apply Matter's color tokens, spacing rules, border-radius scales, and layout dimensions to new feature designs. This ensures new UI elements are indistinguishable from the original Matter aesthetic while maintaining accessibility contrast ratios.

Does the Matter design system enforce accessibility contrast ratios for dark themes?▼

The Matter design system enforces accessibility contrast ratios alongside dark background color palettes and interactive state styling. This ensures that dark mode interfaces remain accessible while matching the branded user experience.

What is the best way to ensure my UI matches Matter's existing aesthetic?▼

The best way to match Matter's aesthetic is to apply its opinionated UI design system constraints, including the Inter font, 4px grid spacing, and specific color tokens. This approach guarantees a cohesive and branded user experience for dark mode interfaces.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

descript-ui-skills

Enforce Descript UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

launchdarkly-ui-skills

Enforce Launchdarkly's UI design system with dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

stripe-ui-skills

Enforce Stripe's UI design system constraints for building interfaces.

Community
Intermediate
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate