Color

Primary page canvas. Keep it clean and high-clarity so saturated brand and status colors read instantly.

Use: Default app backgrounds, marketing pages, long-form reading surfaces.

Default text color on the main background. It anchors hierarchy and makes typography feel decisive.

Use: Headings, primary labels, body text when emphasis is required.

Signature electric blue. This token stays consistent across light and dark modes. Use for brand moments that must remain blue.

Use: Brand identity, logos, links, decorative accents that must stay blue.

The main action color. Arcbolt Blue in light mode, Brand Yellow in dark mode. This semantic swap ensures optimal contrast.

Use: Primary buttons, key CTAs, active states, progress indicators.

Warm golden accent for emphasis and energy. Becomes the primary action color in dark mode for maximum visibility.

Use: Accent highlights, dark mode primary, callouts requiring warmth.

Rich earthy brown for grounded, professional emphasis. Stays consistent across modes.

Use: Secondary data series, comparison metrics, subtle emphasis.

Warm muted surface for secondary UI elements. Provides subtle differentiation from the base background.

Use: Secondary buttons, toggle backgrounds, subtle containers.

Interaction highlight surface. In light mode, a warm muted tone; in dark mode, switches to Arcbolt Blue for visibility.

Use: Hover backgrounds, selected rows, small callouts, ghost button hover.

Low-emphasis surface for supporting UI. It keeps focus on content while providing depth.

Use: Background strips, subtle containers, helper surfaces.

Secondary text color. Use for supporting information, not primary decisions.

Use: Captions, timestamps, helper text, table metadata, non-critical labels.

Divider tone that adds structure without noise. Borders are structural, not decoration.

Use: Card outlines, separators, table dividers, subtle boundaries.

Positive state indicator for successful actions and confirmations.

Use: Success messages, positive metrics, confirmations, completion states.

Error and irreversible actions. Red is a safety signal, it should never be used as a decorative accent.

Use: Error states, destructive CTAs, critical banners, invalid field rings.

Primary series color aligned with Arcbolt Blue.

Use: Main series, default line/bar in single-series charts.

Earthy brown secondary series aligned with Trend Mocha.

Use: Comparison series, secondary metrics, professional contrast.

Green series aligned with success state color.

Use: Positive metrics, growth indicators, tertiary series.

Warm yellow series aligned with Brand Yellow.

Use: Highlight series, attention-grabbing metrics, quaternary data.

Purple accent for additional series differentiation.

Use: Late series, categorical grids, quinary data.

Sidebar surface color.

Use: Sidebar containers, navigation rails.

Default sidebar text color.

Use: Navigation labels, section headings.

Active/primary sidebar action surface.

Use: Active navigation row, primary nav CTA.

Text/icon color on sidebar primary.

Use: Active icons/labels.

Hover/secondary sidebar row surface.

Use: Hover rows, grouped items, subtle highlight.

Text/icon color on sidebar accent.

Use: Hover row labels.

Sidebar separators and dividers.

Use: Section dividers, subtle outlines.

Focus highlight for sidebar interactions.

Use: Keyboard focus on nav rows and sidebar controls.