---
title: "Éclair 1.8: 12 art directions for a site like no other"
description: "Éclair 1.8 adds 12 art directions, an AI that imagines yours and a Design score in the editor. Guaranteed contrast, and Lighthouse still at 100."
url: "https://eclaircms.org/blog/eclair-1-8-art-directions"
lang: "en"
author: "Thierry Gustin"
published: "2026-11-01"
updated: "2026-11-01"
---

# Éclair 1.8: 12 art directions for a site like no other

> **Key takeaways** — Released on November 1, 2026, Éclair 1.8 adds 12 art directions: palette, heading typeface, banner and layouts designed around a visual world, to adjust freely. The AI can imagine three based on your business, for about $0.03, and a Design score joins SEO and GEO in the editor. Contrast is guaranteed, the typeface is served by your site and Lighthouse stays at 100.

Éclair 1.8 has been available since November 1, 2026. Until now, a theme changed colors; an **art direction** changes your site’s entire visual world. You pick one of 12, adjust it, or ask the AI to imagine yours. And a new **Design score** helps you keep your pages sharp.

## What’s new in Éclair 1.8?

| New feature | What it gives you |
| --- | --- |
| 12 art directions | A complete visual world: palette, heading typeface, banner, features and icons |
| Adjust the direction | 5 colors, 18 heading typefaces, case, corners, spacing, cards and banner |
| Imagine my direction with AI | Three genuinely different directions, drawn from your business, for about $0.03 |
| Design score | A third score in the editor, next to SEO and GEO |
| Under the hood | Guaranteed contrast, typeface served by your site, 479 KB archive, 550 checks |

## What is an art direction?

![The same ceramics site in six art directions: Nocturne, Gallery, Clay, Riviera, Playtime and Press](https://eclaircms.org/media/2026/11/en-art-directions.webp)
*The same site in six of the twelve directions: Nocturne, Gallery, Clay, Riviera, Playtime and Press.*

A theme changes colors; an art direction changes the entire visual world: palette, heading typeface, heading size, corners, spacing, banner composition, features layout, color bands and icons. Each one starts from a concrete idea, not an adjective:

| Direction | Visual world | Heading typeface |
| --- | --- | --- |
| **Nocturne** | The city at night: deep blue, amber light | Big Shoulders Display, all caps |
| **Gallery** | White walls, black labels, a signage red | Familjen Grotesk |
| **Clay** | The ceramics studio: sand, terracotta, soft shapes | Young Serif |
| **Botanical** | The herbarium and the greenhouse: deep green, sage paper | DM Serif Display |
| **Poster** | The Swiss poster: black on off-white, bright orange | Archivo Black, all caps |
| **Riviera** | The seaside: navy blue, pale sky, coral | Gloock |
| **Chambers** | The letterhead: navy ink, burgundy, fine rules | Libre Caslon Display |
| **Neon** | The creative screen at night: near-black, lime green | Unbounded |
| **Gentle** | The treatment room: powder pink, plum, plenty of air | Cormorant Garamond |
| **Worksite** | Concrete, safety yellow, condensed signage | Barlow Condensed, all caps |
| **Playtime** | The schoolyard: sky blue, tomato red, round letters | Fredoka |
| **Press** | The morning paper: newsprint, front-page red | Newsreader |

## How do you choose and adjust your direction?

1. In **Settings › Appearance**, choose **Art direction** instead of **Classic theme**.
2. Click one of the 12 cards and watch the **live preview**: your real site, on desktop or mobile.
3. Open **Adjust the direction** to make it your own, then save: nothing is published until you do.

The Adjust panel covers everything, to mix and match freely:

- **5 colors**: background, bands and cards, text, secondary text, accent for buttons and links.
- **Heading font**: 18 typefaces chosen for their personality, or a system font. The body text stays in a system font, with nothing to download.
- **Case**, **heading size**, **corners** (square, softened, round) and **spacing** (compact, normal, airy).
- **Cards** with a thin border, a flat color or a drop shadow, and a **home banner** side by side, poster, full-bleed, editorial or centered.
- **Features** as cards, rows or columns, **sections** plain or in color bands, and line **icons** in place of emoji.

You can go back to the classic theme whenever you like: its settings are waiting for you, untouched.

## How does the AI imagine your direction?

![Settings › Appearance: the choice between art direction and classic theme, then the cards of the 12 directions](https://eclaircms.org/media/2026/11/en-direction-settings.webp)
*Settings › Appearance: an art direction or the classic theme, then the 12 cards.*

When the AI assistant is turned on, **Imagine my direction with AI** appears below the cards. Describe your business, your audience and the mood you’re after in one or two sentences, for example “organic neighborhood bakery in Lyon, family customers, warm but modern”, then click **Suggest 3 directions**.

The AI also reads your site’s description and your editorial profile. It starts from the concrete world of your business (places, materials, objects, light), gives each suggestion a precise reference and suggests **three genuinely different directions**, steering clear of your category’s default choice and the tics of AI-generated design. This method is adapted from [Impeccable](https://github.com/pbakaus/impeccable), by Paul Bakaus.

The three suggestions appear first among the cards, marked ✦: you try them in the preview, adjust, 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 about $0.03 for all three suggestions with Claude Sonnet 5.5, taken from the assistant’s budget.

## What is the Design score?

In the editor, the **Analysis** tab now shows a third ring, **Design**, next to SEO and GEO. It checks that your page holds up visually:

- **subheadings** in a clear hierarchy, short and with no decorative emoji;
- a **banner** with a short title and a call-to-action button;
- measured **calls to action**, three buttons at most;
- a **Features** block with 3 to 6 described items;
- **text** with no sentences in all caps, no empty superlatives, no repeated passage and no stretch of more than 350 words without a break.

The Analysis tab’s score is the average of the three rings: a good page gets found, gets cited and is pleasant to read.

## Does your site stay fast and readable?

Yes, and that’s guaranteed by design:

- **Guaranteed WCAG contrast**: whatever the colors, chosen by you or by the AI, Éclair adjusts the text to 7:1 against the background, and the secondary text, links and buttons to 4.5:1. This is checked on 20,000 randomly generated palettes.
- **No third-party service**: the heading typeface (12 to 27 KB) is downloaded only once by your server, then served by your site and preloaded. Your visitors don’t contact Google Fonts or anyone else.
- **Always 100/100**: Lighthouse gives 100 in all four categories, including with the Nocturne, Riviera, Press and Poster directions.
- **Nothing breaks**: the HTML doesn’t change, so neither do SEO, structured data or accessibility. The 6 classic themes stay identical down to the byte.

## How do you update to Éclair 1.8?

The procedure hasn’t changed, and it doesn’t touch your content:

1. In **Security › Backup**, click **Download a backup**.
2. Via FTP, delete the `app/` and `assets/` folders, then upload the ones from the new version along with `index.php` and `.htaccess`.
3. Don’t touch `data/` (content, settings, accounts, custom CSS) or `media/` (images).
4. In the admin, click **Settings › Advanced › Clear cache**.

There’s just one thing to check: Éclair 1.8 requires the PHP **zlib** extension, enabled by default almost everywhere. And if your host blocks outgoing connections, a direction’s typeface can’t be downloaded: Éclair lets you know and uses a fallback font from the same family. The [Updating, backing up, moving](https://eclaircms.org/en/documentation/updates) guide details each step, and the 479 KB archive is waiting for you on the [Download](https://eclaircms.org/en/download) page.

## What comes next?

As with previous versions, your feedback will shape what comes next. An idea, a bug, a question? Write to me through the [contact page](https://eclaircms.org/en/contact) or open an issue on [GitHub](https://github.com/Jacckisback/eclair-cms/issues).

## Frequently asked questions about Éclair 1.8

### Do art directions slow down my site?

No. Only the rules your direction needs are inlined in the page, and the heading typeface is served by your site and preloaded. Lighthouse stays at 100 in all four categories.

### Does my current theme go away?

No. The 6 classic themes are still there, identical down to the byte. You can switch from a direction to the classic theme whenever you like, and each one keeps its settings.

### Do I need the AI assistant to use the directions?

No. The 12 directions and the Adjust panel work without AI. Only “Imagine my direction with AI” requires the assistant, with your Claude or ChatGPT key.

### Do my visitors connect to Google Fonts?

No. Your server downloads the typeface only once from Fontsource (SIL Open Font License), then serves it itself: no requests to a third-party service.

### Can I go straight from 1.6 to 1.8?

Yes: the procedure is the same whatever version you have, and 1.8 includes the new features of the previous versions. Just make a backup first.

[Download Éclair 1.8.0](https://eclaircms.org/en/download)

[Read the themes and directions guide](https://eclaircms.org/en/documentation/themes)

— Thierry Gustin, Créateur d’Éclair CMS, consultant SEO et formateur IA · November 1, 2026