Guidelines on how to implement the Arkalion visual brand system for cross media applications.
The logo is monochrome by design. It comes as a horizontal lockup and a standalone mark, each cut for light and dark surfaces. There is no color version, and there does not need to be.
Core logo.
The mono variants are for monotone output: black-and-white print, a single-colour stencil, engraving or embossing, or anywhere the full-colour logo cannot be reproduced.
Clear space.
Give it room
Keep clear space around the logo equal to the height of the mark. Place it on a solid surface. When the background is busy or mid-tone, switch surface rather than adding an outline or a container.
The system runs on black. Cyan is the only chromatic voice in it, which is what makes it carry: it marks the interactive, the live, the thing worth looking at. Everything else is a step on the grey ladder.
Visual balance.
Each part of the circle represents how much of this colour should roughly be used in the system. Creativity is encouraged for special use-cases (promo, posters, etc.) but clean branded work should respect it.
- Signal Cyan14%
- Void Black34%
- Pure White22%
- Carbon20%
- Graphite10%
Inter across the whole system, set one step larger than a standard interface scale so the product reads confident rather than cramped.
Hero typeface — display/headline.
Body typeface.
Every step in the system.
Headings
- H1Display heading set in the hero face.96px
- Font
- Inter SemiBold 600
- Desktop
- 96 / 101 px
- Tracking
- -2.5%
- Case
- Normal case
- H2Section title built from the same hierarchy.48px
- Font
- Inter SemiBold 600
- Desktop
- 48 / 48 px
- Tracking
- -2.5%
- Case
- Normal case
- H3Body face at the largest editorial step. Use it for opening passages and emphatic statements.36px
- Font
- Inter SemiBold 600
- Desktop
- 36 / 40 px
- Tracking
- -2.5%
- Case
- Normal case
- H4Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.20px
- Font
- Inter SemiBold 600
- Desktop
- 20 / 28 px
- Tracking
- -2.5%
- Case
- Normal case
- H5Caption-style heading18px
- Font
- Inter SemiBold 600
- Desktop
- 18 / 26 px
- Tracking
- -2.5%
- Case
- Normal case
- H6Smallest heading16px
- Font
- Inter SemiBold 600
- Desktop
- 16 / 24 px
- Tracking
- -2.5%
- Case
- Normal case
Body
- Body BaseBody face at the running text scale. Comfortable for paragraphs of up to 70 characters per line.18px
- Font
- Inter Regular 400
- Desktop
- 18 / 28 px
- Tracking
- 0.0%
- Case
- Normal case
- Body SmallBody face at the small annotation scale. Captions, footnotes, table cells.16px
- Font
- Inter Regular 400
- Desktop
- 16 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
Labels / Accent
- CaptionBrand guide / Version 1.014px
- Font
- Inter Regular 400
- Desktop
- 14 / 20 px
- Tracking
- 0.0%
- Case
- Normal case
- ButtonTake action16px
- Font
- Inter Medium 500
- Desktop
- 16 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
- Usage
- Typography pointers for button text.
- LabelSection label14px
- Font
- Inter Regular 400
- Desktop
- 14 / 20 px
- Tracking
- 5.0%
- Case
- All caps
Every button on every colour of the palette. Each background gets its own set, so contrast holds wherever a button lands. Hover and press to try them live.
Two sets. Marketing icons carry the brand's message; functional icons do the everyday work. Both come in three colours, each matched to its surface.
For interfaces and labels, use the brand’s functional icons.
- Stroke1.5 px
- Grid24 × 24
- Caps & joinsRound
- 162440SizesS · M · L px
Need help implementing this brand?
