Surfaces, Not Shadows
A Kanso Collective demo inspired by Material Design: fictional interface content, not an official Google product.
Core Principles
Tonal Elevation
Surfaces are separated by color, not shadows. Higher surfaces receive lighter tints of the primary color.
Color Roles
Primary for main actions, Secondary for less prominent UI, Surface for backgrounds, each with high contrast pairings.
8dp Grid System
All spacing, padding, and margins are multiples of 8 (8px, 16px, 24px). This creates professional print-design feel.
Ripple Effect
Every tap creates a ripple from the point of contact, providing instant tactile feedback and spatial awareness.
Shared Transitions
Elements smoothly expand and transform rather than popping in. Motion explains UI hierarchy and relationships.
No Skeuomorphism
Avoid realistic textures like leather or wood. Material is a flat, solid sheet of digital color, no 3D effects.
What is Material Design?
A Visual Language
Material Design is Google's design system that creates a unified experience across platforms and device sizes. It's inspired by the physical world and its textures, including how objects reflect light and cast shadows.
Design Goals
- Create: A visual language that synthesizes classic design principles with innovation
- Develop: A single underlying system for unified experiences
- Maintain: Adaptability across platforms and screen sizes
Material Metaphor
Material is a metaphor for the rationalization of space and motion. It's grounded in tactile reality, inspired by paper and ink, yet technologically advanced and open to imagination.
Bold, Graphic, Intentional
The foundational elements are based on print design: typography, grids, space, scale, color, and imagery. These elements create hierarchy, meaning, and focus.
Interactive Components
Buttons
All buttons feature ripple effects from the point of contact.
Elevation Levels
Surfaces at different levels use tonal colors, not shadows.
8dp Grid
All measurements are multiples of 8 pixels.
Material Design Patterns
Common UI patterns that follow Material Design guidelines
Navigation Patterns
Material Design provides multiple navigation patterns for different screen sizes and use cases.
Best Practice: Use navigation rail for desktop and bottom navigation for mobile. Navigation drawer can supplement both.
Dynamic Color System
Material Design 3 introduces dynamic color, which generates harmonious color schemes from a single source color.
Key Concept: Each color role has container variants for surfaces and on-colors for text.
Typography Scale
Material Design uses a type scale with distinct roles for different content types.
Typography: Roboto and Roboto Flex are the default typefaces.
State Layers & Feedback
Interactive elements use state layers to communicate states like hover, focus, and pressed.
Ripple Effect: The signature Material Design interaction that originates from touch point.
Tonal Elevation
Material Design 3 uses tonal elevation instead of shadows for most surfaces.
Principle: Higher surfaces get lighter tints, not shadows. Only floating elements like FABs and dialogs use shadows.
Motion & Transitions
Motion in Material Design is purposeful and helps users understand the interface.
Remember: Motion should feel natural and reinforce hierarchy.
Material is Metaphor
Material Design is based on a simple principle: the physical world and how objects move and interact. But unlike the real world, Material doesn't simulate depth with shadows; it uses color.
A surface that's "closer" to you doesn't cast a shadow. Instead, it receives a lighter tint of your primary color. This is called tonal elevation.
Every element should feel like it's made of a solid, flat sheet of digital "material", no wood grain, no leather texture, no 3D extrusion. Just clean, purposeful color and motion.
"Shadows are for objects that truly float, like dialogs and menus. Everything else is separated by color, not depth."
Learn More
Explore official Material Design resources and documentation