h-sharp.styleguide
v2026 · DE / EN
h#

Visueller Styleguide

Standardisierte Visualisierung der Organisationselemente

Ein Regelwerk für die einheitliche Darstellung der „Elemente" der domänenspezifischen Sprache h# — der Programmiersprache für Organisationsentwicklung. Jedes Element ist ein Baustein im „Periodensystem organisationaler Kompetenzen".

A ruleset for the uniform depiction of the "elements" of h# — the domain-specific language for organizational development. Each element is a building block in the periodic system of organizational competencies.

39 Elemente8 FamilienDSL · Periodensystem
// 00 · PRINZIPIEN · principles

Gestaltungsprinzipien

01

Systematik

systematic order

Jedes Element ist gleich aufgebaut, eindeutig verortet und kombinierbar — wie im Periodensystem.

Uniformly built, clearly located, combinable — like the periodic table.

02

Klarheit vor Dekoration

clarity over decoration

Abstrakte, geometrische Glyphen statt illustrativer Bilder. Form folgt Funktion.

Abstract geometric glyphs, not illustrations. Form follows function.

03

Metapher als Anker

metaphor as anchor

Jedes Element trägt sein sprachliches Bild — reduziert, nicht wörtlich — als Merkhilfe.

Each keeps its linguistic image — reduced, not literal — as a memory aid.

04

Konsistente Anatomie

consistent anatomy

Ordnungszahl, Kürzel, Glyph, Name und Kategoriefarbe stehen immer in derselben Anordnung.

Ordinal, symbol, glyph, name and category color, always arranged the same.

// 01 · FARBSYSTEM · color system

Farbsystem

Acht Kategoriefarben, an Syntax-Highlighting angelehnt — gleiche Helligkeit und Sättigung, nur der Farbton variiert. Dazu eine neutrale, kühle Editor-Grundpalette.

KATEGORIEFARBEN · category tokens
Struktur & Architektur
keyword#6ea8ff
Kultur & Menschen
string#57c98a
Kommunikation & Sinn
regex#c98bf0
Strategie & Steuerung
number#f0a55e
Prozesse & Effizienz
function#e3c552
Wissen & Denken
type#55c3d6
Technologie & Sicherheit
error#f0776d
Meta / Sprache
comment#c7b27a
GRUNDPALETTE · base surfaces
Page
#0b0e13
Panel
#12161d
Tile
#161b24
Border
#242c38
Text
#e6edf3
Muted
#8b95a5
Signal / h#
#5ee0c0
// 02 · TYPOGRAFIE · typography

Typografie

IBM PLEX SANS · Oberfläche & Fließtext
Aa Bb Cc

Namen, Definitionen und Beschreibungen. Regular 400 · Medium 500 · Semibold 600 · Bold 700.

IBM PLEX MONO · Symbole, Codes & Labels
Lo 01

Element-Kürzel, Ordnungszahlen, Kategorie-Tokens und alle Meta-Labels.

Display 40
Titel 26
Fließtext 15
Label 12 · mono
// 03 · ANATOMIE · element anatomy

Anatomie einer Element-Kachel

Fünf feste Bestandteile in stets gleicher Anordnung. Nur Inhalt und Kategoriefarbe wechseln.

01
Lo
LOAZ Organismus
LOAZ Organism
  1. 1
    Kategorie-Kante · category edge

    Farbige Oberkante = Familie. Einziger farbige Flächenakzent.

  2. 2
    Ordnungszahl · ordinal

    Zweistellig (01–39), oben links, mono, gedämpft.

  3. 3
    Glyph · glyph

    Abstraktes Symbol der Metapher, oben rechts, in Kategoriefarbe.

  4. 4
    Kürzel · symbol

    Zweistellig, mono, in Kategoriefarbe — der Blickfang.

  5. 5
    Name (DE / EN) · name

    Deutsch primär, Englisch gedämpft darunter.

// 04 · KACHEL-VARIANTEN · tile variants

Kachel-Varianten zur Auswahl

Drei Ausprägungen desselben Elements. Variante A ist der Standard fürs Periodensystem; B für Kataloge mit Definition; C für Fließtext-Referenzen.

AKompaktSTANDARD
01
Lo
LOAZ Organismus
LOAZ Organism

Fürs dichte Raster. Nur Kern-Identität. For the dense grid.

BDetail01 · Struktur
Lo
LOAZ Organismus
LOAZ Organism

Selbstorganisierte Zellstrukturen als lebendiges Betriebssystem.

Für Kataloge & Karten mit Kurzdefinition. Catalog cards.

CCode-Tokeninline
Lo::LOAZ Organismus·01

Inline im Text, Legenden, Diagrammen. Inline references.

// 05 · FAMILIEN · element families

Die acht Familien

Alle 39 Elemente sind einer Familie zugeordnet. Die Familie bestimmt die Kategoriefarbe.

Struktur & Architektur

7
Structure & Architecture

Wie die Organisation gebaut und verschaltet ist.

Kultur & Menschen

6
Culture & People

Menschen, Werte und Vertrauen als Betriebsklima.

Kommunikation & Sinn

4
Communication & Meaning

Sinn, Narration und Informationsfluss nach innen und außen.

Strategie & Steuerung

7
Strategy & Control

Richtung, Balance und Steuerung in dynamischen Umwelten.

Prozesse & Effizienz

4
Process & Efficiency

Routinen, Effizienz und kontinuierliche Verbesserung.

Wissen & Denken

4
Knowledge & Cognition

Wissen ordnen und komplex-vernetzt denken.

Technologie & Sicherheit

6
Technology & Safety

IT, Daten und Sicherheit als tragende Dienste.

Meta / Sprache

1
Meta / Language

Die Sprache selbst — das Periodensystem als Ganzes.

// 06 · GLYPHEN · glyph system

Glyph-System

Ein einheitliches Vokabular abstrakter Formen — nur Kreise, Linien, Rechtecke und Polygone. Konstante Strichstärke, ein 32er-Raster, immer in Kategoriefarbe.

Cluster
cells / units
Radial
attraction
Wellen
flow
Netz
network
Iteration
loop
Stufen
maturity
Schutz
safety
Balance
balance
Verzweigung
branching
Raster
grid
Kompass
orientation
Vier-Felder
quadrant
// 07 · PERIODENSYSTEM · the periodic system

Das Periodensystem der Elemente

Alle 39 Elemente, gruppiert nach Familie. Klick auf eine Familie filtert, Klick auf eine Kachel öffnet das Element im Detail.

Struktur & Architektur

Structure & Architecture7

Kultur & Menschen

Culture & People6

Kommunikation & Sinn

Communication & Meaning4

Strategie & Steuerung

Strategy & Control7

Prozesse & Effizienz

Process & Efficiency4

Wissen & Denken

Knowledge & Cognition4

Technologie & Sicherheit

Technology & Safety6

Meta / Sprache

Meta / Language1
// 08 · ANWENDUNG · usage rules

Do & Don't

✓ DO
  • Kategoriefarbe nur an Oberkante & Kürzel einsetzen.
    Category color only on top edge & symbol.
  • Kürzel zweistellig, aus dem Namen abgeleitet (Lo, Fb).
    Two-char symbols, derived from the name.
  • Glyphen einfarbig, konstante Strichstärke.
    Single-color glyphs, constant stroke.
  • Elemente per „Kürzel · Ordnungszahl" referenzieren.
    Reference via "symbol · ordinal".
✕ DON'T
  • Keine Verläufe, Schlagschatten oder 3D auf Kacheln.
    No gradients, drop shadows or 3D on tiles.
  • Keine illustrativen/fotorealistischen Metaphern-Bilder.
    No illustrative / photoreal metaphor images.
  • Kategoriefarben nicht mischen oder umwidmen.
    Don't mix or repurpose category colors.
  • Kürzel nicht frei erfinden.
    Don't invent symbols freely.