Style Guide
Colors
Color distinguishes our brand and helps us create consistent experiences across products.
Primary colors are used for elements that must reflect Dinely’s brand. Each color has a darker and a lighter shade.
The Secondary colors are used for grayscale elements that may applied to section, elements or text.
The Base colors are used for states. It can be used both on positive and negative feedback that may applied.
Typography
The main typeface is New York and Lora.
New York
Regular
Lora
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
Numbered 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
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.
Contact Us