.png)
.png)
.png)
.png)
Colors
Color distinguishes our brand and helps us create consistent experiences across products.
Primary brand colors are used for elements that must reflect Velvety’s brand. Each color has a darker and a lighter shade.
The Neutral colors are used for greyscale elements that may applied to section, elements or text.
The State colors are used for states. It can be used both on positive and negative feedback that may applied.
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
Aileron
Bold
Regular
Light
Light Italic
Heading - Desktop
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading - Mobile
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Icons
Icons are visual representations of commands, devices, directories, or common actions.
Forms
Default form field styles for all forms used on the site.
Text Field
Text Area
Grid
How the spacing roles relate to the hierarchy of user interface elements.
Spacing
How the spacing roles relate to the hierarchy of user interface elements.
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
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
- 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
Figure Image & Caption
.png)
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.
