The mark
Three tiles: a client, the gateway, and the machine that does the work, meeting at the corners rather than merging. Use it alone where the name is already on screen, or where the space is square.
On the brand square
The app icon: rounded, on #0d0f11. What an avatar slot wants.
On pure black
Full bleed, #ffffff on #000000, for listings that ask for exactly that.
Need the mark to take its colour from whatever it sits in? exeora-mark.svg and exeora-wordmark.svg carry currentColor instead of a fill.
The wordmark
The mark and the name, locked up. The name is Inter at weight 600, drawn as outlines, so the vector renders the same anywhere. Do not rebuild this lockup by setting the name yourself.
Clear space
Keep at least the width of one tile free on every side. It is the only spacing rule, and it is generous on purpose: the mark reads as three separate shapes, and crowding it makes them read as part of whatever is next to them.
Colour
Grayscale, with one near-white accent carrying every primary action and one cool hue reserved for connection state. There is no light theme to keep in sync, which is why the mark ships in exactly two colours.
Background
The page. Every asset's dark surface.
Foreground
Body text, and the mark on dark.
Accent
Every primary action. Near-white on purpose.
Connection
Live state only, never body text.
The rest of the scale
Surface
#14171a
Elevated
#22262b
Border
#2b3137
Border subtle
#1f2429
Muted
#9aa2ab
Faint
#6d757e
Type
Inter for everything read as prose, JetBrains Mono for commands, code, and the small uppercase labels. Both are variable faces, self-hosted rather than fetched from a CDN, and both are under the SIL Open Font License 1.1, so you can use them yourself.
Secure execution
Display · 40px
Secure execution
Headline large · 28px
Secure execution
Headline medium · 22px
Secure execution
Title · 16px
Secure execution
Body · 15px
Secure execution
Label · 11px
Using the mark
Short list, because there is not much to get wrong: the mark is three rectangles and one of two colours.
Do
- Keep clear space of at least one tile's width around the mark.
- Use the light files on dark backgrounds and the dark files on light ones.
- Reach for the on-black or on-brand square when a slot needs a filled icon.
- Scale the SVG. It is the same shape at every size.
- Refer to the product as Exeora, capital E, one word.
Do not
- Do not recolour the mark, or fill it with a gradient or a photograph.
- Do not rotate, stretch, skew, outline or add a shadow to it.
- Do not box it in, or set it on a background that leaves it hard to read.
- Do not rebuild the wordmark by setting the name in another face or weight.
- Do not use the mark as your own icon, or in a way that implies endorsement.
Licence
The code is AGPL. The name and the mark are not.
Exeora's source is AGPL-3.0-only, and you are welcome to fork it. That licence covers the code; it does not hand over the name or the mark, which stay Exeora's.
This page is permission to use both to refer to Exeora: in writing about it, in a client's list of integrations, in documentation, in a talk. It is not permission to use them as your own, or in a way that suggests Exeora built, endorses or is affiliated with something it did not.
A fork under the AGPL is still a fork: give it its own name and its own mark. If you are unsure whether a use is fine, ask - the answer is usually yes and always quick.