Scarlet

the live design
environment

Web design
unleashed

Isn't it time we had a proper web design tool? Image editors served us well during the early days, but they're a hack for real web design. WYSIWYG editors are clunky, out of date and produce notoriously unusable code. We need a new breed of tool that embraces everything the web is today. We believe it's time for a Live Design Environment (LDE) and we're dedicated to building it. We call it Scarlet and, whether you’re a web designer or a front-end developer, we think it will change the way you work.

Designed for
responsive

The web is no longer a fixed canvas. Designing for it requires intelligent, adaptive systems. Scarlet brings you a slew of innovations to make responsive design easier.

Your
third eye

The web is a fluid medium destined for viewports of all shapes, sizes and capabilities. Scarlet makes designing for myriad environments simpler with two especially useful features:

It's Alive!

Image editors are great for designing on two-dimensional planes, but the web is a multi-dimensional medium – deserving of intentional design decisions on every plane. Scarlet unlocks the other dimensions of the web by letting you work with 3D space, animations and interactions all within one design environment.

New Moon
Waxing Crescent
First Quarter
Waxing Gibbous
Full Moon
Waning Gibbous
Last Quarter
Waning Crescent
New Moon

Let your
work flow

The web is open. So is Scarlet. It operates directly on HTML, CSS and JavaScript files. Scarlet lets you work visually, but you can also peek under the hood with the built-in text editor to take full-control of your document. But there's more. Scarlet also features bidirectional editing, which means you can work on the same file in your favorite text editor and everything within the design environment will stay in sync.

Style…
like a boss

Scarlet has advanced CSS3 support and helps you work with all of the cutting edge browser features like CSS3D, transforms, blend modes and filters. More importantly, it helps you design intelligent rule systems with innovations like rule distribution, drag and drop rule operations, inline to rule translation, specificity and applicability calculations and other nerdy-slash-useful things.

Intelligent Rule Helpers

Scarlet gives you insight into your document with helpful rule calculations so you can see how many elements will be affected by it and what its specificity score is.

  • Advanced
    Rules

    Utilize any and all valid CSS3 rule selectors including pseudo selectors.

  • Rule
    Insight

    Make sure your rules apply properly with specificity and applicability calculations.

Semantics
in a snap

The web thrives on structure and semantics. Scarlet gives you intuitive control over them with its revolutionary outline panel, which lets you rename and reorder elements as if they were layers in an image editor. This is how working with HTML should be.

Shorthand Syntax

Quickly control the semantics of your document using Scarlet's simplified markup.

Add Pad

Insert new elements precisely where you need them.

Pseudo States

Design different states by forcing pseudos onto DOM elements.

Drag & Drop

Manage elements as if they were layers with drag and drop, group and rename.

FAQs