Style Guide

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

    Typography

    Heading 1

    h1 — 65PX / 1.2

    Heading 2

    H2 — 50PX / 1.2

    Heading 3

    H3 — 38PX / 1.3

    Heading 4

    H4 — 25PX / 1.3
    Heading 5
    H5 — 17PX / 1.2
    Heading 6
    H6 — 15PX / 1.3

    Paragraphs

    PARAGRAPH EXTRA LARGE — 26PX / 1.4

    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.

    PARAGRAPH LARGE — 24PX / 1.3

    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.

    PARAGRAPH — 18PX / 1.4

    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.

    PARAGRAPH small — 14PX / 1.4

    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.

    Block Quote

    Lists

    • 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.

    • 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.

    • 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.

    1. 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.

    2. 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.

    3. 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.

    Color and palettes

    MAIN COLOR
    #ff61c0
    #ac8bff
    extra light
    #ff94d4
    light
    #cc4c99
    dark
    #772b59
    extra dark
    BLACK
    #000000
    #3c3c3b
    extra light
    #2e2e2e
    light
    WHITE
    #FFFFFF
    GRAY
    #e6e6e
    #fafafa
    extra light
    #f5f5f5
    light
    #c5c5c5
    dark
    #646464
    extra dark
    ERROR
    #eb3c5c
    SUCCESS
    #2ad283

    Components

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

    Buttons & Links

    Types
    LEARN MORE
    DEFAULT
    LEARN MORE
    rOUNDED
    LEARN MORE
    WHIT ICON
    Size
    LEARN MORE
    SMALL
    LEARN MORE
    REGULAR
    LEARN MORE
    LARGE
    Colors
    LEARN MORE
    MUTED
    LEARN MORE
    PRIMARY
    LEARN MORE
    INFO
    LERAN MORE
    SUCCESS
    LEARN MORE
    WARNING
    LEARN MORE
    DANGER

    Types

    LEARN MORE
    TEXT BUTTON
    LEARN MORE
    CONTAINED BUTTON
    LEARN MORE
    OUTLINED BUTTON

    Tags

    TAG 1TAG 2TAG 3TAG 4TAG 5
    TAGS BUTTON

    Icons

    ‍‍‍‍‍
    ICON BUTTON
    MAIN LINK
    Text LinkRight Link
    BLACK LINK
    Text LinkRight Link
    White LINK
    Text LinkRight Link

    Cards

    June 24, 2019

    15 Best Blogs

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

    Learn More...

    June 24, 2019

    The History Of Web Design

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

    Learn More...

    June 24, 2019

    Why We Love Webflow

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

    Learn More...

    June 24, 2019

    7 Must Have Tools

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

    Learn More...

    June 24, 2019

    20 Myths About Web Design

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

    Learn More...

    June 24, 2019

    7 of the Best Examples

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

    Learn More...

    7 Must Have Tools

    June 24, 2019

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

    Learn More...

    20 Myths About Web Design

    June 24, 2019

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

    Learn More...

    7 of the Best Examples

    June 24, 2019

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

    Learn More...

    Web Design Process

    June 24, 2019

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

    Learn More...

    5 Great Web Resources

    June 24, 2019

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

    Learn More...

    Web Design Blogs

    June 24, 2019

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

    Learn More...

    Web Design Process

    June 24, 2019

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

    Learn More

    5 Great Web Resources

    June 24, 2019

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

    Learn More

    Web Design Blogs

    June 24, 2019

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

    Learn More
    15 Best Blogs

    June 24, 2019

    The History Of Web Design

    June 24, 2019

    Why We Love Webflow

    June 24, 2019

    7 Must Have Tools

    June 24, 2019

    TOP TEXT

    The new card

    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.

    Discover

    The new card

    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.

    Discover

    Basic

    $49/year
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    Select this plan

    Pro

    $69/year
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    Select this plan

    Unlimited

    $99/year
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    • Lorem ipsum dolor sit
    Select this plan
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover
    TOP TEXT

    The new card

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

    Discover

    Icons

    default icon - 40px
    Mini icon - 30px
    Dropdown

    Buy designio on the Webflow Marketplace

    Buy now for $129
    Informations
    Credits
    Pages
    Social
    Style GuideImage LicensingPrivacy Policy250+ ComponentsPassword Page404 PageFacebookTwitterInstagramYouTubeWebflow27 PagesPowered by WebflowCreated by Eclipse
    © 2019 Designio – Webflow Template by Udesly
    Try the Navbar here

    Forms and Inputs

    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.

    Notifications

    BIG NOTIFICATION - BLACK

    Give it a try. 14 days free trial

    Discover
    BIG NOTIFICATION - GRAY

    Give it a try. 14 days free trial

    Discover
    NOtification - Success

    mi quis viverra ornare

    NOtification - ERROR

    Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam

    Quotes

    "I love this software. Excellent work!"

    Diana Blue

    "I love this software. Excellent work!"

    Katia Doe

    "I love this software. Excellent work!"

    John Black

    "I love this software. Excellent work!"

    Maria White

    FAQs

    Which are the shipping options and costs?

    How does the gift card work?

    How does the gift card work?

    Table & Tabs

    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.

    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.

    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.

    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.

    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.

    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.

    PROFILE
    ACCOUNT

    Heading

    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.

    Heading

    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.

    Red

    White

    Blue

    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Lorem ipsum
    Discover →
    Discover →
    Discover →