Problem/Motivation
In Proposal: A Style Guide for Seven, we set out to overhaul the visual style of Seven. This was met with a lot of great feedback, which we have largely incorporated. However much of the feedback was in line with implementation details, that we need to hash out in the core queue.
At large the goals of this style change is to:
- Identify Drupal core values that we can use to determine the look & feel for the Seven theme.
- Unify the visual language in Seven and ensure the overall look-and-feel supports the core values.
- Identify the visual and UI patterns used by Drupal core so that they form a conscious, shared language for us to built upon.
- Provide guidelines and rationale for others (e.g., contrib) to build upon as new interactions, styles and platforms emerge.
We took a holistic approach looking at all of the items and defining our basic style principles and then diving deep into the actual elements. This was a process of several dozens of hours across r5yn, Bojhan and yoroy. In the end this resulted in the presented guide, much of it is still in flux as we fill in the details. All source files can be found in the groups discussion.
Summary: Style principles
- A primarily light tone to appear bright and open
- A neutral, desaturated color palette, both friendly and calming.
- Legible, readable typography. Employs a typeface with some humanist characteristics in a few weights and styles.
- Crisp lines and sufficient contrast, but not jarring. No large areas of bold colour.
- Bold shapes reserved for headings and action elements.
- Some rounded forms to communicate friendliness and naturalness.
- Little or no ornamentation: no patterns, textures, gradients or shadow/emboss effects – except to communicate affordances.
- Borders and background tone as grouping devices only: to clarify relationships and emphasize important elements.
- Generous and consistent use of whitespace.
- Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile; gracious rather than opinionated; confident without overspeaking.
Remaining tasks
- Issues need to be made for each element
- For these issues we need initial patches
- All of this needs Accessibility / Mobile review
User interface changes
Most, if not all elements will be changed - from the styling of the overlay, to the roundness of buttons. Our aim is to bring one consistent style that upon implementation can be documented and maintained as strategy.
API changes
There will hopefully be no API changes required for any of these patches, however we will see conflicts with the currently ongoing Twig work.