Material Designv1.0.0material-design

Material Design Adaptive

Generate product UI with tokenized surfaces, adaptive elevation, measured motion, and practical, accessible hierarchy.

View shared fundamentals Explore tokens

B2B SaaSadmin panelsconsumer dashboardssettings-heavy productsmobile-first applications

Tone

pragmatic, calm, systematic

Density

medium; scales from comfortable mobile spacing to denser desktop surfaces

Mood

familiar, trustworthy, adaptive

Source Type

systematic product design language

Base Skill Metadata

The YAML record is the source of truth for capability, maturity, and generator guardrails.

Maturity

Advanced

Coverage score

92/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

dashboardadmin panelsettings-heavy productmobile appdesign system documentation

Compatibility tags

b2b-saasmaterial-3-inspireddense-data-okaccessible-defaultmobile-first

Anti-patterns to avoid

Do not flatten elevation into a single visual layer with no surface hierarchy.

Do not replace practical component rhythm with oversized editorial spacing.

Do not introduce ornamental gradients or brand textures that compete with clarity.

Validation report

0 errors1 warnings

Warning: border on background contrast is 1.65:1, below the required 3:1.

Sample prompts

Adaptive admin workspace

Design a settings-heavy admin workspace for a multi-tenant SaaS. Preserve measured Material-style elevation, clear action hierarchy, strong state feedback, and mobile-safe responsive behavior.

Mobile dashboard refresh

Generate a mobile-first dashboard for a consumer finance app using adaptive surfaces, compact cards, practical typography, and conservative motion tuned for production UI.

Visual Identity

layered tonal surfaces with subtle shadow and state overlays

medium-high, accessibility-first, balanced rather than stark

Token-driven color, shape, and elevationClear state layers for hover, focus, pressed, disabledPredictable component behavior across breakpointsStrong support for forms, settings, and information hierarchy

Typography

Roboto Flex, Roboto, system-ui

32-40px semibold; concise; paired with supporting subtitle or metadata

12px14px16px18px20px

Layout & Rhythm

Top app bar or contextual header, content container beneath, optional navigation rail on large screens.

Use stacked content groups with consistent vertical rhythm and action clusters.

32px48px64px80px

Tokens

Core design variables from YAML

Compact snapshot of the YAML base. Open only the panels you need when checking exact values or generation rules.

Palette essentials

Only the colors that define the system at a glance.

Primary

#005AC1

Secondary

#4E5D78

Accent

#7A5340

Background

#FCFCFF

Token snapshot

Key values that most affect the builder output.

Spacing density

balanced 4pt rhythm

Grouping

Use stacked content groups with consistent vertical rhythm and action clusters.

Radius family

rounded, moderate, geometric

Typography

Roboto Flex, Roboto, system-ui

Layout signature

Structure choices that define this system, not the shared fundamentals.

Page shell

Top app bar or contextual header, content container beneath, optional navigation rail on large screens.

Page width strategy

Responsive content widths with readable line lengths and app-like gutters.

Header pattern

Page title, supporting context, and right-aligned primary action or segmented actions.

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

B2B SaaSadmin panelsconsumer dashboardssettings-heavy productsmobile-first applications

Avoid for

highly expressive brand campaignsretro or ornamental art direction

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

Primary filled action, contextual secondary, low-noise tertiary text links.

Form structure

Chunk long forms into titled groups with helper text and consistent action footers.

Table detail strategy

Table for scanning, detail drawer or page for editing and extended metadata.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Brand accent hue can shiftPage density may increase for enterprise contextsSurface depth can be flatter on low-brand pages

Do not overuse elevation on every surface.

Do not turn Material into glossy skeuomorphism.

Do not hide labels or overload icon-only actions.

Do not mix too many accent hues without semantic reason.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

Missing from declared expectations: Empty States.

Generation Guardrails

Essential guidance for the skill generator, grouped by decision type.

Purpose

Create robust, familiar product UIs that are easy to extend and easy to use.

AI role

You are a product UI designer extending a tokenized, adaptive component system.

Anti-drift highlights

All colors map back to semantic tokens

Primary action remains obvious and singular

Labels stay visible on every form field

Packaging model

Non stai modificando la base skill, stai derivando una custom skill

La base skill resta il riferimento YAML del catalogo. Il builder sotto serve a produrre un pacchetto custom con metadati propri, override validati e archive esportabile.

Base skill

Record YAML sorgente, usato come sistema di riferimento immutabile.

Name: Material Design Adaptive

Slug: material-design-adaptive

Maturity: Advanced

Coverage score: 92/100

Role: definisce token, layout, interaction rules e anti-drift checklist della base.

Custom skill

Pacchetto derivato che puoi rinominare, validare, importare/esportare e scaricare.

Input: delta JSON sopra la base skill.

Output: payload riutilizzabile oppure archive completo con `README.md`, `SKILL.md` e `openai.yaml`.

Guardrail: validazioni su campi obbligatori, slug, hex colors e contrast checks.

Custom Skill Builder

Three editing modes, one controlled derivation model

The base skill remains immutable. This builder lets you edit only the declared scope, persist named drafts, compare revisions, clone an existing custom skill, and export a packaged custom skill with its own metadata.

Base skill to custom skill

Builder mode and editable scope

The available form surface changes with the selected mode, but the data contract does not: `shared_fundamentals` stay locked, while `skill_metadata` and `design_system` remain the editable scope.

Base

material-design

Sections touched

0 / 4

Overrides

Mode switcher

skill_metadatavisual_identityidentity_traitscolorsspacingradiusshadowstypographywidths_breakpointshierarchytypography_rolesinteractionlayoutcomponentsux_patterns

Scope contract

Editable

skill_metadatadesign_system.visual_identitydesign_system.identity_traitsdesign_system.tokensdesign_system.hierarchydesign_system.typography_rolesdesign_system.interactiondesign_system.layoutdesign_system.componentsdesign_system.ux_patternsdesign_system.constraintsdesign_system.skill_generation

Locked

shared_fundamentals

Quick navigation

Jump across the builder without losing the current revision context.

Base skill

Material Design Adaptive

Source YAML from the catalog. It is never edited here.

Custom skill

Material Design Adaptive

Derived package with its own metadata, revision history, and semantic diff.

Validation summary

No blocking errors, 1 warning

Review recommended

colors

Background and surface are too close (1.02:1). Surface hierarchy may collapse.

Draft persistence and revisions

Save the current state, reopen a previous draft, compare revisions, or clone an existing custom skill as a new starting point.

No saved drafts for this base skill yet. Save the current state to create a reusable revision history.

Skill identity

Base skill vs custom skill

Name the derived package, define its slug, and set the packaging metadata that will travel with the exported custom skill.

0 override

Base skill

Material Design Adaptive

material-design-adaptive

Generate product UI with tokenized surfaces, adaptive elevation, measured motion, and practical, accessible hierarchy.

Custom package

Material Design Adaptive

material-design-adaptive

This becomes the identity of the exported custom package and its semantic metadata file.

Custom skill name

Custom skill slug

Suggested: material-design-adaptive

Custom skill description

Recommended product areas

Avoid for

Palette

Palette and surfaces

Edit the core palette in all modes, then unlock extended token control in advanced and expert modes.

0 override

Primary

#005AC1

Secondary

#4E5D78

Accent

#7A5340

Background

#FCFCFF

Surface

#FFFFFF

Primary

Primary actions, critical buttons, and highest-priority attention points.

#005AC1

Secondary

Secondary surfaces, quieter containers, and support blocks.

#4E5D78

Accent

Highlights, badges, and small signals that energize the system.

#7A5340

Background

Overall canvas and dominant page mass.

#FCFCFF

Surface

Cards, dialogs, and panels that need to separate from the background.

#FFFFFF

Success

Warning

Danger

Border

Text primary

Text secondary

Text muted

Text inverse

Neutral scale

Typography

Typography and tone

Use curated font directions in every mode, then unlock scale, weights, and semantic type roles in advanced and expert mode.

0 override

Tone of voice

Font preview: The quick brown fox jumps over the lazy dog.

Type scale

Font weights

Line heights

Typography roles

Layout

Layout and rhythm

Basic mode edits the main shell and density. Advanced and expert modes unlock richer spacing, radius, layout, and hierarchy controls.

0 override

Control radius

Flow design goal

L’utente sceglie una base YAML, modifica i campi del design system dalla UI, e genera una skill che eredita i fundamentals condivisi e applica gli override utente sulla base selezionata.

Page shell

Spacing tokens

Section gap values, one per line.

Card gaps

Widths

Breakpoints

Page width and navigation rules

Advanced system controls

These sections map to the richer customization plan: visual identity, interaction rules, UX patterns, and component-level rules.

Visual identity

Identity traits

Interaction rules

UX patterns

Components rules

{
  "buttons": {
    "explicit": true,
    "source_basis": "Material-style product actions",
    "confidence": "high",
    "rules": {
      "variants": [
        "filled",
        "tonal",
        "outlined",
        "text",
        "icon"
      ],
      "shape": "8px radius, medium emphasis, no exaggerated border",
      "states": "clear hover, focus, pressed, disabled",
      "usage": "One primary filled action per section; secondary actions should not compete."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Enterprise and consumer forms",
    "confidence": "high",
    "rules": {
      "style": "outlined or filled fields with visible labels and helper text",
      "density": "comfortable by default; compact only on dense admin views",
      "validation": "Inline helper/error region below control",
      "accessibility": "Never rely on placeholder as label"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Standard product forms",
    "confidence": "high",
    "rules": {
      "trigger": "Text-left trigger with clear chevron and state outline",
      "menu": "Elevated surface with modest radius and clear active row"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Context menus and action menus",
    "confidence": "high",
    "rules": {
      "surface": "Elevated, tokenized surface with dividers and icon alignment",
      "action_order": "Safe actions first, destructive last"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Dashboard and settings surfaces",
    "confidence": "high",
    "rules": {
      "surface": "Soft elevation or tonal border with 16px radius",
      "content": "Header, body, optional action row; padding remains consistent"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Admin and analytical UIs",
    "confidence": "high",
    "rules": {
      "header": "Sticky or strongly separated when data is long",
      "row_states": "hover, selected, focus-visible",
      "density": "Medium with optional compact mode"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Short, blocking decisions",
    "confidence": "medium",
    "rules": {
      "size": "Compact to medium; avoid putting long forms in modal when page flow is better"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "Confirmation and focused edit flows",
    "confidence": "high",
    "rules": {
      "surface": "16-24px radius with scrim and clear title/actions",
      "behavior": "ESC closes except on destructive irreversible flows"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Multi-area product navigation",
    "confidence": "high",
    "rules": {
      "structure": "Sectioned nav with clear active state and compact utility footer"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Peer content switching",
    "confidence": "high",
    "rules": {
      "style": "Underlined or tonal segmented tabs",
      "usage": "Use only for peer content, not for primary route switching on small screens"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Status, count, category",
    "confidence": "high",
    "rules": {
      "style": "Rounded pill with semantic fill or outline"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "Validation, system status, warnings",
    "confidence": "high",
    "rules": {
      "structure": "Icon, concise title, body, optional action",
      "severity": "info, success, warning, danger"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "Content gaps and onboarding",
    "confidence": "high",
    "rules": {
      "composition": "Icon or illustration, title, body, one recovery CTA"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Dashboard analytics",
    "confidence": "medium",
    "rules": {
      "shell": "Card with clear title, timeframe, metric summary, and legend",
      "colors": "Use semantic or brand palette, never rainbow by default"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "Product shell",
    "confidence": "high",
    "rules": {
      "composition": "Title, supporting context, and actions aligned predictably"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "Data-heavy workflows",
    "confidence": "high",
    "rules": {
      "placement": "Toolbar above data or sticky subheader",
      "controls": "Search first, then scoped filters, then sort/view toggles"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Settings and CRUD flows",
    "confidence": "high",
    "rules": {
      "structure": "Single-column by default; two-column only when labels remain readable",
      "actions": "Primary save, secondary cancel, destructive isolated"
    }
  }
}

Review

Final review

Review the semantic summary, export metadata, and raw override payload before generating the packaged skill.

0 override

Base reference

material-design

Version 1.0.0

Change state

No changes yet

Piano dei campi che la UI puo esporre all’utente per personalizzare il design system prima della generazione della skill.

Semantic diff

No semantic changes yet. The draft still matches the base skill.

custom_skill_metadata

{
  "format_version": "design-skills.custom-skill.v1",
  "custom_skill_id": "material-design-adaptive",
  "base_skill_slug": "material-design",
  "base_skill_name": "Material Design Adaptive",
  "base_skill_version": "1.0.0",
  "builder_mode": "advanced",
  "semantic_diff": [
    "No semantic changes yet. The draft still matches the base skill."
  ],
  "editable_scope": [
    "skill_metadata",
    "design_system.visual_identity",
    "design_system.identity_traits",
    "design_system.tokens",
    "design_system.hierarchy",
    "design_system.typography_roles",
    "design_system.interaction",
    "design_system.layout",
    "design_system.components",
    "design_system.ux_patterns",
    "design_system.constraints",
    "design_system.skill_generation"
  ],
  "locked_scope": [
    "shared_fundamentals"
  ],
  "generated_at": "2026-07-27T18:37:55.263Z"
}

You can still package the base skill with explicit custom metadata and no extra override delta.

user_override_payload

{}

Live preview

The same visual grammar as the detail-page demo, but updated with the current customization values.

Font

Roboto Flex

Density

balanced 4pt rhythm

Continue browsing

Other design system bases

Back to gallery

Brutalism

Brutalism Interface System

Generate bold UI with hard outlines, confrontational hierarchy, and memorable task-oriented composition.

Glassmorphism

Glassmorphism Product Layers

Generate layered translucent UI with frosted surfaces, luminous gradients, and disciplined readability.

Minimal

Minimal Clarity System

Generate refined, restrained product UI with strong whitespace, quiet hierarchy, and disciplined component reuse.

Material Design Adaptive

Core design variables from YAML

Color systemSemantic states, text colors, border token, neutral scale.

Spacing, radius and sizingDensity rules, spacing steps, radii and content widths.

Typography and depthScale, weights, line heights and shadow tokens.

ButtonshighMaterial-style product actions

InputshighEnterprise and consumer forms

SelectshighStandard product forms

DropdownshighContext menus and action menus

CardshighDashboard and settings surfaces

TableshighAdmin and analytical UIs

ModalsmediumShort, blocking decisions

DialogshighConfirmation and focused edit flows

SidebarshighMulti-area product navigation

TabshighPeer content switching

BadgeshighStatus, count, category

AlertshighValidation, system status, warnings

Empty StateshighContent gaps and onboarding

Charts ContainersmediumDashboard analytics

Page HeadershighProduct shell

FiltershighData-heavy workflows

Form LayoutshighSettings and CRUD flows

Core principles4 rules that set visual and UX direction.

Required coveragePage patterns and expected component families.

Anti-drift checklistThe checks worth running before generation is considered done.

Operating instructionsExecution notes for the generator, stripped of prompt boilerplate.

Non stai modificando la base skill, stai derivando una custom skill

Three editing modes, one controlled derivation model

Other design system bases

Brutalism Interface System

Glassmorphism Product Layers

Minimal Clarity System