FNB Brand Kit

Fish N Bits — Navigators of Invisible Worlds

---

Brand Kit Page

fishnbits.github.io/branding

Interactive v1.1 brand reference with live color palettes, typography specimens, logo guidance, voice, motion, and the diagnostic matrix. Toggle between A-Side (Current) and B-Side (Flow) to experience both expressions of the brand.

---

Documentation

Brand Overview	Philosophy, pillars, and design origins
Identity System	A-Side (Current) vs B-Side (Flow) in full
Color System	Palettes, gradients, tokens, restricted colors
Typography	DM Sans, DM Mono, type scale and principles
Logo Usage	Logo variations, clear space, do/don't rules
Motion Language	Stable vs drifting motion states
Brand Voice	A/B voice registers, guidelines, examples
brand-kit.json Reference	JSON schema, fields, code examples
Agent Skills Guide	How to use the AI brand skills

---

What's In This Repo

/
├── index.html                        # Interactive brand kit (GitHub Pages)
├── brand-kit.json                    # Complete brand system as JSON
├── logos/
│   ├── fnb-logo-a-side.png           # A-Side: Current logo
│   └── fnb-logo-b-side.png           # B-Side: Flow logo
├── skills/
│   ├── README.md                     # Skills overview and usage
│   ├── brand-voice.md                # Agent skill: voice and copy
│   ├── brand-design.md               # Agent skill: visual system decisions
│   └── brand-check.md                # Agent skill: brand audit (0–100)
└── docs/
    ├── brand/                        # Brand system documentation
    │   ├── overview.md
    │   ├── identity.md
    │   ├── colors.md
    │   ├── typography.md
    │   ├── logos.md
    │   ├── motion.md
    │   └── voice.md
    └── usage/                        # Tooling and integration guides
        ├── brand-kit-json.md
        └── agent-skills.md

---

Quick Start

Download Assets

See the latest release:

• brand-kit.json — complete brand data
• fnb-logo-a-side.png — A-Side logo
• fnb-logo-b-side.png — B-Side logo
• fnb-logos-v1.1.zip — logos bundled
• fnb-skills-v1.1.zip — all skills bundled

Use Agent Skills

Load FNB brand expertise into any AI agent:

Use the FNB Brand Voice skill. Load it from:
https://raw.githubusercontent.com/FishNBits/branding/main/skills/brand-voice.md

See the Agent Skills Guide for all skills and usage patterns.

Use the JSON

const brand = await fetch(
  'https://raw.githubusercontent.com/FishNBits/branding/main/brand-kit.json'
).then(r => r.json());

See the brand-kit.json Reference for the full schema.

---

The Identity System

FNB operates through One Identity, Two Expressions:

	A-Side: CURRENT	B-Side: FLOW
Character	Structure / Signal	Movement / Experience
Represents	Systems, trust, infrastructure	Story, wonder, worldbuilding
Tone	Quiet confidence, precision	Alive, expressive, discoverable
Colors	Soft whites, charcoal, sage	Indigo, violet, luminous gradients, electric accents
Motion	Stable	Drifting, environmental
Use for	Business & Corporate	Immersive & Experiential

Core balance: Authority + Warmth — capable without being cold, wonder without chaos.

---

Three Pillars

• We navigate — Stories that connect, traverse, and discover
• We connect — Bridging technologies, platforms, and communities
• We create — Living experiences that move, breathe, and inspire

---

License

Code (HTML, JSON, documentation): MIT License

Brand Assets (logos, mark, identity system): Copyright © 2026 Fish N Bits. All rights reserved.

See LICENSE for the full terms.