Template Style Guide
Version 1.0
Here's a complete styleguide based on Framepad for easy customization. Visit https://www.framepad.co/ for documentation on using Framepad Starter & the style guide effectively.
Customize Global Styles
Colors
The first thing you can do to start using Framepad is by customizing the colors. All Framepad components and sections are connected to color styles, so changes will apply everywhere.
Everything is grey
Everything is pretty grey isn't it. That's on purpose though. Framepad is designed to be as flexible as possible and fit any brand, which is why we opted to keep the primary color grey. Adding color is super easy though.
Head to the Colors page. There you can change the Primary color to your brand color and create secondary colors if needed. There's detailed instructions over there.
Typography
After you've customized your colors, you can move onto the typography. Again, any changes made to the typography styles will be reflected in every component and section in the kit.
By default, Framepad is using Inter by Rasmus Andersson. However you can easily change this to any font family you like.
Head to the Typography page to view and edit all typography styles, from heading, body and detail styles.
Assets Panel
You can easily view and edit all styles from the Assets panel. By clicking the Assets toggle and scrolling down to Styles, you'll see a list of typography and colors. Here you can click on any style to edit them.
By default, Framepad is using Inter by Rasmus Andersson. However you can easily change this to any font family you like.
Head to the Typography page to view and edit all typography styles, from heading, body and detail styles.
Logo
Open the 'Your Logo' component and replace with your logo. It will apply on all components that show your logo (navbar, footer etc)
Logo placeholders
Buttons
Solid
Primary button usually reserved for the main action
L / Default
Label
S / Default
Label
L / Disabled
Label
S / Disabled
Label
L / Danger
Label
S / Danger
Label
L / Default / Icon Only
S / Default / Icon Only
L / Disabled / Icon Only
S / Disabled / Icon Only
L / Danger / Icon Only
S / Danger / Icon Only
Outline
Usually used to indicate a secondary action, although can act as a primary button if the solid button isn't used in the design
L / Default
Label
S / Default
Label
L / Disabled
Label
S / Disabled
Label
L / Danger
Label
S / Danger
Label
L / Default / Icon Only
S / Default / Icon Only
L / Disabled / Icon Only
S / Disabled / Icon Only
L / Danger / Icon Only
S / Danger / Icon Only
Ghost
A more subtle button reserved for less important actions
L / Default
Label
S / Default
Label
L / Disabled
Label
S / Disabled
Label
L / Danger
Label
S / Danger
Label
L / Default / Icon Only
S / Default / Icon Only
L / Disabled / Icon Only
S / Disabled / Icon Only
L / Danger / Icon Only
S / Danger / Icon Only
Link
Minimal button with no padding. Often used for less important actions and back buttons
L / Default
Label
S / Default
Label
L / Disabled
Label
S / Disabled
Label
L / Danger
Label
S / Danger
Label
L / Default / Icon Only
S / Default / Icon Only
L / Disabled / Icon Only
S / Disabled / Icon Only
L / Danger / Icon Only
S / Danger / Icon Only
Badges
Primary
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Minimal
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Default
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Grey
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Success
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Warning
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Danger
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Gradient
Sq / L / Default
Label
Sq / S / Default
Label
Sq / L / Dot
Label
Sq / S / Dot
Label
Sq / L / Icon
Label
Sq / S / Icon
Label
Rd / L / Default
Label
Rd / S / Default
Label
Rd / L / Dot
Label
Rd / S / Dot
Label
Rd / L / Icon
Label
Rd / S / Icon
Label
Chips
Primary
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Minimal
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Default
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Grey
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Success
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Warning
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Danger
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Gradient
L - Default
Label
S - Default
Label
L - Detail
Detail
Label
S - Detail
Detail
Label
L - Icon
Label
S - Icon
Label
L - Cross
Label
S - Cross
Label
Tabs
Pill Tabs
Simple tabs with a background fill on the active tab. Icon can be hidden.
Square
Label
Label
Label
Round
Label
Label
Label
Segmented Control
Segmented Control is similar to pill tabs, however each segment tab sits within a container, and animates to the selected tab. Icon can be hidden.
When adding more tabs, you need to duplicate both the Segment Tab component and the Tab BG item
Square
Label
Label
Label
Round
Label
Label
Label
Underline Tabs
Simple tabs with an underline highlighting the active tab. Icon can be hidden.
Default
Label
Label
Label
Toggles
L / Inactive
L / Active
S / Inactive
S / Active
Accordings
Style 1
Accordion with a decorative icon and chevron icon on the right to indicate open/closed state.
Closed
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat nisi sed elit volutpat, et consequat odio porta. In hac habitasse platea dictumst.
Open
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat nisi sed elit volutpat, et consequat odio porta. In hac habitasse platea dictumst.
Style 2
Accordion with a plus icon on the left to indicate open/closed state.
Closed
Question text
Open
Question text
Toasts
Default
Toast message
Decorative Icon
Toast message
Close
Toast message
Decorative Icon + Close
Toast message
Snak Bars
Action
Snack Bar message
Action
Action + Close
Snack Bar message
Action
Avatars
Image
Avatar with an image
L / Default
M / Default
S / Default
L / Status
M / Status
S / Status
Text
Avatar with the initial of a name
L / Default
FP
M / Default
FP
S / Default
FP
L / Status
FP
M / Status
FP
S / Status
FP
Avatar groups
Image
M / Default
S / Default
M / More Users
+5
S / More Users
+5
Text
M / Default
NA
TI
SK
AE
EC
S / Default
NA
TI
SK
AE
EC
M / More Users
NA
TI
SK
AE
EC
+5
S / More Users
NA
TI
SK
AE
EC
+5
Breadcrumbs
5 Pages
Page 1
Page 2
Page 3
Page 4
Current Page
4 Pages
Page 1
Page 2
Page 3
Current Page
3 Pages
Page 1
Page 2
Current Page
2 Pages
Page 1
Current Page
Tooltips
Pointer / None
Tooltip title
Pointer / L
Tooltip title
Pointer / R
Tooltip title
Pointer / BL
Tooltip title
Pointer / BM
Tooltip title
Pointer / BR
Tooltip title
Pointer / TL
Tooltip title
Pointer / TM
Tooltip title
Pointer / TR
Tooltip title
Tooltip hover example
Grid view
Inputs
Style 1
L / Default
Supplementary text goes here
S / Default
Supplementary text goes here
L / Docked
Supplementary text goes here
S / Docked
Supplementary text goes here
Style 2
L / Default
Supplementary text goes here
S / Default
Supplementary text goes here
L / Docked
Supplementary text goes here
S / Docked
Supplementary text goes here
Ratings
Default
5.0
5.0
5.0
5.0
Stars Only
With Supplementary text
5.0
supplementary text
5.0
supplementary text
5.0
supplementary text
5.0
supplementary text
Arrows
Flat
Flat + Stroke