join me in celebrating the fusion of elegance and everyday life
Styleguide
Evelyn is all about celebrating your individuality. While this Style Guide offers a starting point, we encourage you to customize it to match your personal or brand style.
Tweak colors, choose fonts that resonate with you, and make every design element your own.
Feel free to reach out if you have questions or need guidance. Let's make Evelyn uniquely yours!
Typography
Headings
This section defines your heading styles. By default, heading styles will apply the corresponding HTML heading tag (H1-H6). If you want to use a heading style but without the HTML tag and meaning, we can change the tag in the Accessibility properties to 'p'. See the documentation for more information.
Heading / H1
Heading 1
Heading / H1 V2
Heading 1 V2
Heading / H2
Heading 2
Heading / H2 V2
Heading 2 V2
Heading / H3
Heading 3
Heading / H4
Heading 4
Heading / H5
Heading 5
Heading / H6
Heading 6
Text / Paragraphs
Font Size / XL - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XL - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / L - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / L - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / M - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / M - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / S - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / S - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XS - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XS - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XXS - Uppercase
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body Text / XS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text / Text Links
Text Link / Text Link Style 1
Text Link / Text Link Style 2
Text Link / Text Link Style 3
Colors
Use this section to define and keep track of your colors. Don't forget to create color styles for each swatch in the 'Shared Colors' section.
Color / Black
Color / White
Color / Light Sand
Buttons
Copy buttons from here, or drag them from the Assets panel into your designs. All buttons have variants such as left and right icons, styling choices and so on. To edit a button's styling, click into it to edit the component.
Framework
Evelyn Theme was built using the Framepad Framework. Visit Framepad's website for documentation on using Framepad Starter & the style guide effectively.