CI

CI

flooo.pro's visual identity at a glance — for reference and reuse. None of it is secret.

Logo

The logo is drawn from layout colors (blue → ink → amber) and adapts to light and dark on its own.

Colors

Blue/amber axis instead of red/green — distinguishable even with color vision deficiency. Light left, dark right.

--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

Typography

Bitter · display

Werkstatt & Homelab

h1 800 · h2 700 · h3 700

Inter · body

Body text in Inter, calm and legible — from the workbench to the 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

All three are self-hosted (no Google Fonts CDN) as variable fonts in the Latin subset. The bundled license text sits next to the font files: OFL.txt.

Category chips

Operations DevOps Food Garden Projects Software

Each category carries a symbol and a fixed color; meaning never rides on color alone.

Building blocks

A quote sits against an amber edge on a raised background.

Favicons & icons

/favicon.svgSVG · scalable
/favicon-16.png16 · favicon, simplified
/favicon-32.png32 · favicon
/apple-touch-icon.png180 · Apple touch
/icon-192.png192 · app icon
/icon-512.png512 · app icon
/maskable-512.png512 · maskable
/monochrome-512.png512 · monochrome

Code color scheme

Syntax highlighting has its own documented page: Werkbank Syntax.