Elevated
Tone plus a soft shadow.
Live design engine
Material 3 Expressive
Dynamic colour, expressive motion and shape, generated live from one seed.
These settings apply to every tool on 墨玉程市.
Theme
#6750A4
#6750A4
X
Y
Tonal palettes
Each role generates 13 tones from the seed.
Colour roles
Paired on-colours keep text readable on every surface.
Components
Components
Buttons, selection, fields, and containers built from the live tokens.
Buttons
Chips
Selection
Text fields
Helper text
Helper text
Cards
Filled
Tone plus a soft shadow.
Outlined
Tone plus a soft shadow.
Progress
Styles
Styles
Typography, shape, and expressive spring motion.
Type scale
Display
Headline
Title large
Body large keeps reading comfortable.
LABEL LARGE
Shape scale
Motion
Tap the surface for spring motion with shape morphing.
Notes
Notes
Conventions for this project, for developers and agents.
Use Font Awesome 7 Free and Pro
Both the Free and Pro icon families are available in this Kit and may be used.
Do not use Font Awesome 7 Pro+
This Kit does not support the Pro+ tier, so its icons will not render.
Never name a class or variable "fab"
It is Font Awesome's brands prefix and will conflict. The floating action button here uses .m3-fab.
Avoid a bare "extended" class
It is deprecated beside Font Awesome classes. The extended FAB modifier here is .m3-fab.ext.
Size icons with Font Awesome classes
Prefer relative (fa-2xs to fa-2xl) or literal (fa-1x to fa-10x) sizes when size or alignment matters.
M3 Liquid G background
Limited to Solid, two-colour Linear, or two-colour Radial. Gradients anchor one stop to white in light modes and black in dark modes.
What 流璃 means
流璃 is drawn from 流體 (liquid) and 玻璃 (glass): a fusion of fluidity and glass built on M3 Expressive.
Liquid G / G+ defaults
M3 Liquid G+ defaults to 10px blur. Both default to a Linear gradient: Neutral 90 in light, Neutral 30 in dark; Black is always solid #000000.
Background palette
Choosing a background colour from the palette stores its tone type (e.g. Neutral 90), not a hex, so it follows the theme colour. The background palette derives from the main theme colour but is a separate palette; the theme's tonal palette is never reused for it.
Segmented controls
At compact width, an unselected segment shows only its icon and reveals its label once selected.
Privacy note
This page loads the following third-party resources:
- Font Awesome 7 Kit (kit.fontawesome.com) — icon web fonts, CSS, and loader script.
- No other external libraries, frameworks, web fonts, or APIs are used. System fonts render the text. Your theme settings stay in your browser via localStorage.
Material 3 Theme · m3_theme