What is Flow?
The Sage Flow inspires our brand identity - a system always in rhythm, embodying a calm efficiency across tasks; a state of perpetual forward motion.
It creates our distinctive brand world and embodies the intuitive simplicity and ease of use and experience Sage provides, giving people in business the confidence they need to find their flow.
The Flow represents the visual heartbeat of Sage, it inspires the core elements of the visual identity system in a way that embodies intuitive simplicity and calm efficiency across tasks.
Constructing the flow
The 2 styles that can be used are:
- a solid brilliant green flow line that runs along 1 or more paths
- a flow line with a green head and varying gradient within the tail that runs along a path
Solid flow
A solid flow will fade in as a circular capsule, trace the desired path, and then fade out at the end or disappear from screen. The tail should elongate as the head speeds up and then retract as the head slows down.
1.1 Solid Flow
Example of Solid Flow
Gradient flow
A gradient flow will fade in as a capsule. It will then begin moving with the tail as a 3 tone gradient from darker jade green to brilliant green. When reaching full speed and length, the tail will become fully brilliant green. The tail should elongate as the head speeds up and then retract as the head slows down.
This effect can be achieved in After Effects using a tritone gradient, echo effects and dark/light fill overlay.
3.1 Gradient Flow
Example of Gradient Flow
Usage of the Flow
There are a number of overarching areas where the flow is used within Web.
These build off the flow definitions in the brand hub that can be found here, but also contain a number of key dos and don’ts for consistent implementation across pages.
Sometimes the flow elements that work well in other areas such as video and marketing can translate well to a number of other use cases, but not always.
The areas that are commonly utilised for the Web Flow alongside the flow itself are:
- Patterns & Components
- Expression
- Dynamic Pattern
- Illustration
Best practices
| Components & Patterns | Expressions |
| Dynamic Pattern | Illustrations |
It’s important to note that these are two key areas where the flow needs to be very carefully applied to the Web Environment.
CautionThe animated Sage logo or wordmark can be used on hover - but not within the top navigation bar.
CautionAnimated versions of the detailed iconography can be used individually, but multiple icons should not animate at the same time.
