Style Guide

Unlock design brilliance with a roadmap to create visually stunning and cohesive experiences.

Typography

We use Inter for everything.

Inter

Headers

For ease of use and consistency, this component allows you to switch between heading levels.

Super Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body

Our standard body text comes in at 16px. It has underline link styling and comes in a big and small variation.

Super Body

Body M

Body

Note

Colors

Our system consists of a few brand colors, a selection of complementary colors and a scale from shading.

Olyn Green

Dark

White

Light

Shading

Apart from solid colors, we use opacity for shading.

Dark

Mid Dark

Olyn Green

50%

25%

15%

Complementary colors

Use for alerts and system notifications.

Red

Green

Icons

We use the Google Material icon set for all our icons.

Join newsletter

Stay in the know with our Newsletter. Updates, changelog highlights, and valuable tips in your inbox.

Join newsletter

Stay in the know with our Newsletter. Updates, changelog highlights, and valuable tips in your inbox.

Olyn Inc. © 2024

Olyn Inc. © 2024

Olyn Inc. © 2024