# GatherMe brand guidelines GatherMe is a modern learning platform for teams: assign training, track compliance, and prove completion, without the busywork. Australian made and hosted. This guide keeps the brand consistent wherever it shows up, from the app to a LinkedIn banner. **Tagline:** Workplace training, made simple. --- ## 1. Voice and tone GatherMe sounds like a calm, capable colleague, not a software vendor. We are warm, plain-spoken and confident. We talk about people and outcomes, not features and jargon. **Principles** - **Plain English.** Short sentences. Say the thing. If a word would make a busy manager pause, cut it. - **Benefit first.** Lead with what it does for them, not what the software has. - **Warm, not corporate.** We are in the care and community sector. Speak like a person. - **Confident, not hypey.** No exclamation marks stacked up, no "revolutionary", no "game-changing". - **Australian.** Australian spelling (organise, colour, licence). "Australian made and hosted" is a real trust signal; use it. - **Sentence case** everywhere, including buttons and headings. Never Title Case, never ALL CAPS. - **No em dashes.** Use commas, full stops or brackets. **Do** - "Workplace training your team will actually finish." - "Renewals remind themselves before they lapse." - "Export the records you need for an audit in a couple of clicks." **Don't** - "Leverage our synergistic, best-in-class learning ecosystem." - "Revolutionise your L&D paradigm!" - "Utilise" (say "use"), "robust solutions", "seamless experiences". Second person ("your team", "you") is the default. Address the manager who answers to the auditors. --- ## 2. Logo The mark is the **dot-ring**: fourteen dots gathering, graduated in size, around a central coral dot (the "me"). It reads as a group around a person, which is the whole idea of GatherMe. The wordmark sets "Gather" in ink and "Me" in teal. **Variants** - **Standard** (`logo/gatherme-logo.svg`) on light backgrounds. - **White** (`logo/gatherme-logo-white.svg`) on teal, deep-teal, or photographic backgrounds. - **Mark only** (`logo/gatherme-mark.svg`) for favicons, app icons, avatars and tight spaces. - **Mono** (`logo/gatherme-logo-mono-black.svg` / `-white.svg`) for single-colour print and engraving. **Rules** - **Clear space:** keep padding around the logo at least equal to the height of the dot-ring mark. - **Minimum size:** mark down to 16px (favicon) is fine; the full lockup needs about 120px wide to stay legible. - **In the product** the mark is drawn from the brand tokens, so a tenant's instance shows the mark in their colours. GatherMe's own surfaces use teal and coral. - **Do not:** recolour, stretch, rotate, add shadows or outlines, crop the ring, or place the standard (dark) logo on a busy or dark background (use the white logo there). --- ## 3. Colour The platform runs on four primitives. Everything else (hovers, borders, tints) derives from them, so a tenant rebrands by overriding these four. | Role | Name | Hex | Use | | --- | --- | --- | --- | | Primary | Pine teal | `#0B6E5F` | Buttons, links, headings, the mark, focus rings | | Accent | Coral | `#FF6B5E` | The mark centre, badges, highlights, small flourishes | | Dark | Deep teal | `#0A2E28` | Dark sections, footers, gradients, the white logo's backdrop | | Background | Mist | `#F5F8F7` | Page background | | Text | Ink | `#1F2433` | Body copy | | Tint | Light teal | `#E6F3F0` | Soft fills behind teal regions | | | White | `#FFFFFF` | Surfaces, cards | **Status colours (shared, not brand):** success `#1F9D55`, warning `#B8730B`, danger `#D64545`. Keep these separate from coral. Coral is a brand flourish; red means destructive. **Accessible pairings (this matters for a compliance product)** - Pine teal and white pass WCAG AA both ways (about 6:1). Use teal for text and buttons, white text on teal. - **Coral is a graphic colour, not a text colour.** Coral on white is about 2.8:1 and fails for text. Use coral for fills and shapes only. If you must put text on a coral fill, use dark coral `#4A1B0C`. - Ink on mist and white on deep teal are both high contrast; use freely. --- ## 4. Typography **Plus Jakarta Sans** is the single brand typeface, across the marketing site and the app (loaded from Google Fonts). The logo wordmark is supplied as outlines, so no font file is needed to use the logo. **Type scale** (from the design tokens) | Step | Size | Use | | --- | --- | --- | | 3xl | 31px | Page titles (H1) | | 2xl | 24px | Section headings (H2) | | xl | 20px | Sub-headings (H3/H4) | | lg | 17px | Lead paragraphs, dialog text | | md | 15px | Body, buttons (default) | | sm | 13px | Labels, secondary text | **Weights:** 400 regular (body), 500 medium (buttons, labels), 600 semibold (dialog titles), 700 bold (emphasis, sub-headings), 800 extrabold (page titles, the wordmark). Headings use tight tracking (`-0.011em`) and a 1.2 line height; body runs at 1.55. --- ## 5. Iconography and imagery - **Icons:** simple line icons, ~2px stroke, rounded caps and joins, drawn in ink or teal. Match the weight of the ones on the marketing site. Avoid filled, novelty or 3D icons. - **Imagery:** real people, real workplaces, warm and unposed, leaning to the care and community sector. Avoid stocky "business handshake" photos. Where a photo sits under text, use the deep-teal overlay so the white logo and copy stay legible. - **Shapes:** the dot motif from the mark can be reused sparingly as a soft background texture; keep it subtle. --- ## 6. Files in this pack - `logo/` SVG masters plus transparent PNGs (256 to 2048px), standard and white, plus mono. - `favicon/` 16/32/48 PNG, `.ico`, apple-touch (180), PWA icons (192/512 plus maskable), `site.webmanifest`. - `app-icons/` iOS 1024, Android 512 plus maskable. - `social/` OG (1200x630), X card and header, LinkedIn banner and logo, Facebook cover, YouTube banner, square avatars (400/512/1000). - `tools/generate.mjs` regenerates every PNG from the SVG masters after a colour change (`npm i sharp png-to-ico`, then `node generate.mjs`). Brand colours: Teal `#0B6E5F` / Coral `#FF6B5E`. Tagline: Workplace training, made simple.