Panel illustrations

Illustrations are more complex than icons, helps to reinforce the meaning of the text in a simple and creative way. Illustrations capture ideas and bring the user a better experience.

Illustration styles have been carefully considered to maintain consistency, are based in a solid colors combined with outlines to keep the design fresh and clean. Flat style makes the message easy to digest and understand.

Illustrations

Clean linear type illustration. It must be implemented with the described color palette.

illustration

Illustration

Linear type.

illustration

You don't have sites saved

Click on the "create" button, complete the basic and operation information and you're done!

How to use

Example of an empty state

<div class="flex flex-col sm:flex-col md:flex-col lg:flex-row">
    <img alt="illustration" src="{{ url('/assets/images/illustration-example.svg') }}" class="m-auto block">
    <div class="sm:ml-5">
        <p class="font-bold">You don't have sites saved<p>
        <p class="text-xs">Click on the "create" button, complete the basic and operation information and you're done!</p>
        <button class="btn btn-white">Create</button>
    </div>
</div>

Illustrated icons

illustration