Style guide.
Welcome to the Style Guide, where you’ll find the foundation of the design system. This guide ensures consistency across all pages by defining key styles and reusable elements.
Most of the design properties—colors, spacing, typography, headings, buttons, and more—are stored in variables. This makes customization effortless: simply adjust the variables, and the changes will reflect throughout the project.
What you can customize:
🎨 Colors – Update primary, secondary, and neutral tones.
📏 Spacing – Modify margins, paddings, and layout gaps.
🔠 Typography – Adjust fonts, sizes, weights, and line heights.
🎯 Headings & Text Styles – Refine the look of titles, paragraphs, and labels.
By leveraging variables, you gain full control over the design system while maintaining visual harmony across the project. Dive in and make it your own! 🚀
Headings
Heading H1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading classes
Heading Large
Sample text helps you understand how real text may look.
Heading Medium
Sample text helps you understand how real text may look.
Heading Small
Sample text helps you understand how real text may look.
Heading H1
Sample text helps you understand how real text may look.
Heading H2
Sample text helps you understand how real text may look.
Heading H3
Sample text helps you understand how real text may look.
Heading H4
Sample text helps you understand how real text may look.
Heading H5
Sample text helps you understand how real text may look.
Heading H6
Sample text helps you understand how real text may look.
Other HTML Tags
All paragraphs
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.
All quotes
Block Quote
All Ordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Rich text
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.
Block quote
Ordered list
Item 1
Item 2
Item 3
Unordered list
Item A
Item B
Item C
Bold text
Emphasis
Superscript
Subscript
Text Classes
Text Sizes
text-size-large
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-small
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-link
text-style-link
text-style-quote
Sample text is being used as a placeholder.
Text Weights
text-weight-light
text-weight-light
text-weight-normal
text-weight-normal
text-weight-medium
text-weight-medium
text-weight-semibold
text-weight-semibold
Button
button custom
Colors
Colors
Forest shadow
Urban Fog
Sage Mist
Soft Stone
Pure White
Mint Cloud
Ash Green
Deep Charcoal
Slate Gray
Midnight Forest
Eucalyptus
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer
Style guide.
Welcome to the Style Guide, where you’ll find the foundation of the design system. This guide ensures consistency across all pages by defining key styles and reusable elements.
Most of the design properties—colors, spacing, typography, headings, buttons, and more—are stored in variables. This makes customization effortless: simply adjust the variables, and the changes will reflect throughout the project.
What you can customize:
🎨 Colors – Update primary, secondary, and neutral tones.
📏 Spacing – Modify margins, paddings, and layout gaps.
🔠 Typography – Adjust fonts, sizes, weights, and line heights.
🎯 Headings & Text Styles – Refine the look of titles, paragraphs, and labels.
By leveraging variables, you gain full control over the design system while maintaining visual harmony across the project. Dive in and make it your own! 🚀
Headings
Heading H1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading classes
Heading Large
Sample text helps you understand how real text may look.
Heading Medium
Sample text helps you understand how real text may look.
Heading Small
Sample text helps you understand how real text may look.
Heading H1
Sample text helps you understand how real text may look.
Heading H2
Sample text helps you understand how real text may look.
Heading H3
Sample text helps you understand how real text may look.
Heading H4
Sample text helps you understand how real text may look.
Heading H5
Sample text helps you understand how real text may look.
Heading H6
Sample text helps you understand how real text may look.
Other HTML Tags
All paragraphs
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.
All quotes
Block Quote
All Ordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Rich text
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.
Block quote
Ordered list
Item 1
Item 2
Item 3
Unordered list
Item A
Item B
Item C
Bold text
Emphasis
Superscript
Subscript
Text Classes
Text Sizes
text-size-large
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-small
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-link
text-style-link
text-style-quote
Sample text is being used as a placeholder.
Text Weights
text-weight-light
text-weight-light
text-weight-normal
text-weight-normal
text-weight-medium
text-weight-medium
text-weight-semibold
text-weight-semibold
Button
button custom
Colors
Colors
Forest shadow
Urban Fog
Sage Mist
Soft Stone
Pure White
Mint Cloud
Ash Green
Deep Charcoal
Slate Gray
Midnight Forest
Eucalyptus
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer
Style guide.
Welcome to the Style Guide, where you’ll find the foundation of the design system. This guide ensures consistency across all pages by defining key styles and reusable elements.
Most of the design properties—colors, spacing, typography, headings, buttons, and more—are stored in variables. This makes customization effortless: simply adjust the variables, and the changes will reflect throughout the project.
What you can customize:
🎨 Colors – Update primary, secondary, and neutral tones.
📏 Spacing – Modify margins, paddings, and layout gaps.
🔠 Typography – Adjust fonts, sizes, weights, and line heights.
🎯 Headings & Text Styles – Refine the look of titles, paragraphs, and labels.
By leveraging variables, you gain full control over the design system while maintaining visual harmony across the project. Dive in and make it your own! 🚀
Headings
Heading H1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading classes
Heading Large
Sample text helps you understand how real text may look.
Heading Medium
Sample text helps you understand how real text may look.
Heading Small
Sample text helps you understand how real text may look.
Heading H1
Sample text helps you understand how real text may look.
Heading H2
Sample text helps you understand how real text may look.
Heading H3
Sample text helps you understand how real text may look.
Heading H4
Sample text helps you understand how real text may look.
Heading H5
Sample text helps you understand how real text may look.
Heading H6
Sample text helps you understand how real text may look.
Other HTML Tags
All paragraphs
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.
All quotes
Block Quote
All Ordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Rich text
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.
Block quote
Ordered list
Item 1
Item 2
Item 3
Unordered list
Item A
Item B
Item C
Bold text
Emphasis
Superscript
Subscript
Text Classes
Text Sizes
text-size-large
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-size-small
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-link
text-style-link
text-style-quote
Sample text is being used as a placeholder.
Text Weights
text-weight-light
text-weight-light
text-weight-normal
text-weight-normal
text-weight-medium
text-weight-medium
text-weight-semibold
text-weight-semibold
Button
button custom
Colors
Colors
Forest shadow
Urban Fog
Sage Mist
Soft Stone
Pure White
Mint Cloud
Ash Green
Deep Charcoal
Slate Gray
Midnight Forest
Eucalyptus
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer