디자인 시스템
web
v1.0.0
90/100

Material You Component Kit

@dante · Professional & Corporate

Material 3 (Material You) component system with dynamic tonal color, elevated surfaces, FAB, and the signature Roboto type scale.

HTML/CSS
React
shadcn/ui
Tailwind
#design-system
#elevation
#google
#material-3
#tonal
Material You Component Kit
다운로드8
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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)

타이포그래피 (7)

display
Roboto, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
headline
Roboto, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
title
Roboto, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Roboto, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
label
Roboto, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
Roboto Mono, ui-monospace, SFMono-Regular, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 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"
}

컴포넌트 (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 소스

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 소스

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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스

Switch

Track + thumb toggle with primary container active state.

html
Hand-tuned CSS, Material 3 switch
1 props · 3 states · 6 tags · 2 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전