Graphics

A curated set of muted accent colours, duotone pictograms, tiles and callouts — visual richness inspired by France's DSFR, kept accessible. Every accent is contrast-checked; colour is never the only way meaning is conveyed.

Accent colours

Six illustrative families for category colour-coding, tiles, callouts and pictograms.

Pictograms

Original two-tone SVG artwork — no photos, no national symbols.

<DsmuPictogram name="education" accent="violet" />
<!-- decorative by default; add a label to make it meaningful:
<DsmuPictogram name="health" accent="teal" label="Health services" /> -->

Tile

A pictogram-led service card with an accent bar. The whole tile is the click target.

<DsmuTile
  title="Apply for a scholarship"
  href="/scholarships"
  pictogram="education"
  accent="violet"
>Government and overseas scholarships for students.</DsmuTile>

Callout

A tinted highlight for something a user should notice, in any accent.

<DsmuCallout title="Good to know" accent="teal">
  <p>You can save your application and return to it later.</p>
</DsmuCallout>