Style guide

Scroll

INTUEAT - the perfect at-home dining experience.

Colors

Background colors

Intueat using Red Primary mixed with a Dark Green color pallets for clean and minimal design. But you can use different color pallets which you prefer. Intueat has variations to use with caution. Choose that fit your own.

Classes

BG Black

BG Gray C6

BG Gray C5

BG Gray C4

BG Gray C3

BG Gray C2

BG Gray C1

BG Gray C0

BG White Smoke

BG White

BG Dark C5

BG Dark C4

BG Dark C3

BG Dark C2

BG Dark C1

BG Light Dark C5

BG Light Dark C4

BG Light Dark C3

BG Light Dark C2

BG Light Dark C1

BG Chinese Orange C2

BG Chinese Orange C1

BG Orange C4

BG Orange C3

BG Orange C2

BG Orange C1

BG Deep Orange

BG Atoll

BG Apricot C2

BG Apricot C1

BG Cashew

BG Maroon

BG Dark Brown

BG Light Walnut

BG Khaki

BG Dim Green

BG Grayish Olive

BG Olive

BG Warm Gray C1

BG Warm Gray C2

BG Claret

BG Dark Red C2

BG Dark Red C1

BG Lipstick Red

BG Cadmium Red

BG Coral

BG Bougainvillaea

BG Pure Pink

BG Tender Pink

BG Pale Pink

BG Light Rouge

BG Light Prawn

BG Sardonyx

BG Shadow Pink

BG Pale Yellowish Pink

BG Pink Beryl

BG Pinkish White

BG Soft Sun

BG Sand

BG Fluorescent Orange

Every background color class starts with “BG” as an acronym for background.

Blur backgrounds

Buttons

Button styles and sizes include CSS animations.

Button styles

Gradient button

Button-App

Gradient Button

Icon down Button

Button-App

Icon down

Gray button

Button-App

Gray Button

White button

Button-App

White Button

Gray Border

Red Button

Button-App

Red Button

red icon down

Button-App

Red Button

Icon down

Button sizes

Small size Button

Button-App

Extra Small

Small size Button

Button-App

Small

Medium size button

Button-App

Medium

Large size button

Button-App

Large

Typography

Font

Template Papers using clean and modern font Shape from Intueat Font Library. The font includes glyphs for various Latin languages.

Native Heading styles

This is H1 heading

All H1 Headings

This is H2 heading

All H2 Headings

This is H3 heading

All H3 Headings

This is H4 heading

All H4 Headings

This is H5 heading

All H5 Headings

This is H6 heading

All H6 Headings

Native Typography styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Paragraphs

Block Quote

All Block Quotes

  • This is an example of list paragraph

  • This is an example of list paragraph

  • This is an example of list paragraph

All Unordered Lists

  1. This is an example of list paragraph

  2. This is an example of list paragraph

  3. This is an example of list paragraph

All Ordered Lists

Custom Heading styles

Extra Large Heading

Main Heading

Extra Large

Large Heading

Main Heading

Large

Medium Heading

Main Heading

Medium

Regular Heading

Main Heading

Small Heading

Main Heading

Small

Capitalize Heading

Main Heading

Capitalize

Custom Paragraph styles

This is a Extra Large Paragraph

Paragraph

Extra Large

This is a Large Paragraph

Paragraph

Large

This is a Medium Paragraph

Paragraph

Medium

This is a Regular Paragraph

Paragraph

This is a Small Paragraph

Paragraph

Small

This is a Extra Small Paragraph

Paragraph

Extra Small

Custom Post Title styles

Extra Large Post Title

Post Title

Extra Large

Large Post Title

Post Title

Large

Medium Post Title

Post Title

Medium

Regular Post Title

Post Title

Small Post Title

Post Title

Small

Extra Small Post Title

Post Title

Extra Small

Rich text styles

Class name is "Rich Text"

Rich Text

All rich text styles and classes

Native List styles

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Unordered List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Ordered List

Custom List styles

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

+

List Item

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

+

List Item

Pin Icon

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

+

List Item

Pen Icon

Layouts

Flex classes

Flex

Combo classes

Flex Vertical

Align Center

Align Start

Justify Center

Justify Left

Justify Start

Justify Space Around

Flex

Combo classes

Tab Wrap

Mob Wrap

Mob Reverse

Mob Reverse Wrap

Flex

Flex

Flex - align center

Flex

Align Center

Flex - wrap on tablet breakpoint

Flex

Tab Wrap

Flex - wrap on mobile landscape breakpoint

Flex

Mob Wrap

Flex - vertical

Flex

Flex Vertical

Flex - margins 1 em

Flex

Flex Margins 1em

Margins

List of all margin classes. You can apply them to Headings, Paragraphs, Buttons, Div's, etc.

Paragraph margins

Heading margins

Margin Top classes

Margin Bottom classes

Margin Right classes

Margin Left classes

Other styles

Accordion style

This is animated vertically collapsing accordion

Opacity

Opacity classes

Icons

Sizes

Extra Small icon

Icon

Extra Small

Small icon

Icon

Small

Regular icon

Icon

Medium icon

Icon

Medium

Large icon

Icon

Large

Extra Large icon

Icon

Extra Large

Reservation form

Thank you!
Your reservation has been sent! We will contact you as soon as possible.
Oops! Something went wrong while submitting the form.
Scroll up

Application Components

Intueat is creating an React-Based Application that matches the frontend or marketing components. The following sections and card inside this style guide is for applications purposes only. Choose that fit your own.

Book a Chef