Skip to content
UI Kit
Accent color

Graphics

Drawn app screens, photos, maps, spot illustrations and hand-drawn annotations for every industry.

5 components · 18 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

annotations

Annotations

Hand-drawn marks that point at things. Arrows in five shapes, brackets, checks, crosses, strikes, emphasis lines, numbered callouts and notes draw themselves in as they scroll into view, each with its own slight wobble.

Props and details · Annotations

Hero callout

A circle draws around the key word, a note and a curled arrow point at the main button. On phones the note sits above the button and the arrow points down.

Open in Studio

Annotated screenshot

Numbered pins on a screenshot with notes beside it. Hover or focus a note and its pin grows while the others stop pulsing. Phones put the notes under the picture.

Open in Studio

Pricing marks

The old price is struck through, the features get their checks one after another and a note with an arrow names the plan most people take.

Open in Studio

Checklist

A launch list where checks and strikes draw in one after another as it scrolls into view, a cross for what was dropped and a bracket that groups the first part.

Open in Studio

All marks

Every mark of the set on one sheet, with its code. Draw again replays them all.

Open in Studio

spot-illustrations

Spot illustrations

Sixteen small drawings in one style for features, empty states, steps and confirmations. Security, speed, growth, team, delivery, support, search, inbox, files, calendar, payments, success, offline, upload, location and ideas. They take the theme colors and assemble as they scroll in.

Props and details · Spot illustrations

The set

All sixteen motifs with their names. Each one assembles part by part as it scrolls in, its accent part lifts on hover.

Open in Studio

Feature cards

Three features with a drawing each. The cards rise one after another, hover lifts the card and moves its drawing.

Open in Studio

Empty states

A search without results, an empty inbox and a first upload, each with a drawing, a clear line and the next step. The switch shows them in turn.

Open in Studio

Steps

Three steps with drawings, joined by a line that fills while you scroll. Phones stack them.

Open in Studio

Confirmation

One large drawing above the message of a confirmation page, under a soft light. The drawing assembles first, the rest follows.

Open in Studio

photos

Drawn photos

Photographs drawn in SVG for image slots. Dishes, drinks, places, houses, rooms, portraits, covers and brand boards in natural colours, plus tonal scenes that follow the theme.

Props and details · Drawn photos

Food and drinks

Eight dishes from above and four drinks. The table switch changes the surface under every plate.

Places and houses

A valley at dusk that drifts while you scroll, a café, a room whose window view you can switch, a workshop and four houses.

People

A team of eight as colour portraits or as tonal portraits in the theme. Seeds pick hair, skin, clothes and glasses.

Covers and stages

A conference stage whose slide title you can type, six course covers and two brand boards.

graphics

UI graphics

Drawn app screens, dashboards, phone screens, invented logos, press logos, app marks, avatars, a signature and a code. In the theme colors, ready for any image slot.

Props and details · UI graphics

App screens

One app in several views, a dashboard and a phone screen. The view switch swaps the screen, the window grows into place while you scroll.

Logos and marks

Eighteen invented company logos, six press logos, app marks, avatars, a signature that draws itself and a code.

maps

Maps and plans

A district map for your own pins, a city map with a label, a small map for contact areas and a floor plan with room names. Drawn in the theme colors.

Props and details · Maps and plans

City maps

Pins on a district map, tied to a list. The active pin pulses and shows its name, the map grows into place while you scroll.

Floor plan

A floor plan with room names in the page language. Point at a room in the list and it lights up in the plan.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Graphics on a page.

Often searched

Jump to

Copied to the clipboard