← semanticOps.aiBrand & Design System · v1.0

The lit graph in the dark city.

The visual language of semanticOps.ai, a data-centric AI consultancy. Cool, engineered, senior, calm. Sparse signal in a quiet field: structure you can trust under load.

Locked: graph motifLocked: cyan accentLocked: geometric type
00 / Foundation

The system is the brand.

Everything in this language carries one conviction: reliable AI is a system, not a model, and the data underneath decides whether it holds. The identity is a knowledge graph at night: cool slate nodes drift and connect, and where signal travels, they light cyan.

A field of nodes in the dark. Most stay cool and quiet. A few light up as signal moves between them: data becoming knowledge.

That metaphor sets every decision: a deep blue-black ground, restrained slate structure, and accent reserved for the moments that matter. Accent is signal, never decoration. If everything glows, nothing does.

01
Foundation-first

Weight sits at the bottom of the stack. The visible layer is the smallest part of the work.

02
Signal is scarce

Accent marks meaning, one live thing per view. Calm by default, lit on purpose.

03
Engineered, not loud

Tight radii, hairlines, monospace labels. Precision reads as competence.

01 / Logo & mark

A triangulated node-graph.

The mark is a hexagonal knowledge graph: an outer ring, an inner ring, and a center, fully triangulated. A cluster lights cyan toward the center and lower-right: the moment data becomes knowledge. It is the same geometry that animates the hero, frozen.

semanticOps.ai
Primaryon #0A0C11
Mono darkon light
Reversedon accent
Construction

Built from one graph

Six outer nodes, six inner nodes, one center, with 30 edges. Never redraw by hand; the mark is generated from fixed geometry so weight and node radius scale crisply at any size.

Clearspace: keep free space of at least one inner-ring radius on every side (shown).

Sizing

Minimum sizes

Line weight and node radius are size-aware: crisp and bold when small, fine when large. Never place the mark below 22px; below that, edges collapse.

22px min
34px nav
56px
84px
Don't rotate
Don't distort
No busy fills
Don't recolor
02 / Color

Deep night, one signal.

A layered blue-black ground carries everything. Text steps down through four cool greys. Accent (cyan, locked) is the only saturated color, and it appears sparingly: live data, the active layer, a single call to action. Click any swatch to copy its hex.

Surfaces
Text & lines
Accent: cyan (primary, locked)
Graph / data viz
Accent intensities: interchangeable system
COOL · #5BC6D6
Cyan signal

The locked primary. Slate-cyan reads as “live data” against the night ground.

ink #04181C
WARM · #E8A33D
Amber window-light

Alternate. Warmer, more human “lights in the city.” Available, not default.

ink #1A1206
QUIET · #C9A05A
Restrained gold

Most reserved. For contexts where even the accent should whisper.

ink #1A1206
03 / Typography

Geometric display, humanist body, mono labels.

Three families, each with one job. Space Grotesk gives headings an engineered, slightly mechanical edge. Hanken Grotesk keeps body copy warm and readable. JetBrains Mono carries every label, metric, and eyebrow: the “instrument readout” voice.

Display · locked
Space Grotesk
AaGgRr 0123 &@%
Headings, hero, numbers. Weights 500–600. Tight tracking (−0.02 to −0.035em). Geometric, confident, never decorative.
Body · text
Hanken Grotesk
AaGgRr 0123 &@%
Paragraphs, leads. Weights 300–400. Humanist counter to the geometric display; comfortable at length.
Mono · labels
JetBrains Mono
AaGgRr 0123 &@%
Eyebrows, metrics, tags, buttons. Weight 400–500, uppercase, 0.1–0.18em tracking. The instrument readout.
Displayclamp 40–86px
600 · −0.035em
AI that holds in production
H2 / Sectionclamp 26–44px
600 · −0.03em
The whole stack, one architect
H3 / Card18–19px
500 · −0.01em
Knowledge Representation
Body16–17px
400 · 1.6–1.7
Reliable AI is a system, not a model. The data decides whether it holds.
Mono label11–13px
500 · 0.14em · ↑
Data-centric AI consultancy
04 / Layout & tokens

Tight, engineered, hairline-ruled.

Structure is drawn with 1px hairlines at low opacity, not heavy borders or shadows. Radii stay small. Space follows a simple rhythm. The grid keeps a 1180px max with a fluid gutter.

Radii

Small and consistent. Buttons and chips use the smallest; cards and panels the largest. Pills are fully round.

xs · 3
sm · 5
base · 8
lg · 12
pill

Spacing rhythm

Section padding is fluid (80–150px). Component gaps step through a calm scale.

8px
14px
24px
56px
section

Hairlines

Three weights of cool line do all the structural work, no drop shadows.

--hairline · rgba(167,182,209,0.10)
--hairline-strong · rgba(167,182,209,0.18)
--line · #20262F

Motion easing

One signature ease for entrances and the living graph; a softer ease for UI state.

--ease · cubic-bezier(0.22, 1, 0.36, 1)
--ease-smooth · cubic-bezier(0.4, 0, 0.2, 1)
reveals: 620ms · easeOut (rAF/transition)
05 / Components

A small, sharp kit.

Few parts, used consistently. Mono labels, hairline frames, accent reserved for the one live element in each.

Buttons
Start a conversation See how we work
Eyebrow · live status & chips
Data-centric AI consultancy
Distributed systemsKnowledge retrievalMLOps / LLMOps
Stat strip
20+
years in data & ML
5
layers, one architect
1
senior principal
PoCProd
the gap we de-risk
Stack layer (active state)
04
Knowledge Retrieval
Search · RAG · hybrid & semantic retrieval · GraphRAG
RAG lives here
Service card
B

Data Foundations & Platform

Architecting the base everything depends on: pipeline, lakehouse, streaming, quality, and governance design.

06 / Motion

Calm, with occasional signal.

Motion is slow and purposeful. The graph breathes; signals travel rarely; content settles once. Nothing bounces, nothing loops aggressively. If a motion competes with reading, it's wrong.

Hero

The living graph

Slate nodes drift on a canvas and link within 168px. Every ~50 frames a signal emits, travels an edge, lights the destination cyan, and may chain onward at 55% odds. Decay is ×0.965/frame.

Status

Pulse node

The live eyebrow dot rings outward over 2.4s, a heartbeat that says “system online.” One per view, tied to the graph metaphor.

Entrance

Reveal on scroll

Content rises 20px and fades over 620ms easeOut, staggered 80ms per step (d1–d5). Never blocking.

State

Hover & active

Borders warm to --accent-line, the active layer grows a 2px accent rail, buttons lift 1px. All 0.25–0.35s on the signature ease.

07 / Voice & tone

Senior, plain, opinionated.

The voice of an operator who has shipped this before. Lead with the value, name the conviction, skip the hype. Short lines. Confident claims a competitor would hesitate to make.

Do
  • Lead with what we bring, not the client's problem.
  • State a conviction: “reliable AI is a system, not a model.”
  • Be specific and technical: layers, retrieval, governance.
  • Keep headlines short: two lines, six words a line.
  • Use “I”: one senior principal, hands-on.
Don't
  • Use tired lines like “from prototype to production.”
  • Open by telling the customer they have a problem.
  • Overpromise delivery: we architect & steer, not staff builds.
  • Lean on hype words: revolutionary, game-changing, synergy.
  • Decorate with accent or stats that carry no signal.
Copied