Art directions and Design score

An art direction gives your site a complete visual world: palette, heading typeface, heading size, corners, banner layout, features layout. This lesson teaches you how to choose among the 12 directions, adjust them, have the AI imagine three for you and aim for 100 on the Design score, with Atelier Nova as the example.

Theme or art direction: what changes

A theme mostly changes colors; an art direction changes the entire visual world, starting from a concrete idea: the city at night, the ceramics studio, the morning paper. The HTML doesn't move: URLs and structured data stay the same.

The 12 directions and their visual worlds

For Atelier Nova, Clay seems made for it: sand background, terracotta accent, the Young Serif typeface, drop-shadow cards and the “Editorial: portrait image” banner. Don't stop at the name: Riviera or Press would also work, depending on the tone you want.

How do you choose and adjust an art direction?

1. Open Settings › Appearance and, under Site style, choose Art direction.
2. Click one of the 12 cards: the live preview shows your real site, on Desktop or Mobile.
3. Expand Adjust the direction: colors, typefaces, layouts and change whatever you like. The preview follows each change.
4. Click Save. Nothing is published before that.

The 18 heading typefaces each have their own personality. Serif: Bodoni Moda, Cormorant Garamond, DM Serif Display, Young Serif, Gloock, Libre Caslon Display, Newsreader. Slab serif: Zilla Slab. Sans serif: Bricolage Grotesque, Schibsted Grotesk, Familjen Grotesk, Archivo Black, Syne, Unbounded, Sora. Condensed: Big Shoulders Display, Barlow Condensed. Rounded: Fredoka.

Contrast and speed: what Éclair guarantees

Always readable: whatever colors are chosen, by you or by the AI, Éclair adjusts the text to reach a 7:1 contrast against the background, and the secondary text, links and buttons to reach 4.5:1, including on backgrounds tinted with the accent color (badges, menu, highlighting). This calculation was verified on 20,000 randomly drawn palettes.

Always fast: the heading typeface, 12 to 27 KB, is downloaded only once by your server from Fontsource (under the SIL Open Font License), stored in media/fonts/, then served by your site and preloaded. Your visitors don't call any third-party service and the layout doesn't jump. Only the CSS rules your direction needs are inlined in the page. Measured with Lighthouse: 100 in all four categories with Nocturne, Riviera, Press and Poster.

Imagine my direction with AI

When the AI assistant is turned on, the Imagine my direction with AI field appears below the cards. Describe your business, your audience and the mood you're after in one or two sentences, then click Suggest 3 directions. Here is Atelier Nova's description:

Ceramics studio in Lyon, classes for adult beginners and made-to-order pieces.
A calm, bright mood, somewhere between raw material and precise gestures.

The AI also reads your site's description and your editorial profile, then follows Impeccable's method:

1. start from the concrete world of the business: places, materials, objects, light;
2. give each suggestion a precise reference;
3. suggest three genuinely different directions;
4. avoid the category's clichés and the tics of “AI-generated design”.

The three suggestions are added at the top of the cards, marked ✦: click one to see it in the preview, adjust it, then save the one you like. The AI only picks from Éclair's settings and never writes CSS: each suggestion is checked and its contrast corrected. The estimated cost is shown with the field, about $0.03 with Claude Sonnet 5.5, taken from the assistant's budget.

How do you aim for 100 on the Design score?

In the editor, the Analysis tab shows a third ring, Design, next to SEO and GEO. It checks that the page holds up visually. The tab's score is the average of the three rings, and the list puts the red items first.

Empty buzzwords are the vague superlatives and advertising jargon that the analysis spots in the page's language: replace them with a concrete fact. For features, choose emoji that have a line-drawn icon: an emoji with no equivalent shows nothing, and the analysis points it out.

Example: with Clay, Atelier Nova's home page shows “Add an image to the banner: your art direction's layout needs one.” The editorial layout expects a portrait photo: once a photo of a potter's wheel is added, the item turns green.

The method and safeguards of the Design score, like those of the AI's suggestions, are adapted from Impeccable, by Paul Bakaus, released under the Apache 2.0 license.

Key points

• An art direction changes the site's complete visual world, without touching the HTML.
• The 12 directions can be adjusted: 5 colors, 18 heading typefaces, banner and features layouts.
• Contrast is guaranteed: 7:1 for text, 4.5:1 for everything else.
• The typeface is downloaded once by your server, then served by your site.
• Read the Design score in the Analysis tab, and fix the red items first.

Going further

• Themes and appearance: the shared settings, such as the header, lists, logo and footer.
• Custom CSS: touch up a detail that the direction's settings don't cover.
• Performance: staying at 100 out of 100: the weight of fonts and CSS, measured and explained.
• Sources: the Impeccable method by Paul Bakaus, and the Fontsource catalog the typefaces come from.

All the lessons of this path