Style Guide

This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements.
Aa
Colors
Light Mode
Dark Mode
--primary
Value Here
Light Mode
Dark Mode
--secondary
Value Here
Light Mode
Dark Mode
--accent-one
Value Here
Light Mode
Dark Mode
--accent-two
Value Here
Light Mode
Dark Mode
--nieuws
Value Here
Light Mode
Dark Mode
--nouvelles
Value Here
Light Mode
Dark Mode
--news
Value Here
Colors
--primary
Value Here
Light Mode
Dark Mode
Shades
Tints
--secondary
Value Here
Light Mode
Dark Mode
Shades
Tints
--accent-one
Value Here
Light Mode
Dark Mode
Shades
--accent-two
Value Here
Light Mode
Dark Mode
--nieuws
Value Here
Light Mode
Dark Mode
--nouvelles
Value Here
Light Mode
Dark Mode
--news
Value Here
Light Mode
Dark Mode
Colors
Name of Color
--primary
Value Here
Light Mode
Dark Mode
Shades
Tints
Name of Color
--secondary
Value Here
Light Mode
Dark Mode
Shades
Tints
Name of Color
--accent-one
Value Here
Light Mode
Dark Mode
Shades
Name of Color
--accent-two
Value Here
Light Mode
Dark Mode
Name of Color
--nieuws
Value Here
Light Mode
Dark Mode
Name of Color
--nouvelles
Value Here
Light Mode
Dark Mode
Name of Color
--news
Value Here
Light Mode
Dark Mode
Typography
Body Font: Something
.text-4xl
.text-3xl
.text-2xl
.text-xl
.text-l
.text-m
.text-s
.text-xs
.font-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header Font: Something

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
This is a hyperlink
Elements
Buttons
.btn
.largeButton.small
.btn.secondary
.largeButton.small
.btn.tertiery
.largeButton.small
.btn.slight
.largeButton.small
.btn.ghost
.largeButton.small
Icons
.icon
Avatars
.avatar
Card
.card
Card Heading Here
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.
Main ButtonNext Button
Sizing
.space-4xl
.space-3xl
.space-2xl
.space-xl
.space-l
.space-m
.space-s
.space-xs
.space-2xs
.space-3xs
.space-4xs
.padding-4xl
.padding-3xl
.padding-2xl
.padding-xl
.padding-l
.padding-m
.padding-s
.padding-xs
.padding-2xs
.padding-3xs
.padding-4xs
AboutBlogContact
Purchase
Style Guide

Discover The Best Products

Selling the best products in beauty. Rated number 1 worldwide and still growing.
Buy NowLearn More

Our Great Reviews from Awesome Customers

Rated 4.7 / 5
Natural ingredients, a real difference in skin.
The next generation of hydration
Shop Fagar

Dermatologist Approved

Discover our amazing products and unleash freshness in your skin
Rated by many
Shop All
This design set was brought to you by the awesome guys at Core Framework.
Links
Text linkText linkText linkText link
Links
Text linkText linkText linkText link
Links
Text linkText linkText linkText link
Copyright © 2024
Accessibility Table

Legend:

AA Passes WCAG AA (Contrast Ratio >= 4.5)

AAA Passes WCAG AAA (Contrast Ratio >= 7)

AA Large Passes for Large Text Only (Contrast Ratio >= 3)

DNP Does Not Pass (Contrast Ratio < 3)

Text Color
Background Color
Text \ Backgroundprimaryprimary-d-1primary-d-2primary-d-3primary-d-4primary-l-1primary-l-2primary-l-3primary-l-4secondarysecondary-d-1secondary-d-2secondary-d-3secondary-d-4secondary-l-1secondary-l-2secondary-l-3secondary-l-4bg-bodybg-body-d-1bg-body-d-2bg-body-d-3bg-body-inversebg-body-inverse-d-1bg-body-inverse-d-2bg-body-inverse-d-3text-bodytext-body-inversetext-titletext-title-inverseaccent-oneaccent-one-d-1accent-one-d-2accent-one-d-3accent-one-d-4accent-twonieuwsnouvellesnews
primary
primary-d-1
primary-d-2
primary-d-3
primary-d-4
primary-l-1
primary-l-2
primary-l-3
primary-l-4
secondary
secondary-d-1
secondary-d-2
secondary-d-3
secondary-d-4
secondary-l-1
secondary-l-2
secondary-l-3
secondary-l-4
bg-body
bg-body-d-1
bg-body-d-2
bg-body-d-3
bg-body-inverse
bg-body-inverse-d-1
bg-body-inverse-d-2
bg-body-inverse-d-3
text-body
text-body-inverse
text-title
text-title-inverse
accent-one
accent-one-d-1
accent-one-d-2
accent-one-d-3
accent-one-d-4
accent-two
nieuws
nouvelles
news
La Camillette

La Camillette

Logo met een donkere cirkelachtergrond. Tekst luidt "La Camille" bovenaan en "Respirez la Campagne" naast een kleine boomafbeelding.
Blijf op de hoogte van het laatste nieuws

Abonneer u op onze nieuwsbrief!