Bubble Design Convention

The element type must always be first

• Repeating Group - RG

• Group - G

• Reusable Elements - RE

• Floating Group - FG

• Group Focus - GF

• Text - T

• Button - Button

• Icon - Icon

• Link - Link

• Image - Im

• Shape - Sh

• Alert - Alert

• Video - Video

• HTML - Html

• PopUp - P

• Map - Map

• Input - Input

• Multiline input - MultilineInput

• Checkbox - Checkbox

• Dropdown - Dropdown

• Radio Buttons - RB

• RichTextInputs - RichText

The values are separated with "-", if the name of the value has more than one word, they are separated with "_". For example:

• G-Header-Navs-Nav_Home

• RG-Dashboard-Listings

• T-Dashboard-Listings-Full_Name

Parameters

• all with a small letter

• without space, without this “-”

• Example: user-profile_image

States

• all with a small letter

• without space, without this “-”

• Example: toggle-terms_of_use

Styles

• can use capitalizez letters

• without space, without this “-”

• Example:

  • Input-Inter-16px-400-b_1px_solid-8px-bg_White

  • Text-Inter-16px-600-1.4-Black

  • G-p_24px-r_16px-Yellow