Brand

How it works

• BigBang is brand-neutral. Each customer’s brand comes as a closed-schema brand pack and is applied at build time; no theme is loaded at runtime (D-09).
• A brand pack carries only colour ramps, fonts, the radius.preset and shadow.tint values, logo files and brand strings. Component structure never changes per brand (BRAND-04).
• A product screen never hard-codes the brand name; it comes from the {brandName} variable. “BigBang” is the design system’s name only (D-12).
• The brand switcher on this site shows the same components with a different brand pack.

Brand pack contents

brands/<brand-id>/
  brand.manifest.json     id, pack version, schema version, locales, legal entity name,
                          support contact, app name, fonts, licences
  tokens/                 primitives.json, overrides.dark.json, brand-type.json, brand-effect.json
  assets/logo/            primary, stacked, symbol, mono, inverse, print, email
  assets/favicon/         SVG and 32, 180, 192, 512 px PNG
  assets/app-icon/
  assets/illustration/    one SVG per slot
  fonts/                  *.woff2 and licence record
  content/                messages.{tr,en}.json (brand.* only), legal.json, templates/

Rule	Detail
Brand id	Kebab-case, not the legal name: sample-brand
Closed schema	An empty slot or another brand’s file stops the build; there is no silent fallback to the default brand (BRAND-01).
Colour	brand, accent and neutral ramps with 11 steps from 50 to 950. A value that fails 4.5:1 for text or 3:1 for borders and state indicators is moved along its ramp, never shipped as is (BRAND-07, BRAND-12).
Font	woff2 file with a licence record that allows commercial web use; covers Ç Ğ İ ı Ö Ş Ü and ₺. If the licence cannot be verified, Inter is used.
Version	packVersion is a semantic version; a schema change is a major (BRAND-08).
Provisional pack	Until the customer’s brand guide arrives, the pack is marked provisional: it runs in development, Storybook and acceptance testing, never in production (BRAND-14).

Logo slots

Every brand pack fills this closed slot list (BRAND-13). An empty slot uses the neutral placeholder and makes the pack provisional.

Slot	Format	Where
logo.primary	Horizontal, full-colour SVG	App header, sign-in screen
logo.stacked	Vertical, full-colour SVG	Narrow and square areas
logo.symbol	Mark only, SVG	Collapsed side menu, small areas
logo.mono	Single-colour SVG	Single-colour print, watermark
logo.inverse	SVG for dark backgrounds	Dark mode, dark surfaces
logo.favicon	SVG and 32, 180, 192, 512 px PNG	Browser tab, home screen
logo.app-icon	App icon	Mobile app
logo.print	Single colour	Receipts and PDF
logo.email	PNG	Email templates

Clear space

Leave space around the logo that no other element enters. The default clear space is half the height of the logo mark, on all four sides. A brand pack may set its own value per slot in the manifest; it can never be smaller than the default.

The dashed line shows the clear space; no text, icon or border enters it.

Minimum size

Slot	Screen	Print
logo.primary	24 px high	8 mm high
logo.stacked	40 px high	14 mm high
logo.symbol	16 px	5 mm

Below these values the logo does not read. For a smaller area use logo.symbol. A brand pack may set a larger minimum size.

Background and colour

• Use logo.primary on light backgrounds and logo.inverse on dark ones. In dark mode BrandLogo switches by itself (TKN-12).
• The logo is never recoloured, never given shadows, outlines or effects, never rotated and never stretched.
• The logo is not placed on photos or patterned backgrounds. If it must be, it sits on a flat surface with its clear space.
• Logos are exempt from the contrast rule; still, choose the version that does not blend into the background.

Co-branding

When the customer’s brand appears together with a partner’s brand:

• The customer’s logo comes first (left in left-to-right reading), the partner’s logo after.
• A 1 px vertical divider in border-default sits between the two logos, with clear space on both sides.
• Both logos look the same optical height; neither is shown larger.
• The partner logo is used from the partner’s own file, with its colours unchanged. Its source and usage permission are written in the asset register (ASSET-05, BRAND-10).
• Card network and payment method marks follow each owner’s own rules and live in a separate folder; the design system never redraws them.
• The two logos are never merged into one mark.

BrandLogo rules

BrandLogo is the single entry point for logos in product screens; a logo file is never used directly through <img> or an import (BRAND-10).

Rule	Detail
Slot	The slot prop is one of the list above: primary, stacked, symbol, mono, inverse.
Mode	In dark mode, a request for primary draws inverse.
Source	The file comes from the same origin (img-src 'self'); there are no inline styles (BRAND-03).
Size	height comes from the token scale and cannot go below the slot’s minimum size.
Accessible name	Logo on its own: name {brandName}. Inside a link to the home page: the link’s name is {brandName}, home. When the brand name is written as text next to it, the logo is decorative and takes alt="".
Register	Every logo file is listed in the brand asset manifest with owner, licence, permitted uses and expiry; a file missing from the list stops the build.

The BrandLogo component is not built yet; this table is its contract.

Adding a new brand

1. Collect the brand details from the customer: legal name, support contact, colours and their intent, SVG logos, font licence.
2. Create a new pack from the empty schema; never copy another brand’s files.
3. Validate the pack: schema, contrast and brand-name scan.
4. Build the brand and mode matrix; review every component in the new brand.
5. The design lead and the customer’s brand owner approve the brand acceptance page; then the provisional mark is lifted.

Guidelines

Use the logo through BrandLogo

<BrandLogo slot=“primary” height=“lg” />

DoSlot, mode and accessible name come from the brand pack.

<img src=“/logo.svg” />

Don'tA direct file path ties the screen to one brand and draws the wrong version in dark mode.

Do not hard-code the brand name

Your {brandName} account

DoThe name comes from the brand pack; the same screen works for every brand.

Your Sample Brand account

Don'tA fixed name is wrong when the screen is delivered to another customer.