style guide by Webflow

Desktop Only

Dear Client
Vol.01
TypographyColorButtonBrand AssetsExtra
Fonts
H1 - 72px, Space Grotesk, line-height 1.1 EM

Heading Visual Type Scale Example

H2 - 48px, Space Grotesk, line-height 1.1 EM

Heading Visual Type Scale Example

H3 - 28px, Space Grotesk, line-height 1.25 EM

Heading Visual Type Scale Example
Example Heading Visual Type Scale

H4 - 20px, Space Grotesk, line-height 1.3 EM

Heading Visual Type Scale Example
Example Heading Visual Type Scale

H5 - 16px, Space Grotesk, line-height 1.35 EM
Heading Visual Type Scale Example
Example Heading Visual Type Scale
H6 - 12px, Space Grotesk, line-height 1.35 EM
Heading Visual Type Scale Example
Example Heading Visual Type Scale
Heading and Paragraph with Image
Heading - H3, 28px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk

Heading Visual Type Scale Example
Example Heading Visual Type Scale

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.

Sub Heading - H6, 12px, Space Grotesk
Heading - H3, 20px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Heading Visual Type Scale Example

Heading Visual Type Scale Example
Example Heading Visual Type Scale

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.

Heading - H3, 28px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Icon, Rocket,

Heading Visual Type Scale Example...

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.

Heading - H3, 28px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Icon, Rocket,

Heading Visual Type Scale Example...

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.

Heading - H4, 20px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk

Heading Visual Type Scale Example Example Heading Visual Type Scale

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.

Heading Visual Type Scale Example Example Heading Visual Type Scale

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.

Sub Heading - H6, 12px, Space Grotesk
Heading - H4, 20px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Heading Visual Type Scale Example

Heading Visual Type Scale Example Example Heading Visual Type Scale

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.

Heading Visual Type Scale Example

Heading Visual Type Scale Example Example Heading Visual Type Scale

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.

Heading - H4, 20px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Icon, Rocket,

Heading Visual Type Scale Example...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique...

Icon, Rocket,

Heading Visual Type Scale Example...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique...

Heading - H4, 20px, Space Grotesk
Paragraph - Body, 16px, Space Grotesk
Icon, Rocket,

Heading Visual Type Scale Example...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique...

Icon, Rocket,

Heading Visual Type Scale Example...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique...

Color Palette 1
#111
#222
#333
#444
#555
Color Palette 2
#666
#777
#888
#999
#aaa
#bbb
Color Palette 3
HEX: #ccc
RGB: R204 G204 B204
CMYK: C0 M0 Y0 K20
HEX: #ddd
RGB: R221 G221 B221
CMYK: C0 M0 Y0 K13
HEX: #eee
RGB: R238 G238 B238
CMYK: C0 M0 Y0 K7
HEX: #fafafa
RGB: R250 G250 B250
CMYK: C0 M0 Y0 K2
Button - Rectangle
Learn More
Learn More
Learn More
Button - Corner Radius
Learn More
Learn More
Learn More
Button - Round
Learn More
Learn More
Learn More
Button - Shadow
Learn More
Learn More
Learn More
Logo
Logotype, Black,
Logotype, White,
Logomark
Logomark, Square Round, Black,
Logomark, Square Round, White,
Logomark, Round, Black,
Logomark, Round, White,
Icons
Icon, Call,
Icon, Mail,
Icon, Place,
Icon, Earth,
Icon, Home,
Icon, ID,
Icon, Cell phone,
Icon, Search,
Icon, Check, Circle
Icon, Arrow, Forward,
Icon, Arrow, Down,
Social media icon, Facebook,
Social media icon, Twitter,
Social media icon, Instagram,
Social media icon, Pinterest,
Social media icon, LinkedIn,
Social media icon, YouTube,
Social media icon, TikTok,
Social media icon, Behance,
Social media icon, Dribbble,
Social media icon, WeChat,
Social media icon, Reddit,
Style Guide | Built by Takashi Hirakimoto | Powered by Webflow.
© Open Bookmarks Co.