Styles & objects
Style and object classes can be customized through the Variables Panel to quickly and easily flesh out the look & feel for a given project. This includes text sizes & styles, brand colors, button styles, corner radiuses, border widths, image aspect ratios, & more. Unneeded styles can be deleted as style guide entries & variables & then removed from the stylesheet through the Style Selectors Panel. New styles can be added by following the conventions of the default classes &variables, but it is recommended that any new classes be grouped with related classes using the CSS Styles Reorder function of the Finsweet browser plugin to avoid creating any conflicts.
Headings
Heading sizes are updated in Variables, i.e. Heading XXL. Font size variables are defined in REM units that equate 1:1 to pixels.
Heading XXL
Let Neptune strike ye dead, Winslow!
Heading XL
Let Neptune strike ye dead, Winslow!
Heading L
Let Neptune strike ye dead, Winslow!
Heading M
Let Neptune strike ye dead, Winslow!
Heading S
Let Neptune strike ye dead, Winslow!
Heading XS
Let Neptune strike ye dead, Winslow!
Heading XXL Tab
Let Neptune strike ye dead, Winslow!
Heading XL Tab
Let Neptune strike ye dead, Winslow!
Heading L Tab
Let Neptune strike ye dead, Winslow!
Heading M Tab
Let Neptune strike ye dead, Winslow!
Heading S Tab
Let Neptune strike ye dead, Winslow!
Heading XS Tab
Let Neptune strike ye dead, Winslow!
Heading XXL Mob
Let Neptune strike ye dead, Winslow!
Heading XL Mob
Let Neptune strike ye dead, Winslow!
Heading L Mob
Let Neptune strike ye dead, Winslow!
Heading M Mob
Let Neptune strike ye dead, Winslow!
Heading S Mob
Let Neptune strike ye dead, Winslow!
Heading XS Mob
Let Neptune strike ye dead, Winslow!
» More classes available at Tablet Viewport
» More classes available at Mobile Viewport
Text sizes
Text sizes are updated in Variables, i.e. Text XL. Font size variables are defined in REM units that equate 1:1 to pixels.
Text XL
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text L
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text M
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Body Text
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text S
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text XL Tab
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text L Tab
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text M Tab
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Body text Tab
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text S Tab
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text XL Mob
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text L Mob
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text M Mob
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Body Text Mob
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
Text S Mob
You know, I'm sick of following my dreams, man. I'm just gonna ask where they're going and hook up with 'em later.
» More classes available at Tablet Viewport
» More classes available at Mobile Viewport
Background colors
Background colors are updated in Variables, i.e. Neutral - 100.
Tip: After customizing colors to a project, leftover color entries may be removed from the stylesheet by deleting the swatch from the styleguide & running "clean-up" in the Style Selectors panel.
Background - Neutral 100
Background - Neutral 200
Background - Neutral 300
Background - Neutral 400
Background - Neutral 500
Background - Neutral 600
Background - Neutral 700
Background - Neutral 800
Background - Neutral 900
Background - Black
Background - Red 200
Background - Red 300
Background - Red 400
Background - Red 500
Background - Red 600
Background - Purple 200
Background - Purple 300
Background - Purple 400
Background - Purple 500
Background - Purple 600
Background - Blue 200
Background - Blue 300
Background - Blue 400
Background - Blue 500
Background - Blue 600
Background - Aqua 200
Background - Aqua 300
Background - Aqua 400
Background - Aqua 500
Background - Aqua 600
Background - Green 200
Background - Green 300
Background - Green 400
Background - Green 500
Background - Green 600
Background - Orange 200
Background - Orange 300
Background - Orange 400
Background - Orange 500
Background - Orange 600
Text colors
Text colors are updated in Variables, i.e. Neutral - 100.
Tip: After customizing colors to a project, leftover color entries may be removed from the stylesheet by deleting the entry from the styleguide & running "clean-up" in the Style Selectors panel.
Text - Neutral 100
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 700
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 800
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Neutral 900
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Red 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Red 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Red 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Red 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Red 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Purple 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Purple 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Purple 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Purple 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Purple 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Blue 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Blue 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Blue 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Blue 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Blue 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Aqua 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Aqua 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Aqua 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Aqua 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Aqua 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Green 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Green 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Green 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Green 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Green 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Orange 200
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Orange 300
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Orange 400
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Orange 500
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Text - Orange 600
Oh, he's very popular Ed. The sportos, the motorheads, geeks, sluts, bloods, wastoids, dweebies, dickheads - they all adore him. They think he's a righteous dude.
Border colors
Border colors are updated in Variables, i.e. Neutral - 100.
Tip: After customizing project colors, leftover border colors may be removed from the stylesheet by deleting the entry from the styleguide & running "clean-up" in the Style Selectors panel.
Border - Neutral 100
Border - Neutral 200
Border - Neutral 300
Border - Neutral 400
Border - Neutral 500
Border - Neutral 600
Border - Neutral 700
Border - Neutral 800
Border - Neutral 900
Border - Red 200
Border - Red 300
Border - Red 400
Border - Red 500
Border - Red 600
Border - Purple 200
Border - Purple 300
Border - Purple 400
Border - Purple 500
Border - Purple 600
Border - Blue 200
Border - Blue 300
Border - Blue 400
Border - Blue 500
Border - Blue 600
Border - Aqua 200
Border - Aqua 300
Border - Aqua 400
Border - Aqua 500
Border - Aqua 600
Border - Green 200
Border - Green 300
Border - Green 400
Border - Green 500
Border - Green 600
Border - Orange 200
Border - Orange 300
Border - Orange 400
Border - Orange 500
Border - Orange 600
Horizontal rules
Horizontal rules colors can be defined by appending a background color class.
Horizontal Rule
Horizontal Rule
Thick
Border radiuses
Border radiuses are updated in Variables, i.e. Border Radius M.
Border Radius L
Border Radius M
Border Radius S
Object styles
Drop Shadow
Link Block
Link block is intended to normalize the text content inside a link block, using color: inherit; to match parent text styles and text-decoration: none; to remove underlines.
Text styles
Text Align - Left
I can't relate to 99% of humanity.
Text Align - Center
I can't relate to 99% of humanity.
Text Align - Right
I can't relate to 99% of humanity.
Text Align - Justify
Medium? Why sir, do you not know that for a mere 25 cents more you can purchase a large beverage? And you know, I'm only telling because we're such good friends, medium is really only for suckers who don't know the concept of value.
Text Wrap - Balance
The universe is an infinite sphere whose center is everywhere and whose circumference is nowhere.
Tip: This wraps lines at equal lengths.
Text Wrap - Pretty
He has this disease where his head is shaved except he doesn't have to shave it because he can't grow any hair in the first place. Don't talk about it around him though. It might offend him.
Tip: This fixes orphaned words by wrapping an additional word at the end. It is not supported by Firefox, but it simply falls back to orphaned text. text-wrap: pretty; is added to the Body element to eliminate orphans in most browsers.
Text Wrap - Wrap
You're not a Nazi, Jojo. You're a ten-year-old kid who likes dressing up in a funny uniform and wants to be part of a club.
Tip: This resets line wrapping to the default behavior.
Text Align Tab - Left
I can't relate to 99% of humanity.
Text Align Tab - Center
I can't relate to 99% of humanity.
Text Align Tab - Right
I can't relate to 99% of humanity.
Text Align Tab - Justify
Medium? Why sir, do you not know that for a mere 25 cents more you can purchase a large beverage? And you know, I'm only telling because we're such good friends, medium is really only for suckers who don't know the concept of value.
Text Wrap Tab - Balance
The universe is an infinite sphere whose center is everywhere and whose circumference is nowhere.
Text Wrap Tab - Pretty
He has this disease where his head is shaved except he doesn't have to shave it because he can't grow any hair in the first place. Don't talk about it around him though. It might offend him.
Text Wrap Tab - Wrap
You're not a Nazi, Jojo. You're a ten-year-old kid who likes dressing up in a funny uniform and wants to be part of a club.
Text Align Mob - Left
I can't relate to 99% of humanity.
Text Align Mob - Center
I can't relate to 99% of humanity.
Text Align Mob - Right
I can't relate to 99% of humanity.
Text Align Mob - Justify
Medium? Why sir, do you not know that for a mere 25 cents more you can purchase a large beverage? And you know, I'm only telling because we're such good friends, medium is really only for suckers who don't know the concept of value.
Text Wrap Mob - Balance
The universe is an infinite sphere whose center is everywhere and whose circumference is nowhere.
Text Wrap Mob - Pretty
He has this disease where his head is shaved except he doesn't have to shave it because he can't grow any hair in the first place. Don't talk about it around him though. It might offend him.
Text Wrap Mob - Wrap
You're not a Nazi, Jojo. You're a ten-year-old kid who likes dressing up in a funny uniform and wants to be part of a club.
» More classes available at Tablet Viewport
» More classes available at Mobile Viewport
Line Height 100
Maybe I'm spending too much of my time starting up clubs and putting on plays. I should probably be trying harder to score chicks. That's the only thing anybody really cares about. But, its not my forte, unfortunately.
Line Height 125
Maybe I'm spending too much of my time starting up clubs and putting on plays. I should probably be trying harder to score chicks. That's the only thing anybody really cares about. But, its not my forte, unfortunately.
Line Height 150
Maybe I'm spending too much of my time starting up clubs and putting on plays. I should probably be trying harder to score chicks. That's the only thing anybody really cares about. But, its not my forte, unfortunately.
Line Height 200
Maybe I'm spending too much of my time starting up clubs and putting on plays. I should probably be trying harder to score chicks. That's the only thing anybody really cares about. But, its not my forte, unfortunately.
Font Weight Thin
,
Font Weight Extra Light
,
Font Weight Light
,
Font Weight Normal
,
Font Weight Medium
,
Font Weight Semibold
,
Font Weight Bold
,
Font Weight Extra Bold
,
Font Weight Black
,
Italic
,
Uppercase
,
Lowercase
,
Underline
,
Strikethrough
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. Suspendisse varius enim in eros elementum tristique.
Rich Text Block
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.
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.
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
Utilities
Cursor - Pointer
Used for clickable interactions that aren't set to links or link blocks.
Pointer Events - None
Used when positioning a div or object on top of a clickable object.
Object fit
Object Fit Cover
Object Fit Contain
Image aspect ratios
Image aspect ratios can be combined in order to change shape across viewports, i.e. Image 16x9 4x3 Tab 1x1 Mob.
Image
16x5
Image
21x9
Image
2x1
Image
16x9
Image
4x3
Image
1x1
Image
3x4
Image
6x9
Image
1x2
Image
16x5 Tab
Image
21x9 Tab
Image
2x1 Tab
Image
16x9 Tab
Image
4x3 Tab
Image
1x1 Tab
Image
3x4 Tab
Image
6x9 Tab
Image
1x2 Tab
Image
Auto Tab
Image
16x5 Mob
Image
21x9 Mob
Image
2x1 Mob
Image
16x9 Mob
Image
4x3 Mob
Image
1x1 Mob
Image
3x4 Mob
Image
6x9 Mob
Image
1x2 Mob
Image
Auto Mob
» More classes available at Tablet Viewport
» More classes available at Mobile Viewport