Colors

Pick a palette, fine-tune individual colors, and manage gradient presets — all shared across every block.

The Color Palette panel is the first section of Global Settings. It lets you choose a ready-made color palette, adjust the individual brand colors, and manage gradients. Every color you define becomes a CSS variable (for example --styble-primary) that all Styble blocks can use.

Color palettes (stacks)

At the top of the panel is a row of palette presets — each one is a coordinated set of brand colors. Styble ships with 6 built-in palettes. Clicking a palette swatch applies its colors (and its matching gradients) to your site at once.

Switching palettes

Selecting a palette replaces the current preset colors and gradients with that palette's values. Use the Reset button in the Colors header to return the selected palette to its original colors after you've tweaked them.

Color keys

Each palette fills in the same set of named color keys. These keys are what blocks reference, so renaming or recoloring a key updates it everywhere. The full set of keys:

Color	Slug / CSS variable	Typical use
Primary	--styble-primary	Main brand color, primary buttons and links.
Primary Foreground	--styble-primary-foreground	Text/icon color shown on top of Primary.
Secondary	--styble-secondary	Secondary brand color.
Secondary Foreground	--styble-secondary-foreground	Text/icon color shown on top of Secondary.
Accent	--styble-accent	Highlights and accents.
Text Color	--styble-text-color	Body text.
Heading Color	--styble-heading-color	Headings.
Border Color	--styble-border-color	Borders and dividers.
Light Neutral	--styble-light-neutral	Light backgrounds and surfaces.
Dark Neutral	--styble-dark-neutral	Dark backgrounds and surfaces.
White	--styble-white	Pure white / on-dark text.

To edit a color, expand the Colors list and click any swatch to open the color picker. You can also add your own colors in the Custom section below the presets.

Solid colors vs. gradients

The Colors header has a toggle to switch the list between:

• Solid colors — the named keys above, plus any custom solid colors you add.
• Gradients — preset gradients, plus any custom gradients you add.

Use the icon buttons in the header to switch views, the Reset button to restore the palette's defaults, and the expand/collapse button to show or hide the detailed editor.

Gradient presets

Each palette also ships with a matching set of gradient presets. These are built from the palette's colors (named entries such as Primary, Secondary, Accent, Text Color, Heading Color, Border Color, Light Neutral and White) and become CSS variables (for example --styble-gradient-primary) that blocks can apply to backgrounds. Each of the 6 palettes provides its own gradient set; you can also create your own under Custom.

Custom colors and gradients

Below the presets, the Custom sections let you add unlimited extra solid colors or gradients. Custom entries get their own CSS variables and appear alongside the preset colors in every block's color picker.

Tips

• Set your palette before building pages so blocks pick up the right tokens from the start.
• Keep using the named keys (Primary, Accent, etc.) in blocks rather than hard-coded hex values — that way a palette change restyles the whole site.
• Pair colors with matching type and shadow tokens in Typography and Shadows.
• See the Global Settings overview for how all panels fit together.