# Entre-espace brandbook

> The entre-espace brandbook: guidelines, brand and design system, readable by a human as well as by an agent.

Source: https://www.entre-espace.net/en/brandbook

This brandbook gathers what makes entre-espace: why the name, what the Manifesto stands for, the postures and principles that guide design and the use of AI, then the brand (the voice, the logo) and the design system that carries it on screen.

### Three parts

- **Guidelines**: the name, the Manifesto and the methodology of the object, design postures and principles, AI postures and principles.
- **The Entre-espace brand**: the tone of voice and the logo.
- **Design system**: typography, colours, layout, components and accessibility.

### For a human, for an agent

Each page reads from top to bottom: an intention, rules, then what to do and what to avoid. Exact values (colours, sizes, spacing) are given in plain text, never only in an image.

An agent producing for entre-espace (text, page, visual) starts from two files:

- [the full brandbook in Markdown](/en/brandbook.md), a single page, without formatting;
- [the design system tokens in JSON](/brandbook/tokens.json), which mirror the site's CSS variables (keys in French).


Pages marked **Proposal** were drafted from Denis Giraudon's texts and are awaiting his approval. As long as they carry this label, they read as working hypotheses, not as rules.

---

## Guidelines · Entre-espace

> Why the name: the space between two worlds, two areas of expertise, two tensions, where design does its work.

> Status: proposal, awaiting approval by Denis Giraudon.

Source: https://www.entre-espace.net/en/brandbook/entre-espace

An entre-espace, an in-between space, is the space that separates two things and, in doing so, connects them. A margin, a threshold, an interstice. That is where design does its work: not at the centre of one discipline, but where several meet.

### Why the name suits me

Culture and design, science and ethics, the common and the individual: I have always felt torn by the tension between the two. I have also always embraced this ability which, like any trait, can just as easily turn from superpower to curse. The entre-espace is the place where I try to express what I believe in, where I can give free rein to all the atypical traits that make me who I am: an entre-espace.

### Where the name comes from

The first entre-espace, in 2010, was a blog "between design and culture". The name already spelt out the move: standing between two worlds rather than inside one of them. The site closed, then came back to life in 2025 with the same idea, broadened to include design fiction, data visualisation and critical essays.

### What the name commits us to

- **Every project is an entre-espace.** The portfolio cases all open with a tension: "the in-between space of" one constraint and another, of what the figures say and what people experience, of a founder's vision and the reality of a collective.
- **An entre-espace brings areas of expertise into dialogue.** A connection between two disciplines rests on an identifiable analysis, not on a mere analogy.
- **The void is a form.** The logo draws it: four chevrons turning their backs on each other and leaving a space at the centre. The entre-espace is not a gap to fill, it is the place where something becomes possible.

### The family of words

The prefix runs through the sections: **Entre-temps** (the notebook), **Entre-aperçu** (what was seen elsewhere), **entre-espaces** (the former name of the map of ideas). It stays in French, including in the English version of the site, where "entre-espace" can be rendered as "in-between space" when needed.


**Do**: write "entre-espace" in lower case in running text, with its hyphen; Entre-espace with a capital at the start of a sentence or as the brand name.



**Avoid**: "Entre Espace", "EntreEspace", "entre espace" without a hyphen.

---

## Guidelines · Manifesto

> The entre-espace Manifesto and the methodology of the object: design as work on the conditions of cooperation.

Source: https://www.entre-espace.net/en/brandbook/manifeste

**“I weave the links of a creative, open and impactful collective through Design.”**

### I believe in

**“Design is part of the solution.”**

I believe in an approach to design where the practitioner acts as a **cartographer of routes**, able to turn a simple roadmap into a map of readable trajectories. My work is part of a search for **systemic lucidity** in answer to the challenges of our **“common destiny”**.

**My deepest conviction:** “The collective designer is one of the professions that can make a **planetary humanism** tangible at the scale of projects.” Their role is to create the conditions in which lucid collectives choose their routes knowingly, seeing how their choices fit into a community of earthly destiny.

### The methodology of the object

**“Everyone who practises design should try to picture their project as an object.”**

To guarantee a solution's coherence, it is essential to follow this protocol of physical and intellectual handling:

1. **“Walk around it”** to see it from every angle.
2. **“Hold it in your hand”**, weigh it and test its coherence.
3. **“Handle it”** to check how easy and accessible it is to use.
4. **“Scan it”** and check every connection.
5. **“Put it on the table”** and finally document it.

The postures and the place of AI, which used to extend the Manifesto, now have their own pages: [Design postures & principles](/en/brandbook/principes-design) and [AI postures & principles](/en/brandbook/principes-ia).

---

## Guidelines · Design postures & principles

> The four postures of the designer within a collective, and the principles that guide their choices.

> Status: proposal, awaiting approval by Denis Giraudon.

Source: https://www.entre-espace.net/en/brandbook/principes-design

The postures say who I am in a project. The principles say how I choose.

### The 4 postures

Four roles to orchestrate a project's complexity (from the Manifesto):

- **Design Strategist**: I weave the links that keep objectives in step with their measures and spread design practices.
- **Design Lover**: listening and argument are the basis of what we hold in common; I create the team's **rites and rhythms** to replace "getting others to do" with **"getting others to think"**.
- **Design Thinker**: with empathy, I create the **right workshop** to turn each problem into a collective opportunity.
- **Design Maker**: with method and teaching, I ensure the quality of product design, from discovery to delivery, with user impact as the compass.

### Principles


**Proposal.** These eight principles are drawn from Denis Giraudon's texts, each with its source. To keep, rephrase or remove.


#### 1. Connect rather than separate

The designer's job is first of all a job of connections: between disciplines, people, uses, rules and consequences. A deliverable that isolates one part of the system without saying what it touches is incomplete.
*Source: the text “Lier plutôt que séparer” (Connect rather than separate).*

#### 2. Make it readable without simplifying

The cartographer does not delete the difficult roads: they make them readable. We clarify the structure and keep the complexity that carries the meaning.
*Source: Itinéraires, the route map.*

#### 3. Get people thinking rather than doing

A successful workshop leaves the collective with a shared understanding, not a task list. Rites and rhythms are there to think together.
*Source: the Design Lover posture.*

#### 4. Walk around the object before deciding

Before deciding, we look at the project from every angle, weigh it, handle it, check its connections. The decision comes afterwards.
*Source: the methodology of the object.*

#### 5. Beliefs, not certainties

An internal conviction is a hypothesis until it has been tested against the field. We state it, test it, measure it.
*Source: the “Purpose, Pillars, Principles” and “Building a user research practice” cases.*

#### 6. Measure what we claim

Impact has to be proven: a quantified audit, the level of evidence behind a finding, the RRL and PRL of a fiction. We say what we know, and with what degree of certainty.
*Source: the audits, atomic research, the RRL/PRL method.*

#### 7. Being ethical is a choice

A method, even a systemic one, does not make you ethical. We ask who benefits, who pays, and what the frame leaves out.
*Source: “By éthic, by design”, the Yuka example.*

#### 8. Form in the service of meaning

Form does not dress an idea, it carries it. A colour codes, an image documents, a word shifts a frame.
*Source: the Preamble, the Bauhaus.*

---

## Guidelines · AI postures & principles

> The place of AI in the work: its postures, its limits, and the human's responsibility for what gets published.

> Status: proposal, awaiting approval by Denis Giraudon.

Source: https://www.entre-espace.net/en/brandbook/principes-ia

**“Moving from designing peripheral functions to a systemic lever.”**

AI should not be a surface gadget but a **structural plate** built into the route map. The approach is to (from the Manifesto):

- use AI as a **specialised agent** to check a backlog's coherence or suggest maturity indicators;
- design **fields of possibility** where each peripheral layer (AI, data) becomes a lever of systemic transformation;
- ensure **adaptive governance** that puts ethical and regulatory standards (the AI Act) at the heart of collective decisions.


**Proposal.** The postures and principles below are drawn from the lessons from writing design fiction with AI, the editorial charter and the Manifesto. Awaiting approval.


### The postures of AI

- **The specialised agent**: it checks, compares, documents. It does not decide.
- **The critical assistant**: it understands, maps, produces, then looks for the flaws in what it has produced.
- **The revealer**: like the Little Prince in Design Infection, it looks where the official story cracks, instead of closing the gap.

### Principles

#### 1. The human answers for the tale

If a text or an image leaves the workshop, its author must be able to name themselves as fully responsible for what was produced. “It wasn't me, it was the tool” is not an option.
*Source: Lessons from writing design fiction with AI.*

#### 2. Keep the layers apart

Fiction is not the real foundation, the commentary is not the image, the image is not the evidence. AI likes to glue back together what we separate: we stop it.
*Source: Lessons from writing design fiction with AI.*

#### 3. Keep the friction

Generative AI tends towards fluency and resolution. Contradiction, blind spots and unease are put back into the text by hand.
*Source: Lessons from writing design fiction with AI.*

#### 4. A hypothesis is not a fact

Every factual claim has its source. We distinguish what is sourced, what is a hypothesis and what remains to be checked.
*Source: the editorial charter, value 1.*

#### 5. Never invent lived experience

No memory, no emotion, no words are attributed to the author unless he wrote or said them.
*Source: the editorial brand book, working contract for an AI.*

#### 6. Make interventions visible

What AI adds can be seen: in purple in working copies, and through a mention in the site's footer.
*Source: the editorial brand book; the entre-espace footer.*

#### 7. State the cost

Any production that required significant AI work ends with a note on the order of magnitude of its cost (light, moderate, substantial) and the model used.
*Source: the editorial charter, value 2.*

---

## The brand · Tone of voice

> How entre-espace writes: make people feel before making them understand, then connect. Two voices, one typography, a set of rules.

> Status: proposal, awaiting approval by Denis Giraudon.

Source: https://www.entre-espace.net/en/brandbook/ton

**Make people feel before making them understand, then connect what habit makes us look at separately.**

The characteristic movement goes from an experience, an object or a cultural reference towards a design question, then towards its human, collective and ecological consequences. A vinyl record, a headset, a place, a conversation are ways into the idea: the concrete is not decoration added after the argument, it builds it.

### Two voices

- **Corey**: the essayist register. A situated "I", an argued position, a critique that names a mechanism rather than a person.
- **Coreygraphe / Denis Giraudon**: the data-fiction register. Factual on the surface; the tension lies in how the figures are put together. Every figure is sourced.

Same idiolect, different speaking positions. The two are not mixed in the same text.

### The tone, dimension by dimension

| Dimension | Keep | Avoid |
|---|---|---|
| Embodiment | A situated "I": I observe, I have felt, I propose. | The all-knowing guru, the fake confession. |
| Relationship | A reader invited to look and discuss. | The lecture from above. |
| Sensitivity | Precise images when they carry the point. | Generic lyricism in every paragraph. |
| Critique | A position you stand by, a mechanism named. | Limp neutrality or indignant one-upmanship. |
| Teaching | A distinction, an example, the conditions in which it applies. | Stacked jargon, a lesson with nothing at stake. |
| Humour | The wink, self-mockery, the occasional pun. | The advertising slogan, sarcasm aimed at people. |
| Certainty | Assert when you stand by it, hold back when you must. | Turning a doubt into a verdict. |
| Rhythm | Fluid in structure, with tension in the narrative. | Smoothing out the rough edges by default. |

### Typography of the writing


**Do**

- Quotation marks "…" to highlight a word or an expression.
- Guillemets « … » for a quotation in French; “…” in English.
- A colon, a comma, brackets or a new sentence where a dash would be tempting.
- In French, non-breaking spaces before ; : ! ? and inside « » (the site adds them on its own).



**Avoid**

- The em dash, except at the start of a line of dialogue.
- Prestige capitals, and English loanwords in French without a professional need for them.


### Form of address

Formal "vous" in articles; informal "tu" in Novum's tools and interfaces. In English, "you" covers both. A text chooses its reader: designers, product teams, data and AI people, or a wider audience.

### Lexicon

Recurring fields: links, collective, context, focus, complexity, experience, consequences, measure. Structuring images: map, route, path, bridge, hearth, weaving. One guiding image per movement of a text; "systemic" or "complexity" are not sprinkled about to sound the part.


**Status.** The signature (make people feel, understand, connect) and the two voices are approved. The tone table and the lexicon come from version 0.1 of the editorial brand book and remain proposals.

---

## The brand · Logo

> An X of four chevrons, a handwritten word: versions, sizes, uses and files.

Source: https://www.entre-espace.net/en/brandbook/logo

The logo combines an **X of four chevrons** and the word **entre-espace** written by hand, in narrow capitals. The four chevrons turn their backs on each other and leave a void at the centre: the entre-espace.

### Versions

- **Dark word** (#1C1E24) on a light background.
- **Light word** (#ECECEE) on a dark background.

The X always keeps its four original tints: yellow #FBCB04, cyan #4DC1D5, lime #CFDD02, pink #ED6FA7. On the site, the logo is inlined as SVG and the word takes the text colour: it switches from dark to light on its own in dark mode.

### Sizes

| Placement | Height |
|---|---|
| Header, desktop | 60 px |
| Header, phone | 40 px |
| Footer | 32 px |

Below 24 px the word is no longer legible: use the four squares alone (favicon).

### Clear space

Around the logo, keep at least the width of one chevron empty on every side.


**Avoid**: recolouring the X, setting it on a busy photo, stretching or distorting it, enclosing it in a frame or a block of colour, separating the word from the X within the same composition.


### Files

- [Logo, dark word (SVG)](/img/logo-entre-espace.svg)
- [Logo, light word (SVG)](/img/logo-entre-espace-clair.svg)
- [The four squares, favicon (SVG)](/favicon.svg)

---

## Design system · Typography

> IBM Plex Sans for text and headings, DM Mono for labels and the interface; Poppins and Caveat Brush for the boards.

Source: https://www.entre-espace.net/en/brandbook/typographie

Two families on the site, served by the site itself (no call to a third-party service), and two more for boards and infographics.

### Families

| Family | Role | Weights |
|---|---|---|
| IBM Plex Sans | Body text, subheadings, headings | Light 300 (text), Medium 500 (subheadings, bold), Bold 700 (page titles) |
| DM Mono | Labels, kickers, dates, menus, filters | Regular 400, in capitals, tracking .06em |
| Poppins | Boards and infographics (Who am I?, LinkedIn series) | 300 to 700 |
| Caveat Brush | Handwritten mottos, on the boards | 400 |

### Scale

| Token | Value | Use |
|---|---|---|
| `--t-label` | 12px | Labels, kickers, menus (DM Mono) |
| `--t-meta` | 14px | Metadata, captions |
| body | 16px, line height 1.65 | Body text |
| `--t-intro` | clamp(21px, 2.1vw, 28px) | Standfirst, mobile menu entries |
| h3 | 1.12rem | Level 3 subheadings |
| h2 | 1.45rem | Subheadings |
| h1 | clamp(1.9rem, 4.5vw, 2.8rem) | Page title |
| `--t-titre` | clamp(30px, 3vw, 40px) | Section titles |
| `--t-une` | clamp(42px, 6.4vw, 96px) | Large titles (footer) |

Headings use tight line spacing (1.12) and slightly negative tracking (-0.025em).


**Do**: a reading column of 42rem at most (65 to 75 characters per line); the yellow highlight for a key sentence.



**Avoid**: bold for whole paragraphs, italics for emphasis (reserved for titles of works and foreign words), more than two weights in the same block.

---

## Design system · Colours

> Four colours for accent and coding, never for decoration; neutrals in light and dark.

Source: https://www.entre-espace.net/en/brandbook/couleurs

The background stays plain. Each colour codes a writing section or a family of skills; it is not there to decorate a page.

### Accents

| Colour | Value | Token | Codes |
|---|---|---|---|
| Yellow | #F7C600 | `--jaune` | Entropy, highlight; foresight and systems thinking |
| Cyan | #29BDEC | `--cyan` | Entre-temps; design ops |
| Lime | #C4D630 | `--lime` | Portfolio; UX/UI design |
| Magenta | #E6007E | `--magenta` | Design infection; research and semiotics; quote banner |

Always in this order when they appear together: yellow, cyan, lime, magenta.

### Neutrals

| Role | Token | Light | Dark |
|---|---|---|---|
| Background | `--fond` | #FFFFFF | #141518 |
| Text | `--texte` | #1C1E24 | #ECECEE |
| Secondary text | `--doux` | #5C5E66 | #A6A8B0 |
| Surface | `--surface` | #F4F4F5 | #1F2127 |
| Rule | `--filet` | #E6E6E6 | #2E3037 |

The site follows the device's light or dark setting. The map of ideas stays on a white background in both cases: its line colours are designed for it.


**Do**: an accent colour on a small surface (dot, square, highlight); dark text on yellow, cyan and lime, white text on magenta.



**Avoid**: a coloured page background, a coloured rule or strip along the edge of a card or window, yellow, cyan or lime text on a white background (insufficient contrast), colour as the only carrier of meaning.

---

## Design system · Layout

> Widths, margins, grids, templates and breakpoints of the site.

Source: https://www.entre-espace.net/en/brandbook/mise-en-page

A wide page for looking, a narrow column for reading.

### Widths and margins

| Token | Value | Role |
|---|---|---|
| `--large` | 1400px | Maximum content width |
| `--mesure` | 42rem | Reading column |
| `--marge` | clamp(16px, 4vw, 56px) | Side margin, from 16 px on phones to 56 px |
| `--r-m` | 8px | Surface radius (fact sheets, notes) |
| `--r-pill` | 999px | Pill buttons |

### Templates

| Template | Composition |
|---|---|
| Article | One 42rem column; images at column width, the following ones widened up to 72rem |
| Entropy | Two columns: fixed image (65%) and text (35%), yellow highlight |
| Portfolio case | One column; fact sheet in two balanced columns (role and client, period and context, deliverables in the shorter one) |
| Section | Centred title, grid of cards in 3, 2 then 1 column |
| Home | Full-width hero, latest texts as cards, Novum / Entre-aperçu pair, excerpt from the Manifesto, quote banner |
| Brandbook | Fixed left navigation, content on the right |

### Breakpoints

| Width | What changes |
|---|---|
| 1024 px | The map of ideas gives way to a fixed excerpt |
| 900 px | Grids go from 3 to 2 columns |
| 640 px | Menu in a panel, one column everywhere |

### Vertical rhythm

Sections are separated by a rule (1px, `--filet`) and 3 to 5rem of space. Paragraphs have a 1.1rem bottom margin; h2 subheadings, 2.6rem above.


**Avoid**: running text across the full width, cards of unequal heights in the same row, decorative shadows.

---

## Design system · Components

> The recurring pieces: kicker and dot, highlight, buttons, card, fact sheet, note, four squares, quote banner.

Source: https://www.entre-espace.net/en/brandbook/composants

Each component has a single role. No variant is created when an existing component does the job.

| Component | Role | Rule |
|---|---|---|
| Kicker and dot | Place a text: section, series, tension | DM Mono in capitals; the dot carries the section's colour |
| Highlight | Mark a key sentence | Translucent yellow; one or two sentences per text, no more |
| Solid button | The main action | Only one per screen, pill-shaped |
| Outline button | Secondary actions | Same shape, no fill |
| Card | Lead to a text | 5:3 visual, label, title, summary, date and reading time |
| Fact sheet | Summarise a case | Grey surface, two columns of definitions |
| Note | An update, a status | Grey surface, text at 0.92rem |
| The four squares | The reduced signature | Favicon, bullet, list coding |
| Quote banner | A sentence that carries the page | Full width, magenta, white text; one per page at most |

---

## Design system · Accessibility

> The target level (WCAG 2.2 AA), the measured contrasts and the rules that uphold it.

Source: https://www.entre-espace.net/en/brandbook/accessibilite

The site aims for **WCAG 2.2 AA**. It is checked with axe-core on every page, in light and dark, on desktop and mobile: 0 issues as of 31 October 2026.

### Measured contrasts

| Pair | Ratio | Use |
|---|---|---|
| Text on background, light | 16.7:1 | Body text |
| Secondary text on background, light | 6.5:1 | Summaries, metadata |
| Secondary text on surface, light | 5.9:1 | Fact sheets, notes |
| Text on background, dark | 15.5:1 | Body text |
| Secondary text on background, dark | 7.7:1 | Summaries, metadata |
| Dark text on yellow | 10.3:1 | Legend labels |
| Dark text on cyan | 7.6:1 | Legend labels |
| Dark text on lime | 10.3:1 | Legend labels |
| White on magenta | 4.5:1 | Quote banner, legend |
| Yellow on white background | 1.6:1 | Never for text |
| Cyan on white background | 2.2:1 | Never for text |

### Rules

- **Never colour alone**: each colour family also has a pattern in charts (dots, hatching), and a name.
- **Keyboard**: anything that opens on hover also opens from the keyboard (menus, chart tooltips, nodes of the flower); Escape closes it.
- **Visible focus**: a 2px outline in the text colour.
- **Skip link** “Skip to content” at the top of every page.
- **No skipped heading levels**: one h1 per page, then h2, h3.
- **Images**: alt text that says what the image shows; empty if it is decorative.
- **Motion**: no autoplay; animations stop if the device asks for reduced motion.
- **Touch targets**: 44 × 44 px minimum.
- **Language**: every page declares its language; so do passages in another language.
- **Dark mode**: the site follows the device's setting, so that the browser does not recolour pages its own way.

---

## Tokens (JSON, keys in French)

```json
{
  "_source": "Jetons du design system entre-espace. Miroir de src/styles/global.css (:root et le mode sombre) : toute modification se fait dans les deux fichiers.",
  "couleur": {
    "accent": {
      "jaune": {
        "valeur": "#F7C600",
        "jeton": "--jaune",
        "code": "Entropie, surlignage, prospective et systémie"
      },
      "cyan": {
        "valeur": "#29BDEC",
        "jeton": "--cyan",
        "code": "Entre-temps, design ops"
      },
      "lime": {
        "valeur": "#C4D630",
        "jeton": "--lime",
        "code": "Portfolio, UX/UI design"
      },
      "magenta": {
        "valeur": "#E6007E",
        "jeton": "--magenta",
        "code": "Design infection, recherche et sémiotique, bandeau citation"
      }
    },
    "logo": {
      "jaune": "#FBCB04",
      "cyan": "#4DC1D5",
      "lime": "#CFDD02",
      "rose": "#ED6FA7"
    },
    "neutre": {
      "clair": {
        "fond": "#FFFFFF",
        "texte": "#1C1E24",
        "doux": "#5C5E66",
        "surface": "#F4F4F5",
        "filet": "#E6E6E6",
        "surligne": "rgba(247, 198, 0, .42)"
      },
      "sombre": {
        "fond": "#141518",
        "texte": "#ECECEE",
        "doux": "#A6A8B0",
        "surface": "#1F2127",
        "filet": "#2E3037",
        "surligne": "rgba(247, 198, 0, .34)"
      }
    }
  },
  "typographie": {
    "texte": {
      "famille": "IBM Plex Sans",
      "graisses": {
        "texte": 300,
        "intertitre": 500,
        "titre": 700
      },
      "corps": "16px",
      "interligne": 1.65
    },
    "etiquette": {
      "famille": "DM Mono",
      "graisse": 400,
      "taille": "12px",
      "casse": "capitales",
      "approche": ".06em"
    },
    "echelle": {
      "label": "12px",
      "meta": "14px",
      "intro": "clamp(21px, 2.1vw, 28px)",
      "titre": "clamp(30px, 3vw, 40px)",
      "une": "clamp(42px, 6.4vw, 96px)",
      "h1": "clamp(1.9rem, 4.5vw, 2.8rem)",
      "h2": "1.45rem",
      "h3": "1.12rem"
    },
    "planches": {
      "texte": "Poppins",
      "devise": "Caveat Brush"
    }
  },
  "mise_en_page": {
    "mesure": "42rem",
    "large": "1400px",
    "marge": "clamp(16px, 4vw, 56px)",
    "rayon": {
      "m": "8px",
      "pilule": "999px"
    },
    "ombre": {
      "clair": "0 6px 20px rgba(0,0,0,.08)",
      "sombre": "0 6px 20px rgba(0,0,0,.5)"
    },
    "points_de_rupture": {
      "telephone": "640px",
      "tablette": "900px",
      "carte_metro": "1024px"
    }
  },
  "regles": {
    "tiret_cadratin": "jamais, sauf en début de réplique de dialogue",
    "guillemets": {
      "mise_en_avant": "\"…\"",
      "citation": "« … »"
    },
    "couleur": "accent et codage seulement, jamais en décor ; jamais seule porteuse de sens",
    "bordures_colorees": "jamais de filet ou de bandeau de couleur en bord de carte ou de fenêtre"
  }
}
```