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.
Visualize your breakpoints using Scarlet's media query palette. Easily add, remove and drag queries to optimize for all viewports.
Designing for today's web requires more than static mockups for desktop, tablet and phone. Scarlet lets you create live documents with breakpoints wherever your design starts to break down.
Responsive design is more than min and max breakpoints. Scarlet has full CSS3 support so you can target resolutions, orientations, capabilities and more.
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:
Open multiple views of the same document – or even different documents with shared assets – to watch DOM and CSS changes reflected instantly across pages and breakpoints.
Scarlet comes with a built-in, auto-refreshing server to connect your workspace to your physical devices. Activate it and watch updates propagate across any device on your network.
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.
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.
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.
Utilize any and all valid CSS3 rule selectors including pseudo selectors.
Make sure your rules apply properly with specificity and applicability calculations.
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.
Quickly control the semantics of your document using Scarlet's simplified markup.
Insert new elements precisely where you need them.
Design different states by forcing pseudos onto DOM elements.
Manage elements as if they were layers with drag and drop, group and rename.
We have not yet set a date. We'll let everyone know as soon as it's ready, though. Follow us or sign up for email updates to make sure you're the first to know.
Scarlet is a completely different tool. The previous version of Macaw excelled at prototyping and mockups. Scarlet is focused more on building full-fledged design systems.
Yes. Current license holders will be eligible for a discount. We'll have details on that soon.
Indeed, it was! However, it was designed by someone with an understanding of HTML, CSS and JS. That is a prerequisite for making the most of Scarlet.
Scarlet will launch on the Mac. A PC version is also in development, but it will most likely not be available at the time of initial launch.
You can use Scarlet with limited knowledge of HTML and CSS. However, you'll be able to do so much more if you understand how these languages work.
Sort of. Scarlet is a desktop application, but it's built on a traditional web stack of HTML, CSS and JS. This provides better performance, improved UX and tighter integration with the file system without sacrificing the benefits of working in an actual browser.