Atonarp Design System

Fundamentals

Brand

Horizontal logo

Atonarp Logo

logo-primary

Logo mark

logo-primary-mark

Horizontal logo

logo-primary - White

Logo mark

logo-primary-mark - White

Download Assets

Colors

Atonarp Blue

#004bca

Life Science

#3554ff

Process Control & Semiconductor

#be2e6d

Atonarp Purple

#68478d

Atonarp Light Purple

#a759ff

Gradient

Atonarp Blue

#004bca

#3e6fd5

#6f92e0

#a1b8eb

#d0dbf5

#e8edfa

Life Science

#3554ff

#5e75ff

#8698ff

#afbaff

#d7ddff

#eceeff

Process Control & Semiconductor

#be2e6d

#cd5c8a

#db84a8

#e8aec5

#f4d7e2

#f9ebf1

Atonarp Purple

#68478d

#866ca5

#a491bb

#c3b5d2

#e1dae8

#f1edf4

Atonarp Light Purple

#a759ff

#b97aff

#cc9cff

#dcbdff

#eedeff

#f6efff

Type Color

#222222

#444444

#888888

#EBEBEB

#F6F6F6

Black

#000000

White

#FFFFFF

Gradient

Surfaces

Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it. The higher the elevation value, the more diffused the shadow becomes and we have 8 levels to choose from.

surface-L1

surface-L2

surface-L3

surface-L4

surface-L5

surfaceL-6

surface-L7

surface-L8

Typography

Make sure that you use type to clearly signal the difference between one level of content and another. When content is structured properly, it will allow users to understand their hierarchical importance, guiding the user's eyes to relevant information and allowing them to make decisions quicker.

Atonarp.com uses Rubik as its primary typeface and Inconsolata as its button/ link cta typeface.

16px Rubik bold - All caps

64x
rubik bold - all caps

18px Rubik Regular

20px Inconsolata

Iconography

Light BG

Black Arrow Carrot
close icon

Dark BG

Left Arrow Icon
Right Arrow Icon
Arrow Carrot Icon
close icon

Images

Starting with four image aspect ratios of landscape, portrait, square and avatar. These images have been placed inside parent DIVs that keep their aspect ratios when the page is resized. There's also a banner version that uses a background image that's been set to "Cover".

Landscape banner

image-landscape-banner with a background image set to "Cover" in 100% wrapper

Landscape

Image Landscape

image-landscape in 100% wrapper

Portrait

Image Portrait

image-portrait in css grid column 1

Square

Image Square

image-square in css grid column 2

Avatar

Image Avatar

image-avatar in 40px wrapper

Components

Buttons

The Primary button style is filled with rounded corners and the Secondary style uses an outline. On hover, we use 95% brightness, a drop shadow and animation to give them a little personality.

Large

Label

btn-primary

Label

btn-secondary

Label

btn--white

Label

btn--outline-dark

Label

btn--outline-dark

Medium

Label

btn-primary btn--med

Label

btn-secondary btn--med

Label

btn--white btn--med

Label

btn--outline-dark btn--med

Label

btn--outline-dark btn--med

Forms

We take Webflow's default styles and style them with Dezin's global styles.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

© 2021 Atonarp