# Colors Color can provide a visual cue for users to navigate and understand an interface. Atlantis is built with a [semantic layer](https://dev.to/ynab/a-semantic-color-system-the-theory-hk7) overtop of a base palette. Use the semantic color values defined in the usage guidelines whenever possible to ensure you are using colors for their intended purpose. ## Accessibility Color should never be the single means of conveying information in an interface. Use labels, iconography, or hints for assistive technology alongside color to ensure your content can be understood by everyone. ## Color Token Search ## Design & usage guidelines ### Typography Typographic elements in Jobber should use consistent colors to ensure readability. #### Heading Headings have a bold, high-contrast color to cement their hierarchy. #### Text A slightly softer color is used for body text for greater readability. Text that is relevant but less important ("secondary") can be lower-contrast to suggest its' reduced importance. This color should only be used when there is more important text content already present. ##### Text--Reverse When used against a [reversed surface](#surface--reverse), reversed text should be used to maintain readability. Reverse text also has a secondary value following the same rules outlined for standard secondary text. ### Interactions Use these colors in buttons and form controls to communicate the presence and meaning of interaction. In cases such as [Buttons](../Button/Button.md) where the interactive color is functioning as a background color or the text color, the alternative color should be `--color-surface` so that the label matches the theme of the application's background. #### Interactive The default color used for interactive elements. ##### Interactive--Subtle Use for interactive elements that should be less visually pronounced, such as an icon action in main navigation, or buttons to dismiss or cancel a workflow. ##### Interactive--Background Use for the background of interactive elements to ensure separation from the surface they appear on. #### Destructive Use to signify that an interaction will destroy something in the users' account or workflow. #### Disabled Use to signify that an interactive element is disabled. Use `secondary` when a disabled element needs more than one color to be readable in a disabled state; for example, a button's background and label colors must be different. #### Focus Used by the `--shadow-focus` property to indicate that an element has received focus. Avoid using `--color-focus` directly on UI elements. ### Data Visualization Use these colors to distinguish values in charts and other data visualizations. They respond to theming and should be preferred over base color tokens. #### Categorical Use categorical colors to distinguish unrelated groups or series. Use `subtle` or `bold` when multiple treatments of the first categorical color need to sit together in the same visualization. Use additional categorical colors for supporting data series. ### Status Use these colors in labels, icons, filters, alerts, and other elements where color can add meaning to the state of the system or an item in the system. All status colors have a main color, a surface color, and an on-surface color. The on-surface color should be used for an element when it sits inside of an element with the status' surface color to maintain a cohesive tone and ensure sufficient color contrast. #### Critical Action required; user must see this status to be unblocked. #### Warning Action *may* be required as a consequence of current state. #### Success No action required; an action has completed successfully. #### Informative No action required; but helpful to know about. #### Inactive No action required; not part of an active workflow. ### Surfaces Surfaces are the background-colors of almost every element in Jobber. Overlays act as supplementary surfaces that mask areas of the interface to adjust visual focus. #### Surface Most elements in Jobber have a light surface to indicate their nearness to the user; if interactive, they have a hover color and an active color to indicate state. #### Surface--Background A slightly darker surface gives a receded appearance relative to main surfaces. #### Surface--Background--Subtle Use when you need a surface that's distinct from the main `surface` without appearing *too* receded. #### Surface--Reverse Use a reversed surface when a strong contrast is needed with the rest of the application. #### Overlay Use to mask an area of the interface to promote focus to a foreground action, such as a [Modal](../Modal/Modal.md)'s appearance. Overlay includes built-in opacity values. #### Overlay--Dimmed A transparent version of [Surface](#surface), this masks an area of the interface to indicate inactivity (i.e. waiting for updates). Overlay--Dimmed includes built-in opacity values. ### Borders Defining the edges of elements on the same elevation plane, border colors are the subtle maintainers of layout structure. Learn more about borders in our [Borders guide.](../Borders/Borders.md) Most borders should use `--color-border` for subtle definition. Use `--color-border--section` where other bordered content is being further sectioned, such as table headers or list sections. Use `--color-border--interactive` for interactive elements to ensure accessible contrast. ### Workflow These colors are associated with steps of the home services workflow. These should be used sparingly and only on elements that are directly related to the workflow. #### Requests and assessments Requests and assessments use orange to convey a "warm handoff" from the service consumer to the service provider. #### Quotes Quotes use pink to suggest the likelihood of the service provider winning the work is getting warmer relative to a request. #### Jobs and visits Jobs are green because of their core association to Jobber, which has historically used some shade of green for branding. Visits inherit the job color as they are closely related to jobs. #### Invoices and payments Invoices are blue as this is a common color associated with banking and finance. Payments inherit the invoice color as they are closely related to invoices. #### Tasks Tasks use a deeper shade of blue than invoices and the two rarely share interfaces as tasks are generally isolated to scheduling. ### Brand Use these colors to represent the Jobber brand visual language. #### Brand The primary color associated with our brand, from website to ads to product; AKA "Jobber Green". #### Brand--Highlight Use to highlight an element in a way that aligns with our website. Use with caution, it's *bright!* ## Base colors