Design system

ark.swiss

Brand guidelines

A visual identity that combines Swiss precision and digital creativity.

01

Colours

Our colour palette reflects energy and innovation. The primary violet inspires creativity, while the lime green brings a touch of freshness and dynamism.

Primary — Violet

#6819E6 · hsl(262, 82%, 50%)

Secondary — Lime

#9FFF00 · hsl(82, 100%, 50%)

Neutrals

02

Typography

Two families: Outfit for text and headings, JetBrains Mono for counters, technical labels and mono fragments.

Outfit

Headings, body & UI
200300400500600700800

The quick brown fox jumps over the lazy dog

AaAaAaAaAa

JetBrains Mono

Mono, counters, technical labels
300400500600700800

The quick brown fox jumps over the lazy dog

AaAaAaAaAa
03

Logos & assets

Our visual identity in multiple versions to fit all contexts. Always use the appropriate version according to the background and medium.

Negative logos For dark backgrounds

Positive logos For light backgrounds

Favicons

Pictos Simplified icons

App icon

iOS app icon

iOS app icon

IOS App.svg
App Icon Previewark.swiss
04

Usage

Some examples of using colours and typography in our interfaces.

Buttons

Text hierarchy

Heading 1

Heading 2

Heading 3

Body text in Outfit, optimised for on-screen reading.

"Quote in Outfit italic"

Colours in context

Primary for main actions
Secondary for accents and success
Dark mode backgrounds
Light mode backgrounds