Style guide & components

The style guide contains important styles and components that are used throughout the template.

Colors
Typography
Icons
Buttons
Forms
Grid
Spacing
Rich text

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Brand Colors

Primary brand colors are used for elements that must reflect Velvety’s brand. Each color has a darker and a lighter shade.

Primary 100
101C10
Primary 80
101C10
Primary 60
101C10
Primary 40
101C10
Primary 20
101C10
Neutral Color

The Neutral colors are used for greyscale elements that may applied to section, elements or text.

Neutral 100
101C10
Neutral 80
101C10
Neutral 60
101C10
Neutral 40
101C10
Neutral 20
101C10
Neutral 0
101C10
Accent Color

The State colors are used for states. It can be used both on positive and negative feedback that may applied.

Success
101C10
Error
101C10
Warning
101C10
Info
101C10

Typography

The main typeface is IvyMode and Aileron. Provide a clean and modern geometric serif and sans serif style for text and headlines.

IvyMode

Regular

Light

Aa
Aileron

Bold

Regular

Light

Light Italic

Aa

Heading - Desktop

Heading 1
IvyMode / Light
108px
110%

Heading 1

Heading 2
IvyMode / Light
56px
120%

Heading 2

Heading 3
IvyMode / Regular
40px
120%

Heading 3

Heading 4
IvyMode / Light
40px
120%

Heading 4

Heading 5
IvyMode / Light
30px
120%
Heading 5
Heading 6
Aileron / Light
28px
110%
Heading 6

Heading - Mobile

Heading 1
IvyMode / Light
48px
110%

Heading 1

Heading 2
IvyMode / Light
40px
120%

Heading 2

Heading 3
IvyMode / Regular
32px
120%

Heading 3

Heading 4
IvyMode / Light
32px
120%

Heading 4

Heading 5
IvyMode / Light
24px
120%
Heading 5
Heading 6
Aileron / Light
28px
110%
Heading 6

Body

Body XXL Bold
Aileron / Bold
22px
140%
Sample text is being used
Body XXL Regular
Aileron / Regular
22px
140%
Sample text is being used
Body XXL Light
Aileron / Light
22px
140%
Sample text is being used
Body XL Bold
Aileron / Bold
20px
140%
Sample text is being used
Body XL Semibold
Aileron / Semibold
20px
140%
Sample text is being used
Body XL Regular
Aileron / Regular
20px
140%
Sample text is being used
Body XL Light
Aileron / Light
20px
140%
Sample text is being used
Body XL Light Italic
Aileron / Light Italic
20px
140%
Sample text is being used
Body L Bold
Aileron / Bold
20px
140%
Sample text is being used
Body L Semibold
Aileron / Semibold
18px
140%
Sample text is being used
Body L Regular
Aileron / Regular
18px
140%
Sample text is being used
Body L Light
Aileron / Light
18px
140%
Sample text is being used
Body L Light Italic
Aileron / Light Italic
18px
140%
Sample text is being used
Body M Semibold
Aileron / Semibold
16px
140%
Sample text is being used
Body M Regular
Aileron / Regular
16px
140%
Sample text is being used
Body M Light
Aileron / Light
16px
140%
Sample text is being used
Body S Regular
Aileron / Regular
14px
140%
Sample text is being used
Body S Light
Aileron / Light
14px
140%
Sample text is being used
Body XS Regular
Aileron / Regular
12px
140%
Sample text is being used

Icons

Icons are visual representations of commands, devices, directories, or common actions.

Arrow-up
Arrow-down
Arrow-right
Arrow-left
Arrow-up
Arrow-down
Arrow-right
Arrow-left
Bag happy
Bag
Directbox notif
Direct inbox
SMS
SMS Tracking
SMS notification
Message
Shop
Message
Bag
Clock
Search Normal
Menu
Setting
Archive slash
Archive minus
Star
Heart
Filter Search

Buttons

Button used in this website as a CTA, with various style variations

Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now

Forms

Default form field styles for all forms used on the site.

Text Field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Grid

How the spacing roles relate to the hierarchy of user interface elements.

2 column grid
3 column grid
4 column grid
2 : 1 column grid
1 : 2  column grid

Spacing

How the spacing roles relate to the hierarchy of user interface elements.

4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
104px
112px
120px
160px

Rich Text

Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.

Text Bold

Lorem ipsum dolor sit amet consectetur

Text Italic

Lorem ipsum dolor sit amet consectetur

Text Link

Lorem ipsum dolor sit amet consectetur

Bullet List

  • Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Senectus et netus et malesuada fames ac turpis egestas

Numered List

  1. Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Senectus et netus et malesuada fames ac turpis egestas

Figure Image & Caption

Blockquote

Lorem ipsum dolor sit amet consectetur. Neque penatibus pellentesque ultrices tellus suspendisse nulla velit. Ligula pellentesque neque commodo tellus lectus aliquam enim vestibulum. Fusce neque ac mauris convallis eu velit. Amet arcu venenatis massa mauris lobortis sed volutpat. Vivamus purus morbi nullam posuere vestibulum viverra nec quam vivamus. Quis scelerisque viverra ornare ut metus. Eu vitae ornare tincidunt elit.
© Designed by Karantz