Style Guide

The style guide contains styles, components and guidelines for using styles in the langdzy template.

Patern And Light Center

Typeface

Landzy's main typeface is Inter. It using from Google Fonts A tranquil and fresh sans font family for clear text and headlines.

HEADING

Heading / Heading 1

Inter - Semibold

72 px font size

Heading / Heading 2

Inter - Semibold

56 px font size

Heading / Heading 3

Inter - Semibold

48 px font size

Heading / Heading 3

Inter - Semibold

40 px font size

Heading / Heading 3

Inter - Semibold

32 px font size

Heading / Heading 3

Inter - Semibold

24 px font size

Body

Body / X-Large

Inter - Bold

20 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / X-Large

Inter - Semibold

20 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / X-Large

Inter - Regular

20 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Large

Inter - Bold

18 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Large

Inter - Semibold

18 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Large

Inter - Regular

18 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Normal

Inter - Bold

16 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Normal

Inter - Semibold

16 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Normal

Inter - Regular

16 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Small

Inter - Bold

12 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Small

Inter - Semibold

12 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

Body / Small

Inter - Regular

12 px font size

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look even slightly believable.

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 Landzy’s brand. Each color has a darker and a lighter shade.

Main

#ab28fa

Purple 10

#eed4fe

Purple 20

e3b7fd

Purple 30

#d594fd

Purple 40

#c770fc

Purple 50

#b94cfb

Primary 60

#ab28fa

Primary 70

#8f21d0

Primary 80

#721ba7

Primary 90

#56147D

Primary 95

#390d53

Primary 100

#220832

Secondary Colors

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

Vivid Orchid Main

#d028fa

Vivid Orchid 20

#f6d4fe

Vivid Orchid 20

#efb7fd

Vivid Orchid 30

#d593fc

Vivid Orchid 40

#e070fc

Vivid Orchid 50

#d84cfb

Vivid Orchid 60

#d028fa

Vivid Orchid 70

#ad21d0

Vivid Orchid 80

#721ba7

Vivid Orchid 90

#56147D

Vivid Orchid 95

#390d53

Vivid Orchid 100

#220832

Neutral Color

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

Neutral 100

#030115

Neutral 90

#0b072a

Neutral 80

#151232

Neutral 70

#25223d

Neutral 60

#393658

Neutral 50

#555177

Neutral 40

#7b779b

Neutral 30

#9a98b9

Neutral 20

#d9d8e4

Neutral 10

#ededf2

Iconography

Icons represent directories or common actions visually.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Money

Linear

Type, Paragraph, Character

Linear

MonType, Weather, Characterey

Linear

FIles

Linear

Weather

Linear

Arrow

Linear

Users

Linear

Users

Linear

Car

Linear

Emails, Messages

Linear

Location

Linear

School, Learning

Linear

Delivery

Linear

Scurity

Linear

Design, Tools

Linear

Grid

Linear

Shop

Linear

Crypto Currency

Linear

Content

Linear

Programing

Linear

Essetional

Linear

Support, Like, Question

Linear

Notifications

Linear

Settings

Linear

Archive

Linear

Time

Linear

Computers, Devices, Electronics

Linear

Call

Linear

Grid

Relationship between spacing roles and user interface element hierarchy.\

2 column grid

3 column grid

4 column grid

2 column grid

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

‍