Visual Identity

Graphic Charter

A coherent system for a distinctive, technical and human identity.

This brand language balances precision and warmth: structured layouts, subtle texture, and a restrained palette that scales from documentation to storytelling.

  • Clarity over decoration.
  • Contrast with calm chromatic accents.
  • Technical craft with an editorial eye.
Signature mark on the default gradient surface.

Core Palette

Brand accents used for links, gradients, status colors and expressive highlights.

  • BluePrimary accents--blue
  • MagentaGradient pairing--magenta
  • CyanInteractive highlights--cyan
  • GreenSuccess and balance--green
  • YellowWarnings and callouts--yellow
  • OrangeWarm secondary accents--orange
  • RedError states--red

Neutral Scale

Semantic surfaces and text colors that automatically adapt in light and dark themes.

  • Grey 900Highest contrast text--grey-900
  • Grey 700Secondary content--grey-700
  • Grey 400Muted interfaces--grey-400
  • Grey 200Borders and separators--grey-200
  • Grey 100Page background--grey-100
  • Grey 000Elevated surfaces--grey-000

Typography

Three complementary families define the voice: utility, reading comfort, and code precision.

  • UI

    Craft clear interfaces with consistent rhythm.

    Navigation, labels, controls--font-ui
  • Reading

    Tell meaningful stories with calm, readable prose.

    Long-form text and editorial sections--font-reading
  • Code

    const identity = { concise: true, expressive: true };

    Snippets, tokens and technical metadata--font-code

UI Tokens

Rounded corners and layered shadows keep interfaces tactile while preserving a clean technical tone.

Radii

  • Radius 100--radius-100
  • Radius 200--radius-200
  • Radius 300--radius-300
  • Radius 400--radius-400

Shadows

  • Shadow 100--shadow-100
  • Shadow 200--shadow-200
  • Shadow 300--shadow-300
  • Shadow 400--shadow-400