Contact Us

Our logo

Logo and Signet used on core website, and all marketing & print materials

Logo in colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Logo on the dark background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Black on white logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

White on dark background logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Sygnet Colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Sygnet Colour aon Dark Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Sygnet Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Sygnet White

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Our colors

These color system should be used in all web and social assets. Mixing Ockam with other colors is forbidden.

Natural Scale

Background and texts colors mainly.

Dark Grey

Texts, Background

#242A31

Light Grey

Stroke, Backgrounds

#EFF1F1

Neutral Grey

Texts

#7A8895

Background Grey

Backgrounds

#F9F9F9

Medium Grey

Texts, Backgrounds

#D1DBE3

White

Texts, Backgrounds

#FFFFFF

Blues - Primary brand colors

Used as brand materials, backgrounds, accents.

Deep Blue

Texts, Background

#0A1A2B

Dark Ockam Blue

Accents

#36A7C9

Blue Accent

Texts, Backgrounds

#162535

Primary Gradient

Backgrounds, Accents

#4FDAB8

#52C7EA

Ockam Blue

Accents

#52C7EA

Secondary Gradient

Backgrounds, Accents

#36A7C9

#3AC6A3

Greens - Secondary brand colors

Used as brand materials, backgrounds, accents, buttons.

Light Avocado

Buttons, Accents

#4FDAB8

Pastel Avocado

Accents, Background

#A0F6E1

Avocado

Accents

#3AC6A3

Azure

Accents, Background

#ECFDF9

Dark Avocado

Texts, Accents

#1D5B58

Additional Colors

Used as accents, errors or other notifications.

Orange

Errors, Accents

#EC432D

Team Photos

If it’s possible please add the photo on which you can show yourself from the chest upwards (like on the example). Look straight ahead. It would be great if the photo won’t be taken from the bottom or too high.

You can take a photo by your phone. Today’s cameras can make great pictures. More important is good light, so you won’t stand in the shadow.

Photo should have no background, because the color will be added by default during uplouding to the page. To do this use one of these online tools:

  • Adobe Background Removal
  • Fotoclip
  • Remove Background
  • Removal AI
Dan Abramov

How it should look like

This photo is our goal. It’s good beacuse:

  • person is standing straight
  • the photo is taken from straight perspective
  • person is not overlighted or shaded
  • we can see the person from the chest upwards
  • it’s in colour
Dan Abramov

Don’t take such photo

This photo is not okay because:

  • the photo is taken from down perspective
  • person is shaded
Dan Abramov

Don’t take such photo

This photo is not okay because:

  • the photo is taken from upper perspective
  • person is a little bit overlighted
Dan Abramov

Don’t take such photo

This photo is not okay because:

  • the pohoto is black&white
  • we can see only head withour the body

Graphics

Images used in social media

Open Graph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Profile Picture for Socials

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Linked in Cover

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae faucibus odio.

Typography system

We’ve got two systems - for all pages and separate for the blog.

Main font-Inter

Headlines

H1

Heading1

Inter Extra Bold

140/Auto

H2

Heading2

inter Extra Bold

80/Auto

H3

Heading3

Inter Bold

40/130%

H4

Heading4

Inter Bold

Semi Bold

28/130%

28/130%

H5

Heading5

Inter Bold

24/130%

H6

Heading6

Inter Bold

20/130%

Body

B1

Body1

Inter Medium

Inter Regular

20/130%

20/130%

B2

Body2

inter Medium

Regular

18/140%

18/140%

B3

Body3

inter Medium

Regular

16/150%

16/150%

B4

Body4

inter Medium

Regular

14/150%

14/150%

B5

Body5

Inter Medium

12/130%

CTA

C1

CTA1

Inter Bold

Inter Semi Bold

Inter Semin Bold Underline

18/Auto

18/Auto

18/Auto

C2

CTA2

inter Bold

Semi Bold

Inter Semi Bold Underline

16/Auto

16/Auto

16/Auto

C3

CTA3

inter Semin Bold

14/Auto

Main Blog Fonts - Source Serif Pro

Body Blog

BB1

Body Blog 1

Source Serif Pro Bold

Source Serif Pro Regular

18/140%

18/140%

BB2

Body Blog 2

Source Serif Pro Bold

Source Serif Pro Regular

16/140%

16/140%

Icons

Set of the icons that are used on websites

Miscellaneous

Additional items

Team-background-placeholder

Team member placeholder [blue]

Placeholder photo used in team page when no avatar for user is detected

Developers Love Ockam

Build a Demo App

© 2022 Ockam.io All Rights Reserved

Style GuideSupportDiscussion