-
-
Notifications
You must be signed in to change notification settings - Fork 76
Design System
Note: This is very work-in-progress. We are sort of reverse-engineering these first from the existing stylesheet and conventions, and then plan to iterate and solidify it when working on a greenfield version. Things will likely be very disorganized and flow-of-consciousness as we iterate!
Internally, the elementary stylesheet has multiple shadow elevation levels. The higher the level, the "higher" (or closer to the user) the element is. Thus, its shadows are larger. As shadow level goes down, the element gets further from the user and the light source (and closer to the desktop), so shadows get smaller.
We also use multiple background levels. You can think of this the conceptual "distance" from the content: content has a low background level, while related sidebars have a higher background level, and titlebars have the highest background level. Implementation-wise, lower background levels are lighter and higher are darker.
A transient element is something the user is expected to use briefly to accomplish a straightforward task—usually with just one or two actions. In elementary OS, this includes context menus, popovers, dialogs, and notifications. They appear on top of other windows and are short-lived.
Because they're more ephemeral, we display transient elements in a lighter and flatter style than other elements—we're inspired by a piece of paper that's on top of your other work items and quickly dealt with.
We use both shape and color in header bar action icons because it helps with pattern recognition. We often include rich detail both because it's nice to look at and because it can better help us convey more complex actions than if we were to use symbolic (simpler, monochromatic) icons.