Color

Colors help focus attention and communicate intent.

Semantic colors

Semantic color tokens provide theme-aware design tokens that automatically adapt to both light and dark mode. These tokens use meaningful names like text-default or bg-surface-app instead of specific color values and should be used in most situations.

Text

Text colors are all designed with a contrast ratio of at least 4.5:1 (AA) against common backgrounds like bg-surface-app or bg-surface-nav.

Text colors with on- are used in conjunction with matching backgrounds:

text-on-element and text-on-element-dim are used with bg-element-primary and other bg-element- variants.
text-on-primary is used with bg-surface-primary, text-on-warning is used with bg-surface-warning, etc.

Name	Used for	Example
`.text-default`	Primary text color	The quick brown fox
`.text-dim`	Secondary text color	The quick brown fox
`.text-placeholder`	Input placeholder text	The quick brown fox
`.text-primary`	Brand-colored text	The quick brown fox
`.text-success`	Success state text	The quick brown fox
`.text-warning`	Warning state text	The quick brown fox
`.text-error`	Error state text	The quick brown fox
`.text-on-element`	Text on buttons and other high-contrast elements	The quick brown fox
`.text-on-element-dim`	Icons or secondary text on high-contrast elements	The quick brown fox
`.text-on-primary`	Text on primary banners, badges	The quick brown fox
`.text-on-success`	Text on success banners, badges	The quick brown fox
`.text-on-warning`	Text on warning banners, badges	The quick brown fox
`.text-on-error`	Text on error banners, badges	The quick brown fox

Borders

Most interactive elements use border-default. In cases where a border is less important, such as dividing lines in a table, border-dim can be used instead.

Name	Used for	Example
`.border-default`	Most borders: inputs, buttons, etc.
`.border-dim`	Subtler borders: separators, table rows, etc.
`.border-focus`	Focus states

Backgrounds

Semantic background tokens are divided into four levels: surface, elements, scrims, and overlays.

Level 0: Surface

Surface elements are the background of the application. These colors are low-contrast and intended to group elements together into sections without attracting too much attention.

Name	Used for	Example
`.bg-surface-app`	Main app background
`.bg-surface-nav`	Navigation background
`.bg-surface-neutral`	Row hovers, ghost buttons
`.bg-surface-primary`	Primary banners, badges
`.bg-surface-success`	Success banners, badges
`.bg-surface-warning`	Warning banners, badges
`.bg-surface-error`	Error banners, badges

Level 1: Elements

Element backgrounds are higher-contrast to draw the user’s attention to specific actions or events. They are used for things like primary buttons, progress bars, switches, and other interactive or important UI.

Name	Used for	Example
`.bg-element-primary`	Primary buttons
`.bg-element-success`	Switch toggles
`.bg-element-warning`	Warning elements
`.bg-element-error`	Error elements

Level 2: Scrims

Scrims appear inbetween any overlays and the rest of the application. They obscure the content behind it in order to draw the user’s focus to an overlay.

Name	Used for	Example
`.bg-scrim`	Overlay backdrops

Level 3: Overlays

Overlays are the top layer. The overlay background is a ligher shade than the default app background, and is used for dialogs, popovers, tooltips, and other floating UI. It is usually paired with a drop shadow.

Name	Used for	Example
`.bg-elevated`	Modals, popovers, tooltips

Core colors

Use core colors directly when building data visualizations or implementing brand-specific elements. Otherwise, default to semantic colors.

Brand

Slate

Red

Orange

Yellow

Lime

Green

Teal

Cyan

Sky

Blue

Purple

Fuchsia

Pink

Rose

Usage in Figma

Colors in Figma are published from Stylus Design System and should be available by default in Figma files within the Scribe workspace.

Usage in code

Any colors in the palette can be used by applying the appropriate Tailwind CSS class to your element. Use the bg- prefix for background colors and text- prefix for text colors.