Brand guide / Design System

Graphics

Shapes and symbols

Circular shapes

The circle is a core element of the Techstep brand and logo. It reflects Techstep’s dedication to delivering complete and circular mobile technology solutions. Rooted in our motto, ‘We make mobile technology work for you,’ it illustrates how we expertly integrate devices, services, and support to create cohesive, end-to-end solutions.

shapes-brandbook-2.0

Rounded square shapes

Derived from the shape of circle and digital device screens, rounded rectangles signify technology, user-friendly experiences, and modernity.

 

02_shapes-brandbook-2.0

Grids and patterns

Our visual identity features pattern shapes that integrate rounded lines and grids using core elements like circles. These components work together to create intricate designs that enhance our brand’s visual appeal. The combination of lines and circle grids ensures our visuals are both aesthetically pleasing and functional, providing clear pathways and focal points. These shapes can be dynamic or static, adding versatility to our design language.

patterns-shapes-brandbook-2.0

Pattern backgrounds

Use colors, patterns, and core elements to create distinctive and versatile brand backgrounds that reinforce Techstep's identity.
02_patterns-shapes-brandbook-2.0

Iconography

 
Open-source Google Material Icons Library:

graphics-iconography

 

Custom-made icons:
Right-click to download

Techstep_arrow-in-circle

 

Techstep_arrow

 

 

Guidance

A few handy tips to help you on your way…

01_graphics-guide-brand.02_02

Incorporate gradients, brand shapes, shadows, cut-outs, and overlays to maintaina modern, cohesive aesthetic and emphasize the message.

03_graphics-guide-brand.02_v2
Use stylised icons and infographic illustrations to reinforce messages visually.
04_graphics-guide-brand.02

Highlight relevant hardware and software solutions in graphics to align with Techstep’s expertise.

02_graphics-guide-brand.02

Avoid mixing messages and using too many graphic assets in a single visual. Graphic elements should be supportive, ensuring they enhance the main content/message without overwhelming it.