# Adjust Atlas Adjust's design system provides a comprehensive framework for creating consistent and user-friendly interfaces. Below is a structured summary of the documentation, organized by relevant categories. ## Overview - [Adjust Atlas · A design system that helps designers and developers to improve the user experience of Adjust’s growing product suite](https://atlas.adjust.com/): ## Components - [Date Localization | Adjust Atlas](https://atlas.adjust.com/docs/components/DateLocalization): The Date Localization is for a consistent date formatting. - [Brand Icon | Adjust Atlas](https://atlas.adjust.com/docs/components/BrandIcon): The Brand Icon component renders a visual representation of the primary products within the Adjust Suite. Each icon encapsulates the unique identity of its corresponding main product, ensuring recognizable design language across the suite. - [Data attributes | Adjust Atlas](https://atlas.adjust.com/docs/components/data-attributes): When addressing a component in a test or in an analytics framework you can use the data-testid property that's available on most components. This property will be applied to the component's root element. - [Custom styles | Adjust Atlas](https://atlas.adjust.com/docs/components/custom-styles): The aim of the component library is a consistent style. That's why the components' styling options are limited. - [Badge | Adjust Atlas](https://atlas.adjust.com/docs/components/Badge): Badges are small indicators which display a small amount of data to categorize, count or communicate status. - [Fieldset | Adjust Atlas](https://atlas.adjust.com/docs/components/Fieldset): The Fieldset component is designed to group multiple checkboxes, radiobuttons, and switches into a single container. This component helps improve the readability and organization of your form by clearly indicating which inputs are related to each other. - [Breadcrumbs | Adjust Atlas](https://atlas.adjust.com/docs/components/Breadcrumbs): Breadcrumbs show a list of links that show the path to the current page the user is looking at. The last link in the breadcrumb is the current page. - [Components | Adjust Atlas](https://atlas.adjust.com/docs/components/introduction): Components Sidebar - [File Uploader | Adjust Atlas](https://atlas.adjust.com/docs/components/FileUploader): File uploader allow users to select one or multiple files to upload to a specific location. - [Button | Adjust Atlas](https://atlas.adjust.com/docs/components/Button): Buttons are used primarily for actions, such as "add", "close", "cancel" or "save". They always have a label and optionally contain one icon, before or after the label. - [Empty State | Adjust Atlas](https://atlas.adjust.com/docs/components/EmptyState): Empty states are messages that appear whenever an element has no content to display to the user. They are opportunities to educate, drive engagement, or inform the user about issues on our or their end. Your empty states should never actually feel empty. For additional design guidelines refer to our Empty State Pattern page. - [List | Adjust Atlas](https://atlas.adjust.com/docs/components/List): This component is used to render ordered and unordered lists. - [Measurer | Adjust Atlas](https://atlas.adjust.com/docs/components/Measurer): The Measurer component includes the Profiler component from the React Profiler API. - [Banner | Adjust Atlas](https://atlas.adjust.com/docs/components/Banner): Banners display important information that informs the user about the status of the system. They are semantically categorized and colored to reflect the status. They are optionally dismissable. Buttons are optional, too. Banners must have at least a title or a description. - [Copy to Clipboard | Adjust Atlas](https://atlas.adjust.com/docs/components/CopyToClipboard): The Copy to Clipboard component allows users to quickly copy text to the clipboard without using context menus or keyboard shortcuts. - [Date Range Picker | Adjust Atlas](https://atlas.adjust.com/docs/components/DateRangePicker): The Date Range Picker allows users to select a custom date range in the calendar. They can also navigate from one month to another. - [Checkbox | Adjust Atlas](https://atlas.adjust.com/docs/components/Checkbox): Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). - [Pagination | Adjust Atlas](https://atlas.adjust.com/docs/components/Pagination): Use Pagination to show a long data divided into several pages. - [PopOver | Adjust Atlas](https://atlas.adjust.com/docs/components/PopOver): PopOver is a component which pop over content when clicked on its children and show data inside content prop. - [Radio | Adjust Atlas](https://atlas.adjust.com/docs/components/Radio): Use Radio Buttons to offer a visible list of choices where only a single selection is possible. Only one Radio Button of a group can be active at a time. You must never use single Radios, you might need to use a Checkbox or a Switch instead. - [Segmented Button | Adjust Atlas](https://atlas.adjust.com/docs/components/SegmentedButton): A Segmented button is a linear set of two or more segments, each of which presents a mutually exclusive button. - [Sequence Map | Adjust Atlas](https://atlas.adjust.com/docs/components/SequenceMap): Sequence Map is a sequence of steps and sub-steps. - [Carousel | Adjust Atlas](https://atlas.adjust.com/docs/components/Carousel): The carousel is a wrapper component that contains multiple slides, which can be other components (e.g. Banners), images, or fully custom content. - [Panel | Adjust Atlas](https://atlas.adjust.com/docs/components/Panel): Use Panels to structure a screen. Panels may contain Tiles, may be scrollable, and optionally searchable. - [Single Date Picker | Adjust Atlas](https://atlas.adjust.com/docs/components/SingleDatePicker): The date picker allows users select a single date from a calendar. They can also navigate from one month - [Skeleton Loader | Adjust Atlas](https://atlas.adjust.com/docs/components/SkeletonLoader): SkeletonLoader is used to render loading Skeleton. - [Slider | Adjust Atlas](https://atlas.adjust.com/docs/components/Slider): Sliders allow users to select a range of data points. They’re useful for dynamic filtering, or selecting a specific value from a predefined range of values. - [Modal | Adjust Atlas](https://atlas.adjust.com/docs/components/Modal): A modal is an element that shows a priority dialog above the current content, where the focus should be completely pointed to the information inside of it, blocking all elements underneath with an opaque overlay. - [Icon | Adjust Atlas](https://atlas.adjust.com/docs/components/Icon): Icons are used to visually communicate core parts of the product and available actions. - [Input | Adjust Atlas](https://atlas.adjust.com/docs/components/Input): An Input is a text field users can type into. It supports different text formats and numbers. - [Icon Menu | Adjust Atlas](https://atlas.adjust.com/docs/components/IconMenu): Icon Menu is a combination of Icon Button and Menu List Item. - [Grid system | Adjust Atlas](https://atlas.adjust.com/docs/components/Grid): The Atlas Grid system is a fully responsive, robust, 12 column layout system with five default breakpoints. It’s fundamental to everything we design, and the geometric foundation of all high-level layouts. - [Layout | Adjust Atlas](https://atlas.adjust.com/docs/components/Layout): The layout component included three main parts: Header, Content, and Footer. You can design your Layout with the child layout components as in the following examples. - [Date Picker Button | Adjust Atlas](https://atlas.adjust.com/docs/components/DatePickerButton): The Date Picker Button is a Popover widget which allows for either a single date or a date range selection. - [Snackbar | Adjust Atlas](https://atlas.adjust.com/docs/components/Snackbar): This component will soon be deprecated. Please, use Toast instead. - [Spinner | Adjust Atlas](https://atlas.adjust.com/docs/components/Spinner): Spinners represent a loading or processing state. - [Status Indicator | Adjust Atlas](https://atlas.adjust.com/docs/components/StatusIndicator): This component is used to render current status of the parent component. - [Switch | Adjust Atlas](https://atlas.adjust.com/docs/components/Switch): A Switch is a visual toggle between two specific states — on and off. - [Table Measurement Hook | Adjust Atlas](https://atlas.adjust.com/docs/components/TableV2Hooks): TableMeasurement is a custom hook of TableV2 to customize the Initial Column Widths by measuring the text content of each cell and return the array of new column widths. - [TableV2 Test | Adjust Atlas](https://atlas.adjust.com/docs/components/TableV2Test): The following example uses sticky columns and has resizable features. To disable them, you can remove them from the column definition. To use other features with the example, you can check the TableV2 docs page. - [Tabs | Adjust Atlas](https://atlas.adjust.com/docs/components/Tabs): Tabs is a linear set of two or more items, each of which presents a mutually exclusive link. - [Text | Adjust Atlas](https://atlas.adjust.com/docs/components/Text): Text is a component for regular labels, text, etc. Making it easier for developers to use standardized typography elements instead of custom styling everything and checking type specs. - [Textarea | Adjust Atlas](https://atlas.adjust.com/docs/components/Textarea): A Textarea is a large text field users can type into. This pattern should be used when the expected user input is a long, multi-line text. - [Tile | Adjust Atlas](https://atlas.adjust.com/docs/components/Tile): Tiles are container components. Use them to group similar components or to wrap components which the user may reorder or resize. - [Timepicker | Adjust Atlas](https://atlas.adjust.com/docs/components/Timepicker): Example - [Toast | Adjust Atlas](https://atlas.adjust.com/docs/components/Toast): Toasts display important information that informs the user about the consequence of an action – e.g. "Chart deleted". They are semantically categorized and colored to reflect the status. - [Tooltip | Adjust Atlas](https://atlas.adjust.com/docs/components/Tooltip): Tooltips can appear on hover, focus or click and should display very short (single-line) contextual descriptions of interface elements. You may also show Tooltips when button labels are absent (icon-only) or truncated. - [Truncate | Adjust Atlas](https://atlas.adjust.com/docs/components/Truncate): Truncation makes long text fit within a given space. The Truncate text component is most commonly used to prevent line breaks on text that would otherwise affect the sizing or layout of other components. Truncated text is always represented by an ellipsis (…) and can optionally (recommended) reveal the full content on mouse over within a tooltip. The ellipsis character position within the truncated text can either be at the end, or at the middle. - [ValidationText | Adjust Atlas](https://atlas.adjust.com/docs/components/ValidationText): ValidationText is a component for Error Handling. Making it easier for developers to use standardized and consistent validation. - [Page Footer | Adjust Atlas](https://atlas.adjust.com/docs/components/PageFooter): Use the page footer when forms need to be saved, or inside a wizard. It’s a mandatory component inside the wizard template, which allows the user to perform the primary and secondary action of the wizard flow. - [Selectable Tile | Adjust Atlas](https://atlas.adjust.com/docs/components/SelectableTile): A Tile that is selectable. Tiles can contain logos, icons, or text only. - [Page Header | Adjust Atlas](https://atlas.adjust.com/docs/components/PageHeader): The Page Header helps users to navigate an Adjust application and gives quick access to page-level actions. - [Widget | Adjust Atlas](https://atlas.adjust.com/docs/components/Widget): Widget component - [Action Menu | Adjust Atlas](https://atlas.adjust.com/docs/components/ActionMenu): This versatile menu can be used in combination with buttons which may offer multiple contextual actions (e.g. save, export). The menu is typically as wide as the longest item in the menu and at least as wide as the button that triggers it. - [Icon Button | Adjust Atlas](https://atlas.adjust.com/docs/components/IconButton): An Icon Button is a button with only an icon and no visible label text. It is best used for well-known actions with commonly understood icons (e.g. "edit", "delete") and in the direct context of the affected objects (e.g. inside a Tile). - [Combo Box | Adjust Atlas](https://atlas.adjust.com/docs/components/ComboBox): Combo Box lets users choose one or more items from an options menu. - [SidePanel | Adjust Atlas](https://atlas.adjust.com/docs/components/SidePanel): The side panel is the main navigation for the new Adjust platform design. In terms of visual hierarchy, it is on top of all other regular content or components on the page. Modal dialogs may overlay the side panel. - [Accordion | Adjust Atlas](https://atlas.adjust.com/docs/components/Accordion): Accordions are navigational elements that allow to structure content title-like and focus the view by hiding content. - [Filter Button | Adjust Atlas](https://atlas.adjust.com/docs/components/FilterButton): Filter Button is a component with an inline label and highlighted value. It lets users choose one or more items from an options menu. - [TableV2 | Adjust Atlas](https://atlas.adjust.com/docs/components/TableV2): TableV2 is the new version of the Atlas Table. ## Design Tokens - [Design Tokens | Adjust Atlas](https://atlas.adjust.com/docs/design-tokens/introduction): Design Tokens hero - [Token overview | Adjust Atlas](https://atlas.adjust.com/docs/design-tokens/overview): An overview of all available design tokens. We use CamelCase formatting for JavaScript and kebab-case formatting for SASS. ## Setup and Contribution - [Local link setup | Adjust Atlas](https://atlas.adjust.com/docs/components/local-link-setup): In this section, you will find an explanation of how to setup Atlas link - [Setup | Adjust Atlas](https://atlas.adjust.com/docs/components/setup): In this section, you will find an explanation of how to get ready to integrate components into your project. - [Contributing to the Design Token Library | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-design-tokens): Design tokens are the smallest building blocks of the design system that can be translated into code as a named entity (sizes, spacings, colors, …). In this section, you will learn how to update or add design tokens and how to release a new version of the design tokens library. - [Contributing to Documentation | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-documentation): In this section, we will learn how to contribute to the documentation website (atlas.adjust.com) of the Atlas design system. - [Contributing to the Figma Library | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-figma): To ensure consistent quality and a seamless workflow, the Design System Designers follow conventions and best practices when working with Figma. - [Figma File Setup | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-figma-files): This page will give you a brief run down of how our Figma files and components are setup. - [Component documentation template | Adjust Atlas](https://atlas.adjust.com/docs/contributing/component-documentation-template): This page is rendered documentation template for a component. - [Contributing to the Component Library | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-components): The main UI building block for a frontend developer at Adjust is Atlas's component library. In this section, you will learn how to contribute to the Atlas components: development, documentation and pull request. contributing-figma-new-component): This page describes the process designers should follow when creating new components within Figma and what should be included with the final design (acceptance criteria). - [Overview | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-overview): There are multiple ways you can contribute to the Atlas Design System. The purpose of this guide to enable - [Working Processes | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-processes): In order to successfully contribute to the Atlas design system you should be familiar with our working processes. - [Requests and Bug Reports | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-request-report): This page will guide how you can report a bug or make a request to the design system team. - [Visual Regression Testing | Adjust Atlas](https://atlas.adjust.com/docs/contributing/cypress-visual-regression): This document is a guideline for running and creating visual regression tests in ATLAS project. - [Contributing to Patterns | Adjust Atlas](https://atlas.adjust.com/docs/contributing/contributing-patterns): The following guidelines help you to contribute to Atlas’ patterns documentation. - [Figma Library Releases | Adjust Atlas](https://atlas.adjust.com/docs/contributing/figma-library-releases): Stay up to date with changes to the Figma library! - [Git rules | Adjust Atlas](https://atlas.adjust.com/docs/contributing/git-rules): In this section, we collected a handful of Git rules developers should stick with. Please make sure to follow rules below while working with Git. - [Naming, Notation and Spelling | Adjust Atlas](https://atlas.adjust.com/docs/contributing/naming-notation-spelling): Consistent and clear component names help our teams to communicate more efficiently and avoid misunderstandings. Follow these principles to arrive at good component names: - [Prerelease Process for Component library | Adjust Atlas](https://atlas.adjust.com/docs/contributing/prerelease-process): This guide outlines the step-by-step process for creating a prerelease of the @adjust/components package using GitHub Actions. Prereleases enable you to test the package in your application before making an official release. - [Release Processes | Adjust Atlas](https://atlas.adjust.com/docs/contributing/release-processes): This document is a guideline for publishing a new version in ATLAS project. ## Copywriting - [Accessibility | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/accessibility): Avoid directional instructions - [Copywriting | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/introduction): The aim of this guide is to ensure the content in our products is understood by all our users. - [Legal | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/legal): This section covers some legal considerations when creating content. - [Capitalization | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/mechanics-capitalization): Use sentence case for all UI elements. This means only the first word and any proper nouns are capitalized in a sentence. - [General conventions | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/mechanics-general-conventions): Spacing - [Language | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/mechanics-language): American English is the default language in our products. If in doubt, refer to Merriam-Webster. - [Punctuation | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/mechanics-punctuation): Ampersands - [Considerations | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/style-considerations): Use polite terms sparingly - [Key principles | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/style-key-principles): Address users clearly - [Structure | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/style-structure): Begin with the goal - [Call-to-action verbs | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/terminology-call-to-action-verbs): Use the following verbs for instructions, buttons, links and menu items. When necessary, it's fine to use alternatives. - [Inclusive language | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/terminology-inclusive-language): Always use these inclusive terms. - [UI terms | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/terminology-ui-terms): In most situations, the design should be clear so you don’t need to provide directional instructions. - [Tone | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/tone): Tone is expressed in the wording you choose to convey a particular piece of information. It’s governed by voice, but while voice is consistent across all situations, tone is also influenced by the subject matter. - [Voice | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/voice): Our voice defines how we talk to people in our products. It’s constant, regardless of who we’re talking to or what we’re saying. - [Writing for UI elements | Adjust Atlas](https://atlas.adjust.com/docs/copywriting/writing-for-ui-elements): These standards apply to elements in the Adjust dashboards. For native apps and plugins, follow the platform standards. ## Release Notes - [Releases 🚀 | Adjust Atlas](https://atlas.adjust.com/docs/components/releases): Stay up to date with changes to the component library! - [Releases 🚀 | Adjust Atlas](https://atlas.adjust.com/docs/design-tokens/releases): Stay up to date with changes to the tokens library!