CreatiKit Style Guide
Unser Style Guide basiert auf Client-First V2, eine Reihe von Leitlinien und Strategien, die von Finsweet entwickelt wurden. Client-First V2 ermöglicht uns und jedem auf der Welt die Gestaltung von grandiosen und einmaligen Webseiten.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Heading Styles
Heading classes when typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
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.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
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. 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.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
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 on your website.
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 on your website. 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 on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
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 text-style-2lines
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. 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.
Text Weights
Text Alignments
Colors
Manage recurring text and background colors.
Color Palette
Text Colors
Background Colors
Shadows
CK Color Palette
background-color_pader-gold_c00
background-color_pader-gold_c05
background-color_pader-gold_c10
background-color_pader-gold_c15
background-color_pader-gold_c20
background-color_pader-gold_c30
background-color_pader-gold_c40
background-color_pader-gold_c50main
background-color_pader-gold_c60
background-color_pader-gold_c70
background-color_pader-gold_c80
background-color_pader-gold_c85
background-color_pader-gold_c90
background-color_pader-gold_c95
background-color_pader-gold_c100
text-color_pader-gold_c00
text-color_pader-gold_c05
text-color_pader-gold_c10
text-color_pader-gold_c15
text-color_pader-gold_c20
text-color_pader-gold_c30
text-color_pader-gold_c40
text-color_pader-gold_c50main
text-color_pader-gold_c60
text-color_pader-gold_c70
text-color_pader-gold_c80
text-color_pader-gold_c85
text-color_pader-gold_c90
text-color_pader-gold_c95
text-color_pader-gold_c100
background-color_solid-black_c00
background-color_solid-black_c05
background-color_solid-black_c10
background-color_solid-black_c15
background-color_solid-black_c20
background-color_solid-black_c30
background-color_solid-black_c40
background-color_solid-black_c50main
background-color_solid-black_c60
background-color_solid-black_c70
background-color_solid-black_c80
background-color_solid-black_c85
background-color_solid-black_c90
background-color_solid-black_c95
background-color_solid-black_c100
text-color_solid-black_c00
text-color_solid-black_c05
text-color_solid-black_c10
text-color_solid-black_c15
text-color_solid-black_c20
text-color_solid-black_c30
text-color_solid-black_c40
text-color_solid-black_c50main
text-color_solid-black_c60
text-color_solid-black_c70
text-color_solid-black_c80
text-color_solid-black_c85
text-color_solid-black_c90
text-color_solid-black_c95
text-color_solid-black_c100
background-color_full-white_c00
background-color_full-white_c05
background-color_full-white_c10
background-color_full-white_c15
background-color_full-white_c20
background-color_full-white_c30
background-color_full-white_c40
background-color_full-white_c50main
background-color_full-white_c60
background-color_full-white_c70
background-color_full-white_c80
background-color_full-white_c85
background-color_full-white_c90
background-color_full-white_c95
background-color_full-white_c100
text-color_full-white_c00
text-color_full-white_c05
text-color_full-white_c10
text-color_full-white_c15
text-color_full-white_c20
text-color_full-white_c30
text-color_full-white_c40
text-color_full-white_c50main
text-color_full-white_c60
text-color_full-white_c70
text-color_full-white_c80
text-color_full-white_c85
text-color_full-white_c90
text-color_full-white_c95
text-color_full-white_c100
background-color_cloud-grey_c00
background-color_cloud-grey_c05
background-color_cloud-grey_c10
background-color_cloud-grey_c15
background-color_cloud-grey_c20
background-color_cloud-grey_c30
background-color_cloud-grey_c40
background-color_cloud-grey_c50main
background-color_cloud-grey_c60
background-color_cloud-grey_c70
background-color_cloud-grey_c80
background-color_cloud-grey_c85
background-color_cloud-grey_c90
background-color_cloud-grey_c95
background-color_cloud-grey_c100
text-color_cloud-grey_c00
text-color_cloud-grey_c05
text-color_cloud-grey_c10
text-color_cloud-grey_c15
text-color_cloud-grey_c20
text-color_cloud-grey_c30
text-color_cloud-grey_c40
text-color_cloud-grey_c50main
text-color_cloud-grey_c60
text-color_cloud-grey_c70
text-color_cloud-grey_c80
text-color_cloud-grey_c85
text-color_cloud-grey_c90
text-color_cloud-grey_c95
text-color_cloud-grey_c100
background-color_orchid-bird_c00
background-color_orchid-bird_c05
background-color_orchid-bird_c10
background-color_orchid-bird_c15
background-color_orchid-bird_c20
background-color_orchid-bird_c30
background-color_orchid-bird_c40
background-color_orchid-bird_c50main
background-color_orchid-bird_c60
background-color_orchid-bird_c70
background-color_orchid-bird_c80
background-color_orchid-bird_c85
background-color_orchid-bird_c90
background-color_orchid-bird_c95
background-color_orchid-bird_c100
text-color_orchid-bird_c00
text-color_orchid-bird_c05
text-color_orchid-bird_c10
text-color_orchid-bird_c15
text-color_orchid-bird_c20
text-color_orchid-bird_c30
text-color_orchid-bird_c40
text-color_orchid-bird_c50main
text-color_orchid-bird_c60
text-color_orchid-bird_c70
text-color_orchid-bird_c80
text-color_orchid-bird_c85
text-color_orchid-bird_c90
text-color_orchid-bird_c95
text-color_orchid-bird_c100
background-color_avocado-green_c00
background-color_avocado-green_c05
background-color_avocado-green_c10
background-color_avocado-green_c15
background-color_avocado-green_c20
background-color_avocado-green_c30
background-color_avocado-green_c40
background-color_avocado-green_c50main
background-color_avocado-green_c60
background-color_avocado-green_c70
background-color_avocado-green_c80
background-color_avocado-green_c85
background-color_avocado-green_c90
background-color_avocado-green_c95
background-color_avocado-green_c100
text-color_avocado-green_c00
text-color_avocado-green_c05
text-color_avocado-green_c10
text-color_avocado-green_c15
text-color_avocado-green_c20
text-color_avocado-green_c30
text-color_avocado-green_c40
text-color_avocado-green_c50main
text-color_avocado-green_c60
text-color_avocado-green_c70
text-color_avocado-green_c80
text-color_avocado-green_c85
text-color_avocado-green_c90
text-color_avocado-green_c95
text-color_avocado-green_c100
background-color_matryoshka-red_c00
background-color_matryoshka-red_c05
background-color_matryoshka-red_c10
background-color_matryoshka-red_c15
background-color_matryoshka-red_c20
background-color_matryoshka-red_c30
background-color_matryoshka-red_c40
background-color_matryoshka-red_c50main
background-color_matryoshka-red_c60
background-color_matryoshka-red_c70
background-color_matryoshka-red_c80
background-color_matryoshka-red_c85
background-color_matryoshka-red_c90
background-color_matryoshka-red_c95
background-color_matryoshka-red_c100
text-color_matryoshka-red_c00
text-color_matryoshka-red_c05
text-color_matryoshka-red_c10
text-color_matryoshka-red_c15
text-color_matryoshka-red_c20
text-color_matryoshka-red_c30
text-color_matryoshka-red_c40
text-color_matryoshka-red_c50main
text-color_matryoshka-red_c60
text-color_matryoshka-red_c70
text-color_matryoshka-red_c80
text-color_matryoshka-red_c85
text-color_matryoshka-red_c90
text-color_matryoshka-red_c95
text-color_matryoshka-red_c100
background-color_tangerine-fox_c00
background-color_tangerine-fox_c05
background-color_tangerine-fox_c10
background-color_tangerine-fox_c15
background-color_tangerine-fox_c20
background-color_tangerine-fox_c30
background-color_tangerine-fox_c40
background-color_tangerine-fox_c50main
background-color_tangerine-fox_c60
background-color_tangerine-fox_c70
background-color_tangerine-fox_c80
background-color_tangerine-fox_c85
background-color_tangerine-fox_c90
background-color_tangerine-fox_c95
background-color_tangerine-fox_c100
text-color_tangerine-fox_c00
text-color_tangerine-fox_c05
text-color_tangerine-fox_c10
text-color_tangerine-fox_c15
text-color_tangerine-fox_c20
text-color_tangerine-fox_c30
text-color_tangerine-fox_c40
text-color_tangerine-fox_c50main
text-color_tangerine-fox_c60
text-color_tangerine-fox_c70
text-color_tangerine-fox_c80
text-color_tangerine-fox_c85
text-color_tangerine-fox_c90
text-color_tangerine-fox_c95
text-color_tangerine-fox_c100
background-color_azure-blue_c00
background-color_azure-blue_c05
background-color_azure-blue_c10
background-color_azure-blue_c15
background-color_azure-blue_c20
background-color_azure-blue_c30
background-color_azure-blue_c40
background-color_azure-blue_c50main
background-color_azure-blue_c60
background-color_azure-blue_c70
background-color_azure-blue_c80
background-color_azure-blue_c85
background-color_azure-blue_c90
background-color_azure-blue_c95
background-color_azure-blue_c100
text-color_azure-blue_c00
text-color_azure-blue_c05
text-color_azure-blue_c10
text-color_azure-blue_c15
text-color_azure-blue_c20
text-color_azure-blue_c30
text-color_azure-blue_c40
text-color_azure-blue_c50main
text-color_azure-blue_c60
text-color_azure-blue_c70
text-color_azure-blue_c80
text-color_azure-blue_c85
text-color_azure-blue_c90
text-color_azure-blue_c95
text-color_azure-blue_c100
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
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.
