Components, systematically.
A concept website for a fictional component library built on Material Design 3 — a full token system, real elevation hierarchy, and interactive components that behave like a shipped product, not a demo.
The LAYER homepage — systematic spacing, MD3 elevation, and a dashboard proof-of-product.
Overview
LAYER is a concept website for a production-grade Material Design 3 component library. Every color, radius, elevation, and motion duration is a CSS custom property — 13 semantic color pairs, 5 shape tokens, 10 elevation levels, 4 easing curves. The page itself is the proof: a hero dashboard with real data, sparklines, and an activity feed shows the components working before a single feature card appears.
“The most commercially relevant design language for SaaS and product work — done properly.”
Brief
The concept explored why most Material-inspired sites feel generic, and whether a systematic design language could be made to feel genuinely premium. The design challenge was coherence: every element on the page had to justify itself against the token system it demonstrates.
A system you can feel
Typography
- Inter 300–800 across the full MD3 type scale
- Roboto Mono for data and labels
- Material Icons Outlined for iconography
Color
- Full MD3 purple scheme — primary #6750A4
- 13 semantic pairs incl. surface containers
- Light and dark themes via token swap
Elevation
- 10 levels (dp 0–24) with authentic MD3 shadows
- Cards lift 2–4px with deeper shadows on hover
- Interactive elevation showcase
Shape & motion
- 5 radius tokens from 8px to fully round
- 4 easing curves, 3 duration tokens
- 8px spacing grid throughout
Interaction
- Segmented chart toggle with SVG path morph
- Control panel: radius, elevation, motion speed
- Ripples, snackbars, active-nav, back-to-top
The system, live
The dashboard section carries the page's signature interaction: a revenue chart with a week / month / year segmented control. Switching ranges morphs the SVG path smoothly between datasets — a small detail that proves the component system handles state without breaking a sweat.
A floating control panel takes it further: three controls adjust border radius, elevation scale, and motion speed across the entire page in real time, making the design tokens tangible to anyone who visits — not just the people who built it.
Built with
Semantic HTML5, CSS custom properties for the complete MD3 token system, vanilla JavaScript for all interactions, and SVG for the morphing chart. Zero dependencies — 398 of 412 CSS variables draw from the token system.
Honest result
A fully responsive concept demonstrating design-system thinking, component design, interaction design, and frontend discipline. It was designed and built from scratch as a personal project — LAYER is not a real product, and all data on the page is fictional placeholder content.
See it running
Open the live concept site and toggle the chart ranges — then grab the control panel. The source is public on GitHub.