Typography

The typographic hierarchy aims to create contrast between the most significant and minor elements of the text. Contrast is created by adjusting typography elements, including fonts, their size, style and color, and their alignment.

Text styles

Text alignment

You can set alignment for text elements by adding a class name from below.

Spacing

Spacing classes provides you set of classes which will help you to build and maintain consistent spacing across components, blocks, sections, etc.

Spacing Scale

Use the spacing scale for components or sections. This scale is applied and used within all components and sections. Spacing available in the system:

• 2px

• 4px

• 8px

• 12px

• 16px

• 24px

• 32px

• 48px

• 64px

• 120px

Spacing Classes

Spacing classes represented with Stack, Inline, Indent, Inset, Section classes and G Stack, G Inline group classes. Use them to provide proper spacing across components, blocks and sections.

Stack

Stack is a global class which adds bottom margin. Bellow you'll find table of existing stack scale.

Inline

Inline is a global class which adds right padding. Bellow you'll find table of existing inline scale.

Indent

Indent is a global class which adds left padding. Bellow you'll find table of existing indent scale.

Inset

Inset is a global class which adds equal padding around the element. Bellow you'll find table of existing inset scale.

Group spacing

Group spacing such as G Stack and G Inline are global classes and used to add spacing inside of elements groups.  

G Stack

Uses flexbox (vertical direction) to provide space between group of elements.

G Inline

Uses flexbox (horizontal direction) to provide space between group of elements.

Section

With section classes you can set top and bottom margins for a whole section.

Corners

Sprkl provides a wide range of options to round corners. You can set corners around container or at particular side.

Corners around

You can set corners around container, with classes below.

Corners top

You can set corners at the top of container, with classes below.

Buttons

Buttons are one of the most important components, as they help people communicate with the system and get expected feedback and result from it.

TheSprkl supports large variety of button styles and can serve plenty of purposes. Every button group supports different button size and button type (icons buttons, fab). All button groups sorted by importance (primary, secondary, outline, ghost, tertiary buttons).

Primary

Secondary

Outline

Ghost

Tertiary

Customize

General button styles applied to the Button class and for all buttons defined min-width, so they will look consistent even, if the text is short. To achieve different button size please add size combo class after Button class, e.g. Button Size L

Links

Links are the useful tool that makes information more structured and wider. You can mark the link in different ways: underlined, boxed, default. This demo lets you preview the link component, its variations, and configuration options.

Link / Icon Right

Customize

In order to style links use Link global class and add one of the combo classes Dark, Pale or Light. Same classes could be applied to Link Blocks and will affect not only text, but icons too. Note that each style have its own states and for now style states won't affect icons.

Avatars

Avatars, also known as a profile picture or userpic, is a graphical representation of a user or the user's character or persona. Avatars are used to show a thumbnail representation of an individual or company in the interface. Avatars occur widely in material design and use almost everywhere from tables to dialogue menus.

Components

You may choose a preferable option:

Six sizes: XXS, XS, S, M, L, XL;
‍Three types: icon, picture, letter;
‍Two variants: circular and rounded square.

Avatars / Circular / Placeholder

Avatarts / Rounded / Placeholder

Customize

You can quickly customize each size of an avatar through the parameter “size.”

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts are notifications that lead to important information related to the state of applications or devices, and often triggers a communication request. It may contain a title, an optional message, and one or more parts. Alert offers 4 levels of severity with a unique color and icon.

Info

Inform your user that his action had a result or show other informative text.

Success

Let to the user know that his action acheived the goal.

Error

Show the failure after the action.

Warning

Any important content.

Customize

Forms

A form is a set of related elements such as inputs, text fields, etc. arranged in a given order.

Inputs

Forms / Inputs / Default / Size

Text area

Forms / Inputs / Text Area / Default /

Select field

Select fields exclusively prepared only for Webflow forms. In Figma instead of Select fields use dropdowns.

Toggles

Dropdowns

Dropdowns are small overlays that opens on demand. They let users access additional content and actions without cluttering the page. It is usually used for navigation or forms.

Customize

General dropdown styles applied to the Dropdown Link. To achieve different dropdown size please add size combo class after Dropdown Link class, e.g. Dropdown Link Size L.