Palette

Color influences how users feel about a product, make decisions and interpret messages.

Borders colors

These are colors assigned to any border element.

Some examples of border colors can be:

  • The color of the border of the Card
  • The color of the dividers inside a Table
  • The color of the border of a Text Field
  • The color of the border of an Alert
Examples of borders

Examples of borders

 

Identifying a border color

Border colors will always have border at the start of their name.

Border colors will always have border at the start of their name

Border colors will always have border at the start of their name

 

Edges & dividers

We have 2 types of border colors: edges and dividers.

Our border types

Our border types

Edges

Edges are the borders that surround an element, like:

  • The external border of a Card
  • The external border of a Tooltip
  • The border of a Text-based input

Dividers

Dividers are borders that can be found inside an element. As the name suggests, its purpose is to divide content. Some examples of dividers can be:

  • A border inside a Button
  • Borders that divide cells inside a Table
  • A border that divides sections; could be in a single form or a large body of text.

 

Border color palette

Container colors

Edges

As the name suggests, edge colors are meant to be used for the edges of containers.

And since elevated surfaces can be interactive and have states, edge colors also have states.

Surface/edge color pairing

We highly recommend pairing the surface edge color according to the current surface background color, for example, if a card is using background/container/elevated/hover the edge of the surface should use border/container/edges/hover to match.

Read more about surface background colors here.

Our edges can have different states.

Our edges can have different states.

border / container / edges
#3e4044
#cad1e1
high_emphasis
The default color for the edge borders of high-emphasis surfaces e.g dark tooltip
#5476d5
#2954cb
hover
The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab.
#2143a2
#2143a2
enabled
The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab.
#19327a
#5476d5
active
The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab.
#c1c6d4
#4f5157
default
The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards.
#e22245
#881429
error
The color for the edge borders of surfaces that are on the error state, like the border of a card in an error state.
#bfc6d9
#ffffff
default_light
The default color for containers that also have elevation, for eg. filecard sub-component for file upload main component.
#6a6d75
#6a6d75
low_emphasis
#829ce5
#829ce5
mid_emphasis
border / container / edges / data_table
#cad1e1
#3e4044
default
This is used for default border for datatables

 

Dividers

Divider colors are meant to be used for borders inside containers.

Examples of dividers

Examples of dividers

#dce1ed
#4f5157
divider
The default color for dividers inside surfaces.

 

Interactive colors

Contrary to the background and foreground interactive colors, interactive borders do not possess states.

Dividers in different interactive elements

Dividers in different interactive elements

Primary

border / interactive / primary
#ffffff
#1e1e21
divider
The color for dividers inside interactive/primary elements.

Secondary

border / interactive / secondary
#ffffff
#1e1e21
divider
The color for dividers inside interactive/secondary elements.

Tertiary

border / interactive / tertiary
#2143a2
#adbff0
divider
The color for dividers inside interactive/tertiary elements.

Danger

border / interactive / danger
#ffffff
#1e1e21
divider
The color for dividers inside interactive/danger elements.

 

High-contrast

High-contrast edges are used on high-contrast surfaces. We also offer states for them.

High-contrast borders paired with High-contrast backgrounds

High-contrast borders paired with High-contrast backgrounds

border / container / high_constrast
#6a6d75
#c1c6d4
default
The default color for the edge borders of high contrast surfaces.
#2143a2
#2143a2
enabled
The color for the edge borders of high contrast surfaces that are enabled.
#102251
#19327a
hover
The color for the edge borders of high contrast surfaces that are on the hover state.
#19327a
#5476d5
active
The color for the edge borders of high contrast surfaces that are on the active state.

 

AI Features

We have a designated border gradient for surfaces that display AI features, we strongly recommend pairing this border with an AI background gradient.

AI border gradients.

AI border gradients.

 

Form colors

Text-based inputs

We use the following border colors to display states in text-based inputs.

Text-based input borders have states.

Text-based input borders have states.

border / form_control / text_input
#a3a8b5
#848891
default
The border for inputs edges in the default state.
#19327a
#829ce5
hover
The border for inputs edges in the hover state.
#102251
#adbff0
active
The border for inputs edges in the active state.
#e22245
#e22245
error
The border for inputs edges in the error state.

 

System colors

 

Feedback

Feedback border colors are meant to be paired with feedback background colors.

Border system colors.

Border system colors.

border / system
#bfc6d9
#263b73
info
The default borders for elements that have a feedback/info background.
#fce9b2
#6c5619
warning
The default borders for elements that have a feedback/warning background.
#9de1cd
#044834
success
The default borders for elements that have a feedback/success background.
#f3a7b5
#5a0e1c
error
The default borders for elements that have a feedback/error background.
#829ce5
#102251
primary
The default borders for elements that have a feedback/primary background.

 

Focus outline

Focus outlines are a huge part of web accessibility, Spark has a specific color designated for focus outlines.

Focus outlines are an essential part of navigation and accessibility.

Focus outlines are an essential part of navigation and accessibility.

#5476d5
#5476d5
focus
The color we use for focus outlines.
Palette
Foreground colors
Color
Usage
Something looks broken on this site?

Report it to the Design System team here!

Resources
Support

© 2025 Spark Flare 4.0. Page last updated on Apr 10, 2025, 20:51