Inoskera

The InosKera Group website is a static site of four pages, in French and in English, which presents the company and carries the product page of Sanu; it is built with Astro from a written brand specification.

Role: Sole author of the site and of the brand specification
Period: June 2026, with additions in October 2026
Status: In service. Online
Technologies: Astro 5, TypeScript, CSS, GitLab CI
Repositories: One

Figure 1. From the brand specification to the live site. The pipeline checks the build of the site and deploys nothing.

Context

InosKera Group publishes Sanu. Its site amounts to little: a presentation page and a product page, each in both languages, with no form and no application server. Next to the site, the repository contains a brand specification, with the scripts that produce the variants of the logo.

Figure 2. Home page of the site, in its dark theme. The page shown is the French one.

Problem

A website, a letterhead and logo exports end up diverging when the colours and the composition rules are written nowhere. The site also had to offer a dark theme without duplicating its styles, and to address two markets that do not name things the same way.

Answer

A brand specification upstream of the stylesheet

The brand specification is a document, which sets the palette, the typography and the use of the logo. The site’s token sheet names it as its only source, and the components cite the paragraph they apply. The spacing rule for the brand name, for example, is found unchanged in the navigation bar.

Two-level tokens

The raw palette is never modified by the theme. The components use a second layer of tokens, semantic in nature, namely the background, the surface, the text or the logo, which the dark theme redefines. Three states follow from this without any duplication: follow the system, force light, force dark.

/* --- DARK theme tokens ---
   Applied in two cases:
   (a) user forced dark  → :root[data-theme='dark']
   (b) OS prefers dark AND user has not forced light → media + :not([data-theme='light'])
   The button sets data-theme on <html>; absence of the attribute = follow the OS. */
:root[data-theme='dark'] {
  --bg: #0B1320;
  --surface: #141F2E;
  --text: #C2C9D2;
  --text-strong: var(--cream);
  --muted-text: #8B95A2;
  --border: rgba(243, 239, 233, 0.12);
  --panel: #15202E;
  --logo-solid: var(--cream);
  --accent-bg: var(--cream);
  --accent-fg: var(--navy);
  --accent-bg-hover: #ffffff;
  color-scheme: dark;
}

Listing 1. Tokens of the dark theme, as the site's stylesheet declares them.

English copy written for its market

The Sanu page is not translated from one language into the other. The French addresses a drinks depot in Togo and the English a depot in Ghana, with the words used there for the till, the bottle deposits and mobile money. The icons, for their part, are inlined at build time from a local package, and their names stay in the component rather than in the texts, so that the two languages cannot diverge on this point.

Limits and outlook

The tokens are copied from the brand specification and not generated, so nothing prevents a gap: the dark palette exists today only in the stylesheet, and the brand specification contradicts itself on the chosen font. The font is moreover loaded from a third-party service, the only request the site sends outside, whereas it could be served by the site.

The Sanu product page, added to the repository in October 2026, is moreover not yet online. Below 640 pixels wide, the navigation links disappear with no replacement menu. The site has no sitemap, no error page and no test, and its deployment remains a manual command, which replaces the live files with no rollback step.

Back to the other projects