Skip to content

Brand

The Ottabase mark,and how to use it.

The Ottabase logo, its files and the few rules that keep it looking right. Free to use when you write about, build on or link to Ottabase.

The mark

One stroke, two letters.

A small o and a B, drawn as one continuous stroke: the ring of the o sweeps up into the arch and comes down as the two bowls of the B. The logo is based on ഒ, the first letter of ഒറ്റ (otta), Malayalam for one. The B is the base it stands on.

Ring r16 · arch r48 (3×) · bowls 21 × 16
The Malayalam letter ഒ, set in Nirmala UIMalayalam ഒ (o) · the o and the B, already there

Downloads

Take the files.

SVG, so they stay sharp at any size. Right-click to copy the link, or download.

Mark, greenottabase-mark.svgMark, whiteottabase-mark-white.svgMark, inkottabase-mark-ink.svgMark, glowottabase-mark-glow.svgApp iconottabase-icon.svgApp icon, darkottabase-icon-dark.svgFaviconfavicon.svg

Colourways

Six recommended colourways.

Brand green on light, light green on dark. When only one colour is available, use ink or white.

Green on whiteDefault
Green on nightDark mode
White on green
Deep green on mist
InkOne-colour print
PaperReversed

Gradient

The glow, for big moments.

Two greens: light where the arch crosses over, primary at the o and the foot of the B. Heroes, decks and social images, at 32 px and up.

On light
On mist
On nightLifted greens
Bold, on night

App icon & avatar

A rounded tile, 32% corners.

For places where the mark stands alone: app stores, home screens, social profiles. The mark fills two thirds of the tile.

App icon32% corners
Dark
Lit tileHomepage hero
AvatarSocial profiles

Sizes & weight

Holds from billboard to favicon.

128px
64px
48px
32px
24px
16pxFavicon weight 13
Lightstroke 6
Regularstroke 10
Boldstroke 12
Blackstroke 15

Lockups

With the name.

ottabase
ottabase
ottabase

Clear space: keep at least half the mark's width empty on every side. Nothing else goes inside the dashed line.

Colour

The palette.

Green 400#4cb384Accent on dark, glow highlight
Green 600#2a8460Primary: the mark, links, buttons
Green 700#216a4dPressed states, glow edges
Ember#c2410cSecond voice on light: eyebrows
Amber#f0c25cSecond voice on dark
Ink#121a15Text on light
Night#0f1512Dark background
Mist#eff3f1Light background

Type

Three typefaces, all free.

SoraDisplay · Headlines, 600 to 800

Your next product

InterText · Everything read, 400 to 700

Auth, tenancy, queues and realtime, wired together.

JetBrains MonoCode · Everything copied, labels

pnpm otta add blackbox

The name

Ottabase. One word.

Write Ottabase in text, with a capital O and nothing else capitalised. Lowercase ottabase belongs to the wordmark, code and URLs. Never OttaBase, Otta Base or OTTABASE.

Packages are @ottabase/*; paid packages are Ottabase Pro.

Do

  • Use the files on this page as they are.
  • Give the mark clear space of at least half its width.
  • Use green on light, light green on dark, or one colour (ink or white).
  • Keep it at 16 px or larger; below 32 px use the favicon weight.

Don't

  • Stretch, rotate, skew or redraw the mark.
  • Fill the counters or close the gap at the foot of the B.
  • Put the gradient below 32 px, or on a busy photo.
  • Recolour it outside the palette, or add shadows and outlines.