Logo
Celine's logo in the navigation and footer are to have a height of 2.4em.
Rules are to have a 1em clear padding around the logo.
Must never be another colour other than black and white.
Colour Pallette
- #F5F4EF
- rgb(245,244,239)
- cmyk(0,0,2,4)
Pearl
The Pearl white would be used for slight background changes or focused items, such as the navigation and footer.
- #1D1D1D
- rgb(29,29,29)
- cmyk(0,0,0,89)
Ink
The Ink black would be used for prominent actions, such as adding to shopping bag or purchase.
- #EC9FA7
- rgb(236,159,167)
- cmyk(0,33,29,7)
Salmon
The Salmon pink would be used for secondary actions, such as signing up for the newsletter.
Typography
Heading 1's would be used sparringly, as a page title or product name. Use the Playfair Display SC Bold Font.
Heading 2's would be used as subheadings, introducing new sections. Use the Playfair Display SC Bold Font.
Heading 3's would be used for introducing subsections within a section.Use the Playfair Display SC Bold Font.
Heading 4's would be used as product titles on the home page, in the product cards (shown on ). Use the Playfair Display SC Bold Font.
Heading 5's would be used for description headers, used within long information text. Use the Playfair Display SC Bold Font.
Heading 6's would be used for price, using the Playfair Display SC Bold Font.
Paragraphs would be used for long information texts, ingredients/descriptions. A line height of 1.4em, margin top & bottom 0.5em, using the Nanum Myeongjo Regular font.
Desktop
Heading 1
47.78px, 2.99em, 299%
Heading 2
39.81px, 2.49em, 249%
Heading 3
33.18px, 2.07em, 207%
Heading 4
27.65px, 1.73em, 173%
Heading 5
23.04px, 1.44em, 144%
Heading 6
19.2px, 1.2em, 120%
Paragraph
16px, 1em, 100%
Tablets & IPads
Heading 1
44.79px, 2.80em, 280%
Heading 2
37.32px, 2.33em, 233%
Heading 3
31.1px, 1.94em, 194%
Heading 4
25.92px, 1.62em, 162%
Heading 5
21.6px, 1.35em, 135%
Heading 6
18px, 1.13em, 113%
Paragraph
15px, 0.94em, 94%
Mobile
Heading 1
41.8px, 2.61em, 261%
Heading 2
34.84px, 2.18em, 218%
Heading 3
29.03px, 1.81em, 181%
Heading 4
24.19px, 1.51em, 151%
Heading 5
20.16, 1.26em, 126%
Heading 6
16.8px, 1.05em, 105%
Paragraph
14px, 0.88em, 88%
Grids
Tablet & IPad site padding is between 0.5em 4em 0.5em 4em and 0.45em 2.4em 0.45em 2.4em
Desktop Grid
Desktop site padding is 0.5em 10em 0.5em 10em
The Desktop site has a grid of about 12vw.
Mobile Grid
Mobile site padding is 0.4em 1em 0.4em 1em
The Mobile site has a grid of about 6vw.