Brand
The logo, the plum, and how to use them.
Everything you need to put Ruber on a page that is not ours — the artwork as SVG, the colours as tokens, and a short list of the things that make a good logo look cheap. Take what you need; you do not have to ask first.
The logo
Two pieces. The lockup is the mark and the wordmark together and is the default — use it wherever there is room. The mark alone is for square slots: an avatar, a favicon, an app icon, a tight rail.
SVG only, deliberately. It is what every one of these is used at some size we cannot predict, and a PNG large enough to be safe is a file nobody wants. If you need a raster at a fixed size, export one from these.
Using it well
Five things, and the first two are worth looking at rather than reading.
x is the height of the mark. Nothing sets inside the dashed line.
Shown at true size. Below these the wordmark's counters close up — use the mark alone.
- Give it the height of the mark, all round
- Leave clear space around the lockup equal to the height of the mark. Nothing sets inside it — no rule, no edge, no second logo. It is the single most common way a good lockup is made to look cheap.
- Smallest sizes
- The lockup stops being legible below about 20px of mark height, and the wordmark's counters close up in print below 12mm. Use the mark on its own below either — that is what it is for.
- The gradient belongs to the mark alone
- The gradient is brand artwork drawn once, and it is the only gradient anywhere in the product. It runs corner to corner across the mark's own box, so it lands identically at every size. Do not re-angle it, re-stop it, or extend it across the wordmark.
- One colour when the ground is not ours
- On anything that is not the canvas — a photograph, a dark footer, a coloured card — use the single-colour version. The gradient's stops are accent tokens, so on a dark ground the light-theme mark goes muddy and all but disappears.
- The name
- Ruber is a proper noun with one capital. Not RUBER, not ruber, not Rüber. The wordmark is set in the logo's own drawn letterforms and is not a font you can type — if you need the name in running text, type it and let it take the surrounding face.
Please do not
Short on purpose — a list of thirty is a list nobody finishes. Every one of these is drawn wrong below on purpose.
- Do not recolour it. Plum, black or white.
- Do not put the full-colour logo on a photograph or a saturated ground.
- Do not stretch, squash or rotate it — set a height, let width follow.
- Do not add a shadow, an outline, a bevel or a glow.
- ruberDo not rebuild the wordmark in a typeface, or letterspace it.
- Do not box it in, or crowd it against an edge or another logo.
- Do not use the mark as a bullet, a divider, or a repeating pattern.
- Do not imply a partnership, an endorsement or an integration that does not exist.
Colour
Every colour in the product, as the token it is set from. Build against the token where you can — the hex is what it resolves to today on the light theme, and the dark column is the same token under the dark one.
Plum
One plum, four jobs. It is the only colour on a Ruber surface that is there to be noticed, which is what keeps it noticeable — a page that accents six things has accented nothing.
- Accent--accent · #8a3d73 · #c97fb8The compose button, the selected row, a focused control, the primary call to action. Nothing else.
- Accent hover--accent-hover · #7a3565 · #d592c6The pressed and hovered state of anything filled in the accent.
- Accent strong--accent-strong · #632b52 · #e4a9d5Type on an accent-soft ground, and the far stop of the logo's gradient.
- Accent soft--accent-soft · #f8ecf4 · #382432The ground under a selected row or an open tile. Never under body text.
Grounds
Three near-whites, because a card on a page needs a ground it can sit on. Collapse any two and the interface turns into a wireframe.
- Canvas--bg-canvas · #fcfcfd · #121016The page itself. Everything else is laid on this.
- Surface--bg-surface · #ffffff · #1a171fCards, panels, the message list — anything that reads as an object on the canvas.
- Surface subtle--bg-surface-subtle · #f2f0f5 · #221e27Chips, wells, an unread row: a fill inside something that is already a surface.
- Rail--bg-rail · #f5f4f7 · #0e0c12The app rail only. A step deeper than canvas, because it frames the product rather than being part of it.
Ink
Three weights of ink, and they are a hierarchy rather than three greys. Secondary supports something; tertiary is metadata. Prose set in either reads as the caption for a document that is missing.
- Primary--text-primary · #1a171c · #f6f4f7Headings, body copy, a sender's name. Anything somebody is meant to read.
- Secondary--text-secondary · #63606d · #bab4c2Supporting text — a hint under a field, a subject line on a read row.
- Tertiary--text-tertiary · #928f9d · #847e8cTimestamps, counts, placeholders. Never a whole sentence.
- Control line--border-control · #8d8a91 · #6d6872Input and control boundaries. Measured 3.40:1 on surface — WCAG 1.4.11 wants 3:1.
States
Four states, each with a soft ground to sit on. They are the only other colours in the system, and none of them is ever decorative — a green thing that is not a success is the fastest way to make the green ones stop meaning anything.
- Success--success · #2a7359 · #62c398A record that verified, a payment that went through.
- Warning--warning · #8a5a0d · #e0a64fSomething that still works but will not for long.
- Danger--danger · #c03a2f · #ee7a6cA failure, and anything destructive that cannot be undone.
- Info--info · #345f9e · #75a6ecA neutral notice. Not a fifth accent.
The five on the home page are not brand colours
The wall behind the hero and the headline over it cycle through five hues on a 45-second loop. They exist so one headline can move. Two of the five are the accent tokens repeated, and none of them is a secondary palette to build anything out of.
- #8a3d73 = --accent
- #a8347f
- #6558d9
- #4c2e8a
- #632b52 = --accent-strong
Typography
Three faces, each with one job. Geist Sans and Geist Mono are by Vercel under the SIL Open Font License; PT Serif is by ParaType, also OFL. All three are free to use, which is why they were chosen.
Aa
Search returns in under 200ms.
Geist Sans
SIL Open Font License 1.1
The interface, and everything on this site that is not a heading.
Aa
An address that is actually yours.
PT Serif
SIL Open Font License 1.1
Marketing headlines only. It never appears inside the product.
Aa
0O1lI · v=DMARC1
Geist Mono
SIL Open Font License 1.1
Addresses, DNS records, keys, code — anywhere the characters matter one by one.
| Use | Size | Weight | Line height |
|---|---|---|---|
| Page title | 24px | 650 | 32px |
| Section title | 18px | 650 | 26px |
| Card title | 15px | 600 | 22px |
| Reading — documents, message bodies | 15px | 400 | 24px |
| Body — interface | 14px | 400 | 22px |
| Small and meta | 12px | 450 | 18px |
| Tiny — chips, labels | 11px | 500 | 16px |
Line heights in pixels rather than ratios, so a heading and the paragraph under it share a rhythm instead of each having its own. Never ultra-bold, and no uppercase outside tiny metadata.
Voice
Ruber is mail infrastructure, and the writing is meant to sound like somebody who runs it telling you how it works. Confident, specific, and honest about the trade — including when the honest answer is the less impressive one.
“Mail is encrypted in transit. It is not encrypted at rest — see how storage works.”
“Military-grade encryption for the modern enterprise.”
Plain about what is true. A product that hedges on what it does is a product people assume is hiding something.
“Search returns in under 200ms across a 50,000-message mailbox.”
“Blazing fast, infinitely scalable.”
Specific where a number exists. Vague scale claims are the easiest thing on a page to disprove.
“Private mailboxes cannot be searched on the server. That is the point, and it is the cost.”
“The only email you will ever need.”
Direct about the trade. Every technical choice costs something, and saying so is what makes the rest believable.
Permission
The short version: you may use the marks on this page to refer to Ruber without asking us.
That covers writing about us, listing us among the services you support, and saying your product works with Ruber. Use the artwork as supplied, keep the clear space, and do not change the colour beyond the versions above.
What it does not cover is anything that suggests we are involved when we are not: putting the mark on your own product or packaging, using it in your name, your domain or your app icon, or placing it so that a reader would take it for a partnership, a certification or an endorsement. The name and the mark are ours, and this permission is for referring to us rather than for representing us.
Anything outside that, or a case you are not sure about, is one email: sales@ruber.me. Say what you are putting it on and we will usually just say yes.