Style Guide

Typography

Heading 1 light

Heading 1 regular

Heading 1 medium

Heading 1 semi bold

Heading 1 bold

Heading 2 light

Heading 2 regular

Heading 2 medium

Heading 2 semi bold

Heading 2 bold

Heading 3 light

Heading 3 regular

Heading 3 medium

Heading 3 semi bold

Heading 3 bold

Heading 4 light

Heading 4 regular

Heading 4 medium

Heading 4 semi bold

Heading 4 bold

Heading 5 light
Heading 5 regular
Heading 5 medium
Heading 5 semi bold
Heading 5 bold
Heading 6 light
Heading 6 regular
Heading 6 medium
Heading 6 semi bold
Heading 6 bold

Body - Large - 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.

Body - Medium - 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.

Body - Small - 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.

Body - Extra Small - 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.

Body - Tiny - 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.

Label Extra Large - Regular
Label Extra Large - Semi bold
Label Extra Large - Bold
Label Large - Regular
Label Large - Semi bold
Label Large - Bold
Label Medium - Regular
Label Medium - Semi bold
Label Medium - Bold
Label Small - Regular
Label Small - Semi bold
Label Small - Bold
Label Extra Small - Regular
Label Extra Small - Semi bold
Label Extra Small - Bold
Label Tiny - Regular
Label Tiny - Semi bold
Label Tiny - Bold

Line height 100%

Line height 110%

Line height 120%

Text color

Text color - Primary 1

Text color - Primary 2

Text color - Primary 3

Text color - Primary 4

Text color - Primary 5

Text color - Primary 6

Text color - Primary 7

Text color - Primary 8

Text color - Primary 9

Text color - Primary 10

Text color - Secondary 1

Text color - Secondary 2

Text color - Secondary 3

Text color - Secondary 4

Text color - Secondary 5

Text color - Secondary 6

Text color - Secondary 7

Text color - Secondary 8

Text color - Secondary 9

Text color - Secondary 10

Text color - Neutral 1

Text color - Neutral 2

Text color - Neutral 3

Text color - Neutral 4

Text color - Neutral 5

Text color - Neutral 6

Text color - Neutral 7

Text color - Neutral 8

Text color - Neutral 9

Text color - Neutral 10

Text color - Mono Black

Text color - Mono White

Text color - Safe Yellow

Text color - Safe Red

Text color - Response Success

Text color - Response Warning

Text color - Response Danger

Buttons
Primary smallPrimary mediumPrimary largeSecondary smallSecondary mediumSecondary largeOutline smallOutline mediumOutline largeText smallText mediumText large
Forms
External label
External label
External label
Carregando...
fileuploaded.jpg
Erro. Tamanho máximo permitido 10MB.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Images
Icons

bag user_check token_checked pin retract magic_wand face_id column_view list_view car_tag car_service insurance calculator microphone shopping_tags sales_document sign_document single_file heart_filled phone secure_payment star_filled couple_close_left_leader user_personal_card user_shield user_pencil single_user bank apple_original apple camera card chart chat_help checked_box clock_rewind copy_and_paste direct_message document facebook facebook_original google_play google grid_check heart instagram link linkedin mobile_phone money_in money_out qr_code save_tag share star trash_can wallet whatsapp 1col 2col menu_down menu_left menu_right menu_up bell calendar calendar_search car_sell check check_circle clock clock_block close close_circle close_large cloud_download cloud_upload dashboard device_turning envelope eye eye_blocked gear go_to_page help home house_circle info ink_drop location locker_closed logout magnify menu minus pencil photo_stack plus price_tag rocket single_bullet square_magnify three_dots_horizontal three_dots_vertical thumb_down thumb_up time transmission tune_horizontal warning user_square_stack user_circle wheel battery brakes car_4_wheel_power car_drifting car_front_view car_parking_sensor car_side_lights car_transmiting engine fuel_indicator gas_pump glass_washer manual_transmission safety_belt speedometer steering_wheel stereo suspension temperature arrow_down arrow_foward arrow_left arrow_left_circle arrow_ne arrow_ne_circle arrow_nw_circle arrow_up_departure arrow_up arrow_se both_ways_chevron_circle arrow_sw_circle both_ways_horizontal arrow_sw both_ways_vertical chevron_down arrow_up_circle chevron_left shuffle chevron_right chevron_up turn_up_from_left circle_loop turn_up_from_right continuous_loop two_way_up_and_down full_turn arrow_down_circle growing_arrows undo turn_up hard_loop spin_on_axis oval_loop right_turn soft_loop arrow_right_circle arrow_right arrow_se_circle