{"id":"material-3","name":"Material 3","status":"scanned","medium":"web","mode":"both","one_liner":"Personal, adaptive, expressive — dynamic color generated from a seed, pill-shaped buttons everywhere.","vibe_tags":["expressive","dynamic","colorful"],"domains":["mobile","general"],"urls":{"detail":"https://brandbook.binary.tools/brandbook/material-3","preview":"https://brandbook.binary.tools/brandbook/material-3/preview","meta_json":"https://brandbook.binary.tools/brandbook/material-3/meta.json","brandbook_json":"https://brandbook.binary.tools/brandbook/material-3/brandbook.json","theme_css":"https://brandbook.binary.tools/brandbook/material-3/theme.css","tailwind_config":"https://brandbook.binary.tools/brandbook/material-3/tailwind.config.js","download_zip":"https://brandbook.binary.tools/brandbook/material-3/download.zip","api":"https://brandbook.binary.tools/api/brandbooks/material-3"},"has_preview":true,"has_brandbook_json":true,"meta":{"id":"material-3","name":"Material 3","inspired_by":{"name":"Google Material 3","url":"https://m3.material.io"},"domains":["mobile","general"],"vibe_tags":["expressive","dynamic","colorful"],"status":"scanned","version":"1.0","notes":"Inspired-by interpretation, not affiliated with or endorsed by the original brand.","style_profile":{"one_liner":"Personal, adaptive, expressive — dynamic color generated from a seed, pill-shaped buttons everywhere.","vibe_paragraph":"Material 3 doesn't ship a palette — it ships a method. Pick a seed color, let HCT color science generate five tonal palettes, and every component pairs primary with on-primary so contrast is guaranteed. Pill-shaped buttons by default. Larger 28dp 'extra-large' radii for hero surfaces. Soft, expressive, Android-native — feels like a system designed for products that change color when the user changes their wallpaper.","mood_adjectives":["expressive","adaptive","dynamic","personal","soft","warm","android-native"],"axes":{"energy":"high","formality":"balanced","warmth":"warm","density":"balanced","sharpness":"soft","mode":"both"},"best_for":["Android apps and Compose-native products","Consumer apps that benefit from user-personalized theming","Products with strong emotional content (music, photos, wellness)","Cross-platform apps that want to feel Google-native"],"avoid_for":["Enterprise dashboards — too soft and rounded","Brands that need a fixed, controlled palette","Editorial/serif-driven brands"],"industries_fit":["consumer-apps","android","mobile","music","photo","wellness","communication"],"audience":"Android developers, consumer-app teams, designers who like dynamic theming","comparable_to":["Google apps (Gmail, Photos, Drive)","modern Android system UI","Wear OS"],"search_keywords":["material","android","google","dynamic","expressive","pill","rounded","mobile","compose","tonal","HCT","personal"],"confidence":"scanned"}},"brandbook":{"id":"material-3","name":"Material 3","version":"1.0","tagline":"Personal, adaptive, expressive.","description":"Google's Material 3 design system: dynamic color generated from a seed via HCT color science, mapped to ~30 semantic roles (primary, on-primary, primary-container, etc.). Roboto/Roboto Flex everywhere. Pill-shaped buttons, large radii, expressive motion.","inspired_by":{"name":"Google Material 3","url":"https://m3.material.io"},"vibe_tags":["expressive","dynamic","colorful","mobile","android","personal"],"domain_hint":"general / mobile / Android","identity":{"logomark":{"shape":"material-m","description":"Four-color Google 'M' / Material symbol — Material is a design system, not a consumer brand"}},"voice":{"principles":["Expressive, dynamic, personal, adaptive","Spec-driven and precise in technical contexts"],"sample_headlines":["Design for expression.","Personal, adaptive, and expressive."],"sample_lead":"Material 3 is the latest version of Google's open-source design system. Design and build beautiful, usable products with Material 3.","sample_code_lang":"kotlin","sample_code":"Button(onClick = { /* … */ }) {\n  Text(\"Filled button\")\n}"},"design_principles":["Dynamic color: seed → HCT → 5 tonal palettes → ~30 semantic roles.","On-X / X-container pattern guarantees AA contrast pairings automatically.","Pill-shaped buttons by default; large 28dp 'extra-large' radius for hero surfaces.","Elevation = surface tint overlay + shadow (not shadow alone)."],"color":{"scheme_model":"dynamic","scheme_notes":"M3 does NOT ship a fixed palette. A seed color produces 5 tonal palettes (primary/secondary/tertiary/neutral/neutral_variant), mapped to ~30 semantic roles. The values below are the canonical 'baseline' scheme (seed ≈ #6750A4).","baseline_light":{"primary":"#6750A4","on_primary":"#FFFFFF","primary_container":"#EADDFF","on_primary_container":"#21005D","secondary":"#625B71","on_secondary":"#FFFFFF","secondary_container":"#E8DEF8","on_secondary_container":"#1D192B","tertiary":"#7D5260","on_tertiary":"#FFFFFF","tertiary_container":"#FFD8E4","on_tertiary_container":"#31111D","error":"#B3261E","on_error":"#FFFFFF","error_container":"#F9DEDC","on_error_container":"#410E0B","background":"#FFFBFE","on_background":"#1C1B1F","surface":"#FFFBFE","on_surface":"#1C1B1F","surface_variant":"#E7E0EC","on_surface_variant":"#49454F","outline":"#79747E","outline_variant":"#CAC4D0"},"page_bg_token":"baseline_light.background","card_bg_token":"baseline_light.surface","body_text_token":"baseline_light.on_surface"},"typography":{"fonts":{"sans":{"family":"Roboto","fallback":"system-ui, sans-serif","google":true,"weights":[400,500],"variable_equivalent":"Roboto Flex"}},"scale":{"display_large":{"size_px":57,"line_px":64,"weight":400,"tracking_px":-0.25},"display_medium":{"size_px":45,"line_px":52,"weight":400,"tracking_px":0},"display_small":{"size_px":36,"line_px":44,"weight":400,"tracking_px":0},"headline_large":{"size_px":32,"line_px":40,"weight":400,"tracking_px":0},"headline_medium":{"size_px":28,"line_px":36,"weight":400,"tracking_px":0},"headline_small":{"size_px":24,"line_px":32,"weight":400,"tracking_px":0},"title_large":{"size_px":22,"line_px":28,"weight":400,"tracking_px":0},"title_medium":{"size_px":16,"line_px":24,"weight":500,"tracking_px":0.15},"title_small":{"size_px":14,"line_px":20,"weight":500,"tracking_px":0.1},"body_large":{"size_px":16,"line_px":24,"weight":400,"tracking_px":0.5},"body_medium":{"size_px":14,"line_px":20,"weight":400,"tracking_px":0.25},"body_small":{"size_px":12,"line_px":16,"weight":400,"tracking_px":0.4},"label_large":{"size_px":14,"line_px":20,"weight":500,"tracking_px":0.1},"label_medium":{"size_px":12,"line_px":16,"weight":500,"tracking_px":0.5},"label_small":{"size_px":11,"line_px":16,"weight":500,"tracking_px":0.5}}},"tokens":{"shape_radius_dp":{"none":0,"extra_small":4,"small":8,"medium":12,"large":16,"extra_large":28,"full":9999},"elevation_dp":{"level0":0,"level1":1,"level2":3,"level3":6,"level4":8,"level5":12},"spacing_baseline_dp":4,"motion":{"easings":{"standard":"cubic-bezier(0.2, 0, 0, 1)","standard_accelerate":"cubic-bezier(0.3, 0, 1, 1)","standard_decelerate":"cubic-bezier(0, 0, 0, 1)","emphasized_accelerate":"cubic-bezier(0.3, 0, 0.8, 0.15)","emphasized_decelerate":"cubic-bezier(0.05, 0.7, 0.1, 1)"},"duration_ms":{"short1":50,"short2":100,"short3":150,"short4":200,"medium1":250,"medium2":300,"medium3":350,"medium4":400,"long1":450,"long2":500,"long3":550,"long4":600,"extra_long1":700,"extra_long2":800,"extra_long3":900,"extra_long4":1000}}},"components":{"button":{"variants":["elevated","filled","filled_tonal","outlined","text"],"shape":"pill (fully rounded by default)","signature_secondary":"filled_tonal"},"input":{"variants":["filled","outlined"],"height_dp":56,"label_style":"floating"},"card":{"variants":["elevated (level1)","filled (surface-container-highest)","outlined (1dp outline, level0)"],"default_radius_dp":12},"fab":{"sizes_dp":{"small":40,"regular":56,"large":96},"extended_with_label":true,"default_elevation":3},"chip":{"variants":["assist","filter","input","suggestion"],"height_dp":32,"radius_dp":8}},"do":["Generate your palette from a single seed using the HCT model.","Always pair X with on_X for contrast (never raw hex).","Use the surface-tint overlay for elevation, not just shadow."],"dont":["Don't hard-code the baseline scheme as 'the Material palette' — it's just one example.","Don't square the corners — pill-shaped buttons are core to M3.","Don't conflate M3 with M2 — they're substantially different systems."],"provenance":{"scanned_from":["https://m3.material.io/styles/color/roles","https://m3.material.io/styles/color/system/overview","https://m3.material.io/styles/typography/type-scale-tokens","https://m3.material.io/styles/shape/corner-radius-scale","https://m3.material.io/styles/elevation/overview","https://m3.material.io/styles/motion/easing-and-duration/tokens-specs","https://developer.android.com/develop/ui/compose/designsystems/material3"],"scanned_at":"2026-05-25","confidence":"high","notes":"Baseline scheme (seed ≈ #6750A4) is M3's documented default. For real products, generate palettes dynamically — these values are illustrative, not prescriptive."}}}