Style Guide
V1
Branding Guide
This style guide contains a set of standards for writing and designing this website content.
Brand Colors
A palette of colors that are used to represent your brand.
Typography
Guidelines for typography styles and usage to represent your brand effectively.
Headings Font
ValueBody Font
Value
Headings
Font Family for Headings is set in the Theme. Sizes are also set in the Theme, default to framework clamp variables e.g. var(--fw-h1)
Heading H6
Value- var(--fw-h6)
Heading H5
Value- var(--fw-h5)
Heading H4
Value- var(--fw-h4)
Heading H3
Value- var(--fw-h3)
Heading H2
Value- var(--fw-h2)
Heading H1
Value- var(--fw-h1)
Body Text
Font Family for Body Text is set in the Theme. Sizes are also set in the Theme, default to framework clamp variables e.g. var(--fw-text--m)
- Text Extra SmallValue
- var(--fw-text--xs)
- Text SmallValue
- var(--fw-text--s)
- Text MediumValue
- var(--fw-text--m)
- Text LargeValue
- var(--fw-text--l)
- Text Extra LargeValue
- var(--fw-text--xl)
- Text Extra Extra LargeValue
- var(--fw-text--xxl)
Weights
Font Weights for headings and specific elements are set in the Theme
Example Typography
Heading 2 Example
Guidelines for body text styles to ensure readability and consistency across the website.
Heading 3 Example
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 4 Example
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Buttons
Use button utility classes for these.
Marks
Use button utility classes for these.
.fw-mark–primary Finding .fw-mark–primary.fw-mark–reverse the right .fw-mark–secondary.balance in .fw-mark–secondary.fw-mark–reverse life can be challenging, but it’s essential for overall well-being. Whether it’s juggling work, family, or personal hobbies, taking time to recharge is crucial. Simple activities like a morning walk, reading a good book, or spending quality time with loved ones can make a big difference. Remember, it’s not just about managing time, but also about making time for what truly matters. Prioritize self-care and watch how it transforms your everyday life.
.fw-mark–primary Finding .fw-mark–primary .fw-mark–reverse the right .fw-mark–secondary.balance in .fw-mark–secondary .fw-mark–reverse life can be challenging, but it’s essential for overall well-being. Whether it’s juggling work, family, or personal hobbies, taking time to recharge is crucial. Simple activities like a morning walk, reading a good book, or spending quality time with loved ones can make a big difference. Remember, it’s not just about managing time, but also about making time for what truly matters. Prioritize self-care and watch how it transforms your everyday life.
Box Shadows
These Box Shadows are for general use, .fw-box-shadow
--s
--m
--l
--xl
--s
--m
--l
--xl
Spacing, Gaps, Radii
Use css variables for these
Spacing
--fw-space--xs
--fw-space--s
--fw-space--m
--fw-space--l
--fw-space--xl
--fw-space--xxl
Gaps
--fw-container-gap
--fw-grid-gap
--fw-content-gap