DeSpell Brand Kit
Updated: 2026-09-02

1. Brand name

Always write the product name as "DeSpell".
Do not use "De-Spell", "Despell", or "DeSPELL".
The company name is "DeSpell Inc."

2. Primary assets

source/
  Original production logo files copied without modification.

logo/symbol/transparent/
  Textured lime symbol with a transparent background.
  Use this on dark surfaces when the surrounding layout supplies the glow.

logo/symbol/on-dark/
  Textured lime symbol with its production dark background and glow.
  Use this when the logo must look consistent without additional CSS effects.

logo/symbol/monochrome/
  One-color utility exports for print, masks, stamps, and watermarks.
  These are supporting assets. The textured lime symbol is the primary logo.

logo/wordmark/
  DeSpell wordmarks rendered with Groutpix Flow Slab Serif.
  Editable SVG versions depend on the included font in fonts/.

logo/lockups/
  Horizontal symbol and wordmark combinations.
  "offwhite-transparent" is for dark surfaces.
  "dark-transparent" is for light surfaces.
  "on-dark" includes the approved #0a0a0a background.

app-icons/
  Current app, Apple touch, PWA, maskable, and favicon exports.

motion/
  Current 512 px animated logo in GIF and animated WebP.

templates/
  Clean brand canvases for social previews, presentations, and profile images.
  They contain only the symbol and DeSpell wordmark so campaign copy can be
  added without rewriting an existing claim.

3. Brand colors

Background              #0A0A0A
Accent lime             #E5FF5D
Text                    #F9F9F9
Bright text             #FFFFFF
Text on accent          #111111
Muted text              rgba(138, 138, 138, 0.90)
Danger                  #FF5C5C
Warning                 #FFD60A
Subtle border           rgba(255, 255, 255, 0.08)
Strong border           rgba(255, 255, 255, 0.18)

The logo artwork contains textured lime values and should not be flattened to
#E5FF5D unless a one-color production method requires it.

4. Typography

Wordmark and large display text
  Groutpix Flow Slab Serif Regular

Body and interface
  Geist Sans
  Fallback: Inter or system sans-serif

Numbers, addresses, and code
  Geist Mono
  Fallback: system monospace

5. Minimum use and clear space

Digital minimum symbol size: 24 px.
Keep at least 12.5% of the symbol width clear on every side.
Do not crop the arm tips.

Lockup vertical alignment: the wordmark is aligned on its cap height, not on its
bounding box. The cap-height center of the Groutpix wordmark sits at 0.3803 of
the wordmark height, because the master has its cap top on row 0 and its
baseline on row 416 of 547. Line that point up with the vertical center of the
symbol ink. Never center the wordmark by its bounding box: the box includes the
'p' descender, which pushes the letter body roughly 12% of the wordmark height
too high and makes the lockup read as top heavy. The same rule decides where the
pair sits on a canvas, so the block is centered on the symbol ink plus the
wordmark cap body with the descender excluded. Rebuilding any lockup by hand
means checking that the symbol ink center and the 'D' glyph center land on the
same row within 1 px.

6. Do not

Do not stretch, skew, rotate, redraw, or recolor the textured primary symbol.
Do not add multiple competing glows.
Do not place the off-white wordmark on a light background.
Do not place the dark wordmark on a dark background.
Do not present the raster symbol as a genuine vector source.

7. Source limitation

The current textured symbol has no genuine vector master in this repository.
The PNG source is the production master. This kit intentionally does not wrap
the PNG in a fake SVG. If a vector master is commissioned later, replace the
symbol source while keeping the existing file names and usage rules versioned.

8. Re-export

Run:

  ./brand_kit/export-brand-kit.sh

Requirements:
  ImageMagick 7
  WebP tools with gif2webp and cwebp


9. Generative asset rules (API image and video generation)

The machine-readable spec lives in brand-tokens.json under "generation".

Generate only backgrounds, mood, and motion. Never generate the logo, the
wordmark, product UI, or exact text; generative models distort them. After
generation, composite the real assets from this kit, then set headlines in
Groutpix Flow Slab Serif and captions or numbers in Geist.

Approved output sizes: 1200x675 (X post), 1500x500 (X header), 1080x1080
(square), 1080x1920 (vertical), 1920x1080 (video and end card). Video clips
up to 8 seconds per generation. Generated video is for brand motion and end
cards only. App demo footage must be real screen capture.
