Content System

The Brik Content System (BCS) is the content-vocabulary peer to the visual token system. Same cascade pattern as tokens, but for copy instead of colors. Lives in content-system/ in the BDS repo and ships from the same npm package via a second entry point.

import {
  industryPacks,
  voicePatterns,
  PERSONALITY_VALUES,
  VOICE_VALUES,
  VISUAL_STYLE_VALUES,
  IMAGE_MOOD_VALUES,
  DEFAULT_INDUSTRY_SLUG,
  type IndustryPack,
  type VoicePattern,
} from '@brikdesigns/bds/content-system';

BDS answers "what does the site look like?" — tokens, components, blueprints, themes. BCS answers "what does the site sound like, and for whom?" — voice patterns, industry packs, service catalogs, regulatory constraints, brand vocabulary.

Both live in the same repo because they're the same kind of artifact: a versioned vocabulary that many consumers depend on. Portal, mockup generators, content automations, and strategy workers all import from here.

Architecture

content-system/
├── vocabularies/   Locked enums — single source of truth for portal axes
│   ├── personality.ts     11 traits
│   ├── voice.ts           8 traits
│   ├── visual-style.ts    11 traits
│   ├── image-mood.ts      6 photography moods
│   └── industry.ts        slug registry
├── schema/         TypeScript types for pack authoring
├── industries/     Industry packs — data + narrative ({slug}.ts + .mdx)
├── voices/         Voice patterns — 8 VoicePattern files + blender spec
├── brand/          Brik's own meta-voice (agency voice/tone substrate)
└── compliance/     Canonical compliance standards (markdown source of truth)

Each industry pack is two co-located files: a .ts file exporting the typed IndustryPack data, and an .mdx page that renders the narrative companion. Both describe the same industry — keep them in sync.

Compliance docs are plain markdown that ships with the package so consumer repos can reference the canonical path at node_modules/@brikdesigns/bds/content-system/compliance/{name}.md. Each doc has a browse companion under Compliance; edit the .md as source of truth.

What's in here

The three axes

Captured in the client portal; imported from here so nothing drifts.

Clients pick up to 3 in each axis. Overlap across axes (e.g. "Approachable" in Personality + Voice) is a strength signal the resolver weights higher.

Voice patterns

8 canonical voices, 8 patterns authored. Browse the Voices page to see all 8 side-by-side with examples.

Industry packs

4 registered slugs, 4 with full packs ported.

How the cascade works

Same shape as tokens: industry defaults → client overrides win.

When a strategy doc, mockup, or page generates for a client, the BCS resolver:

1. Loads the industry pack for company_profile.industry_slug (defaults to small-business)
2. Layers on the client's voice picks, atmosphere selection, and copy overrides
3. Returns a single resolved view that automations + content workers consume

Client overrides on cta_language, anti_messages, and naming_conventions always win over industry seeds. Empty client fields fall through to the industry default.

How BCS feeds Theming

Content and Theming are peer tenets that meet at one specific seam: industry packs declare default theming decisions. Each pack carries a default atmosphere and a default navigation archetype — the portal resolver applies these before the client-specific brand theme loads, and the client override wins only if set.

industry pack (BCS) ──▶ atmosphere default      ──▶ client override?
                   └──▶ navigation archetype    ──▶ client override?
                   └──▶ blueprint affinity tags ──▶ mockup generator picks

This keeps the multi-tenant flow short. A new dental client inherits the dental pack's editorial atmosphere and its navigation archetype automatically; their theme-{client}.css only adjusts what genuinely needs to change — brand color, typography, surface tints. The rest of the theming composition is already correct for the industry.

See the Theming Overview for how the four theming layers (tokens, atmosphere, navigation archetype, blueprint) compose, and drill into each layer via:

• Atmospheres — mood overlays, full vocabulary, per-atmosphere previews
• Layout Archetypes — site-header and site-footer pattern vocabularies with per-industry defaults
• Blueprints — section composition tagged by mood + industry

How the portal uses BCS

// In the portal resolver:
import {
  industryPacks,
  DEFAULT_INDUSTRY_SLUG,
  type IndustrySlug,
} from '@brikdesigns/bds/content-system';

function resolveBrandLanguage(profile: CompanyProfile) {
  const slug = (profile.industry_slug ?? DEFAULT_INDUSTRY_SLUG) as IndustrySlug;
  const pack = industryPacks[slug];

  return {
    ctaLanguage: {
      approved: dedupe([
        ...profile.cta_language?.approved ?? [],  // client override wins
        ...pack.ctaDefaults.approved,              // industry default fills gaps
      ]),
      rejected: dedupe([
        ...profile.cta_language?.rejected ?? [],
        ...pack.ctaDefaults.rejected,
      ]),
    },
    vocabulary: {
      preferred: pack.vocabulary.preferred,
      avoid: [
        ...pack.vocabulary.avoid,
        ...profile.anti_messages.map((m) => ({ term: m, reason: 'client-specified' })),
      ],
    },
    // ...page archetypes, services, regulatory, seasonality...
  };
}

Same cascade pattern as token theming: client > industry > baseline.

Pack lifecycle

Every pack carries a version, reviewCadence, and lastReviewed field. Bump version on content change. Update lastReviewed when you confirm accuracy on a review pass — even with no changes.

The catch-all small-business pack graduates a new vertical out when any of the following is true:

1. Brik has 3 or more active clients in that vertical, OR
2. The vertical has meaningfully different seasonality, regulation, or terminology from the catch-all, OR
3. Strategy documents for that vertical are materially the same 60%+ of the time, signaling a repeatable pattern worth codifying.

See Industries → Dental for a fully-fleshed reference pack.

Authoring an industry pack

Either authoring net-new or graduating a vertical out of small-business:

1. Add the slug to vocabularies/industry.ts under INDUSTRY_SLUGS.
2. Create industries/{slug}.ts — typed IndustryPack data. Use dental.ts as a model for structure depth.
3. Create industries/{slug}.mdx — narrative companion (this docs site auto-discovers it).
4. Register the pack in industries/index.ts.
5. Backfill existing clients in the portal by updating company_profiles.industry_slug (graduation only).
6. Bump the source pack's version and set lastReviewed to today. Log the graduation in the changelog.
7. Run npm run build:content-system && npm run build-storybook to validate. The Record<IndustrySlug, IndustryPack> type contract ensures every slug in INDUSTRY_SLUGS has a matching pack at typecheck time.

Review cadence is quarterly by default. CI flags packs past their review date (future enhancement).

Phase roadmap

• ✓ Phase 1 — Vocabulary lock + schema + first 3 industry packs
• ✓ Phase 2 — 8 voice pattern files + blender spec
• ☐ Phase 3 — Resolver in portal (resolveBrandLanguage, resolveTheme, composeBlueprints)
• ☐ Phase 4 — Blueprint library materialized with Personality/Voice/VisualStyle tags
• ☐ Phase 5 — Claude Design in Paper consuming resolved output
• ☐ Phase 6 — Build script: content-system.json emit for non-TS consumers

Related

• Industries — pack catalog
• Voices — voice patterns the resolver blends
• Brand — Brik's own meta-voice
• Compliance → Healthcare ADA — canonical accessibility standards
• Vocabularies → Image Mood — photography mood vocabulary
• Theming Overview — how the four theming layers compose and how BCS feeds them
• Atmospheres — mood overlay selected per industry pack
• Layout Archetypes — site-header and site-footer patterns selected per industry pack
• Color primitives — visual tokens that pair with these content vocabularies