Style Guide

An overview of iokit styling and interface elements.

Colors

iokit makes use of the Space Grotesk webfont for headings and body text.

$color_brand

#5A52FF

$color_dark

#0F072E

$color_light

#F3F2FC

$color_brand

#321C64 #5731AB

Typography

iokit makes use of the Space Grotesk webfont for headings and body text.

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

title_line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Link example

Avatars

Represent users or customers around the interface

... ... ...
... ... ... ...

Accordions

iokit makes use of the Space Grotesk webfont for headings and body text.

Buttons

Styles for buttons with support for Multiple sizes, states, and more.

Forms - Text Inputs

Styles and state variations for text inputs

Looks good!
@
Please choose a username.

Forms - Selectables

Checkboxes, Radios and Select.

Alerts

Provide messages for typical actions with the flexible alert messages.

Shadows

Preset styles to imply depth on interface components

$shadow_1

$shadow_1

$shadow_1

Client Logos

Custom logo designed for your work examples.

Box Styles

Structural component for displaying boxed content

Finest Quality

Create professional short form video with the online video editor that anyone can master.

Studio

Create professional short form iokit with the online iokit.

SEO monitoring

Keep track of all the important

Finest Quality

Keep track of all the important