04 · Graphic Language
Graphic language: the period, extended
Every brand graphic grows out of the settled point: Dot Path (money in motion) — a run of accelerating dots that finally settles into one solid blue point, the story of a single transfer; Dot Grid (the ledger) — an ordered array standing for accounts and network nodes; Aperture — the mark, cropped in close. Three motifs cover every graphic need from divider lines to key visuals.
Dot Path · money in motionThe motif behind dividers, process diagrams, and loading motion
Spacing widens, dots grow, color moves from neutral through rail teal into brand blue — the endpoint is always a solid Omninal Blue dot. The message: the route may be complex; settlement happens once.
Dot Grid · the ledgerBackground texture, cover patterns, data-viz anchors
A neutral array as the ground, a few solid accent dots as active accounts and in-flight transactions. Accent density stays under 8% — restraint is what reads as professional.
Motif variant · multi-rail convergenceDot Path in the plural — three rails, one settled point
Three rails of dots run in parallel, draw together mid-journey, and share a single solid blue endpoint — smart routing, drawn: there can be many rails, but only one settlement. For multi-rail comparisons, routing explainers, and process covers; the variant still obeys the motif discipline: dots only, one endpoint, accent density within bounds.
Aperture · the mark, croppedThe mark magnified past the frame — the third motif for covers and layouts (new in v2.0)
Dark covers · one petal bleeding off, low contrast
Light layouts · treated as a corner watermark
Rules: magnification ≥ 3× (so it reads as a graphic, not a small logo), always cropped off the edge, one color at low contrast (Sky ≤ 14% on dark, brand blue ≤ 8% on light); once per layout at most, never sharing a screen with Dot Grid; the central star may never appear complete — the whole mark belongs to identity, not decoration.
Bans: no literal finance symbols — coins, money bags, globes, rockets; no Web3 leftovers — hexagons, chains; curves and arrows exist only inside charts. Brand graphics use dots, and the mark's aperture crop. Nothing else.
The icon system24px grid · 2px round-cap strokes · geometry first — icons are the graphic language, functionalized
Account
Pay-out
FX
Approve
Ledger
Agent
The official icon library is Lucide (shadcn/ui's default open-source set, ISC license, imported on this site via lucide-react). Single-color line icons tinted through currentColor: Ink by default, Blue for active and selected states — the period's single-point-of-blue logic, carried through. 24px grid, 2px round-cap strokes, no skeuomorphism, no gradients. The full component suite lives in 06 · UI Kit.
Illustration and photographyUsed rarely — which is exactly why it must be used correctly
Illustration
Geometric abstraction only: compositions of dots, circles, straight lines, rounded rectangles — the icon system, magnified. No cartoon characters, no 3D renders, no isometric figurines. Illustration exists to explain structure (money flow, say), not to decorate a mood. Colors come from the data-viz sequence.
Photography
Brand storytelling only (careers, about): real working environments, natural light, cool neutral grading, generous negative space for type. No handshakes, globes, gold coins, or sprinting suits. Product material uses no photography at all — the interface screenshot is our photography.
Motion principlesMotion = money settling — fast out, slow in, and never a bounce
The Dot Path loader (live)
Dots light in sequence; the endpoint swells once, then settles — the standard loading metaphor for a transfer in flight.
Interactive easing (hover the button)
New payment| Step | Use |
|---|---|
| Instant 100ms | Hover feedback, toggles |
| Quick 180ms | Buttons, card lifts |
| Standard 240ms | Panel expansion, page transitions |
| Settle 400ms | Amount changes, success settlement |
One easing curve everywhere: cubic-bezier(0.2, 0.8, 0.2, 1) — fast out, slow landing, like funds arriving. No bounce, no elastic; prefers-reduced-motion is always honored.
The micro-interaction libraryFour standard animations — all telling the same story: convergence and settlement (live)
① Converge loader · global loading
Four dots sweep in from the corners and settle into one — the mark's meaning, animated. For global loading and app launch. 1.8s loop.
② Settle check · settlement success
The ring draws first (in flight), the check lands second (settled), a ripple closes (confirmed). For successful payments and approvals. Timed to the 400ms Settle step.
③ Amount settle · rolling numerals
$0.··
Digits ease-roll to their final value; decimals reveal last and step down to Mist; a blue dot closes the sequence — an amount always ends settled. No flashing, no jumps.
④ Progress settle · in-flight to settled
USDC rail · in flightsettled.
The bar fills fast-out-slow-in; the endpoint swells once and settles into a dot — the same endpoint semantics as Dot Path. For transfer details and batch jobs.
Micro-motion discipline: every animation uses one of four metaphors only (converge, draw the ring, roll, land the dot); durations come from the motion ladder (100/180/240/400ms, looping demos exempt); one looping animation per screen at most; all of it honors prefers-reduced-motion (degrading to the static, completed state); and the mark itself never rotates — the converge loader uses four dots rather than four petals precisely because rotation is forbidden.