Brand
The loop that finishes the job
Three arcs — plan, act, verify — in the Romanian tricolour, forming an open c. The opening is where the next step goes.
ZIP · SVG and PNG logos, badges, social images.
Logo
Symbol and lockups
Use the files as they are. Pick the dark or light version for the background it sits on.
Symbol
The mark alone. App icons, avatars, favicons, anywhere space is tight.
Horizontal lockup
Mark and wordmark side by side. The default for headers and documents.
Stacked lockup
Mark above the wordmark. For square spaces and posters.
Construction
Built on a 48-unit grid
Every size is drawn from the same parameters. Small sizes get thicker strokes and wider gaps so the three arcs stay readable.
| Parameter | Value |
|---|---|
| Grid | 48 × 48 units |
| Ring centre | (24.5, 24) · +0.5u toward the opening |
| Centre-line radius | 13u |
| Stroke | 6u (1/8 of the icon) |
| Mouth | 80°, facing east |
| Arcs | 3 × 88°, 8° gaps |
| Caps | butt |
| Order | petrol → gold → vermilion, counter-clockwise |
| Size | Use | Spec |
|---|---|---|
| master | ≥ 48 px, print, marketing | r 13 · w 6 · gap 8° |
| small | 24–32 px, UI, favicon SVG | r 13 · w 6.5 · gap 14° |
| micro | 20 px | r 12.5 · w 7 · mouth 84° · gap 16° |
| pixel | Exactly 16 px: ICO layer, tray at 100 %, title bar | hand-placed 16 × 16 pixels |
Usage
Clear space, sizes, misuse
Give the mark room, keep it above its minimum size, and never change how it is drawn.
Clear space
Keep ¼ of the mark height free on every side. Lockups use the same rule.
Minimum sizes
- Symbol: 16 px (pixel variant) · 6 mm in print
- Horizontal lockup: 72 px · 20 mm in print
16 px · 72 pxDo not
Each of these breaks the mark. Use the files as they are.
Recolour the arcs
Change the arc order
Close the mouth in a static mark
Add gradients, shadows or glows
Stretch or squash it
Rotate it
Colour
Three colours, one loop
Authored in OKLCH, with sRGB hex fallbacks computed in gamut. Every text pair passes WCAG 2.2 AA.
Brand
Petrol
Arc 1 · plan · default UI accent (light)
Gold
Arc 2 · act / working
Vermilion
Arc 3 · verify
On dark backgrounds
Petrol on dark
Accent on dark backgrounds
Gold on dark
Arc 2 on dark backgrounds
Vermilion on dark
Arc 3 on dark backgrounds
Neutrals
Ink
App-icon plate, dark canvas
Paper
Light canvas
What the colours mean in the product
Plan
Petrol. The agent is working out the steps.
Act
Gold. The agent is running tools and writing changes.
Verify
Vermilion. The agent is checking the result.
Errors are never shown by vermilion alone: the UI uses the danger colour, an icon and text.
Typography
Manrope and Commit Mono
Two open-licence families (OFL-1.1), both checked for every Romanian glyph.
Manrope
UI, marketing, the wordmark · headings 650, body 450
Aa Ăă Ââ Îî Șș Țț
Plans, writes, runs the tests. Shows you the diff.
Romanian pangram
Muzicologă în bej vând whisky și tequila, preț fix.
Commit Mono
Code, numbers, terminals · 400 and 700
0O 1lI {} =>
$ codai login
✓ 12,40 € · 1,2 mil. tokeniRomanian pangram
Muzicologă în bej vând whisky și tequila, preț fix.
Scale: 12 / 13 / 14 (base) / 16 / 20 / 24 / 32 / 44 px
Motion
The mark moves with the agent
One motion source for web, desktop and Android. With reduced motion, every state shows the static mark.
Intro
The loop assembles: arcs draw in order and the ring settles. 900 ms.
Thinking
A highlight travels plan → act → verify while the agent works.
Success
The mouth closes for a beat and reopens. 420 ms.
Error
A short horizontal shake. Never colour alone. 200 ms.
Hover
The ring turns 12° toward the reader. 160 ms.
Hover or focus the mark
Voice
Short sentences, verbs first
Numbers over adjectives. Say what was done and how it was checked. Never "magic", "revolutionary" or "just".
| This | Not that |
|---|---|
| Precise | Cold |
| Local | Provincial |
| Autonomous | Opaque |
| Sober | Boring |
Marketing
Do
Plans, writes, runs the tests. Shows you the diff.
Don't
Revolutionary AI magic that just writes your code.
Errors
Do
The gateway did not answer in 30 s. Retrying in 5 s.
Don't
Oops! Something went wrong.
Docs
Do
Run `codai login`. It opens the browser once.
Don't
Simply log in and you are good to go!
Naming
Written codai, always lower case, also at the start of a sentence. Never Codai, CodAI, CODAI, Cod.ai or "the codai". Products: codai desktop, codai hub, codai pay, codai gateway; the model is just codai.
Badge
Built with codai
Made something with codai? Add the badge to your site or README. It links to codai.ro.
Dark
HTML
<a href="https://codai.ro"><img src="https://codai.ro/brand/badge-dark.svg" alt="Built with codai" width="156" height="28"></a>Markdown
[](https://codai.ro)Light
HTML
<a href="https://codai.ro"><img src="https://codai.ro/brand/badge-light.svg" alt="Built with codai" width="156" height="28"></a>Markdown
[](https://codai.ro)