Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · site, app, extension · since 2026-08

Logo

Purpose

The mark of RGAA Lab, “la grille”, drawn inline so it follows the ink of the theme. A SVG loaded as an image is an isolated document that never inherits currentColor: the previous logo stayed black on the dark footer, was whitened with a filter, and vanished the day the footer went light.

When to use, when not

Use it once in a header or a footer, and as the mark alone only where the word cannot fit (the collapsed rail of the app). Do not use it as decoration inside content.

Anatomy

  1. The mark: a square divided in four, one quarter filled, in currentColor, aria-hidden.
  2. The word “RGAA Lab”, which is the accessible name; visually hidden when markOnly is set.

Props

Props of Logo
NameTypeDefaultWhat it does
height?number28The drawing's height in pixels; the word scales with it.
markOnly?booleanfalseHides the word: for constrained spaces, never by default.

States

Three sizes and the mark-only form.

header

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Logo, story header, as Chromium renders it with forced colours active

large

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Logo, story large, as Chromium renders it with forced colours active

markOnly

The word is visually hidden and stays the accessible name: for the collapsed rail only.

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Logo, story markOnly, as Chromium renders it with forced colours active

small

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Logo, story small, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: an inline group whose text is “RGAA Lab”. The drawing is hidden from assistive technology.
  • Keyboard, focus: none of its own; wrap it in a link when it navigates.
  • Contrast: inherits the ink, which is measured on every background.

Content rules

The word is always “RGAA Lab”, with “Lab” in the soft ink. Never translated, never abbreviated.

Do and don’t

  • Do keep the word visible wherever there is room: it is the name.
  • Do not load the mark as an image.

Examples

<a href="/"><Logo height={28} /></a>
<Logo height={20} markOnly />

Surfaces

  • Site: header and footer.
  • App: the lab sidebar, the auth pages.
  • Extension: the store icons are generated from the same geometry by scripts/icones.mjs.

Related

None.

Decisions

  • 2026-08: inline SVG rather than an image, for the theme.
  • 2026-09-24: props height and markOnly; the word’s size derives from the height through one custom property, the only dynamic style the component writes.

Criteria held by construction

  • 1.1, Chaque image porteuse d'information a-t-elle une alternative textuelle ?
    The drawing is aria-hidden and the word carries the name: an alt on the image would make a screen reader say the brand twice.
  • 3.2, Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?
    Drawn inline in currentColor, the mark follows the ink of the theme and keeps its contrast on both sets; as an image it would stay black on the dark set.

Tokens it reads

And one custom property of its own, not tokens: --rl-logo-height.