The Sprkl V1.0

Styleguide

Typography

Headings h1-h6
H1

Webflow & Figma wireframe kit

H2

Webflow & Figma wireframe kit

H3

Webflow & Figma wireframe kit

H4

Webflow & Figma wireframe kit

H5
Webflow & Figma wireframe kit
H6
Webflow & Figma wireframe kit
Headings h1-h6 (overridden)
Headline
XL
Webflow & Figma wireframe kit
Headline
L
Webflow & Figma wireframe kit
Headline
M
Webflow & Figma wireframe kit
Headline
S
Webflow & Figma wireframe kit
Headline
XS
Webflow & Figma wireframe kit
Headline
XXS
Webflow & Figma wireframe kit
Text styles
Paragraph

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.

Text block
This is some text inside of a div block.
Text link
Text Link
Block quote
An organization’s ability to learn, and translate that learning into action rapidly, is the ultimate competitive advantage.
Text styles (custom)
Body text L
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Body text M
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Label M
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Label S
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Overline
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Text block
Text styles (Other)
Bold
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Underline
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Strikethrough
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
All caps
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lowerccase
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Capitalize Every Word
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Italic
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Overline Text
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Colors

All colours for this wireframing kit were taken from Sprkl color library.
Change colors via the swatches panel.

Primary
900
600
300
50
Neutrals
400
200
100
White
100
80
TheSprkl  - Advanced design framework for Figma, Webflow and Flutter | Product Hunt