Modell F3000 · Style-Bibel v2.0 · Corporate Identity

Das warme Familien-Betriebssystem.

family3000 ist das ruhige, warme „Familien-Betriebssystem" für Freunde & Familie. Anmutung: Küchentisch + „3000"-Augenzwinkern. Es klingt wie ein hilfsbereites Familienmitglied — herzlich, klar, mit einem Lächeln. Nie nach Konzern.

Clay #CC7044 Bricolage · Hanken · JetBrains Mono OKLCH-nativ Drop-in tokens.css

Markenkern

Eine verbindliche Basis. Jedes App-, Web- und Dokument-Projekt nutzt dieselben Werte.

family3000 ist das ruhige Zuhause für alles Familiäre: gemeinsame Pläne, Listen, Fotos und Menschen — an einem warmen Ort. Die Marke verbindet die Wärme des Küchentisches mit einer kleinen, verspielten Prise Technik-Charme: das „3000" ist ein Augenzwinkern auf liebgewonnene Haushaltsgeräte mit Modellnummern.

Warm vor schick

Cremetöne, Cocoa-Tinte statt Schwarz, weiche Schatten. Wärme schlägt jeden Hochglanz-Look.

Menschen haben Farbe

Jede Person bekommt eine Familienfarbe. Farbe ist Orientierung, nicht Dekoration.

Ruhig & aufgeräumt

Viel Luft, klare Hierarchie, keine Daten-Flut. Lieber eine Zeile zu wenig als eine zu viel.

Verspielt in Maßen

Die Mono-„Modellnummer"-Stimme und ein sparsames Emoji geben Charakter — nie überladen.

Sanft in Bewegung

Karten heben sich leicht, Buttons drücken sich ein. Keine Sprünge, keine Endlos-Loops.

★

In einem Satz

Herzlich, klar, mit einem Lächeln — nie nach Konzern.

Logo & Marke

Wortzeichen „familie3000" + Zahlzeichen „Die Familienziffern" + Bildzeichen „der Kreis" — v2, seit 10.06.2026. Der Dial ist in Rente.

Die Familienziffern — der Regenbogen ist die Familie

„3000" als freundliche Digitalziffern (7-Segment, weich gerundet, 3° kursiv). Die leuchtenden Segmente tragen das Familienspektrum clay → honey → sage → sky → berry → plum: Der Regenbogen ist kein Effekt — er ist die Menschen (Prinzip 2). Ungenutzte Segmente bleiben zarte Geister: Modellnummern-Nostalgie, aber warm. „familie" steht klein geschrieben in Bricolage Grotesque 800, Ink.

So bitte

Freiraum — mind. halbe Markenhöhe, auf Paper/Surface zeigen.
Favicon & Avatare: immer der Kreis.
Im App-Header reicht das Zahlzeichen „3000".

Bitte nicht

Segmentfarben umsortieren — die Reihenfolge IST das Spektrum.
Den alten Dial weiterverwenden.
Das Spektrum als Deko-Flächenverlauf missbrauchen.

Der Kreis — die Null ist der Tisch,
um den alle sitzen

Variante „Lichter an" —
sechs Fenster leuchten

Favicon & App-Icon

Assets (eine Quelle für alle Apps): https://digital3000.org/ci/brand/ — Wortmarke · 3000 · Kreis · Favicon · Lichter an

Farbe

Warm, vom Küchentisch. OKLCH ist die Wahrheit, Hex der sRGB-Fallback.

Neutrale & Primär

Paper · Seiten-BG

--paper#FBF6EE
oklch(0.975 0.012 80)

Paper sunk · vertieft

--paper-sunk#F6EFE5
oklch(0.955 0.016 78)

Surface · Karte

--surface#FFFCF6
oklch(0.992 0.008 85)

Ink · Text

--ink#32261F
oklch(0.28 0.022 55)

Ink-2 · gedämpft

--ink-2#5C5048
oklch(0.44 0.020 55)

Line · Hairline

--line#E0DAD1
oklch(0.89 0.014 78)

Clay · Primär

--clay#CC7044
oklch(0.64 0.13 45)

Clay strong · Links

--clay-strong#AE542C
oklch(0.55 0.13 43)

Familienfarben — Menschen farb-codieren

Sechs Farben mit gleicher Helligkeit & Sättigung, nur der Hue unterscheidet sich — so bleibt jede Kombination harmonisch. Jedes Familienmitglied bekommt seine eigene.

clay#CC7044

honey#D5A13C

sage#63A471

sky#4D9CC7

berry#BB6690

plum#8A68AE

Semantisch

Good · #519962

Warn · #D49838

Danger · #C74C41

So bitte

Clay für die EINE wichtigste Aktion pro Ansicht.
Familienfarben konsequent pro Person.
Flächen flach in warmen Tönen.

Bitte nicht

Reines Schwarz oder kühles Grau.
Verläufe als Hintergrund.
Familienfarben rein dekorativ streuen.

Typografie

Drei Schriften mit klaren Rollen.

Display · Bricolage Grotesque700–800 · tracking -0.02em

Morgen, Familie.

AaAaAaAa

Body · Hanken Grotesk400–600 · 14–18px · Zeilenhöhe ~1.5

family3000 spricht wie ein hilfsbereites Familienmitglied: herzlich, klar, mit einem Lächeln. Der Fließtext bleibt ruhig und gut lesbar — nie unter 14px, im Druck nie unter 12pt.

Mono · JetBrains Mono500 · UPPERCASE · +0.06em

SO 14:00 · KÜCHE · MODELL F3000

Regeln

Satzanfang-Schreibung für alles Menschliche — Titel, Buttons, Labels.
VERSALIEN nur für die Mono-Stimme: Kicker, Codes, Uhrzeiten.
Kartentitel kurz: 1–4 Wörter.

Mindestgrößen

Fließtext nie unter 14px.
Druck nie unter 12pt.
Hilfetext ist eine ruhige Zeile, kein Absatz.

Form, Raum & Schatten

Weich und großzügig. Nie hart, nie grau.

Radien

sm · 10px

md · 14px

lg · 20px

xl · 28px

pill · 999px

Abstände · 4px-Basisraster

Schatten · warm, cocoa-getönt

shadow-sm

shadow-md

shadow-lg

Bewegung & Buttons

Hover hebt Karten 2–3px an; Druck skaliert Buttons auf 0,97. Dauer 120 / 200 / 320ms, ease-out. Probier die Buttons:

Sprache & Ton

Wie ein hilfsbereites Familienmitglied: warm, schlicht, ein bisschen verspielt.

Morgen, Familie.

herzlich, persönlich — kein „Willkommen zurück, Nutzer"

3 noch zu kaufen

konkret & freundlich statt statistisch

Alle benachrichtigt

beruhigend, in einer ruhigen Zeile

Pizza-Abend 🍕

ein Emoji, dort wo es Herz gibt

So bitte

Vornamen verwenden — „Bens Termin", „Lias Training".
Kurz bleiben.
Emoji sparsam & warm, höchstens eines pro Moment.

Bitte nicht

Konzern-Sprech — „Nutzer", „Synchronisierung erfolgreich".
Lange Absätze in Hinweisen.
Emoji als funktionale Icons oder in Reihen.

CI für Dokumente

docx · pptx · pdf · Briefe · Reports. Office/PDF kennen kein OKLCH → hier zählt Hex.

Schriften mit Fallbacks

Rolle	Marke	Fallback (Office/System)
Überschrift / Titel	Bricolage Grotesque (700–800)	Trebuchet MS → Segoe UI → Helvetica Neue
Fließtext	Hanken Grotesk (400–600)	Calibri → Helvetica Neue → Arial
Label / Code / Datum	JetBrains Mono (500, UPPERCASE)	Consolas → Menlo → Courier New

Farben — Hex, verbindlich für Dokumente

Rolle	Hex
Seiten-Hintergrund (Paper)	#FBF6EE
Karten-/Box-Fläche (Surface)	#FFFCF6
Text (Ink, kein Schwarz)	#32261F
Text gedämpft	#5C5048
Linien / Hairlines	#E0DAD1
Akzent / Primär (Clay)	#CC7044
Akzent kräftig (Links)	#AE542C
Familienfarben	#D5A13C · #63A471 · #4D9CC7 · #BB6690 · #8A68AE
Status	good #519962 · warn #D49838 · danger #C74C41

Layout-Regeln

Warmes Papier statt Weiß, Boxen mit 1px-Hairline + runden Ecken.
Genau EIN Clay-Akzent pro Seite/Slide.
Fließtext ≥ 12pt, Zeilenhöhe ~1.5.
Kicker/Labels in Mono, UPPERCASE, +0.06em.

Bitte nicht

Harte schwarze Schatten.
Verläufe als Fläche.
Schwere Tabellengitter.
Konzern-Sprech im Text.

＋

tokens.css

Drop-in für jedes App/Web-Projekt. Danach ausschließlich var(--token).

tokens.css · family3000 v1.0

/* family3000 — Design Tokens (Style-Bibel v2.0)
   Quelle der Wahrheit = OKLCH. #hex = Fallback. */
:root{
  /* Schriften */
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* Markenfarbe: Clay / Terrakotta */
  --clay:oklch(0.64 0.13 45);          /* #CC7044 */
  --clay-soft:oklch(0.93 0.04 50);     /* #FFE1D1 */
  --clay-strong:oklch(0.55 0.13 43);   /* #AE542C */
  --on-clay:oklch(0.985 0.01 80);

  /* Paper & Surface */
  --paper:oklch(0.975 0.012 80);       /* #FBF6EE */
  --paper-sunk:oklch(0.955 0.016 78);  /* #F6EFE5 */
  --surface:oklch(0.992 0.008 85);     /* #FFFCF6 */
  --surface-2:oklch(0.965 0.014 78);   /* #F9F3E9 */

  /* Ink (Cocoa statt Schwarz) */
  --ink:oklch(0.28 0.022 55);          /* #32261F */
  --ink-2:oklch(0.44 0.020 55);        /* #5C5048 */
  --ink-3:oklch(0.60 0.016 58);        /* #887E77 */

  /* Linien */
  --line:oklch(0.89 0.014 78);         /* #E0DAD1 */
  --line-strong:oklch(0.82 0.018 75);  /* #CBC3B8 */

  /* Semantisch */
  --good:oklch(0.62 0.11 150);         /* #519962 */
  --warn:oklch(0.72 0.13 75);          /* #D49838 */
  --danger:oklch(0.58 0.16 28);         /* #C74C41 */

  /* Familienfarben */
  --tag-clay:oklch(0.64 0.13 45);      /* #CC7044 */
  --tag-honey:oklch(0.74 0.13 80);     /* #D5A13C */
  --tag-sage:oklch(0.66 0.10 150);     /* #63A471 */
  --tag-sky:oklch(0.66 0.10 235);      /* #4D9CC7 */
  --tag-berry:oklch(0.62 0.12 350);    /* #BB6690 */
  --tag-plum:oklch(0.58 0.11 305);     /* #8A68AE */

  /* Radius */
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;
  --radius-xl:28px;--radius-pill:999px;

  /* Schatten (warm, cocoa-getönt) */
  --shadow-sm:0 1px 2px rgba(62,42,26,0.06),0 1px 1px rgba(62,42,26,0.05);
  --shadow-md:0 6px 16px -6px rgba(62,42,26,0.14),0 2px 6px -2px rgba(62,42,26,0.08);
  --shadow-lg:0 20px 44px -14px rgba(62,42,26,0.20),0 6px 14px -8px rgba(62,42,26,0.10);

  /* Bewegung */
  --dur-fast:120ms;--dur-normal:200ms;--dur-slow:320ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

⬇ tokens.css herunterladen