Skip to content
UI Kit
Accent color

Visuals

Pictures for your pages, drawn in code

Device mockups, motion graphics and illustrations. They take your content, follow light and dark mode and your accent, and install like every component.

2 components · 16 variants

Mockups

Browser windows, phones, laptops and device scenes with your content inside.

All Mockups
Live previewMockup scenes · Desktop and phoneCode

3 components · 16 variants

Campaign mockups

Social posts, emails and store screenshots as pictures for your pages, without any network or store mark.

All Campaign mockups
Live previewSocial post mockup · Picture postCodeOpen in Studio
  • Social posts as pictures for your page, without the mark of any network. Picture posts, text posts, stories, carousels, video reels and a profile grid. Like by double tap, save, follow, swipe the slides and tap through stories.

  • Email mockup

    5 variants

    Emails as pictures for your page. A newsletter in a mail window, the inbox where it arrives, an order confirmation, the mail on a phone and a welcome series. Built from JSON blocks, so the mockup shows your real mail.

  • The tall frames with a headline and a phone that app pages show in a row, without any store mark. Captions, a panorama across all frames, tilted phones, pop-up notes and wide tablet frames. The row scrolls with drag, arrows and the keyboard.

4 components · 12 variants

Animations

Motion scenes in SVG and CSS. Chats, cursors, dashboards and pages that build themselves.

All Animations
Live previewDashboard build · AnalyticsCode
  • Chat scene

    3 variants

    A conversation that writes itself. Typing dots, a composer that types and sends, cards inside messages. Nothing below ever jumps.

  • Cursor scene

    3 variants

    A pointer works through an interface, and the interface answers on the same timeline. Shows a flow without a video.

  • Dashboard build

    3 variants

    A dashboard that puts itself together in view: cards rise, numbers count, the line draws, bars grow, the ring fills. "live" keeps it streaming.

  • Page assembly

    3 variants

    Components lift out of a palette, fly to their place and land, until the page is complete and published. On its own or with the scroll.

3 components · 9 variants

Data animations

Data that flows between systems, a turning globe with arcs and pins, and networks of nodes with signals that ripple outward.

All Data animations
Live previewData flow · PipelineCode

4 components · 21 variants

Micro animations

Icons that move with meaning, status symbols that draw themselves, confetti for good moments and drawings that follow the scroll.

All Micro animations
Live previewAnimated icons · All iconsCode
  • Animated icons

    6 variants

    Sixteen icons that move with meaning when you point at them or their button. Same grid and stroke as the kit icons.

  • Checks that draw themselves, an error that shakes once, three spinners, a filling ring and a live pulse. SVG and CSS only.

  • Celebrate

    5 variants

    Moments of joy for your page, from confetti bursts and a rain over a card to fireworks, side cannons and twinkling sparkles. One fixed layer that never widens the page, theme colors, calm with reduced motion. Fire it from code, on click or when it scrolls into view.

  • Scroll drawing

    4 variants

    A line drawing that draws itself while you scroll and undraws when you scroll back. Four drawings included, any SVG paths work.

5 components · 18 variants

Graphics

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

All Graphics
Live previewSpot illustrations · The setCodeOpen in Studio
  • Annotations

    5 variants

    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.

  • 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.

  • Drawn photos

    4 variants

    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.

  • UI graphics

    2 variants

    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.

  • Maps and plans

    2 variants

    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.

3 components · 17 variants

Patterns and shapes

Background patterns, decorative shapes and image effects in the theme colors, from dots and contours to duotone and reveals.

All Patterns and shapes
Live previewShapes · CompositionCode
  • Pattern

    8 variants

    Background patterns in the theme colors. Dots, grids, lines, contour lines, grain, light fields, waves, halftone and rings, each with tone, fade, seed and a very slow drift.

  • Image effects

    5 variants

    Treatments for any picture. A duotone in the accent turns to full color on hover, reveals uncover it while you scroll, a liquid ripple runs across it, a spotlight of color moves over a gray version and slices arrive one by one. Only filter, clip-path, mask and transform move.

  • Shapes

    4 variants

    Abstract shapes for decoration, drawn in SVG with the theme colors. Blobs, rings, arches, stacks, an orbit, a wave band, a flower, a dotted sphere, a squiggle and a star burst, with calm float, spin and breathe loops.

3 components · 15 variants

Placeholders and generators

Placeholder pictures for every industry, generated logos and avatars from a seed for mockups, logo clouds and team pages.

All Placeholders and generators
Live previewPlaceholder images · All industriesCode
  • Avatars drawn from a seed, for placeholders, new accounts, demo data and comment threads. Drawn faces, geometric marks, gradient orbs with initials and pixel stamps. The same name always gives the same picture.

  • Logo generator

    5 variants

    Placeholder brands from a seed for logo clouds, mockups and case studies. Twelve families of marks, seeded wordmarks in the one typeface, lockups, stacked logos and app icons. The same name always gives the same brand, none of them looks like a real company.

  • Placeholder pictures that look like the photo that will later sit in the slot. Seventeen industries, each with several shots, a caption chip and a size hint for builders. No files, no requests.

Why drawn in code

  • Sharp at every size

    SVG and CSS scale from phone to 4K without a single blurred pixel.

  • Your colors

    Every visual follows the tokens, so dark mode and your accent apply by themselves.

  • Your content inside

    Mockups take your screens as props, graphics take your words and numbers.

Often searched

Jump to

Copied to the clipboard