The visual and verbal language of FloLogix AI — for AI solutions, integrations, data flywheels, and web design & optimization. Built around one idea taken straight from the logo: everything is a system in motion, and the yellow L is the moment it moves.
The mark reads as “FLAI” — F·L·A·I in Flow Cyan with the L in Signal Yellow, leaning into the A. That lean is the brand’s signature gesture. We measure it at roughly 7° and reuse it everywhere an accent needs energy.
Note: reversed/mono versions above are simulated. Ask your designer for true one-color vector exports (white, Deep Current, and Cyan) with the L kept as a solid shape.
Flow Cyan is the workhorse — links, actions, data, brand surfaces. Signal Yellow is rationed like the single L: it marks the one thing to look at. Deep Current is a teal-black derived from the cyan, so dark UI never feels borrowed.
#10BEE1--fl-cyan · primary#0A97B4--fl-cyan-deep · hover#065A6E--fl-cyan-ink · text/links#FFDE59--fl-yellow · accent#0B2E3D--fl-current · dark surface#0F1A20--fl-ink · body text#EAF8FC--fl-mist · tint surface#D3F1F8--fl-mist-2 · borders on tint#F5F8FApage alt bg#E9EFF3dividers#D6DFE6input borders#8FA1AEplaceholders#5A6D7Asecondary text#2C3D48strong text#1DB47A#FFDE59shares Signal Yellow#E5484D#10BEE1shares Flow CyanYellow is roughly 3% of any screen. If you can count more than one yellow element in a viewport, remove one.
13.9:1 · AAA7.4:1 · AAA — use for links7.6:1 · AAA — primary buttons11.5:1 · AAA7.6:1 · AAA — dark-mode links2.1:1 · ✗ text — decorative onlyThe logo is a geometric sans, so display type follows it: Jost for headings and buttons. IBM Plex Sans handles reading — it’s built for technical products and stays crisp in dense UI. IBM Plex Mono is the utility voice for labels, data, and code. All three are free on Google Fonts.
Weights 500 / 600. Headings, buttons, nav, big numbers. Tight tracking (−1 to −2%) above 32px.
Weights 400 / 500 / 600. Paragraphs, forms, tables. 16px base, 1.6 line height, max 65ch measure.
Weights 400 / 500. Eyebrows, badges, table headers, metrics, code. Uppercase with +10% tracking for labels.
Containers max at 1180px with 24px gutters. Section padding is 96px desktop / 64px mobile. Radii stay modest — this is a systems company, not a toy — and shadows are tinted with Deep Current so they never go muddy grey.
12 columns · 16px gap · collapses to 4 columns under 640px. Text blocks span ≤ 7 columns.
cubic-bezier(.4,0,.2,1). Durations: 120ms micro (toggles, focus), 200ms standard (hover, tabs), 360ms layout (modals, reveals). Scroll reveals fade + rise 12px, once. Ambient motion is reserved for the flywheel motif — a slow, continuous rotation that says “this system keeps learning.” Respect prefers-reduced-motion.Every element below is built from the tokens above. Hover the primary button to see the yellow flick — the Flow Tilt in motion.
Primary = cyan (one per view). Dark = secondary CTA on light pages. Accent yellow buttons only for the single most important action on a page, e.g. “Run audit” on the web-optimization tool.
Custom models and assistants embedded where your team already works.
Connect CRMs, warehouses, and APIs into one flow with observability built in.
Pipelines that turn usage into training signal so the product improves itself.
Fast, accessible sites tuned for Core Web Vitals and conversion.
For testimonial or “why us” blocks on light pages. Body copy in muted cyan-grey.
| Pipeline | Source | Records / day | Status |
|---|---|---|---|
| Support → embeddings | Zendesk | 12,480 | Healthy |
| Web events → features | GA4 | 1.2M | Healthy |
| Orders → retrain | Shopify | 3,905 | Delayed |
We wire your product, your data, and your models into a loop that compounds — and we design the site that sits on top of it.
FloLogix explains complex systems in plain sentences. We sound like an engineer who is also a good teacher: confident, concrete, never breathless.
Say what it does. Numbers beat adjectives.
Connect, flow, compound, learn, ship. Avoid “leverage,” “empower,” “revolutionize.”
Buttons name the outcome. Errors say what happened and what to do.
Brand: FloLogix AI (capital F, capital L, no space). Domain: flologixai.com. Never “Flologix Ai” or “FLAI” in copy — the mark can be read as FLAI, but the name is spoken in full.
CSS custom properties are the source of truth (they’re also what renders this page). A JSON version follows for Tailwind, Figma Tokens, or a design-token pipeline.
/* CSS — drop into :root */ --fl-cyan:#10BEE1; --fl-cyan-deep:#0A97B4; --fl-cyan-ink:#065A6E; --fl-yellow:#FFDE59; --fl-current:#0B2E3D; --fl-ink:#0F1A20; --fl-mist:#EAF8FC; --fl-mist-2:#D3F1F8; --fl-slate-050:#F5F8FA; --fl-slate-100:#E9EFF3; --fl-slate-200:#D6DFE6; --fl-slate-400:#8FA1AE; --fl-slate-600:#5A6D7A; --fl-slate-800:#2C3D48; --fl-success:#1DB47A; --fl-danger:#E5484D; --font-display:'Jost'; --font-body:'IBM Plex Sans'; --font-mono:'IBM Plex Mono'; --sp-1..10: 4 8 12 16 24 32 48 64 96 128; --r-sm/md/lg: 4 / 8 / 14; --tilt:-7deg; --ease-flow:cubic-bezier(.4,0,.2,1); --dur: 120 / 200 / 360ms;
// tokens.json (Tailwind / Figma Tokens) { "color": { "cyan": {"DEFAULT":"#10BEE1","deep":"#0A97B4","ink":"#065A6E"}, "yellow": {"DEFAULT":"#FFDE59","deep":"#E6C43A"}, "current": "#0B2E3D", "ink": "#0F1A20", "mist": {"DEFAULT":"#EAF8FC","2":"#D3F1F8"}, "slate": {"50":"#F5F8FA","100":"#E9EFF3","200":"#D6DFE6", "400":"#8FA1AE","600":"#5A6D7A","800":"#2C3D48"} }, "fontFamily": { "display": ["Jost","sans-serif"], "body": ["IBM Plex Sans","sans-serif"], "mono": ["IBM Plex Mono","monospace"] }, "borderRadius": {"sm":"4px","md":"8px","lg":"14px","pill":"999px"}, "skew": {"flow":"-7deg"}, "boxShadow": { "1":"0 1px 3px rgba(11,46,61,.08)", "2":"0 4px 12px rgba(11,46,61,.10)", "3":"0 12px 32px rgba(11,46,61,.14)", "glow":"0 0 0 4px rgba(16,190,225,.25)" } }