# 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.

### 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
