Design System

ark.swiss

Brand Guidelines

A visual identity that combines Swiss precision and digital creativity.

01

Colors

Our color 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

Our typographic system uses three complementary families to create a clear visual hierarchy and optimal reading experience.

Manrope

Headings & Display
200300400500600700800

The quick brown fox jumps over the lazy dog

AaAaAaAaAa

Bitter

Accents & Quotes
400500600700

The quick brown fox jumps over the lazy dog

AaAaAaAaAa

Inter

Body & UI
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 colors and typography in our interfaces.

Buttons

Text Hierarchy

Heading 1

Heading 2

Heading 3

Body text with Inter for optimal on-screen reading.

"Elegant quote with Bitter italic"

Colors in Context

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