Overview
Interact and test all components and elements for this project in one place.
This library is built using Finsweet's Client-First naming convention.
Components
Buttons
Component 2
ON THIS PAGE
Style Guide
Components
Overview
Thoughtfully curated typography selections bring a distinct visual personality to your design, enhancing readability and conveying your brand's tone with precision. From elegant serif fonts to sleek sans-serifs, our typography choices are meticulously tailored to evoke the desired emotion and establish a cohesive visual identity. Whether it's for web or print, our typography solutions elevate your content, ensuring clarity and impact in every communication.
Typography should be our project's most simple and organized type of utility system. Websites with unified typography systems help us to be clear to the user.
- Resource: Client First <https://finsweet.com/client-first/docs/typography-strategy>
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn’t match the default HTML tag.
HTML Tag
Class Name
Font Size
Line Height
All H1 Headings
heading-style-h1
3.5 rem (56 px)
120%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
HTML Tag
Class Name
Font Size
Line Height
All H2 Headings
heading-style-h2
3 rem (48 px)
120%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
HTML Tag
Class Name
Font Size
Line Height
All H3 Headings
heading-style-h3
2.5 rem (40 px)
120%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
HTML Tag
Class Name
Font Size
Line Height
All H4 Headings
heading-style-h4
2 rem (32 px)
130%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
HTML Tag
Class Name
Font Size
Line Height
All H5 Headings
heading-style-h5
2 rem (32 px)
140%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
HTML Tag
Class Name
Font Size
Line Height
All H6 Headings
heading-style-h6
1.625 rem (26 px)
140%
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Other HTML Tags
HTML tags define default text styles.
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
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
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.
All links
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.
Text Classes
Text classes when typography style doesn’t match the default HTML tag.
Text Sizes
Category
Class Name
Font Size
Line Height
Size
text-size-large
1.25 rem (20 px)
150%
Sample text is being used as a placeholder for real text that is normally present.
Category
Class Name
Font Size
Line Height
Size
text-size-medium
1.125 rem (18 px)
150%
Sample text is being used as a placeholder for real text that is normally present.
Category
Class Name
Font Size
Line Height
Size
text-size-regular
1 rem (16 px)
150%
Sample text is being used as a placeholder for real text that is normally present.
Category
Class Name
Font Size
Line Height
Size
text-size-small
0.875 rem (14 px)
150%
Sample text is being used as a placeholder for real text that is normally present.
Category
Class Name
Font Size
Line Height
Size
text-size-tiny
0.75 rem (12 px)
150%
Sample text is being used as a placeholder for real text that is normally present.
Text Styles (ON HOLD)
Category
Class Name
Font Size
Line Height
Example
Style
text-style-strikethrough
16px
150%
text-style-strikethrough
Style
text-style-italic
16px
150%
text-style-italic
Style
text-style-muted
16px
150%
text-style-muted
Style
text-style-allcaps
16px
150%
text-style-allcaps
Style
text-style-nowrap
16px
150%
text-style-nowrap
Style
text-style-link
16px
150%
text-style-link
Style
text-style-quote
16px
150%
text-style-quote
Style
text-style-2lines
16px
150%
text-style-2lines
Style
text-style-3lines
16px
150%
text-style-3lines
Text Weights
Category
Class Name
Font Size
Line Height
Example
Weight
text-weight-xbold
20px
150%
text-weight-xbold
Weight
text-weight-bold
18px
150%
text-weight-bold
Weight
text-weight-semibold
16px
150%
text-weight-semibold
Weight
text-weight-medium
14px
150%
text-weight-medium
Weight
text-weight-normal
12px
150%
text-weight-normal
Weight
text-weight-light
12px
150%
text-weight-light
Text Alignments
Category
Class Name
Font Size
Line Height
Example
Alignment
text-align-left
16px
150%
text-align-left
Alignment
text-align-center
16px
150%
text-align-center
Alignment
text-align-right
16px
150%
text-align-right
Overview
Crafted with a defined yet adaptable core structure, our framework provides a solid foundation designed to seamlessly integrate across various pages within your project. Its versatility allows for effortless customization, ensuring a harmonious blend of consistency and flexibility throughout your digital ecosystem. With this framework, you can confidently build upon a reliable structure that fosters cohesive user experiences across your entire platform.
We can think of our core structure as "layers" of Div Blocks surrounding our page content. Each layer has a specific use to help us build a web page.
- Resource: Client First <https://finsweet.com/client-first/docs/core-structure-strategy>
UI Elements
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Overview
Discover an extensive spectrum of colors meticulously curated for versatility and depth. Organized into various shades from 0 to 900, where 0 signifies the lightest hue and 900 the deepest, our color library offers a comprehensive range to suit every design need. Whether you seek the subtle warmth of lighter tones or the bold impact of darker shades, our palette provides a harmonious selection for cohesive and captivating visuals.
Background Colors
Background / Primary
Background / Secondary
Background / Tertiary
Background / Alternate
Background / Tonal
Surface Colors
Surface / CTA / Active
Surface / CTA / Hover
Surface / CTA / Focus
Surface / System / Success
Surface / System / Warning
Surface / System / Error
Border Colors
Border / Neutral / Primary
Border / Neutral / Secondary
Border / Neutral / Tertiary
Border / CTA / Active
Border / CTA / Hover
Border / CTA / Focus
Link
Text Colors
text-color-primary
Text / Primary
text-color-secondary
Text / Secondary
text-color-secondary
Text / Alternate
text-color-success
Text / Success
text-color-warning
Text / Warning
text-color-error
Text / Error
Overview
Optimize your layout with precise spacing guidelines designed to enhance readability and aesthetics. Our comprehensive approach encompasses elements like max-width, margins, and paddings, ensuring consistent alignment and balance throughout your design. Whether you're creating a sleek, modern interface or a classic, timeless layout, our spacing system provides the flexibility and control you need.
Max Width
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Padding
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margin
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Spacers
Unified spacer system for the project.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Overview
UI elements such as Buttons are fundamental components of digital interfaces, facilitating user interaction and navigation. Buttons serve as actionable elements, prompting users to perform specific tasks or access particular features within an application or webpage. With their versatility and prominence within the interface, buttons play a vital role in guiding user behavior and facilitating smooth navigation.
Buttons
awaken-button
awaken-button
is-small
Button Text
awaken-button
is-large
awaken-button
is-secondary
awaken-button
is-secondary
is-small
awaken-button
is-secondary
is-large
awaken-button
is-text
awaken-button
is-text
is-small
awaken-button
is-text
is-large
awaken-button
is-icon
awaken-button
is-icon
is-small
awaken-button
is-icon
is-large
awaken-button
is-text
is-icon
awaken-button
is-text
is-icon
is-small
awaken-button
is-text
is-icon
is-large
awaken-button
is-icon-only
awaken-button
is-icon-only
is-large
awaken-button
is-icon-only
is-secondary
awaken-button
is-icon-only
is-secondary
is-small
awaken-button
is-icon-only
is-secondary
is-large
Utility Systems
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
Webflow Elements
form_component
Example of a form component using Folders
text-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- 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.
- 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.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Awaken Navbar
Call Us (830) 328-2820