Bits & Friends — Brand Kit

Corporate Design Tokens, Schriften und Logo-Assets für alle nc4.io-Dienste.

Einbinden

Single-File-Einbindung (empfohlen, enthält Tokens + Reset + Komponenten):

<link rel="stylesheet" href="https://brand.nc4.io/brand.css">

Nur Tokens (wenn das Tool eigenen Reset/Theme mitbringt):

<link rel="stylesheet" href="https://brand.nc4.io/tokens.css">

Maschinenlesbar (Build-Tools, Theme-Generatoren):

fetch("https://brand.nc4.io/tokens.json")

Theme-Switch im Tool: <html data-theme="light"> oder data-theme="dark" setzen. Default ist Dark; Light wird automatisch genutzt, wenn kein data-theme gesetzt ist und prefers-color-scheme: light gilt.

Brand-Konstanten

--bnf-brand-yellow

Brand Yellow

#FFCC00

--bnf-brand-black

Brand Black

#000000

--bnf-brand-white

Brand White

#FFFFFF

--bnf-brand-cobalt

Brand Cobalt

#0000FF

Semantische Tokens (aktuelles Theme)

Wechsle oben zwischen Dark/Light, um die Werte umzuschalten. Diese Swatches lesen direkt die CSS-Variablen.

Typografie

5xl / 61Display Headline

4xl / 49H1 — Bits & Friends

3xl / 39H2 — Sektion

2xl / 31H3 — Untersektion

xl / 25H4 — Kapitel

lg / 20Lead-Paragraph für Einleitungen.

base / 16Body-Text. The quick brown fox jumps over the lazy dog. Italic, Bold, link.

sm / 14Sekundär / Metadata.

xs / 12Caption / Tag-Label

monoconst greeting = "Hello, World"; // IBM Plex Mono

Komponenten

Buttons

Inputs

Badges

default accent success warn error

Card

Card-Titel

Card-Inhalt mit Body-Text und einem inline-link.

Code

Inline-Code wie const x = 42.

function brand() {
  return "bits&friends";
}

Selection

Markiere diesen Text — die Selection-Farbe ist --bnf-accent.

Assets

Asset	URL	Use-Case
Brand-CSS (komplett)	`/brand.css`	Standard-Einbindung
Tokens (CSS)	`/tokens.css`	nur Variablen
Tokens (JSON)	`/tokens.json`	Build-Tools
Logo (SVG)	`/logo/logo.svg`	vektoriell, beliebige Größen
Logo (PNG 512)	`/logo/logo-512.png`	Tools ohne SVG-Support
Logo Mono Black	`/logo/logo-mono-black.svg`	auf hellen Untergründen
Logo Mono White	`/logo/logo-mono-white.svg`	auf dunklen Untergründen
Favicon	`/logo/favicon.ico`	Browser-Tabs
OpenGraph Image	`/logo/og-image.png`	Social-Embeds (1200×630)
Roboto Flex	`/fonts/RobotoFlex-VariableFont.woff2`	Sans (Variable)
IBM Plex Mono	`/fonts/IBMPlexMono-{Regular,SemiBold,Italic}.woff2`	Mono
Version	`/version.txt`	Cache-Busting für nachgelagerte Tools

Spec & Governance

Verbindliche Referenz: docs/STYLE_BRANDING.md im Repo bitsandfriends/Claude-Code-Admin. Änderungen an Tokens oder Assets werden dort dokumentiert und über docs/infrastructure/CHANGELOG.md (Kategorie branding) audited.