Brand

The G8 marks, colors, and type.

Everything you need to represent G8 Flowspace accurately — the wordmark and logomark, the neutral palette with real hex values, the typefaces, and a short set of rules for using them with care. If you’re writing about us, linking to us, or building an integration, this is the reference.

01 / The mark

One logomark. One wordmark. A geometric G8 in an octagon.

The logomark is an octagonal frame over a faint hex lattice — a nod to the process graph G8 compiles every flow into — with the “G8” set tight at its center. The full lockup pairs the mark with the wordmark G8 Flowspace.

G816px
G824px
G832px
G848px
G872px

The lockup

G8G8 Flowspace
G8
Logomark — dark

The octagonal G8 mark. SVG, scales cleanly to any size. Use on dark surfaces.

G8G8 Flowspace
Lockup — dark

Logomark plus the G8 Flowspace wordmark, horizontally locked.

G8G8 Flowspace
Lockup — light

The same lockup over warm paper for light backgrounds and print.

All downloads point to /icon.svg — the canonical source mark. Need a raster export or a specific lockup? Email brand@g8.dev.

02 / Color

A near-black neutral base, one cool accent, and a fixed status spectrum.

G8 is deliberately quiet. The interface is built almost entirely from warm near-blacks and off-whites; color is reserved for the accent and for run status, where it carries real meaning. Never substitute pure black or pure white — the neutrals are warmed on purpose.

Neutrals — dark theme

Base--bg-base#08090DThe canvas. Near-black, faintly blue — never pure #000.
Soft--bg-soft#0D0F14Panels and cards resting on the base.
Surface--surface#11141ARaised surfaces and inputs.
Ink--ink#F4F1EAPrimary text. Warm off-white, never pure #FFF.
Ink soft--ink-soft#C8C2B8Body copy and secondary text.
Ink faint--ink-faint#8B857CMicro-labels, captions, mono eyebrows.

Accent

Accent--accent#A8B3CFThe G8 periwinkle-slate. Used sparingly for marks and dots.
Accent strong--accent-strong#D7DEF2Primary buttons and emphasis — also the “G8” in the mark.
Accent deep--accent-deep#6E7A99Deeper structural accent.

Status spectrum — the lifecycle in color

Each lifecycle state has one fixed color. These are load-bearing: a reader should be able to glance at a badge and know whether a flow is draft, simulated, live, or failed.

Draft--st-draft#8B857CA blueprint not yet contracted.
Mapped--st-mapped#7CA8C9Process compiled to a blueprint.
Simulated--st-simulated#9B8CC9Passed a dry run.
Activation--st-activation#C9A84CPending go-live / awaiting a human.
Live--st-live#7CA89BRunning in production.
Failed--st-failed#D15252A run that errored and stopped.

Light theme

On the light theme the canvas becomes warm paper and the accent shifts cooler and darker to hold contrast. Same token names, retuned values.

Base (light)--bg-base#F7F4EEWarm paper, not pure white.
Surface (light)--surface#FFFFFFRaised surfaces on the light theme.
Ink (light)--ink#111318Primary text on light.
Accent (light)--accent#4E5F7DThe accent shifts cooler and darker for contrast on paper.

03 / Typography

Inter for the interface, Noto Sans Georgian for ქართული, mono for micro-labels.

Type is set tight and left-aligned. Headlines run negative tracking; micro-labels and metadata use a monospace at uppercase with open letter-spacing. G8 ships bilingual, so the UI face must carry both Latin and Georgian without a jarring switch.

Inter
UI · headlines
--ui
Describe before you automate.
Noto Sans Georgian
bilingual UI
--ui
Process, Contract, Simulation.
Monospace
labels · metadata
--mono
01 / Contract · simulate · run

04 / Usage

Give the marks room to breathe. Don’t alter them.

The marks are simple by design — keep them that way. A few rules cover almost every case.

Do

  • Leave clear space around the mark — at least the height of the octagon on every side.
  • Use the supplied SVG so the mark stays crisp at any size, down to a 16px favicon.
  • Place the dark mark on dark surfaces and the light lockup on paper — keep contrast high.
  • Write the name as G8 Flowspaceon first use; “G8” alone is fine after that.

Don’t

  • Recolor, gradient, outline, or add effects to the mark. The accent is the only accent.
  • Stretch, rotate, skew, or rebuild the octagon, or change the type inside it.
  • Crowd the mark against text, edges, or other logos, or place it on a busy image.
  • Imply partnership, endorsement, or affiliation with G8 that doesn’t exist.