Style Guide

Fonts

Lato

Body
Weights: Normal (400)

Playfair Display

Headings
Weights: Normal (400)

All H1 to H6 Headings

H1

Element

H2

Element

H3

Element

H4

Element

H5
Element
H6
Element
H1 Heading

Class

H2 Heading

Class

H3 Heading

Class

H4 Heading

Class

H5 Heading
Class
H6 Heading
Class

Body

Paragraph

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.

Text 20

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.

Text 18

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.

Text 14

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.

Text 12

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.

Link
This is a Link Text
Ordered List
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.

Buttons

Primary Button
Secondary Button

Background Color

White - #ffffff
White Bg
Black - #000000
Black Bg
White Smoke - #F5F5F5
White Smoke Bg
Wind Chime - #E0E0E0
Wind Chime Bg
Black 60 - rgba(0, 0, 0, 0.6)
Black 60 bg
Black 80 - rgba(0, 0, 0, 0.8)
Black 80 bg
Old Gold - #ceb888
Old Gold bg

Text Color

Text Color
Primary - #7f7871
Primary Text
Text Color
Black - #000000
Black Text
Text Color
White - #ffffff
White Text

Margin

MT 0
margin-top: 0;
MT 16
margin-top: 1rem;
MT 32
margin-top: 2rem;
margin-bottom: 0;
MB 0
margin-bottom: 1rem;
MB 16
margin-bottom: 2rem;
MB 32
margin: 0;
M 0
margin-inline: 0;
M Inline 0
margin-block: 0;
M Block 0

Padding

PT 0
padding-top: 0;
PT 16
padding-top: 1rem;
PT 32
padding-top: 2rem;
padding-bottom: 0;
PB 0
padding-bottom: 1rem;
PB 16
padding-bottom: 2rem;
PB 32
padding: 0;
P 0
padding-inline: 0;
P Inline 0
margin-block: 0;
P Block 0

Alignment

text-align: left;
Text Left
text-align: center;
Text Center
text-align: right;
Text Right

Height & Width

width: 100%;
W Full
height: 100%;
H Full
height: 100%;
width: 100%
HW Full

Container

Container

RichText

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Blockquote
© 2026 — REtography
Client Portal