---
name: hskb-brand-system
description: Apply, implement, or review the approved HSKB / 博格港湾 / Harbor Stem V14 Reference-Locked Frame H visual identity across websites, presentations, documents, social media, signage, merchandise, partner lockups, and production exports. Use whenever a task mentions HSKB, 博格港湾, Harbor Stem, HSKB branding, VI, logo, colors, typography, brand review, website redesign, PPT design, campaign design, or brand asset handoff.
---

# HSKB Brand System

Treat HSKB V14.0 Reference-Locked Frame H as the only current identity master. V14.1.0 is the approved application release built around that unchanged master. The user-supplied PNG is immutable evidence; every production symbol must preserve its red coverage, geometry, position and `1020:1019` aspect ratio. Gallery Frame is the approved layout language, not a modification of the logo.

## Start every task

1. Identify the surface, audience, dimensions, production method, language and required deliverables.
2. Inspect existing work before editing. Preserve content and functionality unless the user asks to change them.
3. Read only the relevant reference:
   - Logo selection, geometry, sizing or export: [references/logo-system.md](references/logo-system.md)
   - Color or accessibility: [references/color-system.md](references/color-system.md)
   - Font, hierarchy or licensing: [references/typography.md](references/typography.md)
   - Grid, imagery, frame anatomy or composition: [references/layout-system.md](references/layout-system.md)
   - Website implementation: [references/website-system.md](references/website-system.md)
   - Application principles or Exhibition / Connect / Proof mode: [references/applications.md](references/applications.md)
   - Select one of the 60 editable V14.1 templates: [references/application-library.md](references/application-library.md)
   - Artwork release, P0/P1, proofing or fabrication: [references/production-workflow.md](references/production-workflow.md)
   - Meaning, voice and provenance: [references/brand-foundation.md](references/brand-foundation.md)
   - Global benchmarks or second-phase system extensions: [references/research-layer.md](references/research-layer.md)
4. Use the production files in `assets/logo/`; never redraw, trace, retype, recolor, crop, stretch, center-correct, decorate or rebuild the H.
5. Use `assets/spec/identity-master.json`, `assets/spec/geometry-lock.json` and `assets/tokens/hskb-brand-tokens.json` as identity sources of truth. Use `assets/spec/application-matrix-v14.1.json` only for application selection and production metadata.
6. Run `python3 scripts/validate_brand_assets.py` before handoff.

## Non-negotiable rules

- Use V14.0 only as the identity master; use V14.1.0 as the current application release. V13 and earlier are historical and must not re-enter production.
- Keep the H red in every context. Never make a black, white, inverted, outlined, gradient or transparency variant.
- Production sRGB colors are Reference Red `#FF2F2D` and Gallery Ink `#002E39`. The screenshot's raw Apple Generic RGB values are evidence only and must not be pasted into CSS.
- Preserve the locked `1020 × 1019` red bounds, `13 × 340` upper and lower cuts, `339 px` bridge and the original slight right/down offset. Do not “fix” its centering.
- Scale uniformly with contain behavior; do not force the almost-square symbol into a square box.
- White, Mat White and Gallery Ink are approved backgrounds. On Gallery Ink the H remains red.
- Gallery Frame may use a white/silver frame, Mat White mount, Gallery Ink field and caption. It surrounds the composition; it never becomes part of the core mark.
- Use square geometry, fine rules, strong alignment and generous whitespace. Avoid pill-heavy UI, generic card grids, gradients, glass effects and decorative animation. A restrained physical-frame shadow is allowed only inside the Gallery Frame system.
- Do not embed or redistribute commercial font files without the appropriate licence.
- Do not state or imply that copyright, trademark or endorsement rights have been cleared. Public trademark use requires written clearance or legal review.
- Third-party case studies may influence layout, motion and governance only. Never import their proprietary shapes, typography, colors, compositions or behavior into the H.

## Choose the asset

- Standard light background: `assets/logo/hskb-v14-primary.svg`.
- Gallery Ink or other approved dark field: `assets/logo/hskb-v14-reversed.svg`; the H remains Reference Red.
- Chinese-only context: `assets/logo/hskb-v14-chinese.svg`.
- English-only/international context: `assets/logo/hskb-v14-english.svg`.
- Avatar, favicon, app icon or compact navigation: `assets/logo/hskb-v14-symbol.svg` or the matching bundled PNG/icon.
- Gallery presentation: `assets/frame-system/hskb-v14-gallery-frame.svg` as a layout reference, never as the everyday logo.

Prefer SVG for layout and the bundled PNG/ICO only where required. Do not export JPEG logos. If a production method requires a one-color black or white mark, stop and request an authorised fabrication variant; do not recolor this master.

## Build a composition

1. Choose an application mode: Exhibition for prestige and institutional moments, Connect for daily communication, or Proof for evidence and outcomes.
2. Select the nearest V14.1 master from `assets/applications/`; do not start from an unrelated template.
3. Establish the editorial grid and hierarchy before decoration.
4. Choose one protagonist: a message, image, number or framed H.
5. Use one frame, one protagonist and one red signal per composition.
6. Place one logo variant on a clean approved field; never cover it with imagery.
7. Use real approved imagery with one consistent treatment.
8. Test minimum size, contrast, mobile behavior, print process and `prefers-reduced-motion`.

## Website implementation

- Use `/brand/hskb-v14-*` versioned URLs; never overwrite a legacy V13 URL as the only cache update.
- Update Header, Footer, favicon/app icons, metadata, JSON-LD, social cards, manifest, brand page, 404, tests and static export together.
- Keep the mark as an image asset; never recreate it with CSS shapes, live text or an icon library.
- Install current assets with `python3 scripts/install_web_assets.py /absolute/path/to/public/brand [absolute/path/to/public/images]`.

## Handoff standard

Deliver editable layout sources, production exports, dimensions, color mode, font/licence notes, usage context and the validation result. Record the chosen template, P0/P1 priority and proof status. Use `assets/guides/HSKB_V14.1_VI_Brand_Guidebook_2026-08-28.pdf` as the human review companion. Identify the immutable reference hash and distinguish the exact source PNG from geometry-preserving derivatives. State the unresolved Harry Pearce/Pentagram copyright and trademark clearance status in every public-release handoff.
