Global Presets UI Style Guide
01. Color palette
Primary Imhoff Teal Color: #284557
Primary Imhoff Orange: #dfb160
Primary Black Color : #0a131e
Primary White Colors : #ffffff
Secondary Imhoff Brown Color: #9f8f93
Secondary Cool Teal Color : #00506a
Secondary Rich Black Color : #0e0e0e
Secondary Dark grey Color : #393939
02. Text Styles
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
List
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
- Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
- Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- convallis a pellentesque nec, egestas non nisi.
- Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Quisque velit nisi
Number
11
Menu Title
Brunch
03. Buttons
Primary Button
CSS Class:
ctm-primary-button
CSS Class:
ctm-primary-button
Normal/Hover
Active
Disable
Secondary Button
CSS Class:
ctm-secondary-button
CSS Class:
ctm-secondary-button
Normal/Hover
Active
Disable
Accent Button
CSS Class:
ctm-accent-button
CSS Class:
ctm-accent-button
Normal/Hover
Active
Disable
Tertiary Button
CSS Class:
ctm-tertiary-button
CSS Class:
ctm-tertiary-button
Normal/Hover
Active
Disable