Header Small - Base
Header Medium - Base
Header Large - Base
Header - Invert
Header - Primary
Header - Secondary
Header - Tertiary
08.
Design System
Welcome to our test page for Employer Design System
Optimized Input Fields
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Inputs
Variações Inputs
Variações Small
Variações Small disabled
Variações Large
Variações Large disabled
Textarea
Form-Group
Variação 01
Variações de Cores
Variações Rounded
Variações Pill
Variação 02
Variações Rounded
Variação 03
Disabled
Variações Round
Variações Pill
Variações de cores
Variação 04
Tipos de Input
Checks
Optimized Input Checkbox enhance user experience with.
Default e Checked
Small e Large
Disabled
Indeterminate
Powerful for your Design Team
Typography establishes a clear hierarchy, guiding users effortlessly. Smaller H5 and H6 headings support the primary content, while Body 2 and Small Text provide additional details without distraction. Consistent Button Text styling ensures call-to-action elements are prominent and easy to interact with, creating a seamless and intuitive user experience.Typography establishes a clear hierarchy, guiding users effortlessly. Smaller H5 and H6 headings support the primary content, while Body 2 and Small Text provide additional details without distraction.
Primary Emphasis
Base Color Emphasis highlights primary design elements, ensuring they stand out for improved visual hierarchy.
Secondary Emphasis
Base Color Emphasis highlights primary design elements, ensuring they stand out for improved visual hierarchy.
Tertiary Emphasis
Base Color Emphasis highlights primary design elements, ensuring they stand out for improved visual hierarchy.
Quaternary Emphasis
Base Color Emphasis highlights primary design elements, ensuring they stand out for improved visual hierarchy.
Botões Redondos
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Botões Radius Pill
Botões Radius Pill
Botões Arredondados
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Botões Radius Round
Botões Radius Round
Botões Quadrados
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Botões Radius Straigh
Botões Radius Straigh
Botões Cores
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Botões Colors
Botões Colors
Hiperlinks
Optimized Input Fields enhance user experience with intuitive design, ensuring efficient and accurate data entry.
Typography: The Backbone of Good Design
Typography ensures consistent and readable text styling, enhancing the overall visual appeal and readability of the design.
Headline 01
Headline 02
Headline 03
Headline 04
Headline 05
Headline 06
Paragraph Large
Paragraph Medium
Paragraph Small
Paragraph XSmall
Badges
Badges provide clear and interactive elements for users to initiate actions, designed for usability and visual consistency within the interface.
Badge Small Outline/Disabled
Badge Medium Filled/Disabled
Badge Large Accent/Disabled
Badge XLarge Random/Disabled
Full Responsive and Dark & Light Mode Elements
Typography establishes a clear hierarchy, guiding users effortlessly. Smaller H5 and H6 headings support the primary content, while Body 2 and Small Text provide additional details without distraction. Consistent Button Text styling ensures call-to-action elements are prominent and easy to interact with, creating a seamless and intuitive user experience.Typography establishes a clear hierarchy, guiding users effortlessly. Smaller H5 and H6 headings support the primary content, while Body 2 and Small Text provide additional details without distraction.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
An Alert component is designed to immediately capture user attention and convey important information.
Transparent
Neutral
Accent
Semantic
Series
Emojis
Flags
Ícones
Página 1 de 1
Stores
Symbol
Drawer
Drawer
Grid
Spinner
Logos Tema White
Employer
Itau
Epays
EstoqueRh
Bamboo.Ds
Logos Tema Dark
Employer
Itau
Epays
EstoqueRh
Bamboo.ds
Icones
Icones Size
Icones Colors
Switch
Base
Primary
Invert
Disabled
Radio
Base
Invert
Primary
Disabled
Alert
Dropdown
Card
Card Default
Card Disabled
Card Primary
Card Secondary
Card Tertiary
Card Quaternary
Card Success
Card Warning
Card Error
Table Small
|
|
|
|
|
|||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
Table Small 2x - Zebrada
|
|
|
|
|
|
|
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
Table Medium
|
|
|
|
|
|
|
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
Table Medium 2x - Zebrada
|
|
|
|
|
|
|
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
Table Large
|
|
|
|
|
|
|
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
Table Large 2x
|
|
|
|
|
|
|
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
Title
|
|||||
|
|
Leading Text Subtitle |
Single Text | Long text for description | 100 |
Badge
|
|
|
|||||
| 100 |
List Small
Leading text
Subtitle
Single text
Long text for description
List Medium
Leading text
Subtitle
Single text
Long text for description
List Large
Leading text
Subtitle
Single text
Long text for description