Brand
The sphere, the mark, and the system drawn around them — colour, type, space, gradient and glass, the product icon families, the surface states, the photography direction and the “Run it.” campaign. Every value on this page paints itself from the token it documents.
Organic on the outside. Digital at the core.
The sphere is the visual embodiment of the Superintelligence. It represents a self-contained, autonomous system, complete in itself and capable of operating across complex environments. Its form expresses a dual nature.
The outer surface is fluid and natural, evoking intuition, awareness, and adaptability. It behaves like liquid, reacting softly to its environment. This layer represents the human dimension of intelligence — the ability to perceive, interpret, and respond.
At its core, a structured digital system emerges. Ordered particles, light patterns, and internal geometry suggest processing, computation, and precision. This inner structure represents the machine intelligence powering the system.
Together, these two layers form a unified object. A system that combines human awareness and flexibility with digital speed and scale.
The mark is an object, not a logo
The Cue mark is a rendered glass sphere on transparent alpha. Everything that goes wrong with it comes from treating it as flat artwork: putting it in a box, giving it a background, clipping it to a circle it already is, or dropping it onto a surface with no light around it. One primitive prevents all four.
Five sizes. The bloom lives outside the mark’s own box, so a parent with
overflow: hidden will cut it — give the parent room rather than shrinking the orb.
<span class="fx-orb fx-orb--md"><img src="assets/brand/cue-orb.png" alt="Cue"></span>Three files, and only three: cue-orb.png (512, general use),
cue-orb-lg.png (1016, hero), cue-orb-icon.png (128, buttons and chips).
The older washed-out renders in the two in-house systems are superseded — don’t reach for them.
Free-standing on a near-white ground, carrying its bloom. The halo is what makes it read as lit glass rather than a printed circle.
On a dark or already-glowing surface the halo doubles up into a grey
smudge. Add .fx-orb--flat; the field itself supplies the light.
A grey plate and a radius of its own. The transparent alpha is doing nothing and the sphere has been demoted to an app icon, level with the products it runs.
A parent with overflow: hidden cuts the halo into a hard
square edge. Give the parent room; never shrink the orb to make the halo fit.
.fx-orb--flat on a light ground. Correct on a dark field,
wrong here: with nothing lighting it, the sphere sits flat on the page like a sticker.
Indigo carries the brand. Blue carries the product.
Two families do the brand work — an indigo that signals the AI itself, and a deep electric blue that is the Intelligence Field the sphere lives in. Everything else is a near-white ground, a grey for type, or a semantic accent used once and sparingly.
#d8f9d3
#4ea441
#145b2f
#fff8e1
#f68006
#92400e
#fffee1
#ffcf23
#664f00
#fff1f2
#e11d48
#9f1239
#f4e6ff
#a738ff
#5b00a3
#e3fafa
#39d4d6
Each triad is a fixed set of three: the 50 is the tint you fill a badge with, the
600 is the mark or the dot, the 800 is text that has to hold on the 50. Teal ships without an 800 —
if you need dark teal type, use --neutral-900.
One face, twelve steps, editorial scale
The brand typeface is CircularXX (Lineto, commercial). This site — and every page built from these tokens — sets Plus Jakarta Sans as the deliberate stand-in, self-hosted so the library renders identically offline and in print. The scale, the line heights and the tracking below are the real values; only the face is substituted.
Headings are 700 and negatively tracked; body is 400 and untracked. Many nodes in
the Figma frame resolve H4 to 32px rather than the published 40 — that is
--h4-sm, an opt-in, not a change to --h4.
A 4px spine, three radii, and light instead of shadow
Spacing is a 4px scale that loosens as it grows. The frame itself is fixed: 1440 wide, 80px side margins, a 1280 container, 64px top and bottom. Elevation is the interesting one — Fountain almost never uses a grey drop shadow on white. Borders are inset rings, and lift is a wide blue-grey glow.
Buttons at small size, swatches, inputs, code blocks.
Cards, panels, image slots — the default container radius.
Pills, the full-height button, the badge, the avatar.
The barely-there seat under a chip.
Resting card on white.
Raised card, dropdown.
Hover state — same blur, more weight.
Tight contact shadow.
The wide, soft marketing card.
The signature: a wide blue-grey halo under a product surface.
An inset rim light, not a shadow. It only reads on glass, so it is shown here on the Intelligence Field.
Not a general-purpose shadow. It belongs to the Cue mark and to nothing else — see the mark.
Rings, not borders, for anything that must not shift the box:
--ring-default is a 1px inset --neutral-200, --ring-strong
the same in --neutral-300, and --ring-focus pairs an indigo inset with a
3px outer halo.
The Intelligence Field, in eleven parts
The board describes the environment the Intelligence operates in as a deep electric blue to indigo gradient space with subtle liquid ripples radiating from the sphere. In the token system that field is not one value but a named set — each one a particular light direction for a particular surface. Every stop below is painted from its real token, so what you see is what ships.
The primary button and every AI affordance.
Full-bleed hero band, light at the top edge.
The Intelligence Field — the ground the sphere sits in.
Light section wash; white at both edges so it butts to white.
Centred atmospheric field behind a centred sphere.
The same field, light source pushed off to the left.
Deep-to-bright diagonal for a hero with left-aligned type.
Near-black blue panel — the darkest surface in the system.
Mid-weight panel; the campaign headline plate.
The fill behind the blue product-line icons.
Site footer band, left to right.
Fades a photograph or a coloured panel into the page below it. Shown here over --wash-blue.
Legibility scrim over the left of a photograph so white type holds.
Three back-compat aliases exist because earlier section CSS reached for them:
--gradient-brand and --gradient-ai-600 both point at
--gradient-ai, and --gradient-wash at --gradient-sky. Prefer
the real names in anything new.
Cue is a glass sphere. Everything else is a tile.
The board states the rule in one line: Cue is represented by a glass sphere. Products are color icons. Products lines are transparent or blue with a slight gradient. That is the whole hierarchy — the Intelligence is a rendered object and the products it runs are flat squircles, so the two can never be mistaken for peers.
Blue with a slight gradient — --gradient-app-icon, glyph knocked out in white at low opacity. Cue keeps its glass sphere; it is never flattened into a blue tile with the rest.
The same six glyphs on a transparent tile, for placement over artwork or a light ground where a solid blue square would punch a hole in the layout.
Shipped products are colour icons — each one carries its own hue, so a row of them reads as a suite rather than a gradient. Cue leads the row as the glass sphere.
A living presence
Icon design. The Intelligence stands apart through a distinct visual treatment. It is more luminous and skeuomorphic than the surrounding apps, creating an immediate visual hierarchy. Its signature is a deep intelligence blue with rich gradients and soft refraction.
Animation. The Intelligence is always in motion. Animations are soft, subtle, but clearly visible, expressing constant activity, quiet power, and calm vigilance.
Human first. Profession is context.
Nine rules, and they are all pulling in the same direction: a real person, caught mid-thought, in daylight, doing a job that is visible at the edges of the frame rather than at the centre of it. If a shot could be a stock photo of an occupation, it is wrong.
Humans in motion. System in control.
The photography shows the human reality of work. The graphic layer represents the AI system operating in transparency, quietly stabilizing operations. Workers are visually seen through the system, as if the camera sits inside a subtle water sphere: reality is visible, but gently refracted.
A contractor dropped.
The schedule held.
Run it.
Panel is --gradient-panel-blue, pill is
--glass-solid over --glass-blur, headline is
--h4-sm/--lh-tight at 400 with the tagline at 700. On a real asset the
panel colour is sampled from the photograph instead — see the grades below.
This is the one place the brand palette steps back. The headline panel takes its colours from the frame it sits under — warm reds, ambers, neutrals — so the graphic layer reads as the photograph refracted rather than a blue box laid on top of it. The blue system returns for the pill, the wordmark and everything digital.
Nine things to check
.fx-orb--flat if the surface already glows.