---
canonical_url: "https://www.goodbarber.com/uxdesign/atomic-components/"
lang: pt
---

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

![Atomic Components icon](https://portal.ww-cdn.com/portal_static/images/designsystem/tree/icon-atomic-components.61b12011fba6.svg)

# Atomic Components

Atomic components in our design system establish the visual attributes of individual graphic elements, such as size, color, and shape. They play a crucial role in shaping the overall style and consistency of the app.

- [Color Color atom Defines the appearance of app components by applying color properties.](/uxdesign/atom-color/)
- [Font atom Font atom This atom sets font properties across devices, including color, family, and size.](/uxdesign/atom-font/)
- [Image atom Image atom Exclusive to bitmap images, the image atom plays a central role in app design.](/uxdesign/atom-image/)
- [Gradient Atom Gradient atom This constitutional object of the background component produces a gradient.](/uxdesign/atom-gradient/)
- [Shape Atom Shape atom The Shape Atom presets component shapes for a consistent design.](/uxdesign/atom-shape/)
- [Shadow Atom Shadow atom Managing component shadows with preset levels and customization options.](/uxdesign/atom-shadow/)
- [Size Atom Size atom The size atom describes the size of a component.](/uxdesign/atom-size/)
- [Border atom Border atom This atom defines outline properties like their color and their size.](/uxdesign/atom-border/)
- [Blur Atom Blur atom Applies a blur to the background of structural surfaces, creating a sense of depth and focus.](/uxdesign/atom-blur/)
- [Overlay Atom Overlay atom A customizable gradient can be placed atop images, components, or pages.](/uxdesign/atom-overlay/)
- [Immersive feedback atom Immersive feedback atom Haptic and motion feedback](/uxdesign/atom-immersive-feedback/)