Home

Design Tips

This page summarizes the major differences between the Material Design and this project.

Foreground Opacity

Material Design

	Dark text	Light text
Primary	87%	100%
Secondary	54%	70%
Hint / Disabled	38%	50%
Dividers	12%	12%
Other elements	38%	38%

In Material Design, opacity is fixed by the state.

Flat-Plat

	Dark text	Light text	Colored text
Primary	80%	100%	100%
Secondary	× 0.75	× 0.75	100%
Tertiary	× 0.60	× 0.60	100%
Disabled	× 0.40	× 0.40	× 0.40
Tracks	× 0.30	× 0.30	× 0.30

In Flat-Plat, opacity is obtained a ratio by the state.

Ex. Disabled Secondary Track Color with Dark Text
(which is used by disabled buttons background in light theme):

rgba(0, 0, 0, 0.80) * 0.75 * 0.30 * 0.40 = rgba(0, 0, 0, 0.072)

• Secondary text is mainly used for the clickable content (e.g. buttons, tabs).

• Tertiary text is mainly used for the unclickable content (e.g. hints).

• Hint and disabled text are distinguished.

Background Opacity

Use the three stages of opacity as needed.

	Opacity	Examples
Higher	0.9	OSDs, Tooltips
Middle	0.6	Top panel
Lower	0.3	Tracks, Ripples