Brand Identity

Logo & Brand Mark Builder Component

The BrainStorm logo consists of two elements: the mark (the wing/arc symbol) and the wordmark (the typeset name). They appear together as a full lockup or standalone mark at smaller sizes. Every render across the product — primary navigation, page covers, footers, prototypes — goes through the buildLogo() builder (.bsn-logo-mount): a single source of truth for SVG paths, surface-derived fill color, minimum-size enforcement, and ARIA. Never hand-write the logo SVG paths.

Logo variants — approved surfaces

On white

Primary — black on white

On Salt

Black (Carbon, #000) on Salt (#f6f4ed)

On Alpine · reversed

Reversed — all White (wordmark + mark)

Accent — BSI Yellow BG

Black logo on BSI Yellow — never the white logo

The swatches above use size:"fluid" — the SVG fills 100% of its container and the parent controls sizing. Use fluid for responsive containers (hero banners, swatch grids). For all product UI, always pass a specific size or named preset (sm / md / lg / numeric px).

Standalone Mark — variants by surface

The cap icon may be used independently when the BrainStorm brand is already established in context — app icons, favicons, social avatars, embossed print treatments. It should never replace the full logo in primary brand communications. Color rules mirror the full logo: Black on light, White on dark, Black on BSI Yellow.

Icon — light BG

Black icon on Salt, Albion, or white

Icon — dark BG

White icon on Alpine, Timpanogos, Canyonlands, or Carbon

Icon — BSI Yellow BG

Black icon on BSI Yellow — never the white icon

Builder API

Use the mount point in HTML or window.bsnLogo(variant, opts) inside other builders. Config drives all rendering decisions — never pass raw SVG or hex values directly.

HTML mount point:

<div class="bsn-logo-mount" data-bsn-logo='{
  "variant": "full",
  "surface": "dark",
  "size": 130,
  "href": "/",
  "label": "BrainStorm — home"
}'></div>

Builder JS (inside another builder):

// Expanded nav wordmark
var fullSvg = window.bsnLogo('full', { surface: 'dark', size: 130 });
// Collapsed nav mark (CSS toggles visibility)
var markSvg = window.bsnLogo('mark', { surface: 'dark', size: 32, 'class': 'nav-logo-mark' });

Prop	Type	Default	Description
`variant`	`"full" \| "mark"`	`"full"`	Full lockup (wordmark + cap icon) or standalone cap icon only.
`surface`	`"light" \| "dark" \| "yellow"`	`"light"`	Drives fill color per brand guide: `light` → `#000`, `dark` → `#fff`, `yellow` → `#000`. Never pass hex directly.
`size`	`"sm"\|"md"\|"lg"\|"fluid"\|number`	`"md"`	full: sm=120px (min), md=160px, lg=240px. mark: sm=24px (min), md=32px, lg=48px. `"fluid"` = 100% container width. Numbers below brand minimums are clamped with a console.warn.
`href`	string	—	Wraps the SVG in `<a class="bsn-logo-link">` with correct `aria-label`. Inner SVG becomes `aria-hidden`.
`label`	string	`"BrainStorm"`	ARIA label. On `<a>` when linked; on SVG (with `role="img"`) when standalone. Omit for purely decorative renders.
`color`	`"black" \| "white"`	inferred	Explicit fill override. Logs a warning when it differs from the surface default. Rarely needed.
`class`	string	—	Extra CSS class on the SVG element — e.g. `"nav-logo-mark"` for the nav's collapsed-state visibility toggle.

Clear space rule

Minimum clear space = 1× the height of the mark on all sides. No text, graphics, or UI elements inside this zone.

Minimum sizes

Digital: 120px full logo · 24px standalone mark. Print: 25mm (1 in) full logo.

120px min · full logo

24px min · mark only

Logo do & don't

Use the logo at the correct proportions
Maintain minimum clear space around the logo
Use approved color variants on appropriate backgrounds
Use the provided logo files (SVG/PNG)
Place the logo on clean, uncluttered backgrounds

Don't

Don't stretch or distort the logo
Don't crowd the logo with other elements
Don't recolor the logo in unapproved colors (no Alpine, no BSI Yellow on a Yellow surface, no off-palette tints)
Don't add drop shadows, outlines, or effects
Don't place the logo on busy photographic backgrounds

In-context usage

The same builder powers every logo surface in the product. Sizes and surface configs are fixed per context — do not deviate from these specs.

Primary Navigation Header

Expanded: variant:"full" · surface:"dark" · size:130
Collapsed: variant:"mark" · surface:"dark" · size:32 · class:"nav-logo-mark"
CSS toggles between the two SVGs — both are in the DOM.

Page Cover / Hero

variant:"full" · surface:"dark" · size:280
Demo shows 180px; DS site cover uses 280px.

Footer href prop

variant:"full" · surface:"dark" · size:160 · href:"/"
Adding href wraps the SVG in <a class="bsn-logo-link"> with full ARIA.

Files: The master logo files are available in SVG, EPS, and PNG on the Assets & Downloads page. The mark uses viewBox 0 0 188 123.08 if extracted separately.

Color rules (per brand guide):
• Light surfaces (Salt, Albion, white) — entire logo (wordmark + mark) in Carbon (#000). Minimum contrast ratio: 7:1. Never Alpine on Salt or white.
• Dark surfaces (Alpine, Timpanogos, Canyonlands, Carbon) — entire logo (wordmark + mark) in White (#ffffff). Minimum contrast ratio: 7:1.
• BSI Yellow surfaces — Black logo (Carbon #000). Never the white logo on yellow (contrast is insufficient).
• Standalone Mark — same 3-surface color rules. Use the cap icon independently only when the BrainStorm brand is already established in context (app icons, favicons, social avatars, embossed print); never as a replacement for the full logo in primary brand communications.
• Clear space — equal to the height of the cap icon on all four sides. No text, graphics, or UI elements inside this zone.
• Minimum size — 120px (full logo) / 24px (standalone mark) digital; 25mm (1 in) full logo in print.
• Never BSI Yellow for the logo or mark on any non-Yellow surface.
• Never recolor the wordmark and mark independently, and never add drop shadows, outlines, or effects.

Component consumers — builders that call bsnLogo() internally:

• buildNav() — calls bsnLogo('full', { surface:'dark', size:130 }) for the expanded wordmark and bsnLogo('mark', { surface:'dark', size:32, class:'nav-logo-mark' }) for the collapsed mark. No logo path data lives in buildNav itself — CSS toggles visibility between the two SVGs.
• buildLogo() — the .bsn-logo-mount mount-point processor; delegates entirely to window.bsnLogo().
• DS site cover and footer — use .bsn-logo-mount directly (not inside another builder).

Rule for future builders: If a new component needs the logo, call window.bsnLogo(variant, opts). Never copy the SVG path data — the single-source rule applies to all future builders permanently.