Draft ES Download for Windows

Documentation

Style

How to change the look of one piece or of a whole screen.

Style packs

A pack is a family of widgets that match: each one has its own version of 39 widgets, and it changes the shape of the pieces, not only the color. Apply it to one widget, or to the whole page from the Variants tab. It can follow the project's accent color.

The Graphite style pack on a heading, a field, a list row, a tag, a switch and a button.

Graphite

Black on light gray, white cards with big corners and pill buttons. Made for finance and dashboards.

The Forest style pack on a heading, a field, a list row, a tag, a switch and a button.

Forest

Forest green and sage, pill fields and tags with a thin border. Calm, for health or natural products.

The Ember style pack on a heading, a field, a list row, a tag, a switch and a button.

Ember

Ember red to orange with light pill controls. Energetic, for modern finance.

The Leaf style pack on a heading, a field, a list row, a tag, a switch and a button.

Leaf

A bright green, with black pill buttons and almost white fields. For banking and clean apps.

The Silver style pack on a heading, a field, a list row, a tag, a switch and a button.

Silver

Silver grays, small corners and headlines in a monospaced font. For technical tools.

The Clinic style pack on a heading, a field, a list row, a tag, a switch and a button.

Clinic

Warm, soft tones, pill fields and tags. For care, health and services.

The Editorial style pack on a heading, a field, a list row, a tag, a switch and a button.

Editorial

Serif headlines on cream, and a black button with soft corners. For fashion and content.

The Voltio style pack on a heading, a field, a list row, a tag, a switch and a button.

Voltio

Black and electric lime, with a lime button with black text. For mobility and energy.

More ways to style

Text

Google Fonts typefaces, six weights, italic, underline, strikethrough and alignment. Also two-tone text: paint the decimals of a price, the first word or the last one in another color.

Color, gradients and shadows

A color picker by hue, saturation and brightness, or by hex code. Gradients on backgrounds and buttons, opacity, rounded corners and three kinds of shadow: the usual one, a hard one and a color glow.

Animated borders and glass

A border with a rotating gradient, a pulsing glow or a spark that runs along the outline. And a glass effect: frames, cards, bars, buttons and fields blur what is behind them over a semi-transparent background.

Micro-interactions

Make a widget react when it is tapped, when it appears or when the mouse passes over: its opacity, size, rotation or position change, quick, smooth or with a bounce. You see it in the preview.

Icons, logos and photos

More than 6,600 Material icons in three styles and 64 color logos of payments, crypto, flags and social networks. And you upload your own photos from your computer (up to 8 MB each).

Charts and calendars

Bar, horizontal bar, line, area, pie, donut and radar charts, with up to three series and a tap that highlights. Month and week calendars, a date picker and a month with dots.

A theme per project

The accent color and the base colors of the project are set once, and the style packs can follow them.