# AnalyticLab Brand Guide Version 1.3 — derived from analyticlab.io, August 2026. This guide governs visual and verbal communication across every AnalyticLab surface: the marketing site, product collateral, investor materials, partner integrations, social channels, and internal documents. The system is intentionally narrow — a single hexagonal mark, a tight cyan + green palette, and one geometric "data node" motif — so that every artifact reads as AnalyticLab at a glance, regardless of who designed it. The legal entity is AnalyticLab. Use AnalyticLab in all marketing, product, and customer-facing copy. The first product is Preston-Check; product names are independent and may carry their own brand color (see §3.2). --- ## 1. Brand Foundation AnalyticLab is a technology company that builds AI-augmented developer tools for fintech and other regulated industries. The brand expression must reinforce three ideas, in order: that the work is **analytical** (grounded in data, not intuition), that it is **rigorous** (compliance-mapped, not best-effort), and that it is **modern** (AI-augmented, CLI-first, open by default). The parent brand is the lab; products are experiments shipped from that lab. The visual system reflects this: the parent brand owns a single cool palette (cyan), and each product owns its own warm or saturated lead color (Preston-Check uses green). When AnalyticLab is presented as the company, cyan leads. When a product is the subject, the product's color leads. --- ## 2. Logo System The AnalyticLab mark is an outlined hexagonal chamber containing a three-node network — three satellite data points connected by traces to a luminous central core. The hex represents the lab; the network inside represents analytical work converging on insight. Treat the mark as a system seed, not just a logo: every icon and accent in the system traces back to the same node motif (§5.1). ### 2.1 Variants There are four logo variants stored in `logos/`: - `analyticlab-mark.svg` — the canonical hexagonal mark ("Network Core"). Default for app icons, social avatars, and any display from 28 px upward. - `analyticlab-mark-prism.svg` — alternate mark ("Prism"). Six refracting facets around a luminous core. Use only as a decorative variant in long-form material — never as the primary identity. - `analyticlab-logo.svg` — mark + `analytic|lab` wordmark in a horizontal lockup. Default for the navigation bar, decks, business cards, and email signatures. - `favicon.svg` — favicon-optimized mark. Same DNA as `analyticlab-mark.svg` (hex + 3 satellites + 1 core) but simplified for tiny sizes: filled-hex with white network inside, no filters, chunkier strokes. Engineered for 16-32 px browser tabs where the canonical mark's halo and gradient stroke collapse. ### 2.2 Clear space and minimum size Maintain clear space around the mark equal to the height of one satellite node (approximately 20% of the mark's height). No graphic element, photo edge, or text may enter that zone. Minimum sizes: 16×16 px for the mark only (favicon use); 160 px wide for the mark+wordmark lockup. Below those sizes the connection traces and central core become ambiguous. ### 2.3 What not to do Never recolor the mark to anything outside the cyan family defined in §3.1. Never apply additional drop-shadows, outlines, or bevels — the mark already includes its own atmospheric halo and core glow. Never separate the mark from the wordmark in the lockup with anything other than the prescribed gap (~25% of mark height). Never rotate the hexagon, never stretch it disproportionately. Never place the mark on a low-contrast background; the mark always needs at least an AA contrast ratio against its surface. The mark is designed for dark surfaces. On a light surface, use the wordmark only or commission a dedicated dark-mode mark; do not invert the cyan stroke to a generic dark color. ### 2.4 Wordmark The wordmark is the literal characters `analyticlab` set in Inter Bold (`font-weight: 700`) with tight letter-spacing (`-0.02em`). The first seven characters (`analytic`) render in primary text white (`#F3F4F6`); the last three (`lab`) render in cyan (`#38BDF8`). Do not substitute another typeface, do not use uppercase, do not break the word across two lines. --- ## 3. Color System The AnalyticLab palette is intentionally compact: a single cyan family for the parent brand, a single green family for the first product, and a tight neutral ladder for surfaces and text. ### 3.1 Parent brand — cyan | Token | Hex | Role | | --- | --- | --- | | `--brand-cyan-50` | `#F0F9FF` | Reserved highlights, near-white halos | | `--brand-cyan-100` | `#E0F2FE` | Logo gradient bright stop, satellite node fills | | `--brand-cyan-200` | `#BAE6FD` | Glow inner ring, hover states | | `--brand-cyan-300` | `#7DD3FC` | Logo connection traces, icon strokes, default accents | | `--brand-cyan-400` | `#38BDF8` | Logo gradient deep stop, primary CTA fills, wordmark accent | | `--brand-cyan-500` | `#0EA5E9` | Pressed states, deeper accents (sparingly) | The canonical logo gradient runs `#E0F2FE → #7DD3FC → #38BDF8` at `135deg`. Use this gradient on the mark stroke and as the headline accent gradient on hero typography. ### 3.2 Product colors Products may own their own brand color on **their own properties** — Preston-Check is green on `preston-check.com`, in its own README, and inside its terminal output. That separation is fine and useful: each product gets to develop its own visual equity in its own domain. On **AnalyticLab properties** — this site, decks, brand collateral, sales material — cyan leads regardless of which product is featured. Cross-product visual consistency on AnalyticLab surfaces beats per-product visual ownership. Otherwise the parent brand fragments every time we add a product. | Product | Color on its own property | On analyticlab.io | | --- | --- | --- | | Preston-Check | Green (`#22C55E`) | Cyan, like everything else | | (future) | Each product picks one distinct, AA-passing color before launch | Cyan, like everything else | Two semantic exceptions never change, regardless of brand context: - **CLI status colors in terminal output** — `PASS` is green (`#22C55E`), `FAIL` is red (`#F87171`), `WARN` is amber (`#FBBF24`). These are universal cross-tool conventions; brand colors don't override them. - **macOS window-control dot pattern** — red/yellow/green for close/minimize/maximize. Cosmetic-only when shown in terminal screenshots, but recognizable as "terminal" because of the convention. ### 3.3 Neutrals | Token | Hex | Role | | --- | --- | --- | | `--bg-0` | `#050706` | Canvas (near-black, never pure black) | | `--bg-1` | `#0A0D0C` | Surface depth, secondary panel | | `--text-primary` | `#F3F4F6` | Body text, never pure white | | `--text-muted` | `#9CA3AF` | Secondary copy, descriptions | | `--text-dim` | `#6B7280` | Tertiary labels, footers, dividers | | `--border` | `rgba(255,255,255,0.08)` | Card outlines on dark glass | | `--border-strong` | `rgba(255,255,255,0.14)` | Emphasized card outlines | Pure `#000000` and pure `#FFFFFF` are not used as canvas or body text. The canvas sits one step off black, and the foreground sits one step off white. This keeps the surfaces feeling engineered rather than flat and prevents the high-contrast harshness that fintech sites tend to fall into. ### 3.4 Approved gradients Gradients are reserved for typographic emphasis, the logo mark, and ambient surfaces (background blobs, hero glows). They never appear on solid UI surfaces or icon fills. The three canonical gradients, all set at `135deg` to maintain a consistent isometric light angle: - **Brand gradient** — `#E0F2FE → #7DD3FC → #38BDF8`. Used on the logo mark stroke, the product-name accent, and other primary brand surfaces. - **Headline gradient** — `#FFFFFF → #BAE6FD → #38BDF8`. Tri-stop white-to-cyan gradient used for the hero headline; transitions from neutral to brand. - **Stat number gradient** — `#F3F4F6 → #7DD3FC` at `180deg`. Used on the large animated counters; transitions from foreground to brand for a subtle pop. ### 3.5 Accessibility Every pairing of foreground text and background surface must meet WCAG AA (4.5:1 for body text, 3:1 for large text). Cyan-300 (`#7DD3FC`) and cyan-400 (`#38BDF8`) both pass AA on the near-black canvas. When using cyan-400 as small text on glass surfaces with backdrop blur, verify contrast against the local blurred background — it can drift under 4.5:1 if the blur picks up a bright element behind it. --- ## 4. Typography The system uses two typefaces only. ### 4.1 Inter (UI / marketing) Inter is the system typeface for headings, body copy, navigation, buttons, and all marketing surfaces. Loaded from Google Fonts at weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold). Local fallbacks: `-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif`. OpenType features `ss01` and `cv11` are enabled site-wide via `font-feature-settings` to use Inter's stylistic alternates for `a` and `g`. Headline scale uses fluid `clamp()` sizing: hero `clamp(2.6rem, 7.2vw, 5.4rem)`, section heading `clamp(1.9rem, 3.6vw, 2.8rem)`, eyebrow `0.78rem` uppercase with `0.18em` letter-spacing. Body text settles at `1rem` with `1.55` line-height for comfortable reading on long passages. ### 4.2 JetBrains Mono (code / technical chrome) JetBrains Mono is the typeface for terminal output, code blocks, inline `code`, version numbers, technical metadata, and any surface that should read as "machine-touched." Loaded at weights 400 and 500. Local fallback: `ui-monospace, "SF Mono", Menlo, monospace`. Use JetBrains Mono sparingly; if everything is monospace, nothing reads as technical. Reserve it for actual code, terminal panes, and small chrome labels. --- ## 5. Icon System Every AnalyticLab icon obeys a single visual rule: each icon must contain at least one filled `currentColor` circle (a "data node") that echoes the satellite/core nodes inside the logo mark. That single shared element is what turns a collection of icons into a visual family. ### 5.1 The four DNA rules Every icon must: 1. Use a `0 0 24 24` viewBox with no padding. 2. Render strokes at `1.7` weight with `round` line-cap and line-join. Inner detail strokes may drop to `1.4` weight for visual hierarchy but never below. 3. Contain at least one `` element — the data node motif. 4. Stroke color comes from `currentColor` so the consumer can recolor via CSS without editing SVG. Default render is cyan-300 (`#7DD3FC`); override on a per-product surface to that product's lead color. ### 5.2 Icon catalog Stored in `icons/svg/`. Current set (4): | File | Concept | Use | | --- | --- | --- | | `local-first.svg` | A monitor outline with a contained data node and lateral data lines. | "Your data stays here." Privacy, sandboxed, on-device. | | `ai-augmented.svg` | A 4-axis burst with 8 surrounding rays around a central node. | "Intelligence radiating around your data." LLM analysis, AI features. | | `compliance-mapped.svg` | A clause sheet with a tagged data node beside the rules. | "Every check ties back to a clause." Audit, regulation, evidence. | | `open-by-default.svg` | Angle brackets `<•>` framing a data node. | "Your code, our work, transparent." Open source, OSS, code-level. | To add a new icon: design against the four DNA rules, save to `icons/svg/`, add a row to this table, and re-render the gallery. --- ## 6. Voice & Tone AnalyticLab speaks as a precise, technically credible peer — never as a vendor selling fear. Tone characteristics, in declining priority: 1. **Specific over abstract.** "294 checks across 33 frameworks" beats "comprehensive coverage." Always lead with the load-bearing number. 2. **Technical without jargon.** Engineers should feel respected; non-engineers should still understand. Define terms once, then use them. 3. **Direct without aggression.** "We built this because [observed problem]." Never compare to named competitors. Never use words like "blazing," "powerful," or "industry-leading." 4. **Honest about scope.** If a feature is unbuilt, label it clearly (the roadmap card pattern). Do not imply parity we don't have. We are: an analytical lab, an engineering company, a fintech-native team, a CLI-first vendor. We are not: a SaaS platform, a security vendor, a compliance consultancy, a marketplace. --- ## 7. Distribution & Versioning This brand kit lives in the `brand/` folder of the [analyticlab.io](https://github.com/analytic-lab-works/analyticlab.io) repository. Pushing the kit to `main` deploys it to [https://analyticlab.io/brand/](https://analyticlab.io/brand/) via AWS Amplify (no extra configuration; the existing `**/*` artifact glob picks up new files automatically). To distribute the kit to a designer, partner, or contractor, share the `brand/` folder URL on the live site (https://analyticlab.io/brand/). That page renders every asset with copyable code, sized previews, and the color tokens from §3 — it is the canonical visual reference. Social channel assets live in `linkedin/`: profile logo (800×800), page banner (2256×382, text kept clear of the bottom-left avatar overlap zone), link-share card (1200×627), and two 1080×1080 feed posts. The PNGs are rendered from the HTML artboards in `linkedin/src/` — edit an artboard (or the copy in it) and re-run `sh linkedin/src/render.sh` (headless Chrome) to regenerate. The artboards reference the canonical mark SVG directly and bundle Inter as a variable font, so renders stay on-brand and reproducible. When updating the kit: 1. Edit `BRANDING.md` (this file). It is the source of truth. 2. Edit or add SVG assets in `logos/` or `icons/svg/`. 3. If you change the color palette or add an icon, update `index.html` so the catalog stays accurate. 4. Bump the version stamp at the top of this file and add an entry to §8. --- ## 8. Changelog - **v1.3** — 2026-08-14. LinkedIn corporate page image set added (`linkedin/`): profile logo, banner, link-share card, and two feed posts, all rendered from committed HTML artboards (`linkedin/src/`) that use the canonical mark, the §3.4 gradients, and hero copy from the live site. §7 updated with the regeneration workflow. - **v1.2** — 2026-05-04. Favicon-optimized mark added (`logos/favicon.svg`): same DNA as the canonical Network Core but simplified for 16-32 px browser tabs (filled hex, no filters, chunkier strokes, white-on-cyan). Legacy v0 green mark removed from the kit and from the gallery — the brand is fully cyan, no green archive surface. - **v1.1** — 2026-05-04. Single-tone schema confirmed: AnalyticLab properties use cyan throughout regardless of which product is featured. Products keep their own brand color on their own properties only. §3.2 and §3.4 updated; product-green gradient retired in favor of headline + stat-number cyan gradients. - **v1.0** — 2026-05-04. Initial brand kit. Network Core mark adopted as canonical (replacing the v0 green-filled hex with checkmark). Cyan parent palette, four pillar icons standardized around the data-node motif. Folder structure mirrors the blox.global brand kit pattern.