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”
| Token | Light | Dark | Use |
|---|---|---|---|
| background | #FAFAFB | #0B0B0F | page background |
| surface | #FFFFFF | #16161D | cards, compose, popups |
| text | #1A1A1F | #E7E7EA | body text |
| primary (violet) | #6D28D9 | #7C3AED | links, primary buttons, selection |
| accent (crimson) | #E11D48 | #E11D48 | emphasis 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
Smonogram (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
sithbitin 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 alight-dark()pair, so one reference works in both themes). The canonical artwork lives beside it inwebclients/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/.rustthemes; the full dark-side palette for the.coal/.navy/.ayudark themes). mdBook can’t reachwebclients/, 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.