Color

Color principles, palette, application, light and dark mode considerations in Garden.

---

Principles

Purpose

In the user interface, color carries specific meaning and sets consistent user expectations. Use red, green, and yellow to provide status feedback like success, warning, or danger. Limit their application to avoid clutter. Utilize blue to emphasize interactive elements.

Hierarchy

Color is a powerful tool for presenting the hierarchy of elements on a screen. It helps highlight key elements that require interaction and dim the secondary ones.

Primary color (blue) is dedicated to buttons, links, and selection states. Neutral shades (grey) are commonly used for non-interactive foregrounds, backgrounds, and borders (except for validation cases). This distinction helps users easily understand which areas on the screen are responsible for completing a task. Supplement colors with text and icons to emphasize hierarchy and relevance.

Elevation

A common practice is to communicate element hierarchy through levels. To present the spatial relationships between elements, Garden uses color, shadows, backdrops, borders, and fills.

Depth	Usage
recessed	Surfaces that sit below the main surface (Well)
default	Main background surfaces
subtle	Surfaces that are positioned on the main surface and need to be emphasized (Alert).
raised	Surfaces that are floating above the main surface (Modal, Tooltip dialog, or Notification)

Opacity

Colors with opacity applied help visually indicate layering of elements on different backgrounds. Opacity is primarily used for colors in backgrounds and follows predefined values. Interactive elements (Basic button or Table) are good examples where opacity can be applied.

Accessibility

Remember not to rely solely on color to indicate the state or status of a component. Use text or icon to support the visual affordance. The most effective measure of the color accessibility is the contrast ratio (regulated by WCAG guidelines). It refers to the difference in luminance, or brightness, between foreground and background color. Text should always conform to 4.5:1 color contrast or higher, while graphical elements (like icons) need 3:1 color contrast. This makes the interface clear even for people with color vision impairment.

Palette

Overview

Each hue within the Garden palette has 12 shades with consistent contrast distribution. This means that every shade at the same value (like 500) will have an identical contrast ratio against the same background.

This approach ensures scalability of the system, theming automation, and helps with WCAG compliance. Hues in shade 600 meet minimum 3:1 color contrast requirement against white or shade 100. Hues in shade 700 meet 4.5:1 color contrast. Shades 800 and above meet 7:1 or higher color contrast.

Primary

Primary colors are used for the structure of interfaces, actionable items, and validation.

Secondary

Secondary colors are used in supplementary interface elements such as icons, tags, status badges, and illustrations.

Application

Primitive and semantic variables

In a design system, variables define values that you can reuse between different elements. This ensures consistency, scalability, and easier maintenance of a design system. Garden distinguishes two levels of color variables which serve distinct but complementary purposes:

• Primitive variables represent the option level, as the most basic, fundamental values in a design system. Their name describes the visual attributes or represent basic values included in the color palette (like red-500 or blue-100). They are a source for higher-level variables and are not applied directly to components.

• Semantic variables are built on top of the primitive variables and represent the context level. Their name is descriptive. It carries intended use or meaning rather than appearance (like border.warning). Garden uses semantic variables in components, as the only ones supporting theming.

Taxonomy

Taxonomy is a structured classification system to help understand, apply, and create variables. Variable names are composed from different parts, starting from generic to specific (Application → Group → Element → Modifier → State).

• Application describes the type of variable (color)
• Group describes if a variable is part of an object group (chrome or tag)
• Element describes where the variable is applied (background, foreground or border)
• Modifier describes variant or prominence (primary, default or emphasis)
• State describes interaction (hover or active)

Variable examples	Description
color.border.success.emphasis	Strong success border color applied to Input
color.chrome.foreground.default	Default text color applied in a Chrome component
color.background.primary.hover	Hover background color applied to a Primary button

Always aim to simplify variable names and avoid overspecification. Optimize variable names for people using them. Use camelCase or . when stitching parts together to separate categories. Keep in mind that variables might follow different best practices whether they are implemented in code or in Figma.

Guidelines

Garden’s variable color collection set is designed to remain compact, readable, and reusable. Color variables are grouped into three main categories indicating where they are applied:

• Foreground is used for text and icons
• Background is used for fill areas
• Border is used for different types of interactive and non-interactive borders

Each of the main categories is supplemented by a modifier that specifies information regarding variant or prominence:

• Primary color is used for interactive and actionable elements, such as Anchor, Button, focus indicators, table selection and more.
• Success, Warning and Danger are used to emphasize different types of information, such as danger buttons, input validation, Notifications or Alerts.
• Default often denotes the most used value, with Subtle or Emphasis additions to cover a wider range of specific use cases.

Semantic naming is consistent in Figma and in code Hover and Active states programmatically change color by 100 or 200 shade offset from the base hue. Temporary or supporting variables in Figma are marked with an asterisk *.

Foreground

Background

Borders

Shadows

Custom variables

If there is a need to create custom variables, always build upon the taxonomy that exists. Use terms that system consumers are familiar with.

Theming

Differences in application

Light mode uses shade 700 as the prevailing shade and dark mode uses shade 600. This change makes the actionable elements stand out in the dark environment. Both shades provide comparable color contrast. Color shades primarily used in dark mode tend to have less saturation to prevent light bleed. Actionable elements with filled backgrounds have dark text to reduce eye fatigue.

Interaction

Interaction states in light mode increase the shade number (hover is darker than base hue), while dark mode does the opposite (hover is lighter than base hue). Light and dark modes automatically increase/decrease shades to account for this.

Elevation

Modes differ in their approach to presenting surface elevations. In light mode default and raised surfaces are lighter than recessed and subtle surfaces. Dark mode surfaces that appear closer to the light source use a lighter tint. Recessed surfaces that are further from the light source use a darker shade.

In both modes the raised surface casts a shadow. Small shadows are used for Tooltip only. Medium shadows are used for components without backdrop (Tooltip dialog, Menu). Large shadows are used for components that have a backdrop (Modal or Drawer).

Opacity

Opacity values are consistent in both light and dark mode. Light mode uses shade 700 and dark mode uses shade 500 as the primary shade.