Overview

Material You Component Kit

Voice

Layered, dynamic, and confident. Material 3 keeps surfaces calm so motion and color can do the talking. Microcopy is direct and product-specific; headlines carry tone, UI labels stay literal.

Color

The system is built around a tonal palette generated from a single seed (#6442D6). Use primary for the single most important action on screen, primaryContainer for hero surfaces and badges, secondary and tertiary for accents and grouping, surface / surfaceContainer for backgrounds, and error strictly for destructive states. Avoid introducing off-palette colors; reach for tonal containers before tinting.

Typography

Roboto powers the full M3 type scale. Pair one Display with a Headline for context and Title for sectioning. Body text settles at 16/24 for prose and 14/20 for UI dense surfaces. Reserve mono (Roboto Mono) for tokens, code, and technical metadata.

Spacing & Layout

The 4/8/12/16/24/32 rhythm composes everything. Cards use 12px corners, sheets and snackbars 8px, hero surfaces 28px, and the FAB stays at the signature 16px. Maintain consistent internal padding and align modules to a predictable column grid; whitespace separates ideas before borders or shadows do.

Elevation

Five levels carry the layered-surfaces metaphor. Default cards live at level 1 (subtle shadow), hovered cards lift to level 2, the FAB sits at level 3, and modal sheets float at level 4. Never combine heavy shadows with bright fills—pick one signal.

Motion

Default transitions are 150–250ms with the standard easing curve cubic-bezier(0.2, 0, 0, 1). Motion confirms cause and effect: a tap raises elevation, a chip selection swaps tonal containers, a FAB extends on scroll. Keep duration short and stable; avoid decorative motion that competes with the user's task.

Composition

Lead with hierarchy: headline → support text → primary action. Use one FAB and one primary button per decision. NavigationBar belongs on compact widths; switch to NavigationRail at medium and NavigationDrawer at large. Treat the snackbar as a singleton on the inverse surface and never stack toasts.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (29)

primary

#6442D6

onPrimary

#FFFFFF

primaryContainer

#E9DDFF

onPrimaryContainer

#21005E

secondary

#C8B3FD

onSecondary

#1E1B26

secondaryContainer

#E8DEF8

onSecondaryContainer

#1D192B

tertiary

#7D5260

onTertiary

#FFFFFF

tertiaryContainer

#FFD8E4

onTertiaryContainer

#31111D

background

#FFFBFE

onBackground

#1C1B1F

surface

#FFFFFF

onSurface

#111827

surfaceVariant

#E7E0EC

onSurfaceVariant

#49454F

surfaceContainerLow

#F7F2FA

surfaceContainer

#F3EDF7

surfaceContainerHigh

#ECE6F0

outline

#79747E

outlineVariant

#CAC4D0

error

#DC2626

onError

#FFFFFF

errorContainer

#FFDAD6

success

#16A34A

warning

#D97706

scrim

rgba(0,0,0,0.32)

Typography (7)

display

Roboto, system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

headline

Roboto, system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

title

Roboto, system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

Roboto, system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

label

Roboto, system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

Roboto Mono, ui-monospace, SFMono-Regular, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "displayLarge": "57px/64px",
  "displayMedium": "45px/52px",
  "displaySmall": "36px/44px",
  "headlineLarge": "32px/40px",
  "headlineMedium": "28px/36px",
  "headlineSmall": "24px/32px",
  "titleLarge": "22px/28px",
  "titleMedium": "16px/24px",
  "titleSmall": "14px/20px",
  "bodyLarge": "16px/24px",
  "bodyMedium": "14px/20px",
  "bodySmall": "12px/16px",
  "labelLarge": "14px/20px",
  "labelMedium": "12px/16px",
  "labelSmall": "11px/16px"
}

Components (16)

Button

Filled button. Primary tonal action with elevation on hover.

html

Hand-tuned CSS, Material 3 filled button

2 props · 6 states · 10 tags · 2 sources

Input

Filled text field with floating label and bottom indicator.

html

Hand-tuned CSS, Material 3 Filled Text Field

2 props · 5 states · 7 tags · 2 sources

Card

Elevated surface card with subtle shadow and 12px corners.

html

Hand-tuned CSS, Material 3 elevated card

1 props · 2 states · 7 tags · 2 sources

Missing states: focus-visible, disabled

Badge

Compact tonal badge for counts, statuses, and chips of metadata.

html

Hand-tuned CSS, Material 3 badge

1 props · 1 states · 10 tags · 2 sources

Missing states: hover, focus-visible, disabled

Heading

Display + headline + title stack from the M3 type scale.

html

Hand-tuned CSS, Material 3 type scale

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

Link

Inline link in primary tone with underline-on-hover.

html

Hand-tuned CSS, Material 3 inline link

0 props · 4 states · 3 tags · 2 sources

Missing states: disabled

Hero

Hero with primary container surface, headline, supporting text and dual CTAs.

html

Hand-tuned CSS, Material 3 primary container hero

0 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Nav

Bottom navigation bar with icon + label items and an active pill indicator.

html

Hand-tuned CSS, Material 3 NavigationBar

0 props · 3 states · 6 tags · 2 sources

Missing states: focus-visible, disabled

Footer

Surface-variant footer with three-column nav and a tonal CTA row.

html

Hand-tuned CSS, Material 3 surface footer

0 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Stat

Filled tonal stat tile with display number and supporting label.

html

Hand-tuned CSS, Material 3 stat tile

0 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

FAB

Round 56px FAB with primary container fill, level-3 elevation, and an extended variant.

html

Hand-tuned CSS, Material 3 Floating Action Button

1 props · 4 states · 5 tags · 2 sources

Missing states: disabled

Chip

Filter chip row with leading icon and selected tonal state.

html

Hand-tuned CSS, Material 3 assist/filter chip

1 props · 5 states · 6 tags · 2 sources

Switch

Track + thumb toggle with primary container active state.

html

Hand-tuned CSS, Material 3 switch

1 props · 3 states · 6 tags · 2 sources

Missing states: hover, focus-visible, error

Snackbar

Inverse-surface snackbar with action label and dismiss icon.

html

Hand-tuned CSS, Material 3 snackbar

0 props · 1 states · 5 tags · 2 sources

Missing states: hover, focus-visible, disabled

IconButton

40px round icon button with filled, tonal, and standard variants.

html

Hand-tuned CSS, Material 3 icon button

1 props · 5 states · 8 tags · 2 sources

Missing states: loading

ListItem

List item with leading tonal icon, two-line content, and trailing meta.

html

Hand-tuned CSS, Material 3 list item

0 props · 3 states · 9 tags · 2 sources

Missing states: focus-visible, disabled

DESIGN.md

Material You Component Kit

Voice

Layered, dynamic, and confident. Material 3 keeps surfaces calm so motion and color can do the talking. Microcopy is direct and product-specific; headlines carry tone, UI labels stay literal.

Color

The system is built around a tonal palette generated from a single seed (#6442D6). Use primary for the single most important action on screen, primaryContainer for hero surfaces and badges, secondary and tertiary for accents and grouping, surface / surfaceContainer for backgrounds, and error strictly for destructive states. Avoid introducing off-palette colors; reach for tonal containers before tinting.

Typography

Roboto powers the full M3 type scale. Pair one Display with a Headline for context and Title for sectioning. Body text settles at 16/24 for prose and 14/20 for UI dense surfaces. Reserve mono (Roboto Mono) for tokens, code, and technical metadata.

Spacing & Layout

The 4/8/12/16/24/32 rhythm composes everything. Cards use 12px corners, sheets and snackbars 8px, hero surfaces 28px, and the FAB stays at the signature 16px. Maintain consistent internal padding and align modules to a predictable column grid; whitespace separates ideas before borders or shadows do.

Elevation

Five levels carry the layered-surfaces metaphor. Default cards live at level 1 (subtle shadow), hovered cards lift to level 2, the FAB sits at level 3, and modal sheets float at level 4. Never combine heavy shadows with bright fills—pick one signal.

Motion

Default transitions are 150–250ms with the standard easing curve cubic-bezier(0.2, 0, 0, 1). Motion confirms cause and effect: a tap raises elevation, a chip selection swaps tonal containers, a FAB extends on scroll. Keep duration short and stable; avoid decorative motion that competes with the user's task.

Composition

Lead with hierarchy: headline → support text → primary action. Use one FAB and one primary button per decision. NavigationBar belongs on compact widths; switch to NavigationRail at medium and NavigationDrawer at large. Treat the snackbar as a singleton on the inverse surface and never stack toasts.

Adapters (6)

adapters/tokens.css
text/css
Download
adapters/shadcn-registry.json
application/json
Download
adapters/tailwind.config.js
text/javascript
Download
adapters/react/index.ts
text/typescript
Download
adapters/html/index.html
text/html
Download
adapters/html/styles.css
text/css
Download

All files (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

Versions

v1.0.05/8/2026
Download