# Gemma Analytics Brand Reference

Source: [2505_gemma_analytics_corporate_manual](https://drive.google.com/file/d/1_w5OzlKXGgbPBt3GopSbyqc5pzye0SBg/view?usp=drive_link)

Values marked **[IMPL]** are implementation defaults not specified in the brand
manual. They must be updated when design specs are provided.

---

## Colour palette

All values from the corporate manual colour palette section.

| Official name | Hex | RGB | Role |
|---|---|---|---|
| Midnight Plum | `#2f0559` | 47, 5, 89 | Primary dark — foundation colour |
| Super Purple | `#883dd8` | 136, 61, 216 | Primary — foundation colour |
| Lavender | `#a976e5` | 169, 118, 229 | Primary — foundation colour |
| Fresh Teal | `#2d9b8b` | 45, 155, 139 | Accent |
| Tingy Coral | `#ed5c58` | 237, 92, 88 | Accent |
| Sunny Yellow | `#ffe000` | 255, 224, 0 | Accent |
| 100% Black | `#000000` | 0, 0, 0 | Base |
| 100% White | `#ffffff` | 255, 255, 255 | Base |

**Primary purples** (Lavender, Super Purple, Midnight Plum) are the foundation
of the identity.

**Accent colours** (Fresh Teal, Tingy Coral, Sunny Yellow) add personality and
highlight key moments. Use sparingly and with purpose.

### Colour use rules

- Accent colours must only be combined with **black or white** — never with each
  other or with purple tones.
- Do not use unapproved or custom shades.
- Do not use colours decoratively without clear purpose or contrast.

### Accessibility matrix (WCAG 2.1 AA)

Normal text: 4.5:1 minimum · Large text / design elements: 3:1 minimum
(Large text = 18pt regular or 14pt medium/semibold)

| Foreground | White `#ffffff` | Black `#000000` | Midnight Plum `#2f0559` |
|---|---|---|---|
| Lavender `#a976e5` | Large text & design elements only | All sizes | All sizes |
| Super Purple `#883dd8` | All sizes | Large text & design elements only | — |
| Midnight Plum `#2f0559` | All sizes | — | — |
| Fresh Teal `#2d9b8b` | Large text & design elements only | All sizes | — |
| Tingy Coral `#ed5c58` | Large text & design elements only | All sizes | — |
| Sunny Yellow `#ffe000` | — | All sizes | — |
| Black `#000000` | All sizes | — | — |
| White `#ffffff` | — | All sizes | All sizes |

---

## Typography

**Typeface:** Kanit (all weights, OFL licence)
**Kerning:** 0 · **Tracking:** 0 (all styles)
**Headers are always uppercase**

Sizes and colours from [Gemma Analytics GmbH Google Docs Template](https://docs.google.com/document/d/1qEIZ721NTJiGtJFcpx6Ffa2fx7gZFUv8bsB-zelErgc/). 
Weights and line spacing from [corporate manual](https://drive.google.com/file/d/1TvEoUXyv5Q7BW8-7sTi1zxQcP1e4L39Q/view?usp=drive_link).

| Style | Kanit weight | Size | Colour | Line spacing | Case |
|---|---|---|---|---|---|
| Title | Medium (500) | 28pt | Super Purple `#883dd8` | 100% | Uppercase |
| H1 | Medium (500) | 18pt | Super Purple `#883dd8` | 100% | Uppercase |
| H2 | Medium (500) | 16pt | Midnight Plum `#2f0559` | 100% | Uppercase |
| H3 | Medium (500) | 14pt | Black `#000000` | 100% | Uppercase |
| H4 | Medium (500) | 12pt | Black `#000000` | 100% | Uppercase |
| Body | ExtraLight (200) | 12pt | Black `#000000` | 120% | — |
| Highlight | Regular (400) | 12pt | Black `#000000` | 120% | — |

Font files are in `${CLAUDE_SKILL_DIR}/assets/fonts/`.

---

## Logo suite

### When to use each variant

| Variant | Use cases |
|---|---|
| Primary logo | Website, official documents & presentations, email signatures, print |
| Secondary logo (horizontal) | Website headers/nav, email banners, horizontal layouts |
| Brand mark (gem icon) | App icon, favicon, social profile picture, watermarks, stickers, video intros |
| Word mark + logo mark | Pitch decks, event branding, thumbnails, high-visibility marketing |
| One-colour logo | Monochrome layouts, print/production constraints, embossing, engraving |

One-colour logo approved colours: **Midnight Plum, black, white only.**

### Clear space rules

| Logo | Clear space equals |
|---|---|
| Primary logo | Height of the middle bar in the 'E' of GEMMA |
| Secondary logo | Height of the middle bar in the 'E' of GEMMA |
| Brand mark (gem) | Height of the top triangle of the gem |
| Word mark + logo mark | Height of the middle bar in the 'E' of GEMMA |

### Minimum sizes

| Logo | Print | Digital |
|---|---|---|
| Primary logo | 15 mm | 120 px |
| Secondary logo | 10 mm | 30 px |
| Brand mark | 10 mm | 30 px |
| Word mark + logo mark | 10 mm | 30 px |

Always scale proportionally — never stretch, squash, or distort.

### Logo files in this skill

| File | Variant |
|---|---|
| `logos/primary_logo/gemma_primary_logo.svg` | Primary logo colour — light backgrounds |
| `logos/primary_logo/gemma_primary_logo_white.svg` | Primary logo white — dark backgrounds (cover) |
| `logos/primary_logo/gemma_primary_logo_black.svg` | Primary logo black — greyscale/print |
| `logos/primary_logo/gemma_primary_logo_plum.svg` | Primary logo in Midnight Plum |
| `logos/primary_logo/gemma_primary_logo_negativ.svg` | Primary logo negative |
| `logos/secondary_logo/gemma_secondary_logo.svg` | Secondary (horizontal) — colour |
| `logos/secondary_logo/gemma_secondary_logo_white.svg` | Secondary — white |
| `logos/secondary_logo/gemma_secondary_logo_black.svg` | Secondary — black |
| `logos/logo_mark/gemma_logo_mark.svg` | Gem icon only — colour |
| `logos/logo_mark/gemma_logo_mark_white.svg` | Gem icon — white |
| `logos/logo_mark/gemma_logo_mark_black.svg` | Gem icon — black |
| `logos/word_mark_with_logo_mark/gemma_logo_mark + word_mark.svg` | Gem + wordmark — colour |
| `logos/word_mark_with_logo_mark/gemma_logo_mark + word_mark_white.svg` | Gem + wordmark — white |
| `logos/subbrands_logos/GEM.AI/gem.AI.svg` | GEM.AI sub-brand — colour |
| `logos/subbrands_logos/GEM.BI/gem.BI.svg` | GEM.BI sub-brand — colour |

### Logo misuse — never do these

- Squash or stretch the logo
- Disconnect logo elements
- Use unapproved colours
- Place two logo versions side by side

---

## Dark proposal theme

This is the default theme for newly scaffolded proposals in the contracts skill
(`clients/_sample/config-proposal.yaml`, `theme: "dark"`). Existing documents
on the light theme are unaffected.

In `base.html` the theme is activated by adding `class="theme--dark-proposal"`
to `<body>` or a wrapper div. In `apply_branding.py` pass `--dark-proposal`.

| Token | CSS variable | Hex | Role |
|---|---|---|---|
| Page fill | `--dark-page-fill` | `#160329` | Full page background |
| Body text | `--dark-text` | `#e8e1f2` | All body copy |
| Heading | `--dark-heading` | `#ffffff` | H1, H3, H4, cover title — uppercase white |
| Muted | `--dark-muted` | `#a79bc2` | Subtitle, meta, footer text |
| Hairline | `--dark-hairline` | `#3a2760` | Table borders, dividers |
| Bar accent | `--dark-bar-accent` | → see Lavender in Colour palette | Accent bars, cover border, links |
| H2 colour | `--dark-heading-2` | `#4fc2b0` | H2 only — teal variant |
| Table header fill | `--dark-table-header` | → see Super Purple in Colour palette | Table header fill |
| Row even | `--dark-row-even` | `#211039` | Table even rows |
| Row odd | `--dark-row-odd` | `#1b0a31` | Table odd rows |
| Total fill | `--dark-total-fill` | `#321357` | Summary/total rows |
| Box fill | `--dark-box-fill` | `#221040` | Callout and price box backgrounds |
| Box / price stroke | `--dark-box-stroke` | → see Lavender in Colour palette | Border on callouts and price boxes |

**Logo on dark proposal:** white primary logo (`logos/primary_logo/gemma_primary_logo_white.svg`).

---

## Decorative elements

All files live under `${CLAUDE_SKILL_DIR}/assets/elements/`.

### Bars — signature 3-bar motif

| File | Use |
|---|---|
| `bars/gemma_bars.svg` | Colour (Super Purple / Midnight Plum / black) — light backgrounds |
| `bars/gemma_bars_white.svg` | Dark backgrounds (cover) |
| `bars/gemma_bars_black.svg`, `_plum.svg`, `_purple.svg`, `_lavender.svg`, `_teal.svg`, `_coral.svg`, `_yellow.svg`, `_negativ.svg` | Single-colour variants |

### Asterisk — starburst accent

| File | Colour |
|---|---|
| `asterisk/gemma_asterisk_purple.svg` | Super Purple |
| `asterisk/gemma_asterisk_plum.svg` | Midnight Plum |
| `asterisk/gemma_asterisk_lavender.svg` | Lavender |
| `asterisk/gemma_asterisk_teal.svg` | Fresh Teal |
| `asterisk/gemma_asterisk_coral.svg` | Tingy Coral |
| `asterisk/gemma_asterisk_yellow.svg` | Sunny Yellow |
| `asterisk/gemma_asterisk_white.svg` | White |
| `asterisk/gemma_asterisk_black.svg` | Black |

### Semicolon — typographic accent

Same colour range as asterisk: `semicolon/gemma_semicolon.svg` (colour) plus `_purple`, `_plum`, `_lavender`, `_teal`, `_coral`, `_yellow`, `_white`, `_black`, `_negativ` variants.

### Blob — organic shape accent

`blob/gemma_blob_<colour>.svg` — available in purple, plum, lavender, teal, coral, yellow, white, black.

### Gem — gem shape accent

`gem/gemma_gem_<colour>.svg` — available in purple, lavender, teal, coral, yellow, white, black, and plum.

### Gradient

| File | Description |
|---|---|
| `gradient/gemma_gradient_horizontal.svg` | White → purple → Midnight Plum → black, horizontal |
| `gradient/gemma_gradient_vertical.svg` | Same gradient, vertical |

Use sparingly — ideal for backgrounds, presentations, or key visuals. Never apply to small elements, icons, or text.

---

## Implementation defaults [IMPL]

The following values are not specified in the [corporate manual](https://drive.google.com/file/d/1TvEoUXyv5Q7BW8-7sTi1zxQcP1e4L39Q/view?usp=drive_link). They are used in
`base.html` and `apply_branding.py` as practical defaults only.

- Page max-width: 860px
- Page padding: 40px vertical / 48px horizontal
- Table row tints and callout backgrounds: rgba() derived from brand colours
- Heading/footer margins and spacing
- Cover decoration sizing and positioning
- Categorical chart/Gantt fills: the `gantt-chart-generator` skill uses the four brand hues (Fresh Teal `#2d9b8b`, Sunny Yellow `#ffe000`, Lavender `#a976e5`, Tingy Coral `#ed5c58`) as distinct category colours in one chart. This intentionally overrides the "accents not combined" rule above — categorical data needs distinguishable colours, and staying within the brand palette is preferable to inventing new ones. Applies to data-viz only, not to document layout.

Update these once layout specs are confirmed.