Style Guide of Sfoggia
Typography
The different text sizes used throughout the site.
Hero
Heading 1
Heading 1, Extra Bold
Heading 2
Heading 2, Seção
Heading 3
Heading 4
Heading 5
Text BOLD
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.
Text Large
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.
Text Regular
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.
Small Paragraph
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.
Tag
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.
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
List
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Link
Colors
The different weights of greys and colours used throughout the website.
Sfoggia
Prisma Green
Hex
#000
Rgba
45 106 79 100%
Lorem Ipsum
Dark
Hex
#2d2d2d
Rgba
45 106 79 100%
Lorem Ipsum
Light
Hex
#494949
Rgba
45 106 79 100%
Lorem Ipsum
Primary
Prisma Green
Hex
#000
Rgba
45 106 79 100%
Lorem Ipsum
Lightest
Hex
#2d2d2d
Rgba
45 106 79 100%
Lorem Ipsum
Light
Hex
#494949
Rgba
45 106 79 100%
Lorem Ipsum
Dark
Hex
#7c7c7c
Rgba
45 106 79 100%
Lorem Ipsum
Secondary
Bright Gray
Hex
EEEEEE
Rgba
45 106 79 100%
Lorem Ipsum
Alabaster
Hex
F0EDE9
Rgba
45 106 79 100%
Lorem Ipsum
American Silver
Hex
D6D2CB
Rgba
45 106 79 100%
Lorem Ipsum
Dark Silver
Hex
#706E6B
Rgba
45 106 79 100%
Lorem Ipsum
Tipography
H2
Hex
EEEEEE
Rgba
45 106 79 100%
Lorem Ipsum
H3
Hex
F0EDE9
Rgba
45 106 79 100%
Lorem Ipsum
H4, H5
Hex
D6D2CB
Rgba
45 106 79 100%
Lorem Ipsum
Body
Hex
#706E6B
Rgba
45 106 79 100%
Lorem Ipsum
Small
Hex
#3A3A3A
Rgba
45 106 79 100%
Lorem Ipsum
Assistance
White
Hex
#FFFFFF
Rgba
45 106 79 100%
Lorem Ipsum
Gray 100
Hex
#F7F7F7
Rgba
45 106 79 100%
Lorem Ipsum
Gray 200
Hex
#E5E5E5
Rgba
45 106 79 100%
Lorem Ipsum
Gray 300
Hex
#CCCCCC
Rgba
45 106 79 100%
Lorem Ipsum
Gray 400
Hex
#666666
Rgba
45 106 79 100%
Lorem Ipsum
Gray 500
Hex
#404040
Rgba
45 106 79 100%
Lorem Ipsum
Gray 600
Hex
#1A1A1A
Rgba
45 106 79 100%
Lorem Ipsum
Gray 700
Hex
#1D1D1D
Rgba
45 106 79 100%
Lorem Ipsum
Gray 800
Hex
#1D1D1D
Rgba
45 106 79 100%
Lorem Ipsum
Buttons
The different types of buttons used throughout the website.
Components
Spacers
Spacer elements using the 8-pt system to give sections more room to breathe.
MARGIN BOTTOM 0px
MARGIN BOTTOM 4px
MARGIN BOTTOM 8px
MARGIN BOTTOM 16px
MARGIN BOTTOM 24px
MARGIN BOTTOM 32px
MARGIN BOTTOM 40px
MARGIN BOTTOM 48px
MARGIN BOTTOM 56px
MARGIN BOTTOM 64px
MARGIN BOTTOM 80px
MARGIN BOTTOM 112x
MARGIN TOP 0x
MARGIN TOP 24x
MARGIN TOP 40x
PADDING BOTTOM 80px
PADDING TOP 64px
PADDING TOP 80px
PADDING BOTTOM 64px
PADDING BOTTOM 112px
PADDING TOP 112px
PADDING BOTTOM 24px
Forms
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.