Design system/Foundations
Service logos
The Google Drive or Zoom logo isn't an icon; it's a trademark, and it's only itself when it's exact. Flowra takes these logos from each company's own published files and never redraws them.
In codecomponents/brand-marks.tsxcomponents/service-logos.tsxcomponents/soon-connectors.tsx
Two sources
components/brand-marks.tsx holds the most-used logos inline as SVG (Google Drive, Dropbox, Google Calendar, Meet, Zoom, Telegram, and a few more), because the home page and several connector pages all draw them, and inline means no network request. service-logos.tsx reads the rest from public/brand/services, on Flowra's own server, so they load even without internet.
When there's no logo
For a brand we don't have an official file for yet, monogram() builds a tile in the brand's own color with its first letter. An honest monogram is better than a hand-drawn logo that's "almost" right.
import { GoogleDriveLogo } from "@/components/brand-marks";
import { serviceLogo } from "@/components/service-logos";
import { monogram } from "@/components/soon-connectors";
const Notion = serviceLogo("notion");
const Acme = monogram("A", "#0F62FE");Rules
Do
Write the brand name the way the brand writes it, and don't translate it.
Don't
A translated or transliterated name instead of Google Drive on a connection card.
Do
Only resize the logo.
Don't
Adjusting its color, stroke, or corners to match the Flowra theme.
When to use which
When to use it
- brand-marks.tsx: logos drawn by both the home page and a few connectors; inline, with no request.
- serviceLogo(): all other logos, from public/brand/services on Flowra's own server.
- monogram(): a brand whose official file we don't have yet.
When not to
- Loading a logo from the company's own site; it won't load offline or under a strict CSP.
Do
The logo in a tile of the brand's own subtle background.
Don't
A color logo on Flowra orange.
Related pages