Thème DSFR

The theme is brand-neutral and meant to be extended. Use it as it is for a deck that should look like a French public service, or build a brand on top of it and keep its proportions.

This package is not an official French state product and carries no state branding beyond the design system's public tokens.

Install

pnpm add -D @vignettes/theme-dsfr @vignettes/theme-kit sass

@vignettes/theme-kit is a peer dependency: this theme is built on that engine layer.

Use

@use 'pkg:@vignettes/theme-dsfr';

That entry imports the engine layer and the layout preset. Compile it with Sass's package importer, as @vignettes/theme-kit describes.

Extending it

@use 'pkg:@vignettes/theme-dsfr/variables' as *;
@use 'pkg:@vignettes/theme-dsfr';

.reveal h1 { color: #0000cc; }
.reveal section.slide-h2 h2 { color: var(--dsfr-grey-950) !important; }

variables exposes the DSFR Sass variables, all declared !default, so your own values take precedence when you set them before the @use of the theme. The theme also publishes every token as a custom property (--dsfr-blue-france-main-525, --dsfr-text-default and so on) and maps them onto the engine's semantic contract (--accent, --surface, --text-default), which the components read under any theme.

_palette.scss gives the cards and the regions of a diagram the DSFR illustrative palette. Each generic name of the theme kit points to one DSFR tone (green to green-emeraude, blue to blue-cumulus), and the theme also defines the eighteen DSFR names, such as color="green-menthe" or color="orange-terre-battue".

Entries

• pkg:@vignettes/theme-dsfr is the theme: variables, fonts, engine layer, layout preset, base, typography, components, utilities, palette.
• pkg:@vignettes/theme-dsfr/variables contains the Sass variables, to read or override them.
• pkg:@vignettes/theme-dsfr/fonts contains the Marianne @font-face rules.

The Marianne font files

The @font-face rules point at /themes/dsfr/fonts/Marianne-*.woff2. The files come from @gouvfr/dsfr, and a Vignettes theme copies them through its manifest.

{
  "assets": [
    { "from": "node_modules/@gouvfr/dsfr/dist/fonts", "to": "fonts", "match": "^Marianne-[A-Za-z]+\\.woff2?$" }
  ]
}

Outside Vignettes, serve those files at that path yourself, or override the src of each face. Without them the browser falls back to the next family in the stack.

License

MIT. The DSFR itself is published by the French state under its own license.