Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Brand & identity

SithBit has one visual identity shared across every surface: the mdBook docs, the four web shells (webmail, marketplace, onboarding, and this book), and the two browser plugins (Thunderbird, Outlook). This page records the palette, the logo, and where the design tokens live so the look stays consistent as the clients evolve.

Palette — “dark-side”

TokenLightDarkUse
background#FAFAFB#0B0B0Fpage background
surface#FFFFFF#16161Dcards, compose, popups
text#1A1A1F#E7E7EAbody text
primary (violet)#6D28D9#7C3AEDlinks, primary buttons, selection
accent (crimson)#E11D48#E11D48emphasis only — used sparingly

The dark theme is the signature look; the light theme keeps the same violet primary on a near-white background.

Logo & mark

  • Mark — a geometric S monogram (an envelope-flap chevron folded into the letterform) on a dark rounded tile, with a single crimson “sealed” spark. It is the favicon, the plugin/extension icon at every size, and sits left of each client’s header title.
  • Wordmark — the mark plus a lowercase geometric sithbit in the brand violet, for the full lockup.

Where the tokens live (single source of truth)

The palette is defined once as CSS custom properties and consumed everywhere:

  • webclients/shared/brand.css — the --sb-* tokens the web shells and plugins consume (each value a light-dark() pair, so one reference works in both themes). The canonical artwork lives beside it in webclients/shared/brand/ (mark.svg, logo.svg, favicon PNGs).
  • mail_docs/css/brand.css — the same hex values mapped onto mdBook’s per-theme CSS variables (violet accent for the light .light/.rust themes; the full dark-side palette for the .coal/.navy/.ayu dark themes). mdBook can’t reach webclients/, so the values are mirrored, not shared — keep the two files in sync when the palette changes.

The plugin/favicon PNGs are rasterized from mark.svg (via cairosvg); the hermetic webclients/shared/test/brand.test.js guards the token set, the SVG well-formedness, and the favicon sizes.