CI

Die visuelle Identität von flooo.pro auf einen Blick — zum Nachschlagen und Wiederverwenden. Nichts davon ist geheim.

Logo

Das Logo zeichnet sich aus Layout-Farben (Blau → Tinte → Bernstein) und passt sich Hell und Dunkel selbst an.

Farben

Blau/Bernstein-Achse statt Rot/Grün — auch bei Farbfehlsichtigkeit unterscheidbar. Links hell, rechts dunkel.

--bg #FAFAF7 · #14181D

--bg-raised #F1F0EB · #1D232B

--ink #1C2127 · #E8E6E1

--ink-soft #4A5058 · #A8ADB5

--line #D8D6CE · #333B45

--blue #17549C · #7FB2EC AA 7,1 / 7,4

--amber #8F4E00 · #F0A64A AA 5,9 / 8,2

--focus #17549C · #7FB2EC

Typografie

Bitter · display

Werkstatt & Homelab

h1 800 · h2 700 · h3 700

Inter · body

Fließtext in Inter, ruhig und gut lesbar — von der Werkstatt bis ins Rack.

1rem / 1.65

JetBrains Mono

const werkbank = 0x17549C;

Meta · Code · Chips

Inter Rasmus Andersson github.com/rsms/inter · SIL OFL 1.1

Bitter Sol Matas, Huerta Tipográfica github.com/solmatas/BitterPro · SIL OFL 1.1

JetBrains Mono JetBrains (Philipp Nurullin, Konstantin Bulenkov) github.com/JetBrains/JetBrainsMono · SIL OFL 1.1

Alle drei sind selbst gehostet (kein Google-Fonts-CDN) als Variable Fonts im Latin-Subset. Der gebündelte Lizenztext liegt bei den Schriftdateien: OFL.txt.

Kategorie-Chips

Betrieb DevOps Essen Garten Projekte Software

Jede Kategorie trägt ein Symbol und eine feste Farbe; Bedeutung nie nur über Farbe.

Bausteine

Ein Zitat sitzt links an einer bernsteinfarbenen Kante auf erhöhtem Grund.

Favicons & Icons

/favicon.svgSVG · skalierbar

/favicon-16.png16 · Favicon, vereinfacht

/favicon-32.png32 · Favicon

/apple-touch-icon.png180 · Apple Touch

/icon-192.png192 · App-Icon

/icon-512.png512 · App-Icon

/maskable-512.png512 · maskierbar

/monochrome-512.png512 · monochrom

Code-Farbschema

Das Syntax-Highlighting hat seine eigene, dokumentierte Seite: Werkbank-Syntax.