Outside Elementor - Development Guidelines
Branding and colors
Text color
Primary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Secondary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.
Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.
Accent Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.
Typography
Stat
Desktop(lg) – 64px/70px
Tablet(md) – 56px/62px
Mobile(xs) – 48px/53px
H1 Heading 1
Desktop(lg) – 59px/52px
Tablet(md) – 48px/42px
Mobile(xs) – 40px/34px
H2 Heading 2
Desktop(lg) – 56px/50px
Tablet(md) – 48px/42px
Mobile(xs) – 40px/34px
H3 Heading 3
Desktop(lg) – 40px/34px
Tablet(md) – 40px/34px
Mobile(xs) – 32px/28px
H4 Heading 4
Desktop(lg) – 32px/38px
Tablet(md) – 32px/38px
Mobile(xs) – 24px/29px
H5 Heading 5
Desktop(lg) – 24px/28px
Tablet(md) – 24px/28px
Mobile(xs) – 20px/24px
Body XLarge
Desktop(lg) – 24px/28px
Tablet(md) – 24px/28px
Mobile(xs) – 20px/24px
Body Large
Desktop(lg) – 20px/24pxTablet(md) – 20px/24px
Mobile(s) – 20px/24px
Body Medium
Desktop(lg) – 18px/24px
Tablet(md) – 18px/24px
Mobile(s) – 16px/20px
Body
Desktop(lg) – 16px/24px
Tablet(md) – 16px/24px
Mobile(s) – 16px/24px
Body Strong
Desktop(lg) – 16px/22px
Tablet(md) – 16px/22px
Mobile(s) – 16px/22px
Desktop(lg) – 14px/18px
Tablet(md) – 14px/18px
Mobile(s) – 14px/18px
Button Text
Desktop(lg/md/s) – 16px/22px
Desktop(lg/md-/s) – 18px/22px
Desktop(lg/md-/s) – 16px/22px
Desktop(lg/md-/s) – 14px/18px
Desktop(lg/md-/s) – 16px/22px
Desktop(lg/md-/s) – 24px/28px
Desktop(lg/md-/s) – 18px/22px
Normal Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
List
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
Icon lists
Reusable components
Primary Button
Primary Button Small
Secondary Button
Secondary Button Small
Primary Button - Alt
Footer Nav Links
Nav Links
Forms
Spacing
Small
space-50 (4px)
space-100 (8px)
space-200 (16px)
medium
space-300 (24px)
space-400 (32px)
space-500 (40px)
space-600 (48px)
large
space-800 (64px)
space-1000 (80px)
space-1200 (96px)
space-1400 (112px)
space-1500 (120px)
space-1600 (136px)
lottie
